歇过了一个双休日,今天我继续学习bootstrap基础内容。
首先是面板。
<div class="panel panel-default">
<div class="panel-heading"><div class="panel-title">用户统计</div></div>
<div class="panel-body">lorem</div>
<div class="panei-footer">
<div class="small text-muted">更新于...</div>
</div>
</div>
default同样可以改为success,danger,info,warning等等,显示不同颜色。
还可以继续给这个面板框加上脚标(红色字体,可以使字体变小变淡)。绿色字体可以加大字码。
还有就是bootstrap表格样式。
可以在table标签后添加class为table即可。还可以设置分行的表格,样式为class="table table-striped"。还可以设置带有悬浮样式的表格,class="table table-hover"。可以给表格添加外边框,样式为class="table table-bordered"。
还可以对表格的每一行单独设置颜色,只需要在<tr>标签后面添加class="danger"等相应词语即可。
此外,还有一些其他的内容。
第一是添加页码。
<ul class="pagination">
<li><a href="#">上一页</a></li>
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">下一页</a></li>
</ul>
还有另外一种样式,适合简单的上下翻页。
<ul class="pager">
<li><a href="#">上一页</a></li>
<li class="disabled"><a href="#">下一页</a></li>
</ul>
disabled标签可以禁用翻页标志,active可以使其保持在激活状态。
还有就是表示相对路径面包线的做法。
用class="breadcrumb"加上<li>列表即可。同样也可以在相应地址上去掉a标签并且显示激活,作为导航。
还有就是标签label的用法。
<p>
<span class="label label-default">标签名称</span>
<span class="label label-danger">标签名称</span>
<span class="label label-info">标签名称</span>
</p>
也可以当做行内元素用到任何地方,包括正文里面。
还可以加入徽章,会根据环境颜色自动调节。
<span class="badge">lalala</span>
还可以添加提醒。
<div class="alert alert-danger"></div>
还可以制作列表。
<div class="list-group">
<a href="#" class="list-group-item">item1</a>
<a href="#" class="list-group-item">item2</a>
<a href="#" class="list-group-item">item3</a>
</div>