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>

結果如下所示：