加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > Web前端 > Bootstrap

Bootstrap 5 卡片

Bootstrap 2023-08-10 09:26:53小码哥的IT人生shichen

Bootstrap 5 卡片

卡片

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

基础的卡片

一张基础卡片是用 .card 类创建的，卡片中的内容有一个 .card-body 类：

示例代码：

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

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>基础的卡片</h2>
  <div class="card">
    <div class="card-body">基础的卡片</div>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

页眉和页脚

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

示例代码：

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

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>卡片页眉和页脚</h2>
  <div class="card">
    <div class="card-header">页眉</div>
    <div class="card-body">内容</div>
    <div class="card-footer">页脚</div>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

上下文卡片

如需为卡片添加背景颜色，请使用上下文类：

  1. .bg-primary
  2. .bg-success
  3. .bg-info
  4. .bg-warning
  5. .bg-danger
  6. .bg-secondary
  7. .bg-dark
  8. .bg-light

示例代码：

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>设置上下文类的</h2>
  <div class="card">
    <div class="card-body">Basic card</div>
  </div>
  <br>
  <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>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

标题、文本和链接

请使用 .card-title 将卡片标题添加到任意标题元素。如果 <p> 元素是 .card-body 中的最后一个子元素（或唯一一个子元素），则 .card-text 类用于移除 <p> 元素的底部边距。.card-link 类为任意链接添加蓝色和悬停效果。

示例代码：

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

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>卡片标题、文本和链接</h2>
  <p>请使用 .card-title 将卡片标题添加到任意标题元素。如果 p 元素是 .card-body 中的最后一个子元素（或唯一一个子元素），则 .card-text 类用于移除 p 元素的底部边距。.card-link 类为任意链接添加蓝色和悬停效果。</p>
  <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>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

卡片图像

将 .card-img-top 或 .card-img-bottom 添加到 <img>，可将图像放置在卡片的顶部或底部。

请注意，我们在 .card-body 之外添加了图像以跨越整个宽度：

示例代码：

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates 是一位程序员和工程师。一些示例文本。一些示例文本。</p>
    <a href="#" class="btn btn-primary">查看个人资料</a>
  </div>
</div>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>卡片图像</h2>
  <p>图像在上方 (card-img-top)：</p>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="/i/css/avatar.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">Bill Gates</h4>
      <p class="card-text">Bill Gates 是一位程序员和工程师。一些示例文本。一些示例文本。</p>
      <a href="#" class="btn btn-primary">查看个人资料</a>
    </div>
  </div>
  <br>
  <p>图像在下方 (card-img-bottom)：</p>
  <div class="card" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">Steve Jobs</h4>
      <p class="card-text">Steve Jobs 是一位程序员和工程师。一些示例文本。一些示例文本。</p>
      <a href="#" class="btn btn-primary">查看个人资料</a>
    </div>
    <img class="card-img-bottom" src="/i/css/avatar.png" alt="Card image" style="width:100%">
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

卡片图像叠加

将图像转换为卡片背景并使用 .card-img-overlay 在图像顶部添加文本：

示例代码：

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">一些示例文本。一些示例文本。</p>
    <a href="#" class="btn btn-primary">查看个人资料</a>
  </div>
</div>

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
  <h2>卡片图像叠加</h2>
  <p>将图像转换为卡片背景并使用 .card-img-overlay 在图像顶部添加文本：</p>
  <div class="card img-fluid" style="width:499px">
    <img class="card-img-top" src="/i/css/avatar.png" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">Bill Gates</h4>
      <p class="card-text">一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。</p>
      <a href="#" class="btn btn-primary">查看个人资料</a>
    </div>
  </div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024