Bootstrap 4 卡片

您所在的位置：网站首页 › 卡片文字排版图片 › Bootstrap 4 卡片

Bootstrap 4 卡片

2023-12-16 23:09| 来源: 网络整理| 查看: 265

卡片

卡片是一个灵活的、可扩展的内容窗口，同时可以做出多种展示效果变体。

关于

.card卡片组件是BootStrap 4新增的一组重要样式，它是一一个灵活的、可扩展的内容器，包含了可选的卡片头和卡片脚、一个大范围的内容、上下文背景色以及强大的显示选项。

使用按钮组合，可以把一系列按钮编组在一行里，并通过可选的JavaScript插件(方法)赋予按钮单选、复选等强化行为。

如果你对Bootstrap 3很熟悉，卡片代替了我们旧的panel、well和thumbnail样式--那些组件类似的功能可以通过卡片的修饰类来实现。

示例

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

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

PlaceholderImage cap Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere Card title Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere 内容类型

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

主体

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

This is some text within a card body. This is some text within a card body. 标题、文字和链接

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

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

Card title Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link Card title Card subtitle Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link 图片

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

PlaceholderImage cap

Some quick example text to build on the card title and make up the bulk of the card's content.

列表组

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

Cras justo odio Dapibus ac facilisis in Vestibulum at eros Cras justo odio Dapibus ac facilisis in Vestibulum at eros Featured Cras justo odio Dapibus ac facilisis in Vestibulum at eros Featured Cras justo odio Dapibus ac facilisis in Vestibulum at eros 混合样式

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

PlaceholderImage cap Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Cras justo odio Dapibus ac facilisis in Vestibulum at eros Card link Another link Card title Some quick example text to build on the card title and make up the bulk of the card's content.

Cras justo odio Dapibus ac facilisis in Vestibulum at eros Card link Another link 页眉页脚

在卡内添加可选的页眉和/或页脚。

Featured Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere Featured Special title treatment With supporting text below as a natural lead-in to additional content.

Go somewhere

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

Featured Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere Featured Special title treatment With supporting text below as a natural lead-in to additional content.

Go somewhere Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title Featured Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere 2 days ago Featured Special title treatment With supporting text below as a natural lead-in to additional content.

Go somewhere 2 days ago 缩放

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

使用栅格系统

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

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere Special title treatment With supporting text below as a natural lead-in to additional content.

Go somewhere 使用通用全局属性

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

Card title

With supporting text below as a natural lead-in to additional content.

Button Card title

With supporting text below as a natural lead-in to additional content.

Button Card title With supporting text below as a natural lead-in to additional content.

Button 自定义CSS

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

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere Special title treatment With supporting text below as a natural lead-in to additional content.

Go somewhere 文本对齐

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

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere Special title treatment With supporting text below as a natural lead-in to additional content.

Go somewhere 导航

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

Active Link Disabled Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere Active Link Disabled Special title treatment With supporting text below as a natural lead-in to additional content.

Go somewhere Active Link Disabled Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere Active Link Disabled Special title treatment With supporting text below as a natural lead-in to additional content.

Go somewhere 图片

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

图片覆盖

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

PlaceholderImage cap Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

PlaceholderImage cap Card title This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

图像叠加覆盖

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

PlaceholderCard image Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

请注意，内容不应大于图像的高度。如果内容大于图像，则内容将显示在图像外部.

水平排列

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

PlaceholderImage Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

卡片样式

订制卡片、边框、颜色等方法。

背景和颜色

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

Header Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header Primary card title Some quick example text to build on the card title and make up the bulk of the card's content.

Header Secondary card title Some quick example text to build on the card title and make up the bulk of the card's content.

Header Success card title Some quick example text to build on the card title and make up the bulk of the card's content.

Header Danger card title Some quick example text to build on the card title and make up the bulk of the card's content.

Header Warning card title Some quick example text to build on the card title and make up the bulk of the card's content.

Header Info card title Some quick example text to build on the card title and make up the bulk of the card's content.

Header Light card title Some quick example text to build on the card title and make up the bulk of the card's content.

Header Dark card title Some quick example text to build on the card title and make up the bulk of the card's content.

网页中传达辅助技术及其背后的意义

使用颜色添加意义只提供一个视觉指示，这不会传达给需要辅助技术（如盲人、听力障碍者）的用户，也就决定了诸如屏幕阅读器并不能读出颜色本身的意义。一般推荐确保由颜色表示的信息从内容本身（例如可见文本）中显而易见，或者通过替代方法，例如隐藏在.sr-only该类中的附加文本来创造更多的辅助传达技术。

.sr-only，全称 screen reader only,意为:(仅供)屏幕阅读器,这个 class 主要用于增强 accessbility(可访问性),有时候 UI 上会出现一些仅供视觉识别的元素，比如说“菜单按钮”，只有视力正常的人才能清楚辨识这些元素的作用。而残障人士，比如弱势或盲人是不可能知道这些视觉识别元素是什么的。他们上网使用的是屏幕阅读器，也就是 screen reader（sr），屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。问题是图形元素怎么可能“读出来”呢？因此我们还要写上这些元素的文本说明，但是又不需要展示给普通用户看到，于是加上 sr-only 的意义就在于能保证屏幕阅读器正确读取且不会影响 UI 的视觉呈现（译者补充）。

边框

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