您的位置：首页 > Web前端 > BootStrap

[bootstrap] 栅格系统和布局

2015-11-12 12:25 609 查看

1、简介

栅格系统(grid systems)，也称为“网格系统”，运用固定的格子设计版面布局，风格工整简洁。是从平面栅格系统演变而来。

Bootstrap建立在12列栅格系统、布局、组件之上。以规则的网格阵列来指导和规范网页中的版面布局以及信息分布

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe。

2、设计原理

http://ued.taobao.org/blog/2008/09/grid_systems/

3、网页设计中的栅格系统

（1）默认栅格系统

Bootstrap默认的栅格系统为12列 ，形成一个940px宽的容器，默认没有启用 响应式布局特性 。如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。

基本代码
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>

1)列分配
对于简单的两列式布局，创建一个 .row 容器，并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。

<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>

上面的代码展示了 .span4 和 .span8 两列，两列的和总共是12个栅格。

2)列偏移
把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如，.offset4 将 .span4 右移了4个列的宽度。

<div class="row">
<div class="span4">...</div>
<div class="span3 offset2">...</div>
</div>

3)嵌套列
在默认的栅格系统里, 在已有的.span*内添加一个新的 .row 并加入 .span* 列，就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。
<div class="row">
<div class="span9">
Level 1 column
<div class="row">
<div class="span6">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>

（2）流式栅格系统
流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力，这就保证它能对不同的分辨率和设备做出适当的调整。

基本代码
将 .row 替换为 .row-fluid 就能让任何一行“流动”起来。应用于每一列的类不用改变，这样能方便的在流式与固定栅格之间切换。
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>

1)偏移
定义方式和固定网格系统相同：给任何想偏移的列添加 .offset* 即可。
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4 offset2">...</div>
</div>

2)嵌套
和固定栅格的嵌套有一点不同：
固定栅格每行的列总数等于父级列。
而流式布局每行被嵌套的列数之和要等于12。
这是因为流式栅格使用百分比来设置每列的宽度。
<div class="row-fluid">
<div class="span12">
Fluid 12
<div class="row-fluid">
<div class="span6">
Fluid 6
<div class="row-fluid">
<div class="span6">Fluid 6</div>
<div class="span6">Fluid 6</div>
</div>
</div>
<div class="span6">Fluid 6</div>
</div>
</div>
</div>

4、布局

（1）固定布局
提供了一个通用的固定宽度(也可以变为响应式)的布局方式，仅仅用 <div class="container"> 即可。
<body>
<div class="container">
...
</div>
</body>

（2）流式布局
利用 <div class="container-fluid"> 代码可以创建一个流式、两列的页面 — 非常适合于应用和文档类页面。
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>

5、启动响应式设计

通过在文档中的 <head> 标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

注意！
　　Bootstrap在默认情况下是没有引入响应式特性的，因为不是任何情况都需要使用到。我们并不是鼓励开发者移除此功能, 而是在需要使用的时候才启用它。

6、设备和屏幕分辨率

类型        布局宽度         列宽    间隙宽度
大屏幕      大于等于1200px   70px    30px
默认        大于等于980px    60px    20px
平板        大于等于768px    42px    20px
手机到平板   小于等于767px    流式列，无固定宽度
手机        小于等于480px    流式列，无固定宽度

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航