目标

目标一、理解什么是栅格布局

目标二、掌握栅格布局具体应用

目标三、掌握BootStrap通用CSS样式(排版、代码、代码、表单、按钮、图片、辅助类、响应式工具)

内容

一、BootStrap全局CSS之 - 栅格布局

1.1、概述

深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。

1.1.1 HTML5 文档类型

Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

...

1.1.2 移动设备优先

在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

为了确保适当的绘制和触屏缩放，需要在

之中添加 viewport 元数据标签。

在移动设备浏览器上，通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，

建议将此 标签加入到你的页面中：

1.1.3 排版与链接

Bootstrap 排版、链接样式设置了基本的全局样式。分别是：

为 body 元素设置 background-color: #fff;

使用 @font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数

为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线

这些样式都能在 scaffolding.less 文件中找到对应的源码。

1.1.4 Normalize.css

为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。

1.1.5 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口(viewport)的容器。

1.2、BootStrap CSS样式 - 栅格系统

1.2.1 栅格系统(布局)的工作原理

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口(viewport)尺寸的增加，系统会自动分为最多12列。

在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：

1. 行(row)必须包含在.container中，以便为其赋予合适的排列(aligment)和内补(padding)。

2. 使用行(row)在水平方向创建一组列(column)。

3. 你的内容应当放置于列(column)内，而且，只有列(column)可以作为行(row)的直接子元素。

4. 类似 .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。

5. 通过设置padding从而创建列(column)之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。

6. 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。

接下来就动手来测试一下：

实例演示

Step1先准备好BootStrap所必备的模板文件和几个对应的文件夹，具体的可以见 第二章内容

Step2 准备好HTML模板，如下所示：

Bootstrap 101 Template

Step3然后在body标签下添加如下代码

Hello, world!

区域一

Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.

区域二

If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.

区域三

Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.

效果如下：

Step4优化一：可以发现上图的页面效果占满全屏，我们可以通过Bootstrap 样式类对上面的内容进行居中。

效果如下：

可以发现container这个类设置了宽度，并且可以让内容显示在页面的中间。

Step5 优化二：将三个区域显示在同一排，并且平均分成三栏。

首先为三个区域添加一个容器，可以使用div，并且为div添加一个类

.

然后我们为每个小的区域也添加一个容器div，并且为div添加一个类

简单代码实现如下

Hello, world!

区域一

Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.

区域二

If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.

区域三

Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.

效果如下：

的确排成一列，然后分成三栏。再结合一下上面栅格系统的6部原理。通过同样的方式可以创建出比较复杂的网格布局页面。只需要在布局使用的容器上面添加相应的网格布局的类。比如说如果内容占用6个网格，那么就添加一个col-xs-6的类、占用四个网格就添加一个col-xs-4的类，然后在同一排的周围进行使用带有row类的容器。

小结

本节主要学习的布局(栅格系统)，通过简单的实例来理解它的工作原理。使用过的类有:

1. .container:用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询或值范围内都为container设置了max-width，用以匹配栅格系统。

2. .col-xs-4:这个类通过"-"分为三个部分，第三个部分的数字作为一个泛指，它的范围是1到12。就是可以把一个区域分为12个栏，这个要和row类联合使用。其实这个布局很像HTMl中的Table布局TR行和TD列。