华为css2技术,【技术分享】Bootstrap之CSS篇(2)

本篇我们来学习Bootstrap在CSS布局中“网格系统”的使用。

本篇主要介绍Bootstrap的网格系统的使用，早期被称栅格系统不知何时修改了，名词什么的无所谓，关键是这个Bootstrap中文手册翻译得实在是..... 阅读起来真得很生涩，很生，很生......希望我能总结得更直白吧。

网格系统的介绍

Bootstrap提供的网格系统，可以根据设备屏幕尺寸来控制网页的显示内容。

网格系统每1行最多划分为12列。

“移动设备优先”，Bootstrap的基础CSS样式默认从小屏幕移动设备开始，然后扩展到大屏幕设备，所以也要求我们在布局时要使用媒体查询来设计平板电脑、台式电脑的展示效果。

随着屏幕大小的增加而添加元素，但系统最多最行只支持12列。

1

1

1

1

1

1

1

1

1

1

1

1

4

4

4

4

8

6

6

12(屏幕最小)

看图总结：

网格系统将列每一行分为12列 (上图第一行中)，最小设备屏幕1行1列就占满12列，设备屏幕越大每行中显示的列数越多，但每一行总列数不能超过12

表格中那些 4-4-4/4-8/6-6 这些只是网格分配列数的参照

4-4-4这种列数分配，相当三个div各占屏幕列数 33%，33%，33%

4-8 这种列数分配，相当两个div各占屏幕列数 30%，70%

每行中占列数的和要等于12(4+4+4=12，4+8=12，6+6=12)，其实也没要求一定是要占满12

网格参数对照表

上图是网格系统参数选用的对照表，我们布局时可参考使用，有以下几个重点内容需要了解：

.col-xs- 适配超小设备手机屏幕中的显示

.col-sm- 适配小型设备平板电脑中的显示

.col-md- 适配中型设备台式电脑中的显示

.col-lg- 适配大型设备台式电脑中的显示

以上这段内容请仔细阅读，细细品，一定要理解，在以后的布局时我们经常会使用到这个“网格系统”。

网格系统的使用

使用网格系统，需要定义一个容器，所有包含内容的行和列都必须放在这个容器内，只有在这个容器内行和列才可以获得最佳的对齐和内边距的效果。

在Bootstrap的布局中

需要创建一个容器(.container)来存放我们包含内容的行和列。

Bootstrap使用行(.row)做为布局的起始定位，行必须放置在.container内，这样才能保证行在容器内对齐和内边距能适应不同屏幕尺寸的设备。

在Bootstrap中应将页面内容放在列(col)中，允许一行里存在一个或多个列，不可超过12列，但不允许在列中包含行。

列与列之间使用padding来设置间距，假如有多个列，当前列的外边距(margin)为负值则行偏移(换行)。什么叫行偏移简单来说 一行只可以有12列，超过了就会被挤到下一行这就叫行偏移。

重点：在Bootstrap中通常使用row来定位，col来显示内容元素，所以我们在规划时要先考虑row列的设计

常规布局

通过一个实例代码展示一下Bootstrap的魅力，下面是我设计的一个布局样式，我希望他能在移动、平板、PC这三端都能保持基本相同的布局效果。

代码部份

.container div{

border:2px solid blue;

height:100px;

color:white;

background-color: red;

line-height: 100px;

text-align: center;

}

.container .row {

margin-top:10px;

}

col-xs-4

col-xs-8

col-xs-8

col-xs-4

col-xs-4

col-xs-4

col-xs-4