4_bootstrap之栅格系统

4、栅格系统

4.1、简述栅格系统

为了方便在布局容器中进行网页的布局操作。

BootStrap提供了一套专门用于响应式开发布局的栅格系统。

栅格系统将一行分为12列，通过设定元素占用的列数来 布局元素在页面上的展示位置。

帮助手册位置：全局CSS样式-----栅格系统

作用：可以让开发人员更加轻松进行网页布局，并且轻松进行响应式开发。

4.2、栅格系统的特点及入门案例

 栅格特点

•  “行（row）”必须包含在 .container（固定宽度）或 .container-fluid （100% 宽度）中
• 行使用的样式“.row”，列使用样式“col-屏幕尺寸-列数” 元素内容应当放置于“列（column）”内
• 基本的书写方式必须是：容器---行---列---内容
• HTML表格：定义一个表格----行-----单元格
• 栅格参数：“col-屏幕尺寸-占用列数”   

列元素的书写顺序，决定布局顺序，先写的列元素会被先布局到行上。

列元素的占用列数，定义列元素的大小

为了方便显示元素大小，我们为展示元素都赋予了相同样式：

border:1px solid red;height:100px;

示例1：一个元素占一行

 

效果1：

 

示例2：两个元素占一行

 

效果2：

 

示例3：三个元素占一行

 

效果3：

 

示例4：四个元素占一行

 

效果4：

 

注：

• 一个row下，如果设置的col列数总和小于等于12，那么该row下元素在一行排列；
• 一个row下，如果设置的col列数总和大于12，那么超出的元素会另起一行排列；
• 行和列可以进行无限嵌套，嵌套方式必须为 列---行---列----行。。。。
•  一个row元素下，有12列的

4.3、栅格屏幕尺寸设置

屏幕尺寸简述：

 large : lg -------大屏幕，一般PC尺寸
 medium : md --------中等屏幕，小PC尺寸
 small: sm : sm -----小屏幕 ，iPad尺寸
 x small : xs -----超小屏幕，智能手机尺寸 

为了方便显示元素大小，我们为展示元素都赋予了相同样式：

border:1px solid red;height:100px;

示例：

 

效果：

 

 

4.4、设置屏幕尺寸时的注意事项

若设置了某个屏幕尺寸的样式，那么比该尺寸大的屏幕，会沿用该设置；比该尺寸小的屏幕，会默认一个元素占12列的设置。

例如：设置了col-md-4，那么相当于也设置了col-lg-4。

  其他屏幕尺寸均默认为col-sm-12,col-xs-12

4.5、列偏移

通常情况下我们需要将元素居中显示，需要左边空出一定的空白区域，这里我们就可以使用列偏移来达到效果。

.col-屏幕尺寸-offset-*

在指定屏幕尺寸下，向右偏移*个列