bootstrap笔记



CSS全局样式



概览

移动设备优先

布局容器

1、container类用于固定宽度并支持响应式布局的容器

2、container-fluid类用于100%宽度,占据全部视口(viewport)的容器。


栅格系统

1、最多12列

2、行(row)必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中。

3、为.column设置padding属性,从而创建列与列之间的间隔(gutter)

4、为.row元素设置负值margin从而抵消掉为.container元素设置的padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。

5、“列(column)”大于12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。

6、某些列可能会出现比别的列高的情况。为了克服这一问题,建议联合使用.clearfix和响应式工具类。

列偏移

.col-md-offset-4类将.col-md-4元素向右侧偏移了4个列(column)的宽度

列排序

.col-md-push-*和.col-md-pull-*类就可以很容易的改变列(column)的顺序



排版

1、.h1到.h6类,为的是给内联(inline)属性的文本赋予标题的样式。

在标题内还可以包含标签或赋予.small类的元素,可以用来标记副标题

2、页面主题

...

中心内容.lead

3、内联文本元素

标记文本

被删除的文本

无用文本

插入文本

带下划线的文本

小号文本

着重

斜体

4、对齐.text-

                left|center|right|justify|nowrap

5、大小写.text-

               lowercase|uppercase|capitalize

6、缩略语、地址

7、引用

默认

...

命名来源