Getting started
Accessibility（無障礙）
Browsers and devices（瀏覽器和設(shè)備）
Build tools（構(gòu)建工具）
Contents（內(nèi)容）
Download（下載）
JavaScript
Theming Bootstrap（主題Bootstrap）
Webpack
Components: Alerts
Alerts（警報）
Components: Badges
Badges（徽章）
Components: Breadcrumb
Breadcrumb
Components: Button group
Button group（按鈕組）
Components: Buttons
Buttons（按鈕）
Components: Cards
Components: Carousel
Cards（卡）
Carousel（圓盤傳送帶）
Components: Collapse
Collapse（折疊）
Components: Dropdowns
Dropdowns（下拉菜單）
Components: Forms
Forms（表單）
Components: Input group
Input group（輸入群組）
Components: Input group
Jumbotron（廣告大屏幕）
Components: List group
List group（列表組）
Components: Modal
Modal（互動視窗）
Components: Navbar
Navbar（導(dǎo)航欄）
Components: Navs
Navs（導(dǎo)航欄）
Components: Pagination
Pagination（分頁）
Components: Popovers
Popovers（彈出框）
Components: Progress
Progress（進度條）
Components: Scrollspy
Scrollspy（滾動監(jiān)聽）
Components: Tooltips
Tooltips（提示工具）
Content
Code（代碼）
Figures（圖片區(qū)）
Images（圖片）
Reboot（重置）
Tables（表格）
Typography（排版）
Layout
Grid（網(wǎng)格）
Layout（布局）
Media object（多媒體對象）
Utilities for layout（排版通用類別）
Migration
Migrating to v4（遷移到v4）
Utilities
Borders（邊框）
Clearfix（清除浮動）
Close icon（關(guān)閉圖標(biāo)）
Colors（顏色）
Display property（顯示屬性）
Embeds（內(nèi)嵌）
Flex（彈性）
Float（浮動）
Image replacement（圖像替換）
Position（位置）
Screenreaders（熒幕閱讀器）
Sizing（尺寸）
Spacing（間隔）
Text（文本）
Vertical alignment（垂直對齊）
Visibility（能見度）
?
This document uses PHP Chinese website manual Release
characters
Bootstrap 的卡片提供了一個靈活且可擴展的內(nèi)容容器，包含多種變體和選項。
關(guān)于
一個卡片是一個靈活的，可擴展的內(nèi)容容器。它包括頁眉和頁腳的選項，各種內(nèi)容，上下文背景顏色以及強大的顯示選項。
如果您熟悉 Bootstrap 3，卡片可以替換我們的舊面板、水井和縮略圖。與這些組件類似的功能可作為卡片的修飾符類使用。
示例
卡片盡可能少的標(biāo)記和樣式，但仍然設(shè)法提供大量的控制和定制。使用 flexbox 構(gòu)建，它們可以輕松對齊并與其他 Bootstrap 組件良好混合。
以下是具有混合內(nèi)容和固定寬度的基本卡片的示例。卡片沒有固定的寬度開始，所以它們自然會填充其父元素的整個寬度。這很容易通過我們的各種尺寸選項進行定制。
<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>
內(nèi)容類型
卡片支持各種內(nèi)容，包括圖像，文本，列表組，鏈接等。以下是支持的例子。
構(gòu)成
卡片的構(gòu)建塊是.card-body。只要你需要卡內(nèi)的填充部分，就使用它。
<div class="card"> <div class="card-body"> This is some text within a card body. </div></div>
標(biāo)題，文本和鏈接
卡片標(biāo)題通過添加.card-title到<h*>標(biāo)簽來使用。以同樣的方式，鏈接被添加并通過添加.card-link到<a>標(biāo)簽而彼此相鄰放置。
字幕是通過將添加.card-subtitle到<h*>標(biāo)簽。如果項目.card-title和.card-subtitle項目被放置在一個.card-body項目中，則卡片標(biāo)題和副標(biāo)題很好地對齊。
<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，文字可以添加到卡。文本內(nèi)的文字.card-text也可以用標(biāo)準(zhǔn)的 HTML 標(biāo)簽進行樣式設(shè)計。
<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>
列出組
使用刷新列表組創(chuàng)建卡片中的內(nèi)容列表。
<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
混合并匹配多種內(nèi)容類型來創(chuàng)建您需要的卡片，或?qū)⑺袃?nèi)容都扔到那里。下面顯示的是圖像樣式，塊，文本樣式和列表組 - 全部用固定寬度卡包裝。
<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>
頁眉和頁腳
在卡片中添加可選標(biāo)題和/或頁腳。
<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>
卡頭可以通過增加設(shè)置樣式.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％寬。您可以根據(jù)需要使用自定義 CSS，網(wǎng)格類，網(wǎng)格 Sass mixins 或?qū)嵱贸绦騺砀拇嗽O(shè)置。
使用網(wǎng)格標(biāo)記
使用網(wǎng)格，根據(jù)需要將卡片打包成行和列。
<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>
使用實用程序
使用我們的一些可用的尺寸設(shè)置工具來快速設(shè)置卡的寬度。
<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 或者使用內(nèi)聯(lián)樣式來設(shè)置寬度。
<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>
導(dǎo)航
使用 Bootstrap 的導(dǎo)航組件將一些導(dǎo)航添加到卡的標(biāo)題（或塊）。
<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>
圖片
卡包括一些用于處理圖像的選項。選擇在卡片的任一端添加“圖像大小寫”，將圖像與卡片內(nèi)容疊加，或者將圖像嵌入到卡片中。
圖像上限
與頁眉和頁腳類似，卡片可以包括頂部和底部的“圖像上限” - 圖像頂部或底部的圖像。
<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>
圖像疊加
將圖像轉(zhuǎn)換成卡片背景并覆蓋卡片的文字。根據(jù)圖像，您可能需要也可能不需要其他樣式或?qū)嵱贸绦颉?br/>
<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>
將意義傳遞給輔助技術(shù)
使用顏色來增加意義只能提供一種視覺指示，而不會傳達給輔助技術(shù)的用戶——如屏幕閱讀器。確保由顏色表示的信息或者來自內(nèi)容本身（例如可見文本），或者通過其他方式包含，例如隱藏在.sr-only類中的其他文本。
邊境
使用邊界實用程序只更改一張卡的border-color。請注意，您可以將.text-{color}類放在父.card卡或卡片內(nèi)容的子集上，如下所示。
<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>
卡片布局
除了對卡片中的內(nèi)容進行造型外，Bootstrap 還包括一些用于布置系列卡片的選項。目前，這些布局選項尚未響應(yīng)。
卡片組
使用卡片組將卡片渲染為具有相同寬度和高度列的單個附加元素?？ńM使用display: flex;來實現(xiàn)統(tǒng)一大小。
<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>
當(dāng)使用帶有頁腳的卡片組時，其內(nèi)容將自動排列。
<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 構(gòu)建的，以便于對齊?？ㄆ瑥纳系较潞蛷淖蟮接遗帕小?/p>
抬頭！卡列的里程可能會有所不同。為了防止卡片跨欄，我們必須將它們設(shè)置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 的類的擴展——生成一組用于更改列數(shù)的響應(yīng)層。
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4; }
@include media-breakpoint-only(xl) {
column-count: 5; }}