bootstrap是建立在12列栅格系统、布局、组件之上的。
1.全局设置#
必须使用HTML5文档类型##
< !DOCTYPE html><html lang = "en"> ... </html>
排版和链接##
为屏幕、排版和链接都设置了基本的全局样式，特别是以下几点：
- 移除了body的margin
- 设置body的背景颜色background-color：white;
- 使用@baseFontFamily、@baseFontSize和@baseLineHeight属性作为我们排版的基础
- 通过@linkColor设置全局链接的颜色，并且，当链接处于:hover状态时才会带有下划线
以上都可以在scaffolding.css文件中找到
用Normalize重置样式##
默认栅格系统#
栅格系统示例##
默认为12列，形成940px宽的容器，默认没有启用响应式布局，如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口从720px到1170px进行动态调整，低于767px 时，列宽不再固定并且会在垂直方向上堆叠
带有基本栅格的HTML代码##
<div class = "row"> <div class = "span4">...</div> <div class = "span8">...</div> </div>
创建一个.row容器，并在容器中加入合适数量的.span*列所跨越的栅格数之和最多是12
偏移列##
把列向右移动可以使用.offset*类，每个类都给列的左边距增加了指定单位的列
<div class = "row"> <div class = "span4">...</div> <div class = "span3 offset2">...</div> </div>
嵌套列##
在默认的栅格系统中，在已有的.span内添加一个新的.row并加入.span列，就可以实现嵌套，被嵌套列中的每一列列数纵隔等于父级的列
<div class = "row"> <div class = "span9"> Level 1 colum <div class = "row"> <div class = "span6">Level 2</div> <div class = "span6">Level 2</div>] </div> </div> </div>
流动栅格系统#
流动栅格系统对每一列的列宽使用的是百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力，这就保证它能对不同的分辨率和设备做出适当的调整。
基本的流动栅格HTML代码片段##
将.row替换成.row-fluid就能让任何一行“流动”起来。应用于每一列的类不能改变，这样方便的在流式与固定栅格之间切换
流动栅格的偏移##
定义与固定网格系统相同，给任何想偏移列添加.offset*
流式嵌套布局##
与固定栅格嵌套有一点不同：嵌套的列数之和要等于12.因为是使用百分比设置每列的宽度
布局#
固定布局##
提供了一个通用的固定宽度(也可以变为响应式)的布局方式，仅仅用 <div class="container">即可。
<body> <div class = "container"> ... </div> </body>
流式布局##
利用<div class = "container-fluid">代码可以创建一个流式、两列 的页面——非常适合应用和文档类页面
<div class = "container-fluid"> <div class = "row-fluid"> <div class = "span2"> </div> <div class = "span10"> </div> </div> </div>
响应式布局#
启用响应式特性##
<meta name = "viewport" content = "width = device-width,initial-scale=1.0"> <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet">
关于响应式bootstrap##
Medio queries允许在一些条件基础上自定义CSS例如：——ratios,widths,display type,etc!但通常都是围绕着min-width和max-width这两者
- 修改栅格系统中列的宽度
- 需要的时候, 用堆叠元素代替浮动
- 调整标题和文本的大小以便适合各种设备
谨慎的使用media queries，先从你的手机用户开始吧。对于大型的项目, 应该考虑使用专门的代码库, 而不是构筑在media queries之上。
