本节课我们来开始学习 Bootstrap 的内容扩展管理器，卡片的使用方式，其中我分上下两部分来说明。
一．卡片（上）
- 卡片是一个内容扩展管理器，可以包含图片、列表、文本、链接等多种组合；
- 先使用.card 来构建卡片，然后可以使用.card-body 建立卡片主体内容；
<div class="card" style="width: 300px;"> <div class="card-body"> 卡片主体 </div> </div>
- 卡片主体标题可以使用.card-title(标题).card-subtitle(小标题)等；
<div class="card-body"> <h4 class="card-title">卡片标题</h4> <h6 class="card-subtitle text-muted">小标题</h6> </div>
- 卡片主体使用.card-text 代表文本内容；
<div class="card-body"> <p class="card-text">这里是卡片的文本内容！...</p> </div>
- 卡片主体使用.card-link 代表超链接；
<div class="card-body"> <a href="#" class="card-link">注册</a> <a href="#" class="card-link">登录</a> </div>
- 使用.card-img-top 可以设计一个带主题图片的内容管理器；
<div class="card" style="width: 300px"> <img class="card-img-top" src="img/bt.png" alt="bt"> <div class="card-body"> 这里是介绍 Bootstrap4.x 课程内容的文本！ </div> </div>
- 使用.card-header 设置一个列表组的标头；
<div class="card" style="width: 300px;"> <div class="card-header"> 列表标题 </div> <ul class="list-group list-group-flush"> <li class="list-group-item">列表 1</li> <li class="list-group-item">列表 2</li> <li class="list-group-item">列表 3</li> </ul> </div>
- 使用.card-footer 配合.card-header，负责页眉页脚；
<div class="card" style="width: 300px;"> <div class="card-header"> 页眉 </div> <div class="card-body"> 主体 </div> <div class="card-footer"> 页脚 </div> </div>
- 卡片默认是 100%显示的，可以使用栅格系统嵌套来固定卡片的布局；
<div class="container-fluid"> <div class="row"> <div class="col-sm-4"> ... </div> </div> </div>
- 也可以使用.w-25、.w-50、w-75、w-100 来设置卡片的显示百分比；
<div class="card w-25">
- 卡片支持文本的整体对齐和局部的对齐方式，采用.text-center 等；
<div class="card text-right"> <div class="card-body text-left">
一．卡片（下）
- 卡片使用.card-header-tabs 可以配合列表 ul 实现导航功能；
<div class="card text-center" style="width: 500px;"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item"> <a href="#" class="nav-link active">主页</a> </li> <li class="nav-item"> <a href="#" class="nav-link">内容</a> </li> <li class="nav-item"> <a href="#" class="nav-link disabled">关于</a> </li> </ul> </div> <div class="card-body"> ... </div> </div>
- 将 ul 中的文本改成按钮式：.nav-pills、.card-header-pills 实现按钮导航；
<ul class="nav nav-pills card-header-pills">
- 卡片中.card-img 插入一个整体的图片，再配合.card-img-overlay 实现背景；
- 这种做法并不是真的作为背景，而是通过定位，让文字浮动在图片上进行编辑；
<div class="card bg-info text-black w-75"> <img src="img/bt.png" alt="Bootstrap" class="card-img"> <div class="card-img-overlay"> <p>在图片上的文本</p> </div> </div>
- 卡片通过内部栅格，也可以实现左右水平排列的图文显示；
<div class="card w-75"> <div class="row"> <div class="col-sm-6"> <img src="img/bt.png" alt="Bootstrap" class="card-img"> </div> <div class="col-sm-6"> <div class="card-title">图片标题</div> <div class="card-text">图片文本</div> </div> </div> </div>
- 卡片可以定制自己的背景和颜色，这里并无组件样式，均为之前所配置；
<div class="card text-white bg-dark" style="width: 300px;"> <div class="card-header"> 标题 </div> <div class="card-body"> <p class="card-text">这里是卡片的文本内容！...</p> </div> </div>
- 卡片可以定制自己的边框，直接使用之前的边框组件样式即可；
<div class="card border-info" style="width: 300px;"> <div class="card-header text-info"> 标题 </div> <div class="card-body text-info"> <p class="card-text">这里是卡片的文本内容！...</p> </div> </div>
- 在.card 元素外层，构建一个.card-group 分组，可以紧紧将每个卡片贴在一起；
<div class="card-group"> <div class="card"> ...
- .card-group 本身就具有栅格系统，但会紧贴；对应的.card-deck，提供间隙；
<div class="card-deck"> <div class="card"> ...
- 有时，卡片的高度不一，上面两种会自动补全，换行也会留有巨大空隙；
- 这时，采用.card-columns 可以自我进行填充，均分空隙；
<div class="card-columns">
网友评论