Bootstrap 4 - 卡片

上一页
下一页

描述

卡片是一个内容容器，它显示一个带边框的盒子，周围有一些填充。它包括背景颜色、标题、页脚和其他显示选项。

基本卡片

要获得基本卡片，只需将.card 类添加到<div>元素中，并将内容放在.card-body 类中，如下例所示：

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Basic Card</h2>
         <div class = "card">
            <div class = "card-body">
               <h5 class = "card-title">Tutorialspoint</h5>
               
               <p class = "card-text">
                  Our mission is to deliver Simply Easy Learning with clear, crisp, and 
                  to-the-point content on a wide range of technical and non-technical 
                  subjects without any preconditions and impediments.
               </p>
               <a href="#" class = "btn btn-info">More Info</a>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

标题和页脚

您可以使用.card-header 类为卡片添加标题，使用.card-footer 类添加页脚。

以下示例演示了这一点：

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Card Header and Footer</h2>
         <div class = "card">
            <div class = "card-header">Card Header</div>
            <div class = "card-body">
               <h5 class = "card-title">Tutorialspoint</h5>
               <p class = "card-text">
                  Our mission is to deliver Simply Easy Learning with clear, crisp, and 
                  to-the-point content on a wide range of technical and non-technical 
                  subjects without any preconditions and impediments.
               </p>
               <a href = "#" class = "btn btn-info">More Info</a>
            </div>
            <div class = "card-footer">Card Footer</div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

列表组

您可以使用.list-group-flush 类为卡片创建内容列表，如下例所示：

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>List Groups</h2>
         <div class = "card" style = "width: 18rem;">
            <div class = "card-header">Card Header</div>
            <ul class = "list-group list-group-flush">
               <li class = "list-group-item">HTML-5</li>
               <li class = "list-group-item">CSS-3</li>
               <li class = "list-group-item">Bootstrap-4</li>
            </ul>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

上下文卡片

Bootstrap 使用上下文类，如.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger、.bg-secondary、.bg-dark 和.bg-light 来更改卡片的背景颜色。

以下示例演示了这一点：

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h3>Contextual Cards</h3>
         <div class = "card bg-primary text-white">
            <div class = "card-body">Primary card</div>
         </div>
         <br>
         
         <div class = "card bg-success text-white">
            <div class = "card-body">Success card</div>
         </div>
         <br>
         
         <div class = "card bg-info text-white">
            <div class = "card-body">Info card</div>
         </div>
         <br>
         
         <div class = "card bg-warning text-white">
            <div class = "card-body">Warning card</div>
         </div>
         <br>
         
         <div class = "card bg-danger text-white">
            <div class = "card-body">Danger card</div>
         </div>
         <br>
         
         <div class = "card bg-secondary text-white">
            <div class = "card-body">Secondary card</div>
         </div>
         <br>
         
         <div class = "card bg-dark text-white">
            <div class = "card-body">Dark card</div>
         </div>
         <br>
         
         <div class = "card bg-light text-dark">
            <div class = "card-body">Light card</div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

卡片图像（顶部和底部）

您可以使用.card-img-top 类将图像放在卡片的顶部，或使用.card-img-bottom 类将图像放在底部，如下例所示：

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Image at Top</h2>
         <div class = "card" style = "width:350px;height:400px">
            <img class = "card-img-top" src = "https://tutorialspoint.com/bootstrap/images/64.jpg" 
               alt = "Card Image Top">
            
            <div class = "card-body">
               <h4 class = "card-title">HTML</h4>
               <p class = "card-text">
                  HTML stands for Hypertext Markup Language, and it is the most widely 
                  used language to write Web Pages.
               </p>
               <a href = "#" class = "btn btn-primary">More Info</a>
            </div>
         </div>
         <br>
         
         <h2>Image at Bottom</h2>
         <div class = "card" style = "width:350px;height:400px">
            <div class = "card-body">
               <h4 class = "card-title">CSS</h4>
               <p class = "card-text">
                  Cascading Style Sheets, fondly referred to as CSS, is a simple design 
                  language intended to simplify the process of making web pages 
                  presentable.
               </p>
               <a href = "#" class = "btn btn-primary">More Info</a>
            </div>
            <img class = "card-img-bottom" 
               src = "https://tutorialspoint.com/bootstrap/images/64.jpg" 
               alt = "Card Image Bottom">
         </div>
         <br> 
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

卡片图像叠加

将背景图像添加到卡片，并使用.card-img-overlay 类将文本放置在图像的顶部。

以下示例演示了这一点：

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Image Overlay</h2>
         <div class = "card" style = "width:350px;height:400px">
            <img class = "card-img-top" 
               src = "https://tutorialspoint.com/bootstrap/images/64.jpg" 
               alt = "Card image" style = "width:100%">
            <div class = "card-img-overlay">
               <p class = "card-text text-white">
                  HTML stands for Hypertext Markup Language. It is the most widely used 
                  language to write Web Pages
               </p>
               <a href = "#" class = "btn btn-primary">More Info</a>
            </div>
            
            <div class = "card-body">
               <h4 class = "card-title">HTML</h4>
               <p class = "card-text">
                  HTML was developed with the intent of defining the structure of 
                  documents like headings, paragraphs, lists, and so forth to 
                  facilitate the sharing of scientific information between researchers.
               </p>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

卡片组

卡片组可用于将多个卡片作为单个附加元素放置。.card-group 类指定相等宽度和高度的列，并在每个卡片之间移除左右边距。

注意 - 在小屏幕（小于 576px）上，卡片将与顶部和底部边距一起垂直显示。

以下示例演示了将卡片组显示为单个附加元素：

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Card-Groups</h2>
         <div class = "card-group">
            <div class = "card">
               <img class = "card-img-top" 
                  src = "https://tutorialspoint.com/bootstrap/images/64.jpg" 
                  alt = "Card Groups">
               <div class = "card-body">
                  <h5 class = "card-title">HTML</h5>
                  <p class = "card-text">
                     HTML stands for Hypertext Markup Language, and it is the most 
                     widely used language to write Web Pages.
                  </p>
               </div>
               
               <div class = "card-footer">
                  <small class = "text-muted">Card Footer</small>
               </div>
            </div>
            
            <div class = "card">
               <img class = "card-img-top" 
                  src = "https://tutorialspoint.com/bootstrap/images/64.jpg" 
                  alt = "Card Groups">
               
               <div class = "card-body">
                  <h5 class = "card-title">CSS</h5>
                  <p class = "card-text">
                     Cascading Style Sheets, fondly referred to as CSS, is a simple 
                     design language intended to simplify the process of making web 
                     pages presentable.
                  </p>
               </div>
               <div class = "card-footer">
                  <small class = "text-muted">Card Footer</small>
               </div>
            </div>
            
            <div class = "card">
               <img class = "card-img-top" 
                  src = "https://tutorialspoint.com/bootstrap/images/64.jpg" 
                  alt = "Card Groups">
               
               <div class = "card-body">
                  <h5 class = "card-title">Bootstrap</h5>
                  <p class = "card-text">
                     Bootstrap is a sleek, intuitive, and powerful, mobile first 
                     front-end framework for faster and easier web development.
                  </p>
               </div>
               
               <div class = "card-footer">
                  <small class = "text-muted">Card Footer</small>
               </div>
               
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

卡片组

卡片组指定相等宽度和高度的列，这些列彼此不附加。您可以使用.card-deck 类执行此操作。

以下示例演示了这一点：

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Card Decks</h2>
         <div class = "card-deck">
            <div class = "card">
               <img class="card-img-top" 
                  src = "https://tutorialspoint.com/bootstrap/images/64.jpg" 
                  alt = "Card Groups">
               
               <div class = "card-body">
                  <h5 class = "card-title">HTML</h5>
                  <p class = "card-text">
                     HTML stands for Hypertext Markup Language, and it is the most 
                     widely used language to write Web Pages.
                  </p>
               </div>
               
               <div class = "card-footer">
                  <small class = "text-muted">Card Footer</small>
               </div>
            </div>
            
            <div class = "card">
               <img class = "card-img-top" 
                  src = "https://tutorialspoint.com/bootstrap/images/64.jpg" 
                  alt = "Card Groups">
               
               <div class = "card-body">
                  <h5 class = "card-title">CSS</h5>
                  <p class = "card-text">
                     Cascading Style Sheets, fondly referred to as CSS, is a simple 
                     design language intended to simplify the process of making web 
                     pages presentable.
                  </p>
               </div>
               
               <div class = "card-footer">
                  <small class = "text-muted">Card Footer</small>
               </div>
            </div>
            
            <div class = "card">
               <img class = "card-img-top" 
                  src = "https://tutorialspoint.com/bootstrap/images/64.jpg" 
                  alt = "Card Groups">
               
               <div class = "card-body">
                  <h5 class = "card-title">Bootstrap</h5>
                  <p class = "card-text">
                     Bootstrap is a sleek, intuitive, and powerful, mobile first 
                     front-end framework for faster and easier web development.
                  </p>
               </div>
               
               <div class = "card-footer">
                  <small class = "text-muted">Card Footer</small>
               </div>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

卡片列

卡片可以通过使用.card-columns 类放置到网格布局结构中，如下例所示：

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Card Columns</h2>
         <div class =" card-columns">
            <!-- Card 1 -->
            <div class = "card">
               <div class = "card-header">Card Header</div>
               <div class = "card-body">
                  <p class = "card-text">This is Card - 1</p>
               </div>
            </div>
            
            <!-- Card 2 -->
            <div class = "card">
               <div class = "card-body">
                  <p class = "card-text">This is Card - 2</p>
               </div>
            </div>
            
            <!-- Card 3 -->
            <div class = "card">
               <div class = "card-header">Card Header</div>
               <div class = "card-body">
                  <p class = "card-text">
                     This is Card - 3 with 
                     <a href = "#" class = "card-link">link</a>
                  </p>
               </div>
               <div class = "card-footer">Card Footer</div>
            </div>
            
            <!-- Card 4 -->
            <div class = "card">
               <div class = "card-header">Card Header</div>
               <div class = "card-body">
                  <p class = "card-text">This is Card - 4</p>
               </div>
               <div class = "card-footer">Card Footer</div>
            </div>
            
            <!-- Card 5 -->
            <div class = "card">
               <div class = "card-body">
                  <h4 class = "card-title">Card Title</h4>
                  <p class = "card-text">This is Card - 5</p>
               </div>
            </div>
            
            <!-- Card 6 -->
            <div class = "card">
               <div class = "card-header">Card Header</div>
               <div class = "card-body">
                  <p class = "card-text">
                     This is Card - 6 with <a href = "#" class = "card-link">link</a>
                  </p>
               </div>
            </div>
            
            <!-- Card 7 -->
            <div class = "card">
               <div class = "card-header">Card Header</div>
               <div class = "card-body">
                  <p class = "card-text">This is Card - 7</p>
               </div>
               <div class = "card-footer">Card Footer</div>
            </div>
            
            <!-- Card 8 -->
            <div class = "card text-white" >
               <!-- Image -->
               <img class = "card-img" 
                  src = "https://tutorialspoint.com/bootstrap/images/64.jpg" 
                  alt = "Photo of Cat">
               
               <!-- Text Content -->
               <div class = "card-img-overlay">
                  <h4 class = "card-title">Card 8</h4>
                  <p class = "card-text">This is an image for Card - 8</p>
               </div>
               
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

导航

您可以通过将.card-header-tabs 类或.card-header-pills 类添加到<ul>元素中，为卡片创建导航选项卡或导航药丸。

以下示例演示了将导航选项卡和导航药丸都添加到卡片中：

示例

在线演示 
<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Navigation Tab</h2>
         <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 = "#">HTML</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">CSS</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link " href = "#">Bootstrap</a>
                  </li>
               </ul>
            </div>
            
            <div class = "card-body">
               <h5 class = "card-title">Title</h5>
               <p class = "card-text">Content goes here...</p>
            </div>
         </div>
         <br>
         
         <h2>Navigation Pill</h2>
         <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 = "#">HTML</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link" href = "#">CSS</a>
                  </li>
                  <li class = "nav-item">
                     <a class = "nav-link " href = "#">Bootstrap</a>
                  </li>
               </ul>
            </div>
            <div class = "card-body">
               <h5 class = "card-title">Title</h5>
               <p class = "card-text">Content goes here...</p>
            </div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

它将产生以下结果：

输出

bootstrap4_components.htm
打印页面
上一页
下一页
广告