bootstrap之panel
Bootstrap 是一个很受欢迎的前端框架,它使得我们可以更加快捷方便地实现一些基本样式,今天我们聊一聊 panel组件 和 列表组
- 不带标题的面板
<div class="panel panel-default">
<div class="panel-body">
面板内容
</div>
</div>
- 带标题的面板
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">面板的标题</h3>
</div>
<div class="panel-body">
面板内容
</div>
</div>
常用面板样式
<div class="panel panel-primary">主要面板</div>
<div class="panel panel-success">成功面板</div>
<div class="panel panel-info">信息面板</div>
<div class="panel panel-warning">警告面板</div>
<div class="panel panel-danger">危险面板</div>
显示效果:
- 面板与表格的结合
<div class="panel panel-default">
<div class="panel-heading">面板标题</div>
<table class="table">
表格内容
</table>
</div>
列表组
list-group-item样式为 li 标签有一个圆角边框
<ul class="list-group">
<li class="list-group-item">html</li>
<li class="list-group-item">css</li>
<li class="list-group-item">javascript</li>
</ul>
显示效果如下:
- 结合span标签,可以表示文章的点击量,或者比赛得分等等
<ul class="list-group">
<li class="list-group-item">html<span class="badge">32</span></li>
<li class="list-group-item">css<span class="badge">12</span></li>
<li class="list-group-item">javascript<span class="badge">56</span></li>
</ul>
显示效果如下:
要实现一个新闻列表的话,就用a标签来做一个列表组吧
a标签也有active(激活状态)和disabled(禁用状态),与按钮属性类似
<div class="list-group">
<a href="#" class="list-group-item active">html<span class="badge">32</span></a>
<a href="#" class="list-group-item disabled">css<span class="badge">32</span></a>
<a href="#" class="list-group-item">javascript<span class="badge">32</span></a>
</div>
效果展示:
