Bootstrap中如何使用Card卡片組件

本篇內(nèi)容介紹了“Bootstrap中如何使用Card卡片組件”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、坪山網(wǎng)站維護(hù)、網(wǎng)站推廣。

1 bootstrap 卡片介紹

Bootstrap的卡提供了一個靈活的、可擴(kuò)展的內(nèi)容容器，其中包含多種變體和選項?？ㄆ辉O(shè)計成盡可能的少用一些標(biāo)記和樣式，它們可以更方便的對齊，并與其它的Bootstrap元件良好混合。預(yù)設(shè)中它并沒有margin，所以可以依需求加入spacing通用類別。

以下是一個具有混合內(nèi)容和固定寬度的基本卡片示例?？ㄆ绻麤]有固定的寬度，那么它們將自然填充其父元素的全部寬度。這可以透過我們的各種縮放選項輕松調(diào)整。下面是一個簡單的例子。

<div class="card" style="width: 18rem;">
            <img src="../pic/5.jpg" class="card-img-top" alt="卡片的圖片寬度會自動設(shè)置">
            <div class="card-body">
            <h6 class="card-title">卡片標(biāo)題</h6>
            <p class="card-text">卡片的內(nèi)容可以使用文本、列表、表格、表單、圖片等各種html元素</p>
            <a href="#" class="btn btn-primary">這是一個按鈕</a>
            </div>
</div>

Bootstrap中如何使用Card卡片組件

2 卡片的結(jié)構(gòu)

2.1 完整的卡片結(jié)構(gòu)示例

一般情況下，我們無須完整的卡片結(jié)構(gòu)就可以很好的使用一個卡片組件，如上例所示，一個完整的卡片包括頁眉、頁腳、圖片（此處指的是頁眉下面的圖片，與卡片同寬度）、主體、列表群組五部分，其中主體可包含標(biāo)題和文本。下面是一個內(nèi)容俱全的示例，事實上，一般情況下我們根據(jù)需要使用卡片的一兩個元素就夠用了，下面示例僅是演示，后面我們會逐一講解各個部分功能。

 <div class="card" style="width: 18rem;">
        <div class="card-header">
           卡片頁眉
        </div>
        <img src="../pic/5.jpg" class="card-img-top" alt="卡片的圖片寬度會自動設(shè)置">
        <div class="card-body">
        <h6 class="card-title">卡片標(biāo)題</h6>
        <p class="card-text">卡片的內(nèi)容可以使用文本、列表、表格、表單、圖片等各種html元素
          <img src="../pic/7.jpg" class="card-img-top" alt="卡片主體內(nèi)的圖片">
        </p>
        <a href="#" class="btn btn-primary">這是一個按鈕</a>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">列表元素</li>
          <li class="list-group-item">列表元素</li>
          <li class="list-group-item">列表元素</li>
        </ul>
        <div class="card-footer text-muted">
            卡片頁腳
        </div>
    </div>

Bootstrap中如何使用Card卡片組件

2.1 卡片的頁眉和頁腳

頁眉和頁腳不是必要的，與其他內(nèi)容相比，頁眉和頁腳文字顏色較淺，字體略小。另外還可以通過通用類來調(diào)整其對齊方式，靈活使用可以達(dá)到很多特殊的效果。

2.1.1 簡單卡片

<div class="card">
        <h6 class="card-header">通知</h6>
        <div class="card-body">
        <h6 class="card-title">中秋節(jié)放假通知</h6>
        <p class="card-text">下周中秋節(jié)放假7天，給大家樂活以下.........</p>
        <a href="#" class="btn btn-primary">了解詳情</a>
        </div>
        </div>

Bootstrap中如何使用Card卡片組件

2.1.2 使用引用用于名人名言

      <div class="card">
        <div class="card-header">
        名言
        </div>
        <div class="card-body">
        <blockquote class="blockquote mb-0">
        <p>只有詩人同圣徒才會堅信，在瀝青路面上辛勤澆水會培植出百合花來。</p>
        <footer class="blockquote-footer">威廉· 薩默賽特·毛姆的 <cite title="Source Title">《月亮和六便士》</cite></footer>
        </blockquote>
        </div>
        </div>

Bootstrap中如何使用Card卡片組件

2.1.3 頁眉頁腳一起使用

      <div class="card text-center">
        <div class="card-header">
        名著推薦
        </div>
        <div class="card-body">
        <h6 class="card-title">《紅樓夢》</h6>
        <p class="card-text">
            《紅樓夢》是一部具有世界影響力的人情小說作品，舉世公認(rèn)的中國古典小說巔峰之作，
        中國封建社會的百科全書，傳統(tǒng)文化的集大成者。小說以賈、史、王、薛四大家族的興衰為背景，
        以賈府的家庭瑣事、閨閣閑情為脈絡(luò)，以賈寶玉、林黛玉、薛寶釵的愛情婚姻故事為主線，
        刻畫了以賈寶玉和金陵十二釵為中心的正邪兩賦有情人的人性美和悲劇美。
        通過家族悲劇、女兒悲劇及主人公的人生悲劇，揭示出封建末世危機(jī)。
    </p>
        <a href="#" class="btn btn-primary">馬上閱讀</a>
        </div>
        <div class="card-footer text-muted">
        2 days ago
        </div>
        </div>

Bootstrap中如何使用Card卡片組件

2.2 圖像的使用

2.2.1 圖像在頂部或在底部

圖像通過類card-img-top或card-img-bottom，設(shè)置顯示在卡片的頂部還是底部，下面是兩個卡片，一個圖片在上，一個圖片在下。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div class="card mb-2">
        <img src="../pic/5.jpg" alt="...">
        <div>
        <h6>軟發(fā)布 Win11 </h6>
        <p>T
          微軟已宣布將于 6 月 24 日舉行“What's next for Windows”活動，屆時將發(fā)布下一代桌面操作系統(tǒng) Win11 及其應(yīng)用商店等內(nèi)容。
        </p>
        <p><small>Last updated 3 mins ago</small></p>
        </div>
        </div>
        
        <div>
        <div>
        <h6>飛利浦推出4K顯示器</h6>
        <p>飛利浦推出 Momentum 4K 電競顯示器：專為 Xbox 設(shè)計，售價過萬 
        </p>
        <p><small>Last updated 3 mins ago</small></p>
        </div>
        <img src="../pic/7.jpg" alt="...">
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中如何使用Card卡片組件

2.2.2 圖像作為卡片背景

將圖片轉(zhuǎn)換為卡片背景，并疊加卡片的文字。根據(jù)圖片，你可以選擇是否需要額外的樣式或通用類別。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div class="card card bg-dark text-white">
        <img src="../pic/7.jpg" alt="...">
        <div class="card-body card-img-overlay">
        <h6>微軟發(fā)布 Win11 </h6>
        <p>
          微軟已宣布將于 6 月 24 日舉行“What's next for Windows”活動，屆時將發(fā)布下一代桌面操作系統(tǒng) Win11 及其應(yīng)用商店等內(nèi)容。
        </p>
        <p><small>Last updated 3 mins ago</small></p>
        </div>
        </div>
        

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

注意，我們通過bg-dark給卡片添加了一個黑色背景，text-white設(shè)置字體為白色，在card-body中設(shè)置card-img-overlay為背景色。也可以不要card-body，直接用card-img-overlay"如上。

Bootstrap中如何使用Card卡片組件

2.2.3 圖像在左側(cè)

結(jié)合使用網(wǎng)格以及通用類，可以讓卡片以響應(yīng)式的方法呈現(xiàn)水平狀態(tài)。在下面的示例中，我們使用g-0移除網(wǎng)格的間隙，并使用col-md-*類別讓卡片在md斷點之后呈現(xiàn)水平。根據(jù)卡片內(nèi)容，將可能會需要一些額外的調(diào)整。

<div class="card mb-3" style="max-width: 540px;">
        <div class="row g-0">
        <div class="col-md-4">
        <img src="../pic/3.jpg" alt="..." class="w-100">
        </div>
        <div class="col-md-8">
        <div class="card-body">
          <h6 class="card-title">春夏秋冬皆自然</h6>
          <p class="card-text">
            春夏秋冬皆自然,明月清風(fēng)共我閑,有春風(fēng)拂面的溫柔,也有美好故事的發(fā)生,又一個春天如約而至,溫柔的朝陽里布谷鳥聲聲呼喚,愿普天同安康,迎接春天到來的簡...
          </p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        </div>
        </div>
        </div>

Bootstrap中如何使用Card卡片組件

當(dāng)然，你最好設(shè)置一下圖片寬度，否則容易發(fā)生溢出。

2.3 卡片的主體

2.3.1 標(biāo)題和副標(biāo)題

卡片的構(gòu)造塊是.card-body。當(dāng)你需要卡片中的填充部分時就使用它。

在<h*>標(biāo)簽中添加card-title以使用卡片標(biāo)題。
在<h*>標(biāo)簽中加入card-subtitle以使用副標(biāo)題。

如果card-title以及card-subtitle元件被放在card-body里面，它們將會對齊良好。

2.3.2 文本內(nèi)容和鏈接

文本內(nèi)容可以放置任何html元素和bootstrap的組件，如按鈕等，在a標(biāo)簽中加入card-link并使連接彼此相鄰。

      <div class="card" style="width: 18rem;">
        <div class="card-body">
        <h6 class="card-title">微軟發(fā)布 Win11</h6>
        <h7 class="card-subtitle mb-2 text-muted">科技動態(tài)</h7>
        <p class="card-text">
          微軟已宣布將于 6 月 24 日舉行“What's next for Windows”活動，屆時將發(fā)布下一代桌面操作系統(tǒng) Win11 及其應(yīng)用商店等內(nèi)容。
        </p>
        <a href="#" class="card-link">了解詳情</a>
        <a href="#" class="card-link">下載試用</a>
        </div>
        </div>

Bootstrap中如何使用Card卡片組件

2.4 列表群組

列表群組使用非常簡單

<div class="card" style="width: 18rem;">
        <div class="card-header text-center">
        晚會活動
        </div>
        <ul class="list-group list-group-flush">
        <li class="list-group-item">歌舞</li>
        <li class="list-group-item">男生獨唱</li>
        <li class="list-group-item">小品</li>
        </ul>
        </div>

Bootstrap中如何使用Card卡片組件

2.5 混合樣式

混合并搭配多個內(nèi)容形式，用來創(chuàng)建你所需要的卡片。以下示例將圖片樣式、塊、文字樣式以及列表群組全部包裝在一個固定寬度的卡片中。

<div class="card" style="width: 18rem;">
<img src="../pic/cap.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</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>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>

Bootstrap中如何使用Card卡片組件

3 卡片的排版及寬度

卡片預(yù)設(shè)沒有特定的起始width，除非另有聲明，否則它們的寬度將是100%。

3.1 使用網(wǎng)格

使用網(wǎng)格，根據(jù)需要在列和行中包裝卡片。需要注意的是卡片默認(rèn)是每個卡片一行的，要想一行中顯示多個卡片，必須把幾個卡片放在一個div容器中且每行中的卡片總寬度不能超過屏幕寬度。網(wǎng)格中的row-cols-*同樣適用卡片。另外卡片默認(rèn)是寬度相同，高度根據(jù)內(nèi)容自動調(diào)整的，但是如果卡片擁有頁腳，則高度會自動調(diào)整到相同。下面給出一個完整例子。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div>
        <div>
        <div>
        <div>
          <h6>微軟發(fā)布 Win11</h6>
          <p>
            軟已宣布將于 6 月 24 日舉行“What's next for Windows”活動，屆時將發(fā)布下一代桌面操作系統(tǒng) Win11 及其應(yīng)用商店等內(nèi)容。
          </p>
          <a href="#" class="btn btn-primary">了解詳情</a>
        </div>
        </div>
        </div>

        <div>
        <div>
        <div>
          <h6>飛利浦推出4K顯示器</h6>
          <p>
            飛利浦推出 Momentum 4K 電競顯示器：專為 Xbox 設(shè)計，售價過萬 
          </p>
          <a href="#" class="btn btn-primary">了解詳情</a>
        </div>
        </div>
        </div>
        </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中如何使用Card卡片組件

3.2 使用通用類

使用可調(diào)整寬度大小的通用類來快速設(shè)置卡片的寬度。

使用網(wǎng)格

使用網(wǎng)格，根據(jù)需要在列和行中包裝卡片。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div class="card w-75">
        <div>
            <h6>微軟發(fā)布 Win11</h6>
            <p>
              軟已宣布將于 6 月 24 日舉行“What's next for Windows”活動，屆時將發(fā)布下一代桌面操作系統(tǒng) Win11 及其應(yīng)用商店等內(nèi)容。
            </p>
            <a href="#" class="btn btn-primary">了解詳情</a>
        </div>
        </div>
        
        <div class="card w-50">
        <div>
            <h6>飛利浦推出4K顯示器</h6>
            <p>
              飛利浦推出 Momentum 4K 電競顯示器：專為 Xbox 設(shè)計，售價過萬 
            </p>
            <a href="#" class="btn btn-primary">了解詳情</a>
        </div>
        </div>
       

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中如何使用Card卡片組件

需要注意的是，這里的寬度值必須是預(yù)定的，預(yù)設(shè)包含25%，50%，75%，100%和auto，而不是隨意寫的。詳情見 Bootstrap5中文手冊通用類尺寸（Sizing）一節(jié)。

3.3 使用自定義CSS

在樣式表中使用自定義的CSS或使用行內(nèi)樣式設(shè)置寬度，這種方式比較靈活，可以使用rem、px、百分比。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div style="width: 30rem;">
        <div>
            <h6>微軟發(fā)布 Win11</h6>
            <p>
              軟已宣布將于 6 月 24 日舉行“What's next for Windows”活動，屆時將發(fā)布下一代桌面操作系統(tǒng) Win11 及其應(yīng)用商店等內(nèi)容。
            </p>
            <a href="#" class="btn btn-primary">了解詳情</a>
        </div>
        </div>
        
        <div style="width: 20rem;">
        <div>
            <h6>飛利浦推出4K顯示器</h6>
            <p>
              飛利浦推出 Momentum 4K 電競顯示器：專為 Xbox 設(shè)計，售價過萬 
            </p>
            <a href="#" class="btn btn-primary">了解詳情</a>
        </div>
        </div>
       

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中如何使用Card卡片組件

3.4 卡片中的文本對齊

可以透過文字對齊類別更改任何卡片的整體或特定部分的文本對齊方式。默認(rèn)全部是局左（text-start）對齊的，可以用card-text、text-end通用類使之居中對齊或居右對齊。通用類可用在card容器，也可以單獨以用在標(biāo)題、頁眉頁腳、主體等任意部分，如果同時使用，則單獨的覆蓋整體的。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div>
        <div>
        <div class="card text-center">
        <div>
                整體居中
        </div>    
        <div>
          <h6>微軟發(fā)布 Win11</h6>
          <p>
            軟已宣布將于 6 月 24 日舉行“What's next for Windows”活動，屆時將發(fā)布下一代桌面操作系統(tǒng) Win11 及其應(yīng)用商店等內(nèi)容。
          </p>
          <a href="#" class="btn btn-primary">了解詳情</a>
        </div>
        </div>
        </div>

        <div>
            <div>
            <div class="card-header text-center"">
                    頁眉、標(biāo)題居中
            </div>    
            <div>
              <h6 class="card-title  text-center">微軟發(fā)布 Win11</h6>
              <p>
                軟已宣布將于 6 月 24 日舉行“What's next for Windows”活動，屆時將發(fā)布下一代桌面操作系統(tǒng) Win11 及其應(yīng)用商店等內(nèi)容。
              </p>
              <a href="#" class="btn btn-primary">了解詳情</a>
            </div>
            </div>
            </div>
            
            <div>
                <div class="card text-center">
                <div>
                        整體居中中標(biāo)題居左
                </div>    
                <div>
                  <h6 class="card-title text-start">微軟發(fā)布 Win11</h6>
                  <p>
                    軟已宣布將于 6 月 24 日舉行“What's next for Windows”活動，屆時將發(fā)布下一代桌面操作系統(tǒng) Win11 及其應(yīng)用商店等內(nèi)容。
                  </p>
                  <a href="#" class="btn btn-primary">了解詳情</a>
                </div>
                </div>
                </div>
        
        </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中如何使用Card卡片組件

4 帶選項卡的卡片

使用Bootstrap的導(dǎo)航組件在卡片的頁首（或塊）添加一些導(dǎo)航，獲得選項卡效果。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div class="card text-center">
        <div>
        <ul class="nav nav-tabs card-header-tabs">
        <li>
          <a aria-current="true" href="#" data-bs-toggle="tab" data-bs-target="#nav-hot">熱門新聞</a>
        </li>
        <li>
          <a class="nav-link active" href="#" data-bs-toggle="tab" data-bs-target="#nav-home">國內(nèi)新聞</a>
        </li>
        <li>
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">國外新聞</a>
        </li>
        </ul>
        </div>
           <div>
                <div class="card-body tab-pane  fade" id="nav-hot">
                <h6>熱點新聞</h6>
                <p>熱點新聞</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
                
                <div class="card-body tab-pane  fade show active" id="nav-home">
                        <h6>國內(nèi)新聞</h6>
                        <p>國內(nèi)熱點新聞</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>    
            </div>
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中如何使用Card卡片組件

對于上面的代碼，只需經(jīng)過兩處替換，就可以換為膠囊導(dǎo)航

 <ul class="nav nav-tabs card-header-tabs">

替換為

 <ul class="nav nav-pills card-header-pills">

所有的

data-bs-toggle="tab"

替換為

data-bs-toggle="pill"

Bootstrap中如何使用Card卡片組件

5 卡片樣式

卡片包含許多用來自定義背景、邊框、顏色的選項。

5.1 背景和顏色

使用文字和背景通用類別來改變卡片的外觀。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div class="container">
      <br><br><br>
      <div class="d-flex">  
      <div class="card text-white bg-primary" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h6 class="card-title">Primary</h6>
        <p class="card-text">顏色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-white bg-secondary" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h6 class="card-title">Secondary</h6>
        <p class="card-text">顏色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-white bg-success" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h6 class="card-title">Success</h6>
        <p class="card-text">顏色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-white bg-danger" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h6 class="card-title">Danger</h6>
        <p class="card-text">顏色直接作用于card容器上</p>
        </div>
      </div>
    </div>
        <div class="d-flex">
        
        <div class="card text-dark bg-warning" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h6 class="card-title">Warning</h6>
        <p class="card-text">顏色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-dark bg-info" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h6 class="card-title">Info</h6>
        <p class="card-text">顏色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-dark bg-light" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h6 class="card-title">Light</h6>
        <p class="card-text">顏色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-white bg-dark" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h6 class="card-title">Dark</h6>
        <p class="card-text">顏色直接作用于card容器上</p>
        </div>
        </div>
      </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中如何使用Card卡片組件

5.2 邊框和顏色

<div class="d-flex">
      <div class="card border-primary mb-3" style="max-width: 18rem;">
        <div class="card-header">頁眉</div>
        <div class="card-body text-primary">
        <h6 class="card-title">Primary 卡片標(biāo)題</h6>
        <p class="card-text">card-text 卡片文字內(nèi)容</p>
        </div>
        </div>
        <div class="card border-secondary mb-3" style="max-width: 18rem;">
        <div class="card-header">頁眉</div>
        <div class="card-body text-secondary">
        <h6 class="card-title">Secondary 卡片標(biāo)題</h6>
        <p class="card-text">card-text 卡片文字內(nèi)容</p>
        </div>
        </div>
        <div class="card border-success mb-3" style="max-width: 18rem;">
        <div class="card-header">頁眉</div>
        <div class="card-body text-success">
        <h6 class="card-title">Success 卡片標(biāo)題</h6>
        <p class="card-text">card-text 卡片文字內(nèi)容</p>
        </div>
        </div>
        <div class="card border-danger mb-3" style="max-width: 18rem;">
        <div class="card-header">頁眉</div>
        <div class="card-body text-danger">
        <h6 class="card-title">Danger 卡片標(biāo)題</h6>
        <p class="card-text">card-text 卡片文字內(nèi)容</p>
        </div>
        </div>
        
    </div>
    <div class="d-flex">
        <div class="card border-warning mb-3" style="max-width: 18rem;">
            <div class="card-header">頁眉</div>
            <div class="card-body">
            <h6 class="card-title">Warning 卡片標(biāo)題</h6>
            <p class="card-text">card-text 卡片文字內(nèi)容</p>
            </div>
            </div>
            <div class="card border-info mb-3" style="max-width: 18rem;">
            <div class="card-header">頁眉</div>
            <div class="card-body">
            <h6 class="card-title">Info 卡片標(biāo)題</h6>
            <p class="card-text">card-text 卡片文字內(nèi)容</p>
            </div>
            </div>
            <div class="card border-light mb-3" style="max-width: 18rem;">
            <div class="card-header">頁眉</div>
            <div class="card-body">
            <h6 class="card-title">Light 卡片標(biāo)題</h6>
            <p class="card-text">card-text 卡片文字內(nèi)容</p>
            </div>
            </div>
            <div class="card border-dark mb-3" style="max-width: 18rem;">
            <div class="card-header">頁眉</div>
            <div class="card-body text-dark">
            <h6 class="card-title">Dark 卡片標(biāo)題</h6>
            <p class="card-text">card-text 卡片文字內(nèi)容</p>
            </div>
            </div>
    </div>

Bootstrap中如何使用Card卡片組件

限于篇幅，僅展示前面一部分邊框圖片。

5.2 Mixin通用類

也可以依照需求更改卡片頁首、頁尾的邊框，并能使用bg-transparent來移除它們的background-color。

 <div class="card border-success mb-3" style="max-width: 26rem;">
        <div class="card-header bg-transparent border-success">頁眉</div>
        <div class="card-body text-success">
        <h6 class="card-title">Success卡片標(biāo)題</h6>
        <p class="card-text">
            注意card-body使用了 text-success"，頁腳使用了bg-transparent border-success
        </p>
        </div>
        <div class="card-footer bg-transparent border-success">頁腳</div>
        </div>

Bootstrap中如何使用Card卡片組件

“Bootstrap中如何使用Card卡片組件”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

標(biāo)題名稱：Bootstrap中如何使用Card卡片組件
文章路徑：http://chinadenli.net/article12/ppjogc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、電子商務(wù)、網(wǎng)站內(nèi)鏈、商城網(wǎng)站、網(wǎng)站設(shè)計公司、App開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Bootstrap中如何使用Card卡片組件

1 bootstrap 卡片介紹

2 卡片的結(jié)構(gòu)

2.1 完整的卡片結(jié)構(gòu)示例

2.1 卡片的頁眉和頁腳

2.1.1 簡單卡片

2.1.2 使用引用用于名人名言

2.1.3 頁眉頁腳一起使用

2.2 圖像的使用

2.2.1 圖像在頂部或在底部

2.2.2 圖像作為卡片背景

2.2.3 圖像在左側(cè)

2.3 卡片的主體

2.3.1 標(biāo)題和副標(biāo)題

2.3.2 文本內(nèi)容和鏈接

2.4 列表群組

2.5 混合樣式

3 卡片的排版及寬度

3.1 使用網(wǎng)格

3.2 使用通用類

3.3 使用自定義CSS

3.4 卡片中的文本對齊

4 帶選項卡的卡片

5 卡片樣式

5.1 背景和顏色

5.2 邊框和顏色

5.2 Mixin通用類