bootstrap排版1: 栅格布局

发表于:2017-11-06 19:34 阅读:

1. 预定义类
页面容器:
.container(固定宽度)
.container-fluid(100%宽度)
 
行:.row(最多包含12列)
 
列:
.col-xs-*(超小屏幕/手机) 
.col-sm-*(小屏幕/平板) 
.col-md-*(桌面显示器) 
.col-lg-*(大显示器)
 
示例:
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
*重要说明:栅格系统使用媒体查询来决定使用哪种预定义类,在上面的示例中,在超小屏幕中第一列"col-xs-12"占满全屏(而在桌面显示器中则使用"col-md-8"占据8列的宽度)。
 
2. 列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将列向右侧偏移了4个列(column)的宽度。
 
示例:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
 
3. 列嵌套
为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col 元素到已经存在的 .col 元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(没有强制要求必须占满12列)。
 
示例:
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-3">左侧版块中的左栏</div>
<div class="col-md-9">左侧版块中的右栏</div>
</div>
</div>
<div class="col-md-3">右侧版块</div>
</div>
 
4.列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。
 
示例:
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>


灵石网络专注于营销型网站设计、SEO搜索引擎优化、PHP开发、企业网络营销服务。


扫描二维码加我微信!