這是我參與更文挑戰的第21天，活動詳情查看：更文挑戰css

《Bootstrap5零基礎到精通》俺老劉原創，爭取天天更新一節。html

21.1 bootstrap 卡片介紹

Bootstrap的卡提供了一個靈活的、可擴展的內容容器，其中包含多種變體和選項。卡片被設計成儘量的少用一些標記和樣式，它們能夠更方便的對齊，並與其它的Bootstrap元件良好混合。預設中它並無margin，因此能夠依需求加入spacing通用類別。bootstrap

如下是一個具備混合內容和固定寬度的基本卡片示例。卡片若是沒有固定的寬度，那麼它們將天然填充其父元素的所有寬度。這能夠透過咱們的各類縮放選項輕鬆調整。下面是一個簡單的例子。markdown

<div class="card" style="width: 18rem;">
            <img src="../pic/5.jpg" class="card-img-top" alt="卡片的圖片寬度會自動設置"> <div class="card-body"> <h5 class="card-title">卡片標題</h5> <p class="card-text">卡片的內容可使用文本、列表、表格、表單、圖片等各類html元素</p> <a href="#" class="btn btn-primary">這是一個按鈕</a> </div> </div>
複製代碼

21.2 卡片的結構

21.2.1 完整的卡片結構示例

通常狀況下，咱們無須完整的卡片結構就能夠很好的使用一個卡片組件，如上例所示，一個完整的卡片包括頁眉、頁腳、圖片（此處指的是頁眉下面的圖片，與卡片同寬度）、主體、列表羣組五部分，其中主體可包含標題和文本。下面是一個內容俱全的示例，事實上，通常狀況下咱們根據須要使用卡片的一兩個元素就夠用了，下面示例僅是演示，後面咱們會逐一講解各個部分功能。post

<div class="card" style="width: 18rem;">
        <div class="card-header"> 卡片頁眉 </div>
        <img src="../pic/5.jpg" class="card-img-top" alt="卡片的圖片寬度會自動設置"> <div class="card-body"> <h5 class="card-title">卡片標題</h5> <p class="card-text">卡片的內容可使用文本、列表、表格、表單、圖片等各類html元素 <img src="../pic/7.jpg" class="card-img-top" alt="卡片主體內的圖片"> </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> 複製代碼

21.2.1 卡片的頁眉和頁腳

頁眉和頁腳不是必要的，與其餘內容相比，頁眉和頁腳文字顏色較淺，字體略小。另外還能夠經過通用類來調整其對齊方式，靈活使用能夠達到不少特殊的效果。學習

21.2.1.1 簡單卡片

<div class="card">
        <h5 class="card-header">通知</h5>
        <div class="card-body"> <h5 class="card-title">中秋節放假通知</h5> <p class="card-text">下週中秋節放假7天，給你們樂活如下.........</p> <a href="#" class="btn btn-primary">瞭解詳情</a> </div>
        </div>
複製代碼

21.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>
複製代碼

21.2.1.3 頁眉頁腳一塊兒使用

<div class="card text-center">
        <div class="card-header"> 名著推薦 </div>
        <div class="card-body"> <h5 class="card-title">《紅樓夢》</h5> <p class="card-text"> 《紅樓夢》是一部具備世界影響力的人情小說做品，舉世公認的中國古典小說巔峯之做， 中國封建社會的百科全書，傳統文化的集大成者。小說以賈、史、王、薛四你們族的興衰爲背景， 以賈府的家庭雜事、閨閣閒情爲脈絡，以賈寶玉、林黛玉、薛寶釵的愛情婚姻故事爲主線， 刻畫了以賈寶玉和金陵十二釵爲中心的正邪兩賦有情人的人性美和悲劇美。 經過家族悲劇、女兒悲劇及主人公的人生悲劇，揭示出封建末世危機。 </p> <a href="#" class="btn btn-primary">立刻閱讀</a> </div>
        <div class="card-footer text-muted"> 2 days ago </div>
        </div>
複製代碼

21.2.2 圖像的使用

21.2.2.1 圖像在頂部或在底部

圖像經過類card-img-top或card-img-bottom，設置顯示在卡片的頂部仍是底部，下面是兩個卡片，一個圖片在上，一個圖片在下。字體

<!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="card mb-2">
        <img src="../pic/5.jpg" class="card-img-top" alt="...">
        <div class="card-body">
        <h5 class="card-title">軟發佈 Win11 </h5>
        <p class="card-text">T
          微軟已宣佈將於 6 月 24 日舉行「What's next for Windows」活動，屆時將發佈下一代桌面操做系統 Win11 及其應用商店等內容。
        </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">飛利浦推出4K顯示器</h5>
        <p class="card-text">飛利浦推出 Momentum 4K 電競顯示器：專爲 Xbox 設計，售價過萬 
        </p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        <img src="../pic/7.jpg" class="card-img-bottom" alt="...">
        </div>

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

21.2.2.2 圖像做爲卡片背景

將圖片轉換爲卡片背景，併疊加卡片的文字。根據圖片，你能夠選擇是否須要額外的樣式或通用類別。flex

<!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="card card bg-dark text-white">
        <img src="../pic/7.jpg" class="card-img" alt="...">
        <div class="card-body card-img-overlay">
        <h5 class="card-title">微軟發佈 Win11 </h5>
        <p class="card-text">
          微軟已宣佈將於 6 月 24 日舉行「What's next for Windows」活動，屆時將發佈下一代桌面操做系統 Win11 及其應用商店等內容。
        </p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        </div>
        

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

注意，咱們經過bg-dark給卡片添加了一個黑色背景，text-white設置字體爲白色，在card-body中設置card-img-overlay爲背景色。也能夠不要card-body，直接用card-img-overlay"如上。ui

21.2.2.3 圖像在左側

結合使用網格以及通用類，可讓卡片以響應式的方法呈現水平狀態。在下面的示例中，咱們使用g-0移除網格的間隙，並使用col-md-*類別讓卡片在md斷點以後呈現水平。根據卡片內容，將可能會須要一些額外的調整。spa

<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"> <h5 class="card-title">春夏秋冬皆天然</h5> <p class="card-text"> 春夏秋冬皆天然,明月清風共我閒,有春風拂面的溫柔,也有美好故事的發生,又一個春天如約而至,溫柔的朝陽里布谷鳥聲聲呼喚,願普天同安康,迎接春天到來的簡... </p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div>
複製代碼

固然，你最好設置一下圖片寬度，不然容易發生溢出。

21.2.3 卡片的主體

21.2.3.1 標題和副標題

卡片的構造塊是.card-body。當你須要卡片中的填充部分時就使用它。

在<h*>標籤中添加card-title以使用卡片標題。
在<h*>標籤中加入card-subtitle以使用副標題。

若是card-title以及card-subtitle元件被放在card-body裏面，它們將會對齊良好。

21.2.3.2 文本內容和連接

文本內容能夠放置任何html元素和bootstrap的組件，如按鈕等，在a標籤中加入card-link並使鏈接彼此相鄰。

<div class="card" style="width: 18rem;">
        <div class="card-body"> <h5 class="card-title">微軟發佈 Win11</h5> <h6 class="card-subtitle mb-2 text-muted">科技動態</h6> <p class="card-text"> 微軟已宣佈將於 6 月 24 日舉行「What's next for Windows」活動，屆時將發佈下一代桌面操做系統 Win11 及其應用商店等內容。 </p> <a href="#" class="card-link">瞭解詳情</a> <a href="#" class="card-link">下載試用</a> </div>
        </div>
複製代碼

21.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>
複製代碼

21.2.5 混合樣式

混合並搭配多個內容形式，用來建立你所須要的卡片。如下示例將圖片樣式、塊、文字樣式以及列表羣組所有包裝在一個固定寬度的卡片中。

<div class="card" style="width: 18rem;">
<img src="../pic/cap.jpg" 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">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>
複製代碼

21.3 卡片的排版及寬度

卡片預設沒有特定的起始width，除非另有聲明，不然它們的寬度將是100%。

21.3.1 使用網格

使用網格，根據須要在列和行中包裝卡片。須要注意的是卡片默認是每一個卡片一行的，要想一行中顯示多個卡片，必須把幾個卡片放在一個div容器中且每行中的卡片總寬度不能超過屏幕寬度。網格中的row-cols-*一樣適用卡片。另外卡片默認是寬度相同，高度根據內容自動調整的，可是若是卡片擁有頁腳，則高度會自動調整到相同。下面給出一個完整例子。

<!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="row">
        <div class="col-sm-6">
        <div class="card">
        <div class="card-body">
          <h5 class="card-title">微軟發佈 Win11</h5>
          <p class="card-text">
            軟已宣佈將於 6 月 24 日舉行「What's next for Windows」活動，屆時將發佈下一代桌面操做系統 Win11 及其應用商店等內容。
          </p>
          <a href="#" class="btn btn-primary">瞭解詳情</a>
        </div>
        </div>
        </div>

        <div class="col-sm-6">
        <div class="card">
        <div class="card-body">
          <h5 class="card-title">飛利浦推出4K顯示器</h5>
          <p class="card-text">
            飛利浦推出 Momentum 4K 電競顯示器：專爲 Xbox 設計，售價過萬 
          </p>
          <a href="#" class="btn btn-primary">瞭解詳情</a>
        </div>
        </div>
        </div>
        </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>
複製代碼

21.3.2 使用通用類

使用可調整寬度大小的通用類來快速設置卡片的寬度。

使用網格 
使用網格，根據須要在列和行中包裝卡片。<!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="card w-75">
        <div class="card-body">
            <h5 class="card-title">微軟發佈 Win11</h5>
            <p class="card-text">
              軟已宣佈將於 6 月 24 日舉行「What's next for Windows」活動，屆時將發佈下一代桌面操做系統 Win11 及其應用商店等內容。
            </p>
            <a href="#" class="btn btn-primary">瞭解詳情</a>
        </div>
        </div>
        
        <div class="card w-50">
        <div class="card-body">
            <h5 class="card-title">飛利浦推出4K顯示器</h5>
            <p class="card-text">
              飛利浦推出 Momentum 4K 電競顯示器：專爲 Xbox 設計，售價過萬 
            </p>
            <a href="#" class="btn btn-primary">瞭解詳情</a>
        </div>
        </div>
       

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

須要注意的是，這裏的寬度值必須是預約的，預設包含25%，50%，75%，100%和auto，而不是隨意寫的。詳情見 Bootstrap5中文手冊通用類尺寸（Sizing）一節。

21.3.3 使用自定義CSS

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

使用網格 
使用網格，根據須要在列和行中包裝卡片。<!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="card" style="width: 30rem;">
        <div class="card-body">
            <h5 class="card-title">微軟發佈 Win11</h5>
            <p class="card-text">
              軟已宣佈將於 6 月 24 日舉行「What's next for Windows」活動，屆時將發佈下一代桌面操做系統 Win11 及其應用商店等內容。
            </p>
            <a href="#" class="btn btn-primary">瞭解詳情</a>
        </div>
        </div>
        
        <div class="card" style="width: 20rem;">
        <div class="card-body">
            <h5 class="card-title">飛利浦推出4K顯示器</h5>
            <p class="card-text">
              飛利浦推出 Momentum 4K 電競顯示器：專爲 Xbox 設計，售價過萬 
            </p>
            <a href="#" class="btn btn-primary">瞭解詳情</a>
        </div>
        </div>
       

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

21.3.4 卡片中的文本對齊

能夠透過文字對齊類別更改任何卡片的總體或特定部分的文本對齊方式。默認所有是局左（text-start）對齊的，能夠用card-text、text-end通用類使之居中對齊或居右對齊。通用類可用在card容器，也能夠單獨以用在標題、頁眉頁腳、主體等任意部分，若是同時使用，則單獨的覆蓋總體的。

<!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="row">
        <div class="col-sm-4">
        <div class="card text-center">
        <div class="card-header">
                總體居中
        </div>    
        <div class="card-body">
          <h5 class="card-title">微軟發佈 Win11</h5>
          <p class="card-text">
            軟已宣佈將於 6 月 24 日舉行「What's next for Windows」活動，屆時將發佈下一代桌面操做系統 Win11 及其應用商店等內容。
          </p>
          <a href="#" class="btn btn-primary">瞭解詳情</a>
        </div>
        </div>
        </div>

        <div class="col-sm-4">
            <div class="card">
            <div class="card-header text-center"">
                    頁眉、標題居中
            </div>    
            <div class="card-body">
              <h5 class="card-title  text-center">微軟發佈 Win11</h5>
              <p class="card-text">
                軟已宣佈將於 6 月 24 日舉行「What's next for Windows」活動，屆時將發佈下一代桌面操做系統 Win11 及其應用商店等內容。
              </p>
              <a href="#" class="btn btn-primary">瞭解詳情</a>
            </div>
            </div>
            </div>
            
            <div class="col-sm-4">
                <div class="card text-center">
                <div class="card-header">
                        總體居中中標題居左
                </div>    
                <div class="card-body">
                  <h5 class="card-title text-start">微軟發佈 Win11</h5>
                  <p class="card-text">
                    軟已宣佈將於 6 月 24 日舉行「What's next for Windows」活動，屆時將發佈下一代桌面操做系統 Win11 及其應用商店等內容。
                  </p>
                  <a href="#" class="btn btn-primary">瞭解詳情</a>
                </div>
                </div>
                </div>
        
        </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>
複製代碼

21.4 帶選項卡的卡片

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

<!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="card text-center">
        <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
        <li class="nav-item">
          <a class="nav-link" aria-current="true" href="#" data-bs-toggle="tab" data-bs-target="#nav-hot">熱門新聞</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#" data-bs-toggle="tab" data-bs-target="#nav-home">國內新聞</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">國外新聞</a>
        </li>
        </ul>
        </div>
           <div class="tab-content">
                <div class="card-body tab-pane  fade" id="nav-hot">
                <h5 class="card-title">熱點新聞</h5>
                <p class="card-text">熱點新聞</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
                
                <div class="card-body tab-pane  fade show active" id="nav-home">
                        <h5 class="card-title">國內新聞</h5>
                        <p class="card-text">國內熱點新聞</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>    
            </div>
        </div>

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

對於上面的代碼，只需通過兩處替換，就能夠換爲膠囊導航

<ul class="nav nav-tabs card-header-tabs">
複製代碼

替換爲

<ul class="nav nav-pills card-header-pills">
複製代碼

全部的

data-bs-toggle="tab"
複製代碼

替換爲

data-bs-toggle="pill"
複製代碼

21.5 卡片樣式

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

21.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">
        <h5 class="card-title">Primary</h5>
        <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">
        <h5 class="card-title">Secondary</h5>
        <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">
        <h5 class="card-title">Success</h5>
        <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">
        <h5 class="card-title">Danger</h5>
        <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">
        <h5 class="card-title">Warning</h5>
        <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">
        <h5 class="card-title">Info</h5>
        <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">
        <h5 class="card-title">Light</h5>
        <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">
        <h5 class="card-title">Dark</h5>
        <p class="card-text">顏色直接做用於card容器上</p>
        </div>
        </div>
      </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>
複製代碼

21.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"> <h5 class="card-title">Primary 卡片標題</h5> <p class="card-text">card-text 卡片文字內容</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"> <h5 class="card-title">Secondary 卡片標題</h5> <p class="card-text">card-text 卡片文字內容</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"> <h5 class="card-title">Success 卡片標題</h5> <p class="card-text">card-text 卡片文字內容</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"> <h5 class="card-title">Danger 卡片標題</h5> <p class="card-text">card-text 卡片文字內容</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"> <h5 class="card-title">Warning 卡片標題</h5> <p class="card-text">card-text 卡片文字內容</p> </div> </div> <div class="card border-info mb-3" style="max-width: 18rem;"> <div class="card-header">頁眉</div> <div class="card-body"> <h5 class="card-title">Info 卡片標題</h5> <p class="card-text">card-text 卡片文字內容</p> </div> </div> <div class="card border-light mb-3" style="max-width: 18rem;"> <div class="card-header">頁眉</div> <div class="card-body"> <h5 class="card-title">Light 卡片標題</h5> <p class="card-text">card-text 卡片文字內容</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"> <h5 class="card-title">Dark 卡片標題</h5> <p class="card-text">card-text 卡片文字內容</p> </div> </div> </div>
複製代碼

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

21.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"> <h5 class="card-title">Success卡片標題</h5> <p class="card-text"> 注意card-body使用了 text-success"，頁腳使用了bg-transparent border-success </p> </div>
        <div class="card-footer bg-transparent border-success">頁腳</div>
        </div>
       
複製代碼

今天的課程就到這裏，請關注我，及時學習俺老劉原創的《Bootstrap5零基礎到精通》第22節 Bootstrap5 Carousel 圖片輪播組件用法。

若是這篇文章對你有幫助，記得隨手點贊哦！

《Bootstrap5零基礎到精通》第21節 Bootstrap5 Card卡片組件用法