bootstrap常用

1.珊格清除浮动

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sol-xs-6 .col-sm-3ol-xs-6 .col-sm-3ol-xs-6 .col-sm-3ol-xs-6 .col-sm-3
m-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

2.字体颜色减淡

<p class="help-block">请上传文件</p>
3.引用样式，左侧线
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
4.帮助文本
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
5.字体颜色+背景颜色
<p class="alert-success">确认成功</p>
<p class="alert-danger">确认成功</p>
<p class="alert-info">确认成功</p>
<p class="alert-warning">确认成功</p>

 <p class="bg-primary">确认成功</p>
 <p class="bg-success">确认成功</p>
 <p class="bg-info">确认成功</p>
 <p class="bg-warning">确认成功</p>
 <p class="bg-danger">确认成功</p>

 <p class="text-muted">显示样式</p>
 <p class="text-primary">显示样式</p>
 <p class="text-success">显示样式</p>
 <p class="text-info">显示样式</p>
 <p class="text-warning">显示样式</p>
 <p class="text-danger">显示样式</p>
6.快速浮动
div class="pull-left">...</div>
<div class="pull-right">...</div>
7.居中
<div class="center-block" style="background-color: red;width: 500px;">adsfadsf</div>
<div class="center-block">...</div>
8特殊符号：

<ul class="pagination pagination-sm">
 <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>
结果如下所示：


<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>
结果如下所示：