知識(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"></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>