九、bootstrap進(jìn)度條、媒體對(duì)象、列表組、面板、Well、響應(yīng)式嵌入組件

知識(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>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 第5章 菜單、按鈕及導(dǎo)航 一、下拉菜單 小伙伴們注意,在Bootstrap框架中的下拉菜單組件是一個(gè)獨(dú)立的組件,根...
    凜0_0閱讀 5,043評(píng)論 0 66
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,810評(píng)論 25 708
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,836評(píng)論 18 139
  • Echo在Shirely離開北京的那天消失了。她那晚買了一個(gè)煎餅果子不加薄脆,她不愛吃薄脆。煎餅果子里加了一包衛(wèi)龍...
    Shakuntala閱讀 207評(píng)論 0 2
  • 【2017《此生此地》再版評(píng)論之二】 尋找屬于自己的那片森林 —— 評(píng)胡寶林散文集《此生此地》 ...
    陜西播報(bào)閱讀 319評(píng)論 0 0