标签：supporting 卡片 title text Bootstrap 手册 content Cards card
Bootstrap 的卡片提供了一个灵活且可扩展的内容容器，包含多种变体和选项。
关于
一个卡片是一个灵活的，可扩展的内容容器。它包括页眉和页脚的选项，各种内容，上下文背景颜色以及强大的显示选项。
如果您熟悉 Bootstrap 3，卡片可以替换我们的旧面板、水井和缩略图。与这些组件类似的功能可作为卡片的修饰符类使用。
示例
卡片尽可能少的标记和样式，但仍然设法提供大量的控制和定制。使用 flexbox 构建，它们可以轻松对齐并与其他 Bootstrap 组件良好混合。
以下是具有混合内容和固定宽度的基本卡片的示例。卡片没有固定的宽度开始，所以它们自然会填充其父元素的整个宽度。这很容易通过我们的各种尺寸选项进行定制。
<div class="card" style="width: 20rem;"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div></div>
内容类型
卡片支持各种内容，包括图像，文本，列表组，链接等。以下是支持的例子。
构成
卡片的构建块是.card-body。只要你需要卡内的填充部分，就使用它。
<div class="card"> <div class="card-body">
This is some text within a card body. </div></div>
标题，文本和链接
卡片标题通过添加.card-title到<h*>标签来使用。以同样的方式，链接被添加并通过添加.card-link到<a>标签而彼此相邻放置。
字幕是通过将添加.card-subtitle到<h*>标签。如果项目.card-title和.card-subtitle项目被放置在一个.card-body项目中，则卡片标题和副标题很好地对齐。
<div class="card" style="width: 20rem;"> <div class="card-body"> <h4 class="card-title">Card title</h4> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div></div>
图片
.card-img-top将图像放置在卡的顶部。包含.card-text，文字可以添加到卡。文本内的文字.card-text也可以用标准的 HTML 标签进行样式设计。
<div class="card" style="width: 20rem;"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div></div>
列出组
使用刷新列表组创建卡片中的内容列表。
<div class="card" style="width: 20rem;"> <ul class="list-group list-group-flush"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Vestibulum at eros</li> </ul></div>
<div class="card" style="width: 20rem;"> <div class="card-header">
Featured </div> <ul class="list-group list-group-flush"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Vestibulum at eros</li> </ul></div>
厨房水槽-Kitchen sink
混合并匹配多种内容类型来创建您需要的卡片，或将所有内容都扔到那里。下面显示的是图像样式，块，文本样式和列表组 - 全部用固定宽度卡包装。
<div class="card" style="width: 20rem;"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Vestibulum at eros</li> </ul> <div class="card-body"> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div></div>
页眉和页脚
在卡片中添加可选标题和/或页脚。
<div class="card"> <div class="card-header">
Featured </div> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div></div>
卡头可以通过增加设置样式.card-header到<h*>要素。
<div class="card"> <h4 class="card-header">Featured</h4> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div></div>
<div class="card"> <div class="card-header">
Quote </div> <div class="card-body"> <blockquote class="blockquote mb-0"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div></div>
<div class="card text-center"> <div class="card-header">
Featured </div> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> <div class="card-footer text-muted"> 2 days ago </div></div>
丈量大小
卡片没有具体width的开始，所以除非另有说明，否则它们将是100％宽。您可以根据需要使用自定义 CSS，网格类，网格 Sass mixins 或实用程序来更改此设置。
使用网格标记
使用网格，根据需要将卡片打包成行和列。
<div class="row"> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div></div>
使用实用程序
使用我们的一些可用的尺寸设置工具来快速设置卡的宽度。
<div class="card w-75"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Button</a> </div></div><div class="card w-50"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Button</a> </div></div>
使用自定义 CSS
在样式表中使用自定义 CSS 或者使用内联样式来设置宽度。
<div class="card" style="width: 20rem;"> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div></div>
文本对齐
您可以使用我们的文本对齐类快速更改任何卡片的文本对齐——整体或特定部分。
<div class="card" style="width: 20rem;"> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div></div><div class="card text-center" style="width: 20rem;"> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div></div><div class="card text-right" style="width: 20rem;"> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div></div>
导航
使用 Bootstrap 的导航组件将一些导航添加到卡的标题（或块）。
<div class="card text-center"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div></div>
<div class="card text-center"> <div class="card-header"> <ul class="nav nav-pills card-header-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div></div>
图片
卡包括一些用于处理图像的选项。选择在卡片的任一端添加“图像大小写”，将图像与卡片内容叠加，或者将图像嵌入到卡片中。
图像上限
与页眉和页脚类似，卡片可以包括顶部和底部的“图像上限” - 图像顶部或底部的图像。
<div class="card mb-3"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div></div><div class="card"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> <img class="card-img-bottom" src="..." alt="Card image cap"></div>
图像叠加
将图像转换成卡片背景并覆盖卡片的文字。根据图像，您可能需要也可能不需要其他样式或实用程序。
<div class="card bg-dark text-white"> <img class="card-img" src="..." alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">Last updated 3 mins ago</p> </div></div>
卡片样式
卡片包括用于自定义背景，边框和颜色的各种选项。
背景和颜色
使用文本和背景实用程序更改卡的外观。
<div class="card text-white bg-primary mb-3" style="max-width: 20rem;"> <div class="card-header">Header</div> <div class="card-body"> <h4 class="card-title">Primary card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div></div><div class="card text-white bg-secondary mb-3" style="max-width: 20rem;"> <div class="card-header">Header</div> <div class="card-body"> <h4 class="card-title">Secondary card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div></div><div class="card text-white bg-success mb-3" style="max-width: 20rem;"> <div class="card-header">Header</div> <div class="card-body"> <h4 class="card-title">Success card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div></div><div class="card text-white bg-danger mb-3" style="max-width: 20rem;"> <div class="card-header">Header</div> <div class="card-body"> <h4 class="card-title">Danger card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div></div><div class="card text-white bg-warning mb-3" style="max-width: 20rem;"> <div class="card-header">Header</div> <div class="card-body"> <h4 class="card-title">Warning card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div></div><div class="card text-white bg-info mb-3" style="max-width: 20rem;"> <div class="card-header">Header</div> <div class="card-body"> <h4 class="card-title">Info card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div></div><div class="card bg-light mb-3" style="max-width: 20rem;"> <div class="card-header">Header</div> <div class="card-body"> <h4 class="card-title">Light card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div></div><div class="card text-white bg-dark mb-3" style="max-width: 20rem;"> <div class="card-header">Header</div> <div class="card-body"> <h4 class="card-title">Dark card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div></div>
将意义传递给辅助技术
使用颜色来增加意义只能提供一种视觉指示，而不会传达给辅助技术的用户——如屏幕阅读器。确保由颜色表示的信息或者来自内容本身（例如可见文本），或者通过其他方式包含，例如隐藏在.sr-only类中的其他文本。
边境
使用边界实用程序只更改一张卡的border-color。请注意，您可以将.text-{color}类放在父.card卡或卡片内容的子集上，如下所示。
<div class="card border-primary mb-3" style="max-width: 20rem;"> <div class="card-header">Header</div> <div class="card-body text-primary"> <h4 class="card-title">Primary card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div></div><div class="card border-secondary mb-3" style="max-width: 20rem;"> <div class="card-header">Header</div> <div class="card-body text-secondary"> <h4 class="card-title">Secondary card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div></div><div class="card border-success mb-3" style="max-width: 20rem;"> <div class="card-header">Header</div> <div class="card-body text-success"> <h4 class="card-title">Success card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div></div><div class="card border-danger mb-3" style="max-width: 20rem;"> <div class="card-header">Header</div> <div class="card-body text-danger"> <h4 class="card-title">Danger card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div></div><div class="card border-warning mb-3" style="max-width: 20rem;"> <div class="card-header">Header</div> <div class="card-body text-warning"> <h4 class="card-title">Warning card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div></div><div class="card border-info mb-3" style="max-width: 20rem;"> <div class="card-header">Header</div> <div class="card-body text-info"> <h4 class="card-title">Info card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div></div><div class="card border-light mb-3" style="max-width: 20rem;"> <div class="card-header">Header</div> <div class="card-body"> <h4 class="card-title">Light card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div></div><div class="card border-dark mb-3" style="max-width: 20rem;"> <div class="card-header">Header</div> <div class="card-body text-dark"> <h4 class="card-title">Dark card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div></div>
Mixins 实用程序
您还可以更改卡上的页眉和页脚所需的边界，甚至用.bg-transparent删除替换其background-color。
<div class="card border-success mb-3" style="max-width: 20rem;"> <div class="card-header bg-transparent border-success">Header</div> <div class="card-body text-success"> <h4 class="card-title">Success card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> <div class="card-footer bg-transparent border-success">Footer</div></div>
卡片布局
除了对卡片中的内容进行造型外，Bootstrap 还包括一些用于布置系列卡片的选项。目前，这些布局选项尚未响应。
卡片组
使用卡片组将卡片渲染为具有相同宽度和高度列的单个附加元素。卡组使用display: flex;来实现统一大小。
<div class="card-group"> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div></div>
当使用带有页脚的卡片组时，其内容将自动排列。
<div class="card-group"> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </div> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> </div> <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </div> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> </div> <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </div></div>
卡片平台
需要一组相等宽度和高度的卡片，这些卡片不相互连接？使用卡片平台。
<div class="card-deck"> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div></div>
就像卡片组一样，卡片组中的卡片脚将自动排队。
<div class="card-deck"> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </div> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> </div> <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </div> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> </div> <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </div></div>
卡片列
卡片可以通过将它们包裹进 CSS 中，只用 CSS 来组织成类似 Masonry的列.card-columns。卡片是使用 CSS column属性而不是 Flexbox 构建的，以便于对齐。卡片从上到下和从左到右排列。
抬头！卡列的里程可能会有所不同。为了防止卡片跨栏，我们必须将它们设置display: inline-block为column-break-inside: avoid不是防弹解决方案。
<div class="card-columns"> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title that wraps to a new line</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> <div class="card p-3"> <blockquote class="blockquote mb-0 card-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer class="blockquote-footer"> <small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card bg-primary text-white text-center p-3"> <blockquote class="blockquote mb-0"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <footer class="blockquote-footer"> <small>
Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card text-center"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img" src="..." alt="Card image"> </div> <div class="card p-3 text-right"> <blockquote class="blockquote mb-0"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer class="blockquote-footer"> <small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div></div>
卡片列也可以扩展和定制一些额外的代码。下面显示的是.card-columns类使用与 CSS 列相同的 CSS 的类的扩展——生成一组用于更改列数的响应层。
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4; }
@include media-breakpoint-only(xl) {
column-count: 5; }}
标签：supporting,卡片,title,text,Bootstrap,手册,content,Cards,card 来源： https://blog.csdn.net/WuLex/article/details/120119506
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。