柵格布局的使用方法：
1)布局塊必須放在.container或.container-fluid中
2)在容器中聲明行 <div class="row">
3)在行中聲明列 <div class="col-*">，
4)所有的內容只能放在列中，不能放在行中
5)列分為四種：col-lg-* col-md-* col-sm-* col-xs-*
6)一行固定分為12列，每個列可以指定占用十二分之幾的寬度，如 col-md-3、col-lg-6等
7)列有padding: 0 15px; 兩列間有30px的槽寬
8)列中可以繼續嵌套行
9)屏幕寬度適配問題：
col-lg-* 只對超大PC屏幕有效
col-md-* 對普通PC、超大PC屏幕有效
col-sm-* 對平板、普通PC、超大PC屏幕有效
col-xs-* 對手機、平板、普通PC、超大PC屏幕有效
總結：小屏幕下的列寬度設定對當前選定屏幕以及更寬的屏幕都有效！
10)可以使用col-*-offset-* 指定列在特定屏幕下的水平偏移量
與柵格布局系統相關的class：
.col-lg-1 ~ .col-lg-12
.col-md-1~ .col-md-12
.col-sm-1 ~ .col-sm-12
.col-xs-1 ~ .col-xs-12
.col-lg-offset-1 ~ .col-lg-offset-12
.col-md-offset-1~ .col-md-offset-12
.col-sm-offset-1 ~ .col-sm-offset-12
.col-xs-offset-1 ~ .col-xs-offset-12
.hidden-lg 列，只在超大PC屏幕下隱藏
.hidden-md 列，只在PC屏幕下隱藏
.hidden-sm 列，只在平板屏幕下隱藏
.hidden-xs 列，只在手機屏幕下隱藏
響應式網頁柵格布局練習：實現“響應式網頁示例”
4.全局CSS樣式——表單——難點！
Bootstrap共提供了三種形式的表單：
(1)默認表單
<form >
<div class="form-group">
<label class="control-label">
<input class="form-control">
<span class="help-block">
</div>
(2)行內表單
<form class="form-inline">
<div class="form-group">
<label class="control-label">
<input class="form-control">
</div>
(3)水平表單——最麻煩：需要整合表單class+柵格系統class
<form class="form-horizontal">
紫雲（深圳）軟件有限公司
雲數據時代引領者
微信：Chizcloud
微博：http://weibo.com/Chizcloud