bootstrap是建立在12列栅格系统、布局、组件之上的。

1.全局设置#

必须使用HTML5文档类型##

< !DOCTYPE html> ...

排版和链接##

为屏幕、排版和链接都设置了基本的全局样式，特别是以下几点：

移除了body的margin
设置body的背景颜色background-color：white;
使用@baseFontFamily、@baseFontSize和@baseLineHeight属性作为我们排版的基础
通过@linkColor设置全局链接的颜色，并且，当链接处于:hover状态时才会带有下划线
以上都可以在scaffolding.css文件中找到

用Normalize重置样式##

默认栅格系统#

栅格系统示例##

默认为12列，形成940px宽的容器，默认没有启用响应式布局，如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口从720px到1170px进行动态调整，低于767px 时，列宽不再固定并且会在垂直方向上堆叠

栅格系统示例

带有基本栅格的HTML代码##

 ...
 ...

创建一个.row容器，并在容器中加入合适数量的.span*列所跨越的栅格数之和最多是12

偏移列##

把列向右移动可以使用.offset*类，每个类都给列的左边距增加了指定单位的列

偏移列

 ...
 ...

嵌套列##

在默认的栅格系统中，在已有的.span内添加一个新的.row并加入.span列，就可以实现嵌套，被嵌套列中的每一列列数纵隔等于父级的列

  Level 1 colum  Level 2
 Level 2
]

流动栅格系统#

流动栅格系统对每一列的列宽使用的是百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力，这就保证它能对不同的分辨率和设备做出适当的调整。

基本的流动栅格HTML代码片段##

将.row替换成.row-fluid就能让任何一行“流动”起来。应用于每一列的类不能改变，这样方便的在流式与固定栅格之间切换

流动栅格的偏移##

定义与固定网格系统相同，给任何想偏移列添加.offset*

流式栅格的偏移

流式嵌套布局##

与固定栅格嵌套有一点不同：嵌套的列数之和要等于12.因为是使用百分比设置每列的宽度

布局#

固定布局##

提供了一个通用的固定宽度(也可以变为响应式)的布局方式，仅仅用

即可。

...

流式布局##

利用

代码可以创建一个流式、两列的页面——非常适合应用和文档类页面

响应式布局#

启用响应式特性##

关于响应式bootstrap##

Medio queries允许在一些条件基础上自定义CSS例如：——ratios,widths,display type,etc!但通常都是围绕着min-width和max-width这两者

修改栅格系统中列的宽度
需要的时候, 用堆叠元素代替浮动
调整标题和文本的大小以便适合各种设备
谨慎的使用media queries，先从你的手机用户开始吧。对于大型的项目, 应该考虑使用专门的代码库, 而不是构筑在media queries之上。

bootstrap基础