Bootstrap 2.3.2学习
1.下载架包，下载编译好的文件，文件目录结构如下所示：
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png
添加min代表：对没有添加min的文件压缩而得到的压缩版。
使用bootstrap开发页面大体布局如下：
- <!DOCTYPE html>
- <html>
- <head>
- <title>Bootstrap 101 Template</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- Bootstrap -->
- <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
- </head>
- <body>
- <h1>Hello, world!</h1>
- <script src="http://code.jquery.com/jquery.js"></script>
- <script src="js/bootstrap.min.js"></script>
- </body>
- </html>
2.开发中必须使用HTML5文档类型：每个页面都应如下格式
对于中文来讲lang=”ch-CN”
- <!DOCTYPE html>
- <html lang="en">
- ...
- </html>
3.默认栅格系统，默认为12列，形成一个940px宽的容器；
.row 代表一行, .span*代表站的列数，例如2列.span2
当你的屏幕是940px是，分成12列代表铺面全屏
<div class=”row”>
<div class=”span1” style=”background-color:red”></div>
<div calss=”span1” style=”background-color:red”></div>
</div>
.offset*代表偏移量向右偏
<div class=”row”>
<div class=”span1 offset1” style=”background-color:red”></div>
<div class=”span1” style=”background-color:red”></div>
</div>
显示效果只会出现一个红快，原因，第一个<div>向右偏移一个单位时把第二个<div>覆盖。
4.嵌套列：嵌套列就是在已有的.span下再次使用.row .span*。要注意子类中的列的和不能超过父类的列数。
<div class=”row”>
<div class=”span3”>
<div class=”row” >
<div class=”span1”> </div>
<div class=”span2”></div>
</div>
</div>
</div>
5.流式栅格系统：
它采用百分比而不是像素。它和固定栅格系统一样拥有响应式布局的能力，这就保证了对于
不同的分辨率和设备作出适当的调整。
用法：将.row改为.row-fluid，其他的不变.span*，.offset*
在使用.row-fluid时里面的所有列都可以看为可分为12列，出于页面显示整齐，如果使用流式，
就一直使用不要掺固定。
6.布局:
固定布局.container，使用该布局的宽度是940px。
<div class=”container”>
</div>
流式布局：.container-fluid，它的宽度根据使用屏幕来定。
<div class=”container-fluid”>
</div>
7.响应式设计
使用响应式设计时，在页面中添加一个<meta>和引入对应额响应式的样式
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
该特性一般在使用出才添加。
8.基本的样式：
<h1>到<h6>都可以使用
bootstrap定义了全局font-size是14px，line-height是20px，这些样式都应用到了<body>和所有的段落上。
另外，对<p>还定义了1/2行高（默认为10px）的底部外边局（margin）属性。
.lead使段落突出
<p class=”lead”> 突出</p>
对不需要强调的使用small标签。
<small>….</small>
加粗<strong>…</strong>
斜体<em>….</em>
文本对齐方式：.text-left，.text-center，.text-right
