Bootstrap4 卡片

最新推荐文章于 2023-10-22 11:08:53 发布
最新推荐文章于 2023-10-22 11:08:53 发布
阅读量378 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45116096/article/details/107248754
版权

简单的卡片
我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片，实例如下:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>简单的卡片</h2>
  <div class="card">
    <div class="card-body">简单的卡片</div>
  </div>
</div>

</body>
</html>

在这里插入图片描述
Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。

头部和底部
.card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>卡片头部和底部</h2>
  <div class="card">
    <div class="card-header">头部</div>
    <div class="card-body">内容</div> 
    <div class="card-footer">底部</div>
  </div>
</div>

</body>
</html>

在这里插入图片描述
多种颜色卡片
Bootstrap 4 提供了多种卡片的背景颜色类： .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <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>

在这里插入图片描述
标题、文本和链接
我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。 .card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>标题、文本和链接</h2>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">Some example text. Some example text.</p>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>
</div>

</body>
</html>

在这里插入图片描述
图片卡片
我们可以给 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom（图片在文字下方 来设置图片卡片：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>图片卡片</h2>
  <p>图片在头部 (card-img-top):</p>
  <div class="card" style="width:400px">
    <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%">
    <div class="card-body">
      <h4 class="card-title">John Doe</h4>
      <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
  </div>
  <br>
  
  <p>图片在底部(card-img-bottom):</p>
  <div class="card" style="width:400px">
    <div class="card-body">
      <h4 class="card-title">Jane Doe</h4>
      <p class="card-text">Some example text some example text. Jane Doe is an architect and engineer</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
    <img class="card-img-bottom" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%">
  </div>
</div>

</body>
</html>

在这里插入图片描述
在这里插入图片描述
如果图片要设置为背景，可以使用 .card-img-overlay 类:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>文字覆盖图片</h2>
  <p>如果图片要设置为背景，可以使用 .card-img-overlay 类:</p>
  <div class="card img-fluid" style="width:500px">
    <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%">
    <div class="card-img-overlay">
      <h4 class="card-title">John Doe</h4>
      <p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
  </div>
</div>

</body>
</html>

在这里插入图片描述

jhfsdhsgfsdggreqZa
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BootStrap 卡片
y4418的博客
05-08 708
1.卡片作为一个新式引入到BootStrap 4中，可能样式、标记和扩展属性不会很多（未来会不断扩充发展），但它仍然可以提供许多控制项和定义方法，由于我们使用了flex弹性布局，使得它们可以轻松对齐、并方便的与其它Bootstrap组件混合搭配使用。 2.下面是一个具有混合内容并固定了宽度的基本.card卡片使用范例，如果.card卡片如果没有定义宽度，将自然地填满父元素的全宽-利用这个属性，我们可以轻松的订制各种尺寸的卡片。 3..这个是卡片的代码，width就是设置容器的...
4 Bootstrap4组件——卡片
weixin_45884768的博客
03-17 2981
4 Bootstrap4组件——卡片1 卡片内容1.1 卡片标题1.2卡片主体1.2.1 文本1.2.2 超链接1.3 图片1.4 列表组1.4.1 基本结构1.4.2 列表标题1.4.3 列表页眉页脚2 响应式卡片2.1 使用栅格系统2.2 使用全局样式2.3 自定义样式 .card卡片组件是BootStrap 4新增的一组重要样式，它是一个灵活的、可扩展的内容管理器，可以包含图片、列表、文本、...
bootstrap卡片图文列表布局代码.zip
07-05
bootstrap卡片图文列表布局代码是一款基于jQuery跟Bootstrap实现的3种列表布局样式代码。
Bootstrap 4 中文开发手册 Cards（卡）
极客神殿
09-05 794
Bootstrap 的卡片提供了一个灵活且可扩展的内容容器，包含多种变体和选项。 关于 一个卡片是一个灵活的，可扩展的内容容器。它包括页眉和页脚的选项，各种内容，上下文背景颜色以及强大的显示选项。 如果您熟悉 Bootstrap 3，卡片可以替换我们的旧面板、水井和缩略图。与这些组件类似的功能可作为卡片的修饰符类使用。 示例 卡片尽可能少的标记和样式，但仍然设法提供大量的控制和定制。使用 flexbox 构建，它们可以轻松对齐并与其他 Bootstrap 组件良好混合。 以下是具有混合内容和固定宽度的基本卡
Bootstrap组件——卡片
xun__xing的博客
07-29 4389
卡片一、卡片（card）1.基础卡片2.内容类型2.宽度设置3.文本对齐4.导航5. 图像6.文本放在图片身上7.水平排列8.卡片样式9.卡片组 一、卡片（card） 卡片是一个灵活的、可扩展的内容窗口，同时可以做出多种展示效果变体。 卡片没有特定的宽度width定义，除非另有定义声明，否则它们的真实宽度将是100%，您可以根据需要使用自定义CSS，引入栅格系统、定义栅格系统Sass mixins或其它程式进行更改。 1.基础卡片 <div class="row"> <div cla
WEB前端网页设计-Bootstrap4 卡片
君逍遥o
04-11 683
WEB前端网页设计-Bootstrap4 卡片
Bootstrap 卡片
书香水墨
07-24 3070
一、Bootstrap 卡片(面板) 1.1 简单的卡片 我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片，实例如下: <div class="container"> <div class="card"> <div class="card-body">简单的卡片</div> &l...
Bootstrap -Card卡片
热门推荐
xiabenshu的博客
05-08 1万+
Cards（卡片） Bootstrap 提供了一个可伸缩可扩展的内容容器给多种变量和选择。 关于 卡片是一个灵活的、可扩展的内容容器。它包括用于页眉和页脚的选项、各种各样的内容、上下文背景颜色和强大的显示选项。如果您熟悉Bootstrap 3，卡将替换我们的旧面板、井和缩略图。与这些组件类似的功能可以作为卡片的修饰符类使用。 例子 卡片是用尽可能少的标记和样式构建的，但仍然能够交付大量的控制和定制...
Bootstrap系列之卡片（Cards）
老__L的博客
05-29 5775
Bootstrap卡片提供了一个灵活的、可扩展的内容容器，具有多个变体和选项。卡片是一种灵活的、可扩展的内容容器。它包括页眉和页脚选项、各种各样的内容、背景颜色和强大的显示选项。如果你熟悉Bootstrap 3，卡片可以代替我们的旧面板、井和缩略图。与这些组件类似的功能可用作纸牌的修饰类。卡片使用尽可能少的标记和样式，但仍然设法提供大量的控制和定制。建立与flexbox，他们提供容易对齐和混合好与其他Bootstrap组件。默认情况下它们没有空白，因此需要时使用间距实用程序。下面是一个混合内容和固定宽度的基
Bootstrap4卡片布局样式插件
ICode联盟
04-11 326
下载地址 一组漂亮的图文卡片式布局代码，基于Bootstrap4框架的扩展，一共有八种不同的卡片样式效果。主要特色响应式布局很容易自定义8种卡片样式Bootstrap4框架纯CSS3代码时尚的设计 dd:
bootstrap-card-layout
03-09
bootstrap-card-layout
11种样式表布局(包括不用表格的菜单、动态菜单、滚动条、卡片式的层布局等)
08-13
11种样式表布局(包括不用表格的菜单、动态菜单、滚动条、卡片式的层布局等)
Bootstrap4(十八)
shi199434的博客
12-18 322
Bootstrap4 折叠 Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。 实例 button data-toggle="collapse" data-target="#demo">折叠button> div id="demo" class="collapse">Lorem ipsum dolor text....div> 尝试一下
Bootstrap5 卡片讲解
qq_65552364的博客
06-05 2699
在 Bootstrap5 中，通过类 .card 与 .card-body 可以快速创建一个简单的卡片，卡片可以包含头部、内容、底部以及各种颜色设置，卡片采用 flexbox 构建，易于对齐，并可与其他 Bootstrap 组件很好地混合。卡片没有固定的起始宽度，因此它们会自然地填充其父元素的整个宽度。卡片支持各种内容，包括图像、文本、列表组、链接等 🚀卡片之二式：标题 在卡片的内容中我们可以通过类 .card-title 设置卡片的标题，通过类 .card-subtitle 设置卡片的字幕。如果将 ..
Bootstrap的卡片组件相关知识
昊虹AI笔记
10-22 1484
Bootstrap的卡片组件相关知识
bootstrap 卡片card图片布局
IT从业者
02-22 2904
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" /> <title>热卖商品分析-xxx V1.0.1</title> <link rel="stylesheet" ...
Bootstrap4(十六)
shi199434的博客
12-18 360
Bootstrap4 卡片 简单的卡片 我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片，实例如下: 实例 div class="card"> div class="card-body">简单的卡片div>div> 尝试一下 » Bootstrap4 的卡片类似 Bootstrap 3
bootstrap开发tab选项卡事例
菜刀居士的专栏
12-27 2984
bootstrap开发tab选项卡事例
Bootstrap4卡片组件
corn78的博客
05-10 1350
.card卡片组件是BootStrap4新增的一组重要样式，它是一一个灵活的、可扩展的内容器，包含了可选的卡片头和卡片脚、一个大范围的内容、上下文背景色以及强大的显示选项。 一、定义卡片 为元素添加.card类，定义一个卡片 如果.card卡片如果没有定义宽度，将自然地填满父元素的全宽 二、页眉 为元素添加.card-header类 三、主体 为元素添加.card-bodyr类 四、页脚 五、图片 .card-img-top 定义一张图片在卡片的顶部， .card-text定义文字在卡片中 .
bootstrap卡片
最新发布
05-25
Bootstrap卡片是一种常用于网页设计中的UI组件，它通常用于呈现一个内容块或者一个特定的信息。Bootstrap卡片具有以下特点： 1. 可以方便地创建响应式布局，适应不同大小的屏幕。 2. 可以自定义样式，包括颜色、字体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值