栅格布局一般怎么用_栅格布局的使用方法

栅格布局的使用方法：

1)布局块必须放在.container或.container-fluid中

2)在容器中声明行

3)在行中声明列

，

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)默认表单

(2)行内表单

(3)水平表单——最麻烦：需要整合表单class+栅格系统class

紫云(深圳)软件有限公司

云数据时代引领者

微信：Chizcloud

微博：http://weibo.com/Chizcloud