知識(shí)點(diǎn)：

1、進(jìn)度條
2、媒體對(duì)象
3、列表組
4、面板
5、響應(yīng)式嵌入組件
6、well

1、進(jìn)度條

1）默認(rèn)的進(jìn)度條

  <div class="progress">
      <div class="progress-bar" style="width:45%;">45%</div>
  </div>

2）情景變化的進(jìn)度條

  <div class="progress">
      <div class="progress-bar progress-bar-info" style="width:60%;">60%</div>
  </div>
  <div class="progress">
      <div class="progress-bar progress-bar-success" style="width:25%;">25%</div>
  </div>
  <div class="progress">
      <div class="progress-bar progress-bar-danger" style="width:45%;">45%</div>
  </div>
  <div class="progress">
      <div class="progress-bar progress-bar-warning" style="width:45%;">45%</div>
  </div>

3）條紋的進(jìn)度條 progress-striped

  <div class="progress progress-striped">
      <div class="progress-bar" style="width:45%;">45%</div>
  </div>

4）動(dòng)畫的進(jìn)度條 active

  <div class="progress progress-striped active">
      <div class="progress-bar" style="width:45%;">45%</div>
  </div>

5）堆疊的進(jìn)度條

  <div class="progress">
      <div class="progress-bar progress-bar-warning" style="width:45%;">45%</div>
      <div class="progress-bar progress-bar-success" style="width:25%;">25%</div>
  </div>

2、媒體對(duì)象

<div class="media">

   <a href="" class="pull-left">![](images/kittens.jpg)</a>
   <div class="media-body">
       <h4 class="media-heading">媒體標(biāo)題</h4>
       這是一些示例文本。這是一些示例文本。
       這是一些示例文本。這是一些示例文本。
       這是一些示例文本。這是一些示例文本。
       這是一些示例文本。這是一些示例文本。
       這是一些示例文本。這是一些示例文本。
   </div>
</div>

3、列表組

1）向列表組添加國(guó)徽

  <ul class="list-group">
      <li class="list-group-item"><a href="">免費(fèi)域名注冊(cè) <span class="badge pull-right">20</span></a></li>
      <li class="list-group-item"><a href="">免費(fèi) Window 空間托管</a></li>
      <li class="list-group-item"><a href="">每年更新成本</a></li>
  </ul>

2）向列表組添加鏈接

  <div class="list-group">
      <a href="" class="list-group-item active">免費(fèi)域名注冊(cè)</a>
      <a href="" class="list-group-item">免費(fèi) Window 空間托管</a>
      <a href="" class="list-group-item">每年更新成本</a>
  </div>

3）向列表組添加自定義內(nèi)容

  <ul class="list-group">
     <li class="list-group-item">Cras justo odio</li>
     <li class="list-group-item">Dapibus ac facilisis in</li>
     <li class="list-group-item">Morbi leo risus</li>
     <li class="list-group-item">Porta ac consectetur ac</li>
     <li class="list-group-item">Vestibulum at eros</li>
  </ul>

4、面板

1）面板標(biāo)題

  <div class="panel-heading">標(biāo)題</div>

2）面板腳注

  <div class="panel-footer text-right">by zichen</div>

3）面板主題

  <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>

4）帶表格的面板

  <div class="panel panel-default">
      <div class="panel-heading">Panel heading</div>
      <table class="table">
          <tr>
              <td>學(xué)號(hào)</td>
              <td>姓名</td>
              <td>年齡</td>
          </tr>
      </table>
  </div>

5）帶列表組的面板

  <div class="panel panel-danger">
      <div class="panel-heading">標(biāo)題</div>
      <div class="panel-body">面板內(nèi)容顯示區(qū)域</div>
      <ul class="list-group">
          <li class="list-group-item">免費(fèi)域名注冊(cè)</li>
          <li class="list-group-item">免費(fèi) Window 空間托管</li>
          <li class="list-group-item">圖像的數(shù)量</li>
          <li class="list-group-item">24*7 支持</li>
          <li class="list-group-item">每年更新成本</li>
      </ul>
      <div class="panel-footer text-right">by zichen</div>
  </div>

5、響應(yīng)式嵌入組件

根據(jù)被嵌入內(nèi)容的外部容器的寬度，自動(dòng)創(chuàng)建一個(gè)固定的比例，從而讓瀏覽器自動(dòng)確定 內(nèi)容的尺寸，能夠在各種設(shè)備上縮放。
這些規(guī)則可以直接用于<iframe>、<embed>、<video>和<object>元素。

   //16:9 響應(yīng)式
   <div class="embed-responsive embed-responsive-16by9">
        <embed width="100%" height="100%" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></embed>
   </div>
   //4:3 響應(yīng)式
   <div class="embed-responsive embed-responsive-4by3">
        <embed width="100%" height="100%" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></embed>
   </div>
    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
    </div>
    <div class="embed-responsive embed-responsive-4by3">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
    </div>

6、well

1）基本的well

  <div class="well">您好，我在大的 Well 中！</div>

2）尺寸大小 well-lg well-sm

  <div class="well well-lg">您好，我在大的 Well 中！</div>
  <div class="well well-sm">您好，我在大的 Well 中！</div>