Bootstrap3.0（进度条、媒体对象、列表组、面板）

Bootstrap3.0学习第十六轮（进度条、媒体对象、列表组、面板）

前言

阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看/article/4711879.html

本文主要来讲解以下内容

1.进度条

2.媒体对象

3.列表组

4.面板

5.总结

进度条

提供工作或动作的实时反馈，只用简单且灵活的进度条。

基本案例

默认的进度条。

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>

View Code

列表组

列表组是灵活又强大的组件，不仅仅用于显示简单的成列表的元素，还用于复杂的定制的内容。

基本案例

最简单的列表只是无顺序列表，列表条目和正确的类。

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

徽章

给列表组加入徽章，它会自动地放在右面。

<ul class="list-group">
<li class="list-group-item"><span class="badge">14</span>Cras justo odio</li>
<li class="list-group-item"><span class="badge">33</span>Dapibus ac facilisis in</li>
<li class="list-group-item"><span class="badge">11</span>Morbi leo risus</li>
<li class="list-group-item"><span class="badge">41</span>Porta ac consectetur ac</li>
<li class="list-group-item"><span class="badge">21</span>Vestibulum at eros</li>
</ul>

链接条目

用

<a>

标签而不是

<li>

标签（也就是说父元素是

<div>

而不是

<ul>

）。没必要给每个元素都加一个父元素。

<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

定制内容

在里面可以加几乎任何HTML，甚至是像下面的带链接的列表组。

<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Cras sit amet nibh libero, in gravida nulla. n vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Cras sit amet nibh libero, in gravida nulla. n vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">Cras sit amet nibh libero, in gravida nulla. n vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</a>
</div>

面板

虽然不总是必须，但是某些时候你可能需要将某些内容放到一个盒子里。对于这种情况，可以试试面板组件。

基本案例

默认的

.panel

所做的只是提供基本的边界和内部，来包含内容。

<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>

带标题的面版

用

.panel-heading

可以简单地加入一个标题容器。您也可以用

<h1>

-

<h6>

和

.panel-title

类加入预定义样式的标题。

<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>

带脚注的面版

把按钮或次要的文本放入

.panel-footer

。注意面版的脚注不会从带意义的替换中继承颜色，因为它不是在前面的内容。

<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>

有意义的替换

像其它组件一样，可以简单地通过加入有意义的状态类，给特定的内容使用更有意义的面版。

<div class="panel panel-primary">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>

带表格的面版

为了无缝的设计，在面版中加入

.table

。如果有

.panel-body

，就在表格的上方加上一个用于分割的边界。

<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>User Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>aehyok</td>
<td>leo</td>
<td>@aehyok</td>
</tr>
<tr>
<td>lynn</td>
<td>thl</td>
<td>@lynn</td>
</tr>
</tbody>
</table>
</div>

如果没有

.panel-body

，面版标题会和表格连接起来，没有空隙。

带列表组的面版

<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<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>
</div>

总结

对了Bootstrap的基本组件，已经简单的过了一遍，还是收获很多的。接下来就要去学习Bootstrap插件了。

本文已更新至Bootstrap3.0入门学习系列导航/article/4711879.html