二、Bootstrap脚手架
1、Bootstrap全局样式
设置body的全局样式：body{
font-family:@font-family-base; <!-- 文字样式 -->
font-size:@font-size-base; <!-- 文字大小 -->
line-height:@line-height-base; <!-- 行高度 -->
color:@text-color; <!-- 颜色 -->
background-color:@body; <!-- 背景颜色 -->
}
设置超链接a的全局样式：
a{
color:@link-color; <!-- 颜色 -->
text-decoration:none;
&:hover, <!-- 超链接处于hover状态时设置颜色和下划线 -->
&:focus{
color:@link-hover-color;
text-decoration:@link-hover-decoration;
}
2、栅格系统
Bootstrap框架默认的栅格系统最多12列，形成一个940px宽的容器，默认不使用响应式布局。
基本样式：
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="span1">1</div>
</div>
<div class="row show-grid">
<div class="span2">2</div>
</div>
<div class="row show-grid">
<div class="span4">4</div>
</div>
<div class="row show-grid">
<div class="span8">8</div>
</div>
<div class="row show-grid">
<div class="span12">12</div>
</div>
</div>
偏移列：
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row show-grid">
<div class="span2">span2</div>
<div class="span3 offset3">3 offset 3</div>
</div><!-- /row -->
<div class="row show-grid">
<div class="span3 offset3">3 offset 3</div>
<div class="span2 offset2">2 offset 2</div>
</div><!-- /row -->
<div class="row show-grid">
<div class="span6 offset6">6 offset 6</div>
</div><!-- /row -->
</div>
嵌套列：
<div class="row show-grid">
<div class="span12">
level 1
<div class="row show-grid">
<div class="span3">
level 2
</div>
<div class="span6 offset3">
level 2
</div>
</div>
</div>
</div>
流式栅格系统：
<div class="bs-docs-grid">
<div class="row-fluid show-grid">
<div class="span1">1</div>
</div>
<div class="row-fluid show-grid">
<div class="span2">2</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
</div>
</div>
流式栅格偏移：
<div class="bs-docs-grid">
<div class="row-fluid show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row-fluid show-grid">
<div class="span2">span2</div>
<div class="span3 offset3">3 offset 3</div>
</div><!-- /row -->
<div class="row-fluid show-grid">
<div class="span3 offset3">3 offset 3</div>
<div class="span2 offset2">2 offset 2</div>
</div><!-- /row -->
<div class="row-fluid show-grid">
<div class="span6 offset6">6 offset 6</div>
</div><!-- /row -->
</div>
流式栅格——嵌套
<div class="row-fluid show-grid">
<div class="span12">
level 1
<div class="row-fluid show-grid">
<div class="span3">
level 2
</div>
<div class="span6 offset3">
level 2
<div class="row-fluid">
<div class="span6">Fluid 6</div>
<div class="span6">Fluid 6</div>
</div>
</div>
</div>
</div>
</div>
3、简单页面布局
Bootstrap提供一个通用的固定宽度，也可以变为响应式的布局方式，仅仅需要用<div class="container">即可。
<div class="container">
<section id="global">
<div class="page-header">
<h3>Bootstrap 固定布局</h3>
</div>
</section>
<div class="mini-layout">
<div class="mini-layout-body"></div>
</div>
</div>
Bootstrap同样提供一个流式布局，仅仅需要利用<div class="container-fluid">代码就可以创建一个流式、两列的页面，非常适合于引用和文档类页面。
<div class="container-fluid">
<section id="global">
<div class="page-header">
<h3>Bootstrap 流式布局</h3>
</div>
</section>
<div class="mini-layout fluid">
<div class="mini-layout-sidebar"></div>
<div class="mini-layout-body"></div>
</div>
</div>
4、响应式设计RWD
响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。
（1）启用响应式特性：
通过在<head>标签里添加合适的meta标签并引入一个额外的样式表即可启动响应式CSS。
（2）响应式Bootstrap特点：
修改栅格系统中列的宽度。
需要的时候，用堆叠元素代替浮动。
调整标题和文本的大小以便适合各种设备。