Cards（卡片）

Bootstrap 提供了一個可伸縮可擴展的內容容器給多種變量和選擇。

關于

卡片是一個靈活的、可擴展的內容容器。它包括用于頁眉和頁腳的選項、各種各樣的內容、上下文背景顏色和強大的顯示選項。如果您熟悉Bootstrap 3，卡將替換我們的舊面板、井和縮略圖。與這些組件類似的功能可以作為卡片的修飾符類使用。

例子

卡片是用盡可能少的標記和樣式構建的，但仍然能夠交付大量的控制和定制。使用flexbox構建，它們提供了簡單的對齊和與其他引導組件的良好混合。它們在默認情況下沒有空白，所以根據需要使用間距實用程序。
下面是一個混合內容和固定寬度的基本卡片示例。卡片沒有固定的起始寬度，因此它們自然會填充其父元素的全部寬度。這是很容易定制與我們的各種大小選項。

<div class="card" style="width: 18rem;"><img src="..." class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><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來添加和放置鏈接。

通過向<h*>標記添加.card-subtitle來使用字幕。如果.card-title和.card-subtitle項被放置在.card-body項中，那么card title和subtitle就可以很好地對齊。

演示代碼

<div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Card title</h5><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: 18rem;"><img src="..." class="card-img-top" alt="..."><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: 18rem;"><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>

添加了header。

<div class="card" style="width: 18rem;"><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>

廚房的水槽

混合并匹配多種內容類型來創建您需要的卡片，或者將所有內容都放入其中。下面顯示的是圖像樣式、塊、文本樣式和列表組—所有這些都包裝在固定寬度的卡片中。

演示代碼

<div class="card" style="width: 18rem;"><img src="..." class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><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"><h5 class="card-title">Special title treatment</h5><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 headers can be styled by adding .card-header to <h*> elements.
頭部修飾：

<h5 class="card-header">Featured</h5>

一個不錯的例子

<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>

不錯的例子2

<div class="card text-center"><div class="card-header">Featured</div><div class="card-body"><h5 class="card-title">Special title treatment</h5><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>

大小

卡片沒有特定的寬度來開始，所以它們將是100%的寬度，除非另有說明。您可以根據需要使用自定義CSS、網格類、網格Sass mixin或實用程序來更改這一點。

通過網格布局來布局我們的標簽

<div class="row"><div class="col-sm-6"><div class="card"><div class="card-body"><h5 class="card-title">Special title treatment</h5><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"><h5 class="card-title">Special title treatment</h5><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"><h5 class="card-title">Card title</h5><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"><h5 class="card-title">Card title</h5><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: 18rem;"><div class="card-body"><h5 class="card-title">Special title treatment</h5><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>

文本排列

您可以使用我們的text align類快速更改任何卡片的文本對齊方式(包括全部或特定部分)。

<div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Special title treatment</h5><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: 18rem;"><div class="card-body"><h5 class="card-title">Special title treatment</h5><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: 18rem;"><div class="card-body"><h5 class="card-title">Special title treatment</h5><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-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="#" tabindex="-1" aria-disabled="true">Disabled</a></li></ul></div><div class="card-body"><h5 class="card-title">Special title treatment</h5><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>

下面header 的樣式跟上面的有些許不同。

<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="#" tabindex="-1" aria-disabled="true">Disabled</a></li></ul></div><div class="card-body"><h5 class="card-title">Special title treatment</h5><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 src="..." class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">Card title</h5><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"><h5 class="card-title">Card title</h5><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 src="..." class="card-img-top" alt="..."> </div>

圖像上浮文本

將圖像轉換為卡片背景并覆蓋卡片的文本。根據映像的不同，您可能需要也可能不需要其他樣式或實用程序。

<div class="card bg-dark text-white"><img src="..." class="card-img" alt="..."><div class="card-img-overlay"><h5 class="card-title">Card title</h5><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>

注意，內容不應該大于圖像的高度。如果內容大于圖像，則內容將顯示在圖像之外。

水平布局

使用網格和實用程序類的組合，卡可以以一種移動友好和響應的方式水平放置。在下面的示例中，我們刪除帶有.no- guet的網格溝槽，并使用.col-md-*類使卡片在md斷點處保持水平。根據您的卡的內容可能需要進一步的調整。

<div class="card mb-3" style="max-width: 540px;"><div class="row no-gutters"><div class="col-md-4"><img src="..." class="card-img" alt="..."></div><div class="col-md-8"><div class="card-body"><h5 class="card-title">Card title</h5><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> </div>

華麗的卡片樣式

背景色和字體顏色

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;"><div class="card-header">Header</div><div class="card-body"><h5 class="card-title">Primary card title</h5><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: 18rem;"><div class="card-header">Header</div><div class="card-body"><h5 class="card-title">Secondary card title</h5><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: 18rem;"><div class="card-header">Header</div><div class="card-body"><h5 class="card-title">Success card title</h5><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: 18rem;"><div class="card-header">Header</div><div class="card-body"><h5 class="card-title">Danger card title</h5><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: 18rem;"><div class="card-header">Header</div><div class="card-body"><h5 class="card-title">Warning card title</h5><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: 18rem;"><div class="card-header">Header</div><div class="card-body"><h5 class="card-title">Info card title</h5><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: 18rem;"><div class="card-header">Header</div><div class="card-body"><h5 class="card-title">Light card title</h5><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: 18rem;"><div class="card-header">Header</div><div class="card-body"><h5 class="card-title">Dark card title</h5><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-primary mb-3" style="max-width: 18rem;"><div class="card-header">Header</div><div class="card-body text-primary"><h5 class="card-title">Primary card title</h5><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: 18rem;"><div class="card-header">Header</div><div class="card-body text-secondary"><h5 class="card-title">Secondary card title</h5><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刪除它們的背景顏色。

。。。還有好多，未完待續

總結

以上是生活随笔為你收集整理的Bootstrap -Card卡片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。