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