卡片

一、示例

卡片作为一个新式引入到BootStrap 4中，可能样式、标记和扩展属性不会很多（未来会不断扩充发展），但它仍然可以提供许多控制项和定义方法，由于我们使用了flex弹性布局，使得它们可以轻松对齐、并方便的与其它Bootstrap组件混合搭配使用。

下面是一个具有混合内容并固定了宽度的基本.card卡片使用范例，如果.card卡片如果没有定义宽度，将自然地填满父元素的全宽-利用这个属性，我们可以轻松的订制各种尺寸的卡片。

二、内容类型

卡片支持多种多样的内容，包括图片、文本、列组、链接等，混合并匹配多种内容类型以创建你想要的卡片。

1，主体

引用.card-body样式，可以建立起卡片的内容主体，如果你需要在一个.card中装置带边框的内容时，可以使用它。

2，标题、文字和链接

通过.card-title和 <h*>组合，可以添加卡片标题。同亲将.card-link 与 <a>结合使用，可以方便添加平行的链接。

通过 .card-subtitle 和 <h*> 结合，可以添加副标题，如果 .card-title 和 .card-subtitle 组合放在 .card-body 中, 则可对齐主、副标题。

3，图片

.card-img-top 定义一张图片在卡片的顶部， .card-text定义文字在卡片中，当然你也可以在.card-text 中设计自己的个性化HTML标签样式。

4，列表组

建立一个包含内容的列表组卡片。

5，混合样式

混合并结合多种内容形式来创建个性化卡片，下例即是将图像、块、文字以及列表整合在一个固定宽度的卡片中。

6，页眉页脚

可以将 <h*> 元素添加到 .card-header页头中。

引用

页眉页脚

三、缩放

卡片没有特定的宽度width定义，除非另有定义声明，否则它们的真实宽度将是100%，您可以根据需要使用自定义CSS，引入栅格系统、定义栅格系统Sass mixins或其它程式进行更改。

1,使用栅格系统

使用栅格系统，根据需求按行与列来装载卡片。

2,使用通用全局属性

使用我们提供的通用全局属性来定义卡片的宽度。

3,自定义CSS

在样式表中使用自定义CSS或使用内联样式设置宽度。

四、文本对齐

使用我们的文本对齐类来更改或特定部份的文本对齐。

五、导航(导航不能切换，貌似没什么用)

使用 Bootstrap导航组件将导航元件添加到卡片的标题或块中

标签导航

胶囊导航

六、图片

卡片中包含一些选项来搭配图像，选择在卡片的任何一端附加.cad-img-*，用卡片内容覆盖图像（如同背景），或者只是将图像置入到卡片当中。

1,图片覆盖

可以使用用 Image caps在卡片顶部或是底部，定义图片，如同页眉页脚效果。

.card-img-top和card-img-bottom加不加有点区别，但不知道具体怎么用

2,图像叠加覆盖

将图像转换为卡片背景，并覆盖卡片的文字。根据图像，你可以选择是否需要额外的样式或其它属性定义。

请注意，内容不应大于图像的高度。 如果内容大于图像，则内容将显示在图像外部。下面的卡片内容没显示全

七、水平排列

使用网格和实用程序类的组合，可以以移动友好和响应方式使卡水平。 在下面的示例中，我们使用.no-gutters删除网格排水沟，并使用.col-md-* 类使卡在md 断点处水平。 根据您的卡内容，可能需要进一步调整。

八、卡片样式

1,背景和颜色

使用 文字和通用背景定义 定义卡片的显示颜色。

2,边框

使用边框通用样式来改变卡片的border-color 、 .text-{color} ，或者在父层的 .card 上显示内容。

3,Mixins 实用程序

您还可以更改卡上的页眉和页脚所需的边框，也能使用.bg-transparent删除其background-color背景颜色。

九、卡片排版

Bootstrap除了对卡片內的內容可以进行设计排版外，还包括一系列布置选项，目前这些布置选项还不支持响应式。

1,卡片组

将多个卡片结为一个群组，使用他们具有相同的宽度和高度列。卡片组使用display: flex;来实现统一的布局。

当使用带页脚的卡片图时，他们的内容会自动水平对齐和栅格式布局。

2,卡片阵列

需要一套相互不相连，但宽度和高度相同的卡片？使用卡片阵列（Card decks）吧。

与卡片组一样，卡片阵列中的的的卡片页脚会自动排列。

3,多列卡片浮动排版

將卡片包在.card-columns 中，可以將做出象 Masonry网站的瀑布式排列卡片效果，卡片是使用column属性，而不是基于 flexbox弹性布局，从而实现更方便实用的浮动对齐，顺序是从上到下、从左到右。

注意： 为了防止卡片排列突出栏目，我们必须为它们设置为 display: inline-block （当 column-break-inside: avoid 这个解决方案还没有生效时。