主要的bootstrap组件和关键类名

1、网格系统

.col-xs/sm/md/lg- * //代表在各个设备上的样式

xs:超小设备手机（<768px）

sm:小型设备平板电脑（≥768px）

md:中型设备台式电脑（≥992px）

lg:大型设备台式电脑（≥1200px）

.col-xs/sm/md/lg-* //偏移列

这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

2、排版

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）

3、代码

<code>：内联显示代码

<pre>:如果代码需要被显示为一个独立的块元素或者代码有多行，那么应该使用 <pre> 标签

开始和结束标签要使用 < 和 &gt；

4、表格

<table>：为表格添加基础样式

<thead>:表格标题行的容器元素（<tr>），用来标识表格列

<tbody>:表格主体中的表格行的容器元素（<tr>）

<tr>:一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）

<td>:默认的表格单元格

<th>:特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用

<caption>；关于表格存储内容的描述或总结

表格类：

.table:为任意 <table> 添加基本样式 (只有横向分隔线)

.table-striped:在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)

.table-bordered:为所有表格的单元格添加边框

.table-hover:在 <tbody> 内的任一行启用鼠标悬停状态

.table-condensed:让表格更加紧凑

<tr>,<th>和<td>类

.active:将悬停的颜色应用在行或者单元格上

.success:表示成功的操作

.info:表示信息变化的操作

.warning:表示一个警告的操作

.danger:表示一个危险的操作

ps:其实上面这几个类和文档颜色类是一样的

5、表单

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

向父 <form> 元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。

内联表单:class .form-inline

水平表单：class .form-horizontal

6、下拉菜单

在.dropdown内加上下拉菜单

dropdown-menu:创建下拉菜单

通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单

dropdown-header:添加下拉菜单标题

7、导航栏

创建默认导航栏:

向 <nav> 标签添加 class .navbar、.navbar-default。
向上面的元素添加 role="navigation"，有助于增加可访问性。
向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

响应式导航栏：

要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中

8、徽章

.badge

9、模态框

1.在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。

2.使用javascrpt调用带有id="identifier"的模态框

如：$('#identifier').modal(options)

在模态框中需要注意两点：
1. 第一是 .modal，用来把 <div> 的内容识别为模态框。
2. 第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。

aria-labelledby="myModalLabel"，该属性引用模态框的标题。
属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
<div class="modal-header">，modal-header 是为模态窗口的头部定义样式的类。
class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

10.下拉菜单

在链接或按钮中添加 data-toggle="dropdown"，要显示或隐藏的内容中添加

"dropdown-menu"，如果需要保持链接完整（在浏览器不启用 JavaScript 时有用），使用 data-target 属性代替 href="#"

11、标签页

需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。

添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。

12、轮播

#myCarousel,.carousel slide：轮播容器

.carousel-indicators:轮播（Carousel）指标

#myCarousel：轮播指标内子类

.carousel-inner:轮播项目

.item:轮播项目子类

.carousel-control left/right:轮播（Carousel）导航（左右导航）

data-slide="prev"：向上切换

data-slide="next"：向下切换

bootstrap初学笔记