Bootstrap列表组与面板
2019-04-22 本文已影响0人
Leophen
列表组
1、列表组(基础列表组)
- 首先在<ul>上添加“list-group”类名
- 然后在<li>上添加“list-group-item”类名
代码示例:示例: 基础列表组.png<ul class="list-group"> <li class="list-group-item">列表1</li> <li class="list-group-item">列表2</li> <li class="list-group-item">列表3</li> </ul>
2、列表组(标记徽章)
- .badge:在<li>中添加带“badge”类名的<span>
示例: 列表组-标记徽章.png<ul class="list-group"> <li class="list-group-item"> <span class="badge">13</span>列表1 </li> </ul>
3、列表组(链接)
- 方法1:直接在<li>中添加<a href="##">XX</a>
示例: 带链接的列表组1.png<ul class="list-group"> <li class="list-group-item"> <a href="##">选项1</a> </li> <li class="list-group-item"> <a href="##">选项2</a> </li> <li class="list-group-item"> <a href="##">选项3</a> </li> </ul>
- 方法2:将<ul>与<li>换为<div>与<a>
示例: 带链接的列表组2.png<div class="list-group"> <a href="##" class="list-group-item">选项1</a> <a href="##" class="list-group-item">选项2</a> <a href="##" class="list-group-item">选项3</a> </div>
4、列表组(自定义列表组)
- .list-group-item-heading:用来定义列表项头部样式
- .list-group-item-text:用来定义列表项主要内容
示例: 自定义列表组.png<div class="list-group"> <a href="##" class="list-group-item"> <h4 class="list-group-item-heading">标题</h4> <p class="list-group-item-text">文本内容...</p> </a> </div>
5、列表组(状态设置)
- .active:表示当前状态(直接将此类名添加至选项中)
- .disabled:表示禁用状态(直接将此类名添加至选项中)
6、列表组(彩色列表组)
- .list-group-item-success:成功,背景色绿色
- .list-group-item-info:信息,背景色蓝色
- .list-group-item-warning:警告,背景色为黄色
- .list-group-item-danger:错误,背景色为红色
示例: 彩色列表组.png<div class="list-group"> <a href="##" class="list-group-item">默认</a> <a href="##" class="list-group-item list-group-item-success">成功</a> <a href="##" class="list-group-item list-group-item-info">信息</a> <a href="##" class="list-group-item list-group-item-warning">警告</a> <a href="##" class="list-group-item list-group-item-danger">错误</a> </div>
列表组
1、面板(基础面板)
- 首先在父<div>上添加“panel panel-default”类名
- 然后在子<div>上添加“panel-body”类名
代码示例:示例: 基础面板.png<div class="panel panel-default"> <div class="panel-body">基础面板</div> </div>
2、面板(自定义面板)
- .panel-heading:用来设置面板头部样式
- .panel-footer:用来设置面板尾部样式
示例: 自定义面板.png<div class="panel panel-default"> <div class="panel-heading">头部</div> <div class="panel-body">内容</div> <div class="panel-footer">尾部</div> </div>
3、面板(彩色面板)
- .panel-primary:重点蓝
- .panel-success:成功绿
- .panel-info:信息蓝
- .panel-warning:警告黄
- .panel-danger:危险红
示例: 彩色面板.png<div class="panel panel-primary"> <div class="panel-heading">头部</div> <div class="panel-body">内容</div> <div class="panel-footer">尾部</div> </div>