学习bootstrap的day3

歇过了一个双休日，今天我继续学习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>