Bootstrap 进度条

创建一个基本的进度条的步骤如下：

• 添加一个带有 class .progress 的 <div>。

• 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。

• 添加一个带有百分比表示的宽度的style 属性，例如 style="40%"; 表示进度条在 40% 的位置。

交替的进度条

在上面的基础上添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。

其中，* 可以是 success、info、warning、danger。

条纹的进度条

创建一个条纹的进度条的步骤如下：

• 添加一个带有 class .progress 和 .progress-striped 的 <div>。

• 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。

• 添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

动画的进度条

在条纹进度条的基础上在第一个div内添加一个 active

这将会使条纹具有从右向左的运动感。

堆叠的进度条

可以堆叠多个进度条。把多个进度条放在相同的 .progress 中即可实现堆叠

Bootstrap 列表组

列表组件用于以列表形式呈现复杂的和自定义的内容。

创建一个基本的列表组的步骤如下：

• 向元素 <ul> 添加 class .list-group。

• 向 <li> 添加 class .list-group-item。

向列表组添加徽章

可以向任意的列表项添加徽章组件，它会自动定位到右边。

只需要在 <li> 元素中添加 <span class="badge"> 即可。

向列表组添加链接

通过使用锚标签代替列表项，我们可以向列表组添加链接。我们需要使用 <div> 代替 <ul> 元素。

向列表组添加自定义内容

可以向上面已添加链接的列表组添加任意的 HTML 内容。

Bootstrap 面板

面板组件用于把 DOM 组件插入到一个盒子中。

创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default

面板标题

• 使用 .panel-heading class 可以很简单地向面板添加标题容器；

• 使用带有 .panel-title class 的 <h1>-<h6> 可以来添加预定义样式的标题。

面板脚注

把按钮或者副文本放在带有 class .panel-footer 的 <div> 中即可。

注意：面版脚注不会从带语境色彩的面板中继承颜色和边框，因为它不是前景中的内容。

带语境色彩的面板

使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger，来设置带语境色彩的面板

带表格的面板

为了在面板中创建一个无边框的表格，我们可以在面板中使用 class .table。

带列表组的面板

可以在任何面板中包含列表组，通过在 <div> 元素中添加 .panel 和 .panel-default 类来创建面板，并在面板中添加列表组。

欢迎大家补充纠正