Bootstrap组件——卡片

最新推荐文章于 2025-03-18 15:04:32 发布
最新推荐文章于 2025-03-18 15:04:32 发布
阅读量5k 收藏 36
点赞数 3
分类专栏： Bootstrap 文章标签： bootstrap 卡片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xun__xing/article/details/107661792
版权
本文详细介绍卡片组件的设计原理，包括基础卡片、内容类型、宽度设置、文本对齐、导航、图像处理、文本放置、水平排列、卡片样式及卡片组的创建方式。通过实例展示了如何运用不同属性实现多样化的卡片展示效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

卡片

一、卡片（card）

卡片是一个灵活的、可扩展的内容窗口，同时可以做出多种展示效果变体。
卡片没有特定的宽度width定义，除非另有定义声明，否则它们的真实宽度将是100%，您可以根据需要使用自定义CSS，引入栅格系统、定义栅格系统Sass mixins或其它程式进行更改。

1.基础卡片

	<div class="row">
		<div class="col-lg-4">
			<div class="card">
				<div class="card-body">
					<h3 class="card-title">这是卡片的标题</h3>
					<h4 class="card-subtitle mb-3">这是卡片的幅标题</h4>
					<p class="card-text">这是卡片的文本内容，需要添加一个card-text的class</p>
					<a href="#" class="card-link">链接1</a>
					<a href="#" class="card-link">链接2</a>
				</div>
			</div>
		</div>

		<!-- 图片 -->
		<div class="col-lg-4">
			<div class="card">
				<img class="card-img-top" src="images/img_02.jpg" alt="">
				<div class="card-body">
					<p class="card-text">这是图片的说明会很长很长这是图片的说明会很长很长这是图片的说明会很长很长这是图片的说明会很长很长这是图片的说明会很长很长这是图片的说明会很长很长
					</p>
				</div>
			</div>
		</div>

		<!-- 列表组、页眉、页脚 -->
		<div class="col-lg-4">
			<div class="card">
				<div class="card-header">这是卡片的头部，也叫页眉</div>
				<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 class="card-footer">这是卡片的底部，也叫页脚</div>
			</div>
		</div>
	</div>

在这里插入图片描述

2.内容类型

头部：卡片的头部.card-header，也叫页眉
主体：如要在一个.card中装置带边框的内容时，使用.card-body样式，建立起卡片的内容主体
底部：卡片的底部.card-footer，也叫页脚

  1. 标题内容
  1. 通过.card-title和 <h*>组合，可以添加卡片标题。
  2. 将.card-link 与 <a>结合使用，可以方便添加平行的链接。
  3. 通过 .card-subtitle 和 <h*> 结合，可以添加副标题
  4. .card-title 和 .card-subtitle 组合放在 .card-body 中, 则可对齐主、副标题
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">
    	Some quick example text to build on the card title and
     	make up the bulk of the card's content.
     </p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

在这里插入图片描述

  1. 图片文字

.card-img-top 定义一张图片在卡片的顶部
.card-text定义文字在卡片中

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

在这里插入图片描述

  1. 列表组
    建立一个包含内容的列表组卡片
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

在这里插入图片描述

  1. 组合使用
	<div class="row mt-5">
		<div class="col-lg-4">
			<div class="card">
				<div class="card-header">陈数</div>
				<img class="card-img-top" src="images/img_03.jpg" alt="">
				<div class="card-body">
					<h5 class="card-title">这是卡片的标题</h5>
					<p class="card-text">
						这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
					</p>
					<a href="#" class="card-link btn btn-primary">链接1</a>
					<a href="#" class="card-link btn btn-info">链接2</a>
				</div>
				<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 class="card-footer">页脚</div>
			</div>
		</div>
	</div>

在这里插入图片描述

	<div class="row mt-5">
		<div class="col">
			<div class="card text-center">
				<div class="card-header">Featured</div>
				<div class="card-body">
					<h5 class="card-title">Special title treatment</h5>
					<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
					<a href="#" class="btn btn-primary">Go somewhere</a>
				</div>
				<div class="card-footer text-muted">2 days ago</div>
			</div>
		</div>
	</div>

在这里插入图片描述

2.宽度设置

	<div class="row mt-5">
		<div class="card" style="width: 20rem;">
			<div class="card-body">
				<h5 class="card-title">这是卡片的标题</h5>
				<p class="card-text">
					这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
				</p>
				<a href="#" class="card-link btn btn-primary">链接1</a>
			</div>
		</div>
	</div>

在这里插入图片描述

3.文本对齐

	<div class="row mt-5">
		<div class="col-lg-4">
			<div class="card text-left">
				<div class="card-body">
					<h5 class="card-title">左对齐</h5>
					<p class="card-text">
						这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
					</p>
					<a href="#" class="card-link btn btn-primary">链接1</a>
				</div>
			</div>
		</div>
		<div class="col-lg-4">
			<div class="card text-center">
				<div class="card-body">
					<h5 class="card-title">居中对齐</h5>
					<p class="card-text">
						这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
					</p>
					<a href="#" class="card-link btn btn-primary">链接1</a>
				</div>
			</div>
		</div>
		<div class="col-lg-4">
			<div class="card text-right">
				<div class="card-body">
					<h5 class="card-title">右对齐</h5>
					<p class="card-text">
						这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
					</p>
					<a href="#" class="card-link btn btn-primary">链接1</a>
				</div>
			</div>
		</div>
	</div>

在这里插入图片描述

4.导航

  1. 表格（nav-tabs）
<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="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

在这里插入图片描述

  1. 填满（nav-pills）
<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="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

在这里插入图片描述

5. 图像

选择在卡片的任何一端附加.cad-img-*，用卡片内容覆盖图像（如同背景），或者只是将图像置入到卡片当中

<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-img-bottom" src="..." alt="Card image cap">
</div>

在这里插入图片描述

6.文本放在图片身上

请注意，内容不应大于图像的高度。 如果内容大于图像，则内容将显示在图像外部.

<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

在这里插入图片描述

7.水平排列

在下面的示例中，我们使用.no-gutters删除网格排水沟，并使用.col-md- * 类使卡在md 断点处水平。

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

在这里插入图片描述

8.卡片样式

  1. 颜色
	<div class="row mt-5">
		<div class="col-3">
			<div class="card text-white bg-primary">
				<div class="card-header">卡片的头部</div>
				<div class="card-body">
					<h5 class="card-title">这是卡片的标题</h5>
					<p class="card-text">
						这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
					</p>
				</div>
			</div>
		</div>
		......
	</div>

在这里插入图片描述

  1. 边框
    使用 边框通用样式 来改变卡片的border-color 、 .text-{color} ，或者在父层的 .card 上显示内容。
	<div class="row mt-5">
		<div class="col-3">
			<div class="card border-primary">
				<div class="card-header">卡片的头部</div>
				<div class="card-body text-primary">
					<h5 class="card-title">这是卡片的标题</h5>
					<p class="card-text">
						这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
					</p>
				</div>
			</div>
		</div>
	</div>

在这里插入图片描述

  1. 页眉、页脚的边框
    更改卡上的页眉和页脚所需的边框，也能使用.bg-transparent删除其background-color背景颜色。
	<div class="row mt-5">
		<div class="col-3">
			<div class="card border-success">
				<div class="card-header bg-transparent border-success">卡片的头部</div>
				<div class="card-body text-primary">
					<h5 class="card-title">这是卡片的标题</h5>
					<p class="card-text">
						这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
					</p>
				</div>
				<div class="card-footer bg-transparent border-success">卡片的底部</div>
			</div>
		</div>
	</div>

在这里插入图片描述

9.卡片组

将多个卡片结为一个群组，使用他们具有相同的宽度和高度列。卡片组使用display: flex;来实现统一的布局。

  1. 连续
	<div class="row mt-5 card-group">
		<div class="card">
			<img class="card-img-top" src="images/img_03.jpg" alt="">
			<div class="card-body">
				<h5 class="card-title">这是卡片的标题</h5>
				<p class="card-text">
					这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
				</p>
				<p class="card-text"><small class="text-muted">2 days ago</small></p>
			</div>
		</div>
		......
	</div>

在这里插入图片描述

  1. 不连续
	<div class="row mt-5 card-deck">
		<div class="card">
			<img class="card-img-top" src="images/img_03.jpg" alt="">
			<div class="card-body">
				<h5 class="card-title">这是卡片的标题</h5>
				<p class="card-text">
					这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
				</p>
				<p class="card-text"><small class="text-muted">2 days ago</small></p>
			</div>
		</div>
		......
	</div>

在这里插入图片描述

  1. 瀑布流

將卡片包在.card-columns 中，可以將做出象 Masonry网站的瀑布式排列卡片效果，卡片是使用column属性，而不是基于 flexbox弹性布局，从而实现更方便实用的浮动对齐，顺序是从上到下、从左到右。
为了防止卡片排列突出栏目，我们必须为它们设置为 display: inline-block （当 column-break-inside: avoid 这个解决方案还没有生效时。

	<div class="row mt-5">
		<div class="card-columns">
			<div class="card">
				<img class="card-img-top" src="images/img_03.jpg" alt="">
				<div class="card-body">
					<h5 class="card-title">这是卡片的标题1</h5>
					<p class="card-text">
						这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
					</p>
					<p class="card-text"><small class="text-muted">2 days ago</small></p>
				</div>
			</div>
			<div class="card">
				<img class="card-img-top" src="images/img_04.jpg" alt="">
				<div class="card-body">
					<h5 class="card-title">这是卡片的标题2</h5>
					<p class="card-text">
						这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
					</p>
					<p class="card-text"><small class="text-muted">2 days ago</small></p>
				</div>
			</div>
			<div class="card">
				<img class="card-img-top" src="images/img_04.jpg" alt="">
				<div class="card-body">
					<h5 class="card-title">这是卡片的标题3</h5>
					<p class="card-text">
						这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
					</p>
					<p class="card-text"><small class="text-muted">2 days ago</small></p>
				</div>
			</div>
			<div class="card">
				<img class="card-img-top" src="images/img_04.jpg" alt="">
				<div class="card-body">
					<h5 class="card-title">这是卡片的标题4</h5>
					<p class="card-text">
						这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
					</p>
					<p class="card-text"><small class="text-muted">2 days ago</small></p>
				</div>
			</div>
			<div class="card">
				<img class="card-img-top" src="images/img_03.jpg" alt="">
				<div class="card-body">
					<h5 class="card-title">这是卡片的标题5</h5>
					<p class="card-text">
						这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一，需要添加一个card-text的class
					</p>
					<p class="card-text"><small class="text-muted">2 days ago</small></p>
				</div>
			</div>
		</div>
	</div>

在这里插入图片描述

BootStrap 卡片
y4418的博客
05-08 822
1.卡片作为一个新式引入到BootStrap 4中，可能样式、标记和扩展属性不会很多（未来会不断扩充发展），但它仍然可以提供许多控制项和定义方法，由于我们使用了flex弹性布局，使得它们可以轻松对齐、并方便的与其它Bootstrap组件混合搭配使用。 2.下面是一个具有混合内容并固定了宽度的基本.card卡片使用范例，如果.card卡片如果没有定义宽度，将自然地填满父元素的全宽-利用这个属性，我们可以轻松的订制各种尺寸的卡片。 3..这个是卡片的代码，width就是设置容器的...
bootstrap——bootstrapTable实现隐藏列的示例
08-31
BootstrapTable 是一个基于 Bootstrap 框架的前端数据展示组件，它允许用户以灵活、可交互的方式展示数据。在本文中，我们将详细讨论如何在 BootstrapTable 中实现隐藏列的功能。 首先，BootstrapTable 提供了 `...
bootstrap卡片图文列表布局代码.zip
07-05
bootstrap卡片图文列表布局代码是一款基于jQuery跟Bootstrap实现的3种列表布局样式代码。
Bootstrap的卡片组件相关知识
昊虹AI笔记
10-22 1864
Bootstrap的卡片组件相关知识
Bootstrap响应式卡片组件设计与应用
最新发布
weixin_42181686的博客
03-18 758
Bootstrap 是一个强大且流行的前端框架，它允许开发者快速而简便地构建响应式布局的网页。本章将带您入门 Bootstrap 的核心组件，为后续更深入的理解和应用打下坚实的基础。Bootstrap 是一个开源框架，采用 HTML、CSS 和 JavaScript 语言开发，它提供了一系列的预设样式和响应式组件，使得开发者能够轻松实现跨浏览器和跨设备的兼容性。利用其丰富的组件和自定义工具，能够快速开发出美观且功能齐全的网页。
4.10、Bootstrap V4自学之路-----组件---卡片
weixin_33932129的博客
03-24 248
为什么80%的码农都做不了架构师？>>> ...
前端必知必会-Bootstrap 5 卡片
qq_24018193的博客
10-09 1315
本文介绍了Bootstrap 5 卡片的使用，如有问题欢迎私信和评论。
HTML5兼容Bootstrap后台模板——美观实用
它的目标是提供一套统一的设计规范，并包含一些常用的界面元素和组件，如导航栏、按钮、表单、卡片、模态框等。Bootstrap的组件都是响应式的，能够在不同的设备上保持一致的布局和功能。 2. **HTML5的优势**: HTML5...
environment_conservation_demo_site:这是一个演示项目，展示了Bootstrap组件的使用
05-07
首先，让我们来详细探讨一下在这个演示项目中使用的四个关键Bootstrap组件： 1. **轮播（Carousel）**：Bootstrap的轮播组件是一种动态图像展示工具，通常用于展示一组图片或内容，用户可以通过左右箭头或自动播放...
Bootstrap前端源码模板——Wordpress网站UI主题发布
在Bootstrap中，组件如导航栏、按钮、表单、卡片等都是预设好的，开发者可以轻松地将这些组件组合起来构建复杂的用户界面。 在使用"Bloggit_v1.0.5_***_BootstrapWordpress前端源码模板"时，用户可以获得一个基于...
bootstrap-3.4.1-dist.zip,bootstrap-4.6.1-dist.zip
03-09
此外，Bootstrap 4对组件进行了重构，例如卡片（Cards）取代了原来的面板（Panels）、警告（Alerts）和模态（Modals）等，使其更加轻量级和灵活。JavaScript组件也得到了增强，比如加入了新的 Collapse 组件，用于...
Bootstrap卡片图文列表布局样式代码
06-11
基于jQuery和Bootstrap实现的卡片图文列表布局样式代码，包括普通的卡片布局、等高卡片布局等。
bootstrap-card-layout
03-09
bootstrap-card-layout
Bootstrap5 卡片讲解
qq_65552364的博客
06-05 3048
在 Bootstrap5 中，通过类 .card 与 .card-body 可以快速创建一个简单的卡片，卡片可以包含头部、内容、底部以及各种颜色设置，卡片采用 flexbox 构建，易于对齐，并可与其他 Bootstrap 组件很好地混合。卡片没有固定的起始宽度，因此它们会自然地填充其父元素的整个宽度。卡片支持各种内容，包括图像、文本、列表组、链接等 🚀卡片之二式：标题 在卡片的内容中我们可以通过类 .card-title 设置卡片的标题，通过类 .card-subtitle 设置卡片的字幕。如果将 ..
Bootstrap4 卡片
weixin_45116096的博客
07-10 455
简单的卡片 我们可以通过 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"
Bootstrap4卡片组件
corn78的博客
05-10 1410
.card卡片组件是BootStrap4新增的一组重要样式，它是一一个灵活的、可扩展的内容器，包含了可选的卡片头和卡片脚、一个大范围的内容、上下文背景色以及强大的显示选项。 一、定义卡片 为元素添加.card类，定义一个卡片 如果.card卡片如果没有定义宽度，将自然地填满父元素的全宽 二、页眉 为元素添加.card-header类 三、主体 为元素添加.card-bodyr类 四、页脚 五、图片 .card-img-top 定义一张图片在卡片的顶部， .card-text定义文字在卡片中 .
Bootstrap-Bootstrap官网卡片响应式布局
Holy
10-18 4422
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--视口的设置，让网页能等比例的缩放到对应设备中--> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!--告诉ie浏览器用最新内核去渲染
bootstrap卡片
lin1072368472的博客
02-16 623
卡片一种可伸缩可扩展的容器 ##卡片的设置 div.card 容器 （div.card指 div 容器加上class 下面文章不在声明） div.card-body 容器 父级是.card h*.card-title 卡片标签 可放在.card也可以放cark-body中 （h* 指 h1-h7） <div class="card"> <d...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞羽逐星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值