内容扩展管理器——卡片
卡片是一个内容扩展管理器,可以包含图片、列表、文本、链接等多种组合
一、卡片样式
1.先使用.card 来构建卡片,然后可以使用.card-body 建立卡片主体内容
<div class="card" style="300px;"> <div class="card-body">卡片主体</div> </div> <br>
2. ①卡片主体标题可以使用.card-title(标题).card-subtitle(小标题)等
②卡片主体使用.card-text 代表文本内容
③卡片主体使用.card-link 代表超链接
<div class="card" style=" 300px;"> <div class="card-body"> <h4 class="card-title">卡片标题</h4> <h6 class="card-subtitle text-muted">小标题</h6> <p class="card-text">这里是卡片的文本内容!...</p> <a href="#" class="card-link">注册</a> <a href="#" class="card-link">登录</a> </div> </div>
3.使用.card-img-top 可以设计一个带主题图片的内容管理器
<div class="card" style="300px;"> <img class="card-img-top" src="img/1.png" alt="bt"> <div class="card-body"> Hello! </div> </div>
4.①使用.card-header 设置一个列表组的标头
②使用.card-footer 配合.card-header,负责页眉页脚
<div class="card text-center" style="300px;"> <div class="card-header text-left">列表标题</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 class="card-footer text-right">页脚</div> </div>
5.卡片默认是 100%显示的,可以使用栅格系统嵌套来固定卡片的布局,也可以使用.w-25、.w-50、w-75、w-100 来设置卡片的显示百分比
6.卡片支持文本的整体对齐和局部的对齐方式,采用.text-center 等
7.卡片使用.card-header-tabs 可以配合列表 ul 实现导航功能
<div class="card text-center"style="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>
8.将 ul 中的文本改成按钮式:.nav-pills、.card-header-pills 实现按钮导航
<div class="card text-center"style="500px;"> <div class="card-header"> <ul class="nav nav-pills card-header-pills"> <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>
9.卡片中.card-img 插入一个整体的图片,卡片通过内部栅格,也可以实现左右水平排列的图文显示
<div class="card w-75"> <div class="row"> <div class="col-sm-6"> <img class="card-img" src="img/图书馆.png" alt="bt"> </div> <div class="col-sm-6"> <div class="card-title">图片标题</div> <div class="card-text">图片文本</div> </div> </div> </div>