Bootstrap 卡片

定义和使用

Bootstrap 中的卡片是带边框的框，其内容周围有一些填充；它包括页眉，页脚，内容，颜色等选项。

要创建 Bootstrap 基本卡片是使用 .card 类创建的，并且卡中的内容具有.card-body 类：

<div class="container">
 <div class="card">
   <div class="card-body">基本的卡片</div>
 </div>
</div>

尝试一下

输出结果如下：

基本的卡片

页眉和页脚

.card-header 类向卡片添加标题，.card-footer 类向卡片添加页脚：

<div class="container">
 <div class="card">
   <div class="card-header">页眉</div>
   <div class="card-body">内容</div>
   <div class="card-footer">页脚</div>
 </div>
</div>

尝试一下

输出结果如下：

页眉

内容

页脚

带有背景色的卡片

要为卡片添加背景颜色，可以使用 CSS 类名 .bg-primary，.bg-success，.bg-info，.bg-warning，.bg-danger，.bg-secondary，.bg-dark 和 .bg-light。

<div class="container">
 <div class="card">
   <div class="card-body">Basic card</div>
 </div>
 
 <div class="card bg-primary text-white">
   <div class="card-body">Primary card</div>
 </div>

 <div class="card bg-success text-white">
   <div class="card-body">Success card</div>
 </div>

 <div class="card bg-info text-white">
   <div class="card-body">Info card</div>
 </div>

 <div class="card bg-warning text-white">
   <div class="card-body">Warning card</div>
 </div>

 <div class="card bg-danger text-white">
   <div class="card-body">Danger card</div>
 </div>

 <div class="card bg-secondary text-white">
   <div class="card-body">Secondary card</div>
 </div>

 <div class="card bg-dark text-white">
   <div class="card-body">Dark card</div>
 </div>

 <div class="card bg-light text-dark">
   <div class="card-body">Light card</div>
 </div>
</div>

尝试一下

输出结果如下：

Basic card

Primary card

Success card

Info card

Warning card

Danger card

Secondary card

Dark card

Light card

标题，文字和链接

使用 .card-title 将名片标题添加到任何标题元素。.card-text 类用于删除 <p> 元素的底边距，如果它是 .card-body 中的最后一个子级（或唯一的子级）。 .card-link 类为任何链接添加蓝色，并具有悬停效果。

<div class="container">
 <div class="card">
   <div class="card-body">
     <h4 class="card-title">卡标题</h4>
     <p class="card-text">一些示例文本 一些示例文本</p>
     <a href="#" class="card-link">卡链接</a>
     <a href="#" class="card-link">另一个链接</a>
   </div>
 </div>
</div>

尝试一下

输出结果如下：

卡标题

一些示例文本。一些示例文本。

卡链接另一个链接

卡片图像

将 .card-img-top 或 .card-img-bottom 添加到 <img>，以将图片放在卡内的顶部或底部；请注意，我们已在 .card-body 外部添加了图片以覆盖整个宽度：

<div class="container">
   <div class="card" style="width:400px">
      <img style="width:100%" class="card-img-top" src="img_avatar1.png" alt="Card image">
      <div class="card-body">
         <h4 class="card-title">张三</h4>
         <p class="card-text">一些内容示例</p>
         <a href="#" class="btn btn-primary">个人资料</a>
      </div>
   </div>
   <div class="card" style="width:400px">
      <div class="card-body">
         <h4 class="card-title">卡丽</h4>
         <p class="card-text">一些内容示例</p>
         <a href="#" class="btn btn-primary">个人资料</a>
      </div>
      <img style="width:100%" class="card-img-bottom" src="img_avatar6.png" alt="Card image">
   </div>
</div>

尝试一下

延伸链接

将 .stretched-link 类添加到卡片内的链接中，它将使整个卡片可单击和可悬停（卡将充当链接）：

<a href="#" class="btn btn-primary stretched-link">个人资料</a>

尝试一下

图片背景

将图像变成卡片背景，并使用 .card-img-overlay 在图像顶部添加文本：

<div class="container">
   <div class="card" style="width:500px">
      <img style="width:100%" class="card-img-top" src="img_avatar1.png" alt="Card image">
      <div class="card-img-overlay">
         <h4 class="card-title">张三</h4>
         <p class="card-text">一些内容示例一些内容示例</p>
         <a href="#" class="btn btn-primary">个人资料</a>
      </div>
   </div>
</div>

尝试一下

输出结果如下：

张三

一些内容示例一些内容示例一些内容示例一些内容示例一些内容示例一些内容示例

个人资料

多列卡片

.card-columns 类创建类似于砖石的纸牌网格（如pinterest）；当您插入更多卡时，布局将自动调整。

注意：卡片垂直显示在小屏幕（小于576像素）上：

<div class="container">
 <div class="card-columns">
   <div class="card bg-primary">
     <div class="card-body text-center">
       <p class="card-text">第一张卡中的一些文字</p>
     </div>
   </div>
   <div class="card bg-warning">
     <div class="card-body text-center">
       <p class="card-text">第二张卡中的一些文字</p>
     </div>
   </div>
   <div class="card bg-success">
     <div class="card-body text-center">
       <p class="card-text">第三张卡中的一些文字</p>
     </div>
   </div>
   <div class="card bg-danger">
     <div class="card-body text-center">
       <p class="card-text">第四张卡中的一些文字</p>
     </div>
   </div>
   <div class="card bg-light">
     <div class="card-body text-center">
       <p class="card-text">第五张卡中的一些文字</p>
     </div>
   </div>
   <div class="card bg-info">
     <div class="card-body text-center">
       <p class="card-text">第六张卡中的一些文字</p>
     </div>
   </div>
 </div>
</div>

尝试一下

输出结果如下：

第一张卡中的一些文字

第二张卡中的一些文字

第三张卡中的一些文字

第四张卡中的一些文字

第五张卡中的一些文字

第六张卡中的一些文字

宽高相等的卡片

.card-deck 类创建高度和宽度相等的卡片网格；当您插入更多卡片时，布局将自动调整。

注意：卡片垂直显示在小屏幕（小于576像素）上：

<div class="container">
   <div class="card-deck">
      <div class="card bg-primary">
         <div class="card-body text-center">
            <p class="card-text">第一张卡中的一些文字</p>
         </div>
      </div>
      <div class="card bg-warning">
         <div class="card-body text-center">
            <p class="card-text">第二张卡中的一些文字</p>
         </div>
      </div>
      <div class="card bg-success">
         <div class="card-body text-center">
            <p class="card-text">第三张卡中的一些文字</p>
         </div>
      </div>
      <div class="card bg-danger">
         <div class="card-body text-center">
            <p class="card-text">第四张卡中的一些文字</p>
         </div>
      </div>
   </div>
</div>

尝试一下

输出结果如下：

第一张卡中的一些文字

第二张卡中的一些文字

第三张卡中的一些文字

第四张卡中的一些文字

卡片组

.card-group 类似于 .card-deck；唯一的区别是 .card-group 类删除了每张卡之间的左右空白。

注意：卡片会垂直显示在小屏幕（小于576像素）上，并具有上下边距：

<div class="container">
   <div class="card-group">
      <div class="card bg-primary">
         <div class="card-body text-center">
            <p class="card-text">第一张卡中的一些文字</p>
         </div>
      </div>
      <div class="card bg-warning">
         <div class="card-body text-center">
            <p class="card-text">第二张卡中的一些文字</p>
         </div>
      </div>
      <div class="card bg-success">
         <div class="card-body text-center">
            <p class="card-text">第三张卡中的一些文字</p>
         </div>
      </div>
      <div class="card bg-danger">
         <div class="card-body text-center">
            <p class="card-text">第四张卡中的一些文字</p>
         </div>
      </div>
   </div>
</div>

尝试一下

输出结果如下：

第一张卡中的一些文字

第二张卡中的一些文字

第三张卡中的一些文字

第四张卡中的一些文字

定义和使用

页眉和页脚

带有背景色的卡片

标题，文字和链接

卡标题

卡片图像

延伸链接

图片背景

张三

多列卡片

宽高相等的卡片

卡片组

相关页面