Cards
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
一卡是一个灵活的,可扩展的内容容器。它包括页眉和页脚选项、种类繁多的内容、上下文背景颜色和强大的显示选项。如果您熟悉 Bootstrap 3,卡片将取代我们旧的面板、井和缩略图。与这些组件类似的功能可用作卡片的修饰符类。
内容类型
卡片支持多种内容,包括图像、文本、列表组、链接等。以下是支持内容的示例。
.card是基类:
身体
卡片的构建块是.card-body
. 每当您需要卡片中的填充部分时都可以使用它。
.card-title是卡片的标题,.card-subtitle是卡片的副标题
例:
<!--卡片的构建块是.card-body. 每当您需要卡片中的填充部分时都可以使用它。
.card-title是卡片的标题,.card-subtitle是卡片的副标题
如果不指定宽度 会默认100% 因为是响应式
-->
<div class="card w-25 text-center">
<div class="card-body">
<h1class="card-title">card-title卡片标题</h1>
<h4class="card-subtitle">card-subtitle卡片副标题</h4>
card-body -- 卡片主题
</div>
</div>
卡片的结构:
卡片的构建主体如下:
头card-header
身体card-body
脚card-footer
卡片主体文本 card-text
例:
<!--
卡片的构建主体如下:
头card-header
身体card-body
脚card-footer
---------
卡片主体文本 card-text
-->
<div class="card w-25 text-center">
<div class="card-header">卡片头</div>
<div class="card-body">
<div class="card-text">卡片主体文本</div>
</div>
<div class="card-footer">卡片尾</div>
</div>
卡片的 链接 和 文本:
例:
<!--
链接 和 文本:
card-link 卡片链接
card-text 卡片主体文本
-->
<div class="card w-25 text-center">
<div class="card-header">卡片头</div>
<div class="card-body">
<div class="card-text">卡片主体文本</div>
<br>
<a class="card-link" href="#"><-联系博主</a>
<a href="#" class="card-link ">下一片-></a>
</div>
<div class="card-footer">卡片尾</div>
</div>
卡片 + 列表组
主要是列表 后面学才写...
<div class="card w-25 text-center">
<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>
<li class="list-group-item">深圳</li>
</ul>
<div class="card-footer">
<a href="#" class="card-link">查看二线城市···</a>
</div>
</div>
图片
.card-img 是基类
.card-img-top
将图像放置在卡片的顶部。
.card-img-top
将图像作为卡片的背景。
.card-img-top
将图像放置在卡片的底部。
<!--最简单的卡片图:-->
<div class="card w-25 text-center">
<div class="card-body ">
<img class="card-img" src="1.jpg">
</div>
<div class="card-header"> 我一路种下了蘑菇、只为让你知道回家的路。
<br>
<span class="d-block text-right">——迅捷斥候</span>
</div>
</div>
<!--
card-img-top
card-img-bottom
card-img-overlay
这仨自己设置试试看
-->
自己动手来个 栅格布局 来三个卡片list
<div class="container-fluid">
<div class="row">
<div class="col-4 text-center"><div class="card">
<div class="card-header"><span class="text-success">No.1</span> 中国</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">一轮:10</li>
<li class="list-group-item">二轮:8</li>
<li class="list-group-item">三轮:9</li>
</ul>
</div>
<div class="card-footer">©世界科技竞赛排行榜</div>
</div></div>
<div class="col-4 text-center"><div class="card">
<div class="card-header"><span class="text-info">No.2</span> 美国</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">一轮:6</li>
<li class="list-group-item">二轮:2</li>
<li class="list-group-item">三轮:3</li>
</ul>
</div>
<div class="card-footer">©世界科技竞赛排行榜</div>
</div></div>
<div class="col-4 text-center"><div class="card">
<div class="card-header"><span class="text-warning">No.3</span> 日本</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">一轮:5</li>
<li class="list-group-item">二轮:3</li>
<li class="list-group-item">三轮:2</li>
</ul>
</div>
<div class="card-footer">©世界科技竞赛排行榜</div>
</div></div>
</div>
</div>