栅格布局的使用方法
栅格布局的使用方法：
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
