01-Bootstrap辅助型组件

一、辅助型组件

1.小标签：span.label

颜色：

1. label-info
2. label-success
3. label-default
4. label-primary
5. label-warning
6. label-danger

2.小徽章：span.badge

3.巨型幕：.container>.jumbotron

4.页头线：.page-header

5.警告框：

​ 背景色 - .alert.alert-danger等等

​ 可关闭的警告框 - 里面包含button按钮和[data-dismiss=‘alert’]

6.面包屑：ol.breadcrumb

​ 状态类 - active

7.链接缩略图：和栅格系统配合使用

​ a.thumbnail>img

8.块级缩略图：将a容器改为div

​ div.thumanail>img+div.caption

9.进度条

• div.progress

  • div.progress–bar[style=‘width:60%’]

• 进度条颜色：

  • div.progress-bar-success
div.progress-bar-info
div.progress-bar-warning
div.progress-bar-danger

• 条纹进度条：

  • div.progress progress-striped

• 激活进度条：

  • div.progress progress-striped active

---

二、媒体元素

1.普通不用于列表：

​ div.media> a.pull-left + div.media-body
​ 嵌套的话就media-body中再重复这样的组合嵌套。

2.用于列表的媒体：

​ ul.media-list> li.madia > a.pull-left + div.media-body

---

三、面板、墙

1、面板

​ 可以配合栅格系统进行嵌套表单、列表组等。

容器 - panel

内部

​ 1.头 - panel-heading
​ 标 - panel-title
​ 2.中 - panel-body
​ 3.尾 - panel-footer

颜色

​ panel-default
​ panel-primary
​ panel-success
​ panel-info
​ panel-warning
​ panel-danger

​ 墙

​ 容器 - well
​ 大小
​ -well-lg
​ -well-sm