Bootstrap5 卡片

于 2024-09-02 10:42:16 发布
阅读量235 收藏 1
点赞数 3
文章标签： bootstrap 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/141809392
版权

https://getbootstrap.com/docs/5.3/components/card/

卡片是一种灵活且可扩展的内容容器。它包括了头部和尾部的选项，各种各样的内容，上下文背景颜色，以及强大的显示选项。
可以通过.card 与 .card-body类快速创建一个简单的卡片。

创建基本的卡片

外部包装器需要基类.card，而内容可以放置在 .card-body类修饰的元素内。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
        <div class="card">
        <div class="card-body">
          卡片的内容
        </div>
      </div>   
  </div>

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

</html>

在这里插入图片描述

设置卡片固定的宽度：
在这里插入图片描述

完整示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container"> 
      <div class="card" style="width: 300px;">
        <div class="card-body">
          卡片的内容
        </div>
      </div> 
  </div>

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

</html>

在这里插入图片描述

页眉和页脚

https://getbootstrap.com/docs/5.3/components/card/#header-and-footer

通过.card-header类添加页眉，.card-footer类添加页脚。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
      <div class="card" style="width: 300px;">
        <div class="card-header">页眉</div>
        <div class="card-body">
          卡片的内容
        </div>
        <div class="card-footer">页脚</div>
      </div>
  </div>

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

</html>

在这里插入图片描述

带有标题、文本和链接的卡片

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
      <div class="card" style="width: 300px;">
        <div class="card-header">页眉</div>
        <div class="card-body">
          <h4 class="card-title">卡片标题</h4>
          <p class="card-text">卡片的文本</p>
          <a href="#" class="card-link">卡片链接</a>
        </div>
        <div class="card-footer">页脚</div>
      </div>  
  </div>

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

</html>

在这里插入图片描述

卡片图像

https://getbootstrap.com/docs/5.3/components/card/#images

可以给<img>元素添加.card-img-top 类，使图片位于文字上方，添加.card-img-bottom类使图片位于文字下方。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
      <div class="card" style="width: 300px;">
        <div class="card-header">页眉</div>
        <img src="mudan.png" alt="" class="card-img-top">
        <div class="card-body">
          <h4 class="card-title">卡片标题</h4>
          <p class="card-text">卡片的文本</p>
          <a href="#" class="card-link">卡片链接</a>
        </div>
        <div class="card-footer">页脚</div>
      </div>  
  </div>

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

</html>

在这里插入图片描述

图像作为卡片背景

https://getbootstrap.com/docs/5.3/components/card/#image-overlays

将图像转换为卡片的背景，并使用.card-img-overlay类叠加卡片的文字。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">  
      <div class="card" style="width: 300px;">
        <img src="mudan.png" alt="" class="card-img">
        <div class="card-body card-img-overlay">
          <h4 class="card-title">卡片标题</h4>
          <p class="card-text">卡片的文本</p>
          <a href="#" class="card-link">卡片链接</a>
        </div>
      </div>   
  </div>

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

</html>

在这里插入图片描述

设置卡片的背景颜色

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
      <div class="card bg-success" style="width: 300px;">
        <div class="card-body">
          <h4 class="card-title">卡片标题</h4>
          <p class="card-text">卡片的文本</p>
          <a href="#" class="card-link">卡片链接</a>
        </div>
      </div>  
  </div>

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

</html>

在这里插入图片描述

在卡片中添加列表组

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">  
      <div class="card bg-success" style="width: 300px;">
        <div class="card-body">
          <h4 class="card-title">卡片标题</h4>
          <p class="card-text">卡片的文本</p>
          <a href="#" class="card-link">卡片链接</a>
          <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>
      </div>   
  </div>

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

</html>

在这里插入图片描述

卡片组

https://getbootstrap.com/docs/5.3/components/card/#card-groups

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <div class="card-group">
      <div class="card bg-primary" style="width: 300px;">
        <div class="card-header">这是页眉</div>
        <div class="card-body">
          <h4 class="card-title">卡片标题</h4>
          <p class="card-text">卡片的文本</p>
          <a href="#" class="card-link">卡片链接</a>
        </div>
        <div class="card-footer">这是页脚</div>
      </div>

      <div class="card bg-success" style="width: 300px;">
        <div class="card-header">这是页眉</div>
        <div class="card-body">
          <h4 class="card-title">卡片标题</h4>
          <p class="card-text">卡片的文本</p>
          <a href="#" class="card-link">卡片链接</a>
        </div>
        <div class="card-footer">这是页脚</div>
      </div>

      <div class="card bg-info" style="width: 300px;">
        <div class="card-header">这是页眉</div>
        <div class="card-body">
          <h4 class="card-title">卡片标题</h4>
          <p class="card-text">卡片的文本</p>
          <a href="#" class="card-link">卡片链接</a>
        </div>
        <div class="card-footer">这是页脚</div>
      </div>
    </div>

  </div>

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

</html>

在这里插入图片描述

听海边涛声
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap 5 卡片
csbysj2020的博客
06-28 447
Bootstrap 5 的卡片组件是一个强大的工具，可以轻松地创建各种布局和样式的卡片。通过定制和组合不同的类和样式，可以创建出满足不同需求的设计。
Bootstrap5学习笔记
weixin_48778425的博客
10-20 1064
一、布局 1.1 网格 先div.container，再div.row + div.col，例如col-6，col-md-2代表当宽度大于md≥768px才生效 1.2 列 掌握垂直对齐 + 水平对齐 + offset列偏移 + 独立列的示例（演示图片+环绕文字） 1.3 列填充 写在row上，gx-5 水平方向，gy-5 垂直方向间隙，g-5 水平垂直同时都有列间隙，g-0 是无间隙 二、页面内容 2.1 排版 标题 + 显示标题（比h1-h6还大）+ 内联文本元素（下划线，删除线，斜体等）+ 列
Bootstrap5 卡片讲解
qq_65552364的博客
06-05 2755
在 Bootstrap5 中，通过类 .card 与 .card-body 可以快速创建一个简单的卡片，卡片可以包含头部、内容、底部以及各种颜色设置，卡片采用 flexbox 构建，易于对齐，并可与其他 Bootstrap 组件很好地混合。卡片没有固定的起始宽度，因此它们会自然地填充其父元素的整个宽度。卡片支持各种内容，包括图像、文本、列表组、链接等 🚀卡片之二式：标题 在卡片的内容中我们可以通过类 .card-title 设置卡片的标题，通过类 .card-subtitle 设置卡片的字幕。如果将 ..
15Bootstrap5卡片
醉瑾_的博客
12-10 349
15Bootstrap5卡片 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>菜鸟教程Bootstrap5卡片</title> <link rel="sty
Bootstrap 5-卡片
m0_73839298的博客
09-21 293
• text-secondary（次要文本，灰色）• card-img-button（卡片图像底部）• card-img-top（卡片图像顶部）• text-primary（重要，蓝色）• text-success（成功，绿色）• text-warning（警告，黄色）• text-danger（危险，红色）• text-muted（静音，灰色）• bg-secondary（灰色）• text-light（浅灰色）• text-white（白色）• text-dark（深灰色）• bg-info（天蓝色）
Bootstrap组件——卡片
xun__xing的博客
07-29 4564
卡片一、卡片（card）1.基础卡片2.内容类型2.宽度设置3.文本对齐4.导航5. 图像6.文本放在图片身上7.水平排列8.卡片样式9.卡片组 一、卡片（card） 卡片是一个灵活的、可扩展的内容窗口，同时可以做出多种展示效果变体。 卡片没有特定的宽度width定义，除非另有定义声明，否则它们的真实宽度将是100%，您可以根据需要使用自定义CSS，引入栅格系统、定义栅格系统Sass mixins或其它程式进行更改。 1.基础卡片 <div class="row"> <div cla
Bootstrap的卡片组件相关知识
昊虹AI笔记
10-22 1537
Bootstrap的卡片组件相关知识
BootStrap 卡片
y4418的博客
05-08 716
1.卡片作为一个新式引入到BootStrap 4中，可能样式、标记和扩展属性不会很多（未来会不断扩充发展），但它仍然可以提供许多控制项和定义方法，由于我们使用了flex弹性布局，使得它们可以轻松对齐、并方便的与其它Bootstrap组件混合搭配使用。 2.下面是一个具有混合内容并固定了宽度的基本.card卡片使用范例，如果.card卡片如果没有定义宽度，将自然地填满父元素的全宽-利用这个属性，我们可以轻松的订制各种尺寸的卡片。 3..这个是卡片的代码，width就是设置容器的...
Bootstrap卡片
记录和分享属于我的“IT”时光
02-07 198
Bootstrap卡片
Window Performance API
Bruce__taotao的博客
08-28 1575
Window Performance API 是一组浏览器提供的接口，用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标，从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳，通常用于计算精确的时间差。例如，你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();
vue ref和reactive区别
灰海
08-25 6360
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
安防视频汇聚平台EasyCVR启动后无法访问登录页面是什么原因？
EasyCVR视频融合云平台的技术博客
08-27 658
以进程方式启动（./easycvr）时，清楚看到此时web端口【9004】被占用。更改端口后，EasyCVR视频汇聚平台可以正常访问了。
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 1569
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
后端输出二进制数据，前端fetch接受二进制数据，并转化为字符输出
cdcdhj的博客
09-01 249
在这个前端代码中，我们使用fetch API请求PHP脚本，并获取二进制数据。然后，我们将ArrayBuffer转换为字符串，以便在JavaScript中使用。在PHP中，你可以将字符串或其他数据类型转换为二进制数据，并通过HTTP响应发送给前端。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1018
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
vue3使用-watch监听总结
最新发布
weixin_44072254的博客
09-01 265
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
JavaWeb——前端工程化
m0_50460160的博客
08-30 751
通过解构赋值，可以访问到对象中的属性，并将其赋值给对应的变量，从而提高代码的可读性和可维护性;ES6 的解构赋值是一种方便的语法，可以快速将数组或对象中的值拆分并赋值给变量。该语句将数组 [1,2,3]中的第一个值赋值给a变量，第二个值赋值给b变量，第三个值赋值给c变量。ES6引入的模块化功能为JavaScript代码的组织和管理提供了更好的方式，不仅提高了程序的可维护性，还让JavaScript更方便地应用于大型的应用程序;并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动;
KEYSIGHT是德 Infiniium EXR系列 示波器
XLTYQYB的博客
08-29 1331
该系列的所有型号都集成了一个 10 位 ADC，并且在所有通道上同时提供 16 GSa/s 的采样率。高分辨率 ADC 的效用取决于示波器的前端底噪是否足够低以提供与之匹配的额外的量化电平空间。我们的低噪声前 端包含定制 IC，例如 130 纳米 BiCMOS IC（其中集成了用户可选的模拟滤波器），并且带宽可通过软件 许可证升级。使用硬件滤波时，噪声低至 43 μV，系统 ENOB 达到 9.0 位。Infiniium EXR系列 示波器 型号比较。垂直分辨率是 8 位示波器的 4 倍。
bootstrap 立体卡片
07-16
Bootstrap是一种流行的前端框架，它提供了一套易于使用的CSS和JavaScript组件，包括用于创建美观、响应式的网站布局。其中，立体卡片（Card with a Shadow）是Bootstrap中常用的一种设计元素，它通过简单的HTML结构和CSS样式，可以快速制作出带有阴影效果的卡片，常用于显示内容信息，如文章列表、产品展示等。 使用Bootstrap创建立体卡片的基本步骤如下： 1. 导入Bootstrap CSS和JS库到项目中。 2. 使用Bootstrap的`<div>`标签，并添加`.card`类作为基本容器，表示卡片。 3. 可以在`.card-body`里放上标题（`.card-title`）、描述（`.card-text`）和图片（`.card-img-top`）等元素。 4. 若要添加阴影效果，可以在`.card`元素内部使用`.shadow`类，Bootstrap默认提供了一些预设的阴影样式（如`.shadow-sm`，`.shadow-md`等），也可以自定义阴影深度。 ```html <div class="card shadow"> <img src="your-image-url" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">卡片标题</h5> <p class="card-text">这是一段描述文本。</p> </div> </div> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值