Bootstrap 卡片
-
定义和使用
Bootstrap 中的卡片是带边框的框,其内容周围有一些填充;它包括页眉,页脚,内容,颜色等选项。要创建 Bootstrap 基本卡片是使用 .card 类创建的,并且卡中的内容具有.card-body 类:输出结果如下:基本的卡片 -
-
带有背景色的卡片
要为卡片添加背景颜色,可以使用 CSS 类名 .bg-primary,.bg-success,.bg-info,.bg-warning,.bg-danger,.bg-secondary,.bg-dark 和 .bg-light。输出结果如下:Basic cardPrimary cardSuccess cardInfo cardWarning cardDanger cardSecondary cardDark cardLight card -
-
-
多列卡片
.card-columns 类创建类似于砖石的纸牌网格(如pinterest);当您插入更多卡时,布局将自动调整。注意:卡片垂直显示在小屏幕(小于576像素)上:输出结果如下:第一张卡中的一些文字
第二张卡中的一些文字
第三张卡中的一些文字
第四张卡中的一些文字
第五张卡中的一些文字
第六张卡中的一些文字
-
宽高相等的卡片
.card-deck 类创建高度和宽度相等的卡片网格;当您插入更多卡片时,布局将自动调整。注意:卡片垂直显示在小屏幕(小于576像素)上:输出结果如下:第一张卡中的一些文字
第二张卡中的一些文字
第三张卡中的一些文字
第四张卡中的一些文字
-
卡片组
.card-group 类似于 .card-deck;唯一的区别是 .card-group 类删除了每张卡之间的左右空白。注意:卡片会垂直显示在小屏幕(小于576像素)上,并具有上下边距:输出结果如下:第一张卡中的一些文字
第二张卡中的一些文字
第三张卡中的一些文字
第四张卡中的一些文字
-