1. 概览
- 移动设备优先
Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落。
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--
viewport: 表示视口，也就是可视区域
width=device-width: 页面的宽度为设备宽度
initial-scale=1: 初始化缩放倍数
除以上几个内容外，我们还可以在viewport里添加以下内容：
maximum-scale=1: 最大缩放倍数
user-scalable=no: 禁用用户缩放
-->
</head>
</html>
- 布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
两个容器都支持自适应，不同的是container容器通过改变两边的外边距进行自适应，而container-fluid容器是通过改变容器的宽度进行自适应布局
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container"></div
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid"></div>
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
- “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
- 通过“行（row）”在水平方向创建一组“列（column）”。
- 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
- 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
- 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
- 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
- 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
- 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
2.表格和按钮
表格是我们在开发后台管理系统中所用的较为频繁的组件，bootstrap对默认的表格样式进行了修饰，我们可以使用table类对表格增加默认的bootstrap样式。
Bootstrap 提供了一些丰富的表格样式供开发者使用。
- 基本格式
(.table)
bootstrap中表格的基本格式，其他表格的样式都基于这个格式
<table class="table"></table> - 斑马纹表格
(.table-striped)
<table class="table table-striped"></table> - 带边框的表格
(.table-bordered)
<table class="table table-bordered"></table> - 高亮当前行
(.table-hover)
<table class="table table-hover"></table> - 状态类(给某一行加上单独的背景颜色)
<tr class="success"></tr>
状态类对应
| 类名 | 说明 | 颜色 |
|---|---|---|
| success | 表示成功或积极的动作，成功 | 绿色 |
| warning | 表示警告或提醒用户需要注意，警告 | 黄色或橙色 |
| danger | 表式危险动作，危险 | 红色 |
| info | 标识普通的提示信息或动作，信息 | 蓝色 |
| active | 表示当前活动状态，激活或当前操作 | 深色 |
- 隐藏某一行
(.sr-only)
<tr class="sr-only"></tr>
3.按钮
Bootstrap 提供了很多丰富按钮供开发者使用。
- 可作为按钮使用的标签或元素
在html中，任何元素都可以作为按钮，但是为了样式的统一性和语义化考虑，我们一般使用如下三个标签作为按钮
<a href="#" class="btn btn-default">a标签按钮</a>
<button class="btn btn-defalut">button按钮</button>
<input type="button" class="btn btn-default" value="input按钮" />
对于以上三个标签我们都可以作为按钮来使用，但是要注意的是，在bootstrap中的导航栏组件，涉及到按钮部分的标签必须使用button，否则将不生效。如果使用a标签做为按钮，并且其作用不是用于链接某个页面或作为锚点链接使用的话，那么务必将a标签的role属性设置为button（role属性是由bootstrap所提供的）
总而言之，如果是在页面内使用按钮，并且其作用是用于触发某些事件的话，则强烈建议使用button标签。 - 预定义样式
-
.btn类是按钮的基类，其他预定义样式类全部需要先使用btn类 -
.btn-default:默认样式 -
.btn-success:成功样式 -
.btn-warning:警告样式 -
.btn-danger:危险样式 -
.btn-info:信息样式 -
.btn-primary:首选项样式 -
.btn-link:链接样式
在使用预定义样式以前，必须先给按钮加上.btn类
- 按钮尺寸样式
-
.btn-lg:比默认大小大一码
<button class="btn btn-lg">按钮</button> -
.btn:默认大小
<button class="btn">按钮</button> -
.btn-sm:比默认大小小一码
<button class="btn btn-sm">按钮</button> -
.btn-xs:比默认大小小两码
<button class="btn btn-xs">按钮</button>
- 块级按钮样式
-
.btn-block:将按钮转换成块状元素
<button class="btn btn-default btn-block">块状按钮</button>
- 按钮激活状态
-
.active:按钮处于按下（激活）时的状态（背景色为深色）
<button class="btn btn-default active">按钮</button>
- 按钮禁用状态
-
.disabled:按钮处于禁用时的状态（背景色为浅，且鼠标为禁止指针）
<button class="btn btn-default disabled">按钮</button>
当按钮加上disabled类时，按钮依旧处于可以触发的状态，如果要按钮同步不可以触发，则需要给按钮加上disabled属性
4.栅格系统
栅格系统是bootstrap提供给开发者的一个快速响应式布局工具，我们可以用栅格系统快速的布局出一个移动设备优先的响应式网页或者叫自适应网页。
注意：在使用栅格系统之前，我们需要将栅格系统的row和col-**-**类防止在.container或.container-fluid类中，也就是说，栅格系统必须包含在bootstrap的布局容器中。
预定义类：
-
.container: 布局容器（固定宽度，根据外边距进行自适应） -
.container-fluid: 布局容器（100%宽度） -
.row: 栅格系统的行（直接子元素必须为列） -
.col-**-**: 栅格系统的列（第一个**为屏幕大小，第二个为所占列数）
栅格参数
| 超小屏幕（手机 < 768px） | 小屏幕（平板 [768 ,992)px） | 中屏幕（桌面显示器[992, 1170)px） | 大屏幕（大桌面显示器 > 1170px） | |
|---|---|---|---|---|
| 列类前缀 | col-xs-** | col-sm-** | col-md-** | col-lg-** |
