bootstrap基础

1、插入两个meta信息

<meta http-equiv="X-UA-Compatible" content=''IE=edge"></meta>//兼容IE8+

<meta name="viewport" content="width=decive-width,initial-scale=1"></meta>//适应手机端

2、熟悉容器的两种布局方式

container:固定布局（1170px,970px,750px,auto）container-fluid:流体布局

3、阀值

大于1200像素一般作用于台式机（1170px）

大于992像素小于1200像素一般作用于笔记本（970px）

大于768像素小于992像素一般作用于Pad（750px）

小于768像素一般作用于移动设备（auto）

4、网页分成12列

row：行

col：列

col-lg，大于1200像素起作用

col-md，大于992像素小于1200像素起作用

col-sm，大于768像素小于992像素起作用

col-xs，小于758起作用

5、列偏移

col-lg-offset-4（lg表示在哪个像素里面起作用，4表示偏移量）

6、列排序

col-lg-push-10（push表示向右偏移，10表示偏移的列数）

col-lg-pull-2（pull表示向左偏移，2表示偏移的列数）

7、可见类

visible-lg-block(在lg范围内显示，其余范围隐藏)

hidden-lg(在lg范围内隐藏，其余范围显示)

8、打印类

visible-print-block（打印时显示）

hidden-print（打印时隐藏）

9、预定义样式风格

primary:首选项success：成功info：一般信息warning：警告danger：危险

10、警告框

alert-warning（警告）alert-danger（危险）

11、面板组

panel-heading（标题）panel-body（主体内容）form-group（表单组）btn-group（按钮组）

12、所有设置了form-control类的input、textarea和select元素都将被默认设置宽度为100%。将label元素和控件包裹在form-group中可以获得最好的排列

13、行（row）必须包含在container或container-fluid中，一边为其赋予合适的排列（aligment）和内补（padding）；

14、如果一行中包含了列的内容大于12格，多余的列所在的元素将被作为一个整体另起一行。如果多余的元素还大于12，那么将会按照原来位置排列，不会另起一行。

15、通过添加lead类可以让段落突出显示；对于被删除的文本使用<del>标签；对于没有用的文本使用<s>标签；额外插入的文本使用<ins>标签；为文本添加下划线使用<u>标签；设置斜体一段文字用<em>；通过增加font-weight值强调一段文本用<strong>；<small>可以添加内联子标题；<var>标记变量；<smap>标签来标记程序输出的内容

16、text-nowrap：段落中超出屏幕不换行；text-lowercase：设置文本小写；text-uppercase：设置文本大写；text-capitalize：设置单词首字母大写

17、通过<code>标签包裹内联样式的代码片段；通过<kbd>标签标记用户通过键盘输入的内容、

18、使用pre-scrollable类，其作用是设置max-height为350px，并在垂直方向展示滚动条。

19、通过table-striped类可以给<tbody>之内的每一行增加斑马条纹样式，添加table-bordered类为表格和其中的每个单元格增加边框

20、通过添加table-hover类可以让<tbody>中每一行对鼠标悬停状态做出响应；通过添加table-condensed类可以让表格更加紧凑，单元格中的内部均会减半

21、active鼠标悬停在行或单元格上时所设置的颜色；success标识成功或积极的动作；info标识普通的提示信息或动作；warning标识警告或需要用户注意；danger标识危险或潜在的带来负面影响的动作

22、将任何.table类元素包裹在.table-responsive类元素内，即可创建响应式表格，其会在小屏幕设备上水平滚动，当屏幕大于768px宽度时，滚动条消失

23、不要将表单组直接和输入框组混合使用，建议将输入框组嵌套到表单组中使用。

24、如果你没有为每个输入控件设置label标签，屏幕阅读器将无法正确识别，对于这些内联表单，你可以通过为label设置sy-only类将其隐藏

25、未完待续