Bootstrap栅格系统原理

Bootstrap栅格系统布局

1、栅格系统简介

1）响应式设计

我们现实生活中所使用到的设备有手机、平板电脑、笔记本、台式机。这些设备最大的区别在于它的屏幕的大小不一样，也就是分辨率大小不一样。

响应式设计最核心的思想是就一个网站能够兼容多个终端，而不是为每个终端特定的一个版本。

页面的设计与开发应当根据用户行为以及设备环境（系统平台，屏幕尺寸、屏幕定向等）进行相应的响应和调整，具体的实践方式由多方面决定，包括弹性网络布局、图片使用等。

无论有户在平板上还是pc上应该能够自动切换分辨、图片尺寸及相关脚本等，以适应不同设备

2）栅格实现原理

打开www.bootcss.com这个bootstrap的中文网站，点击Bootstrap3中文文档（v3.3.4）

进入以后点击全局CSS样式

找到栅格参数

.col-xs-表示超小屏幕起作用，.col-sm-表示小屏幕起作用，.col-md-表示中等屏幕起作用，.col-lg-表示大屏幕起作用。

栅格实现原理

•把网页总宽度平分为12分，开发人员可以自由按分组合，以便开发出简洁方便的程序

•仅仅通过定义容器大小、平分12分，再调整内外边距，最后结合媒体查询，就制作出强大的响应式栅格系统

•栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

下面就介绍一下 Bootstrap 栅格系统的工作原理：

•“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

•通过“行（row）”在水平方向创建一组“列（column）”。

•你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

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

•通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

•负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

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

•如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。

（原理：把我们的屏幕大小的宽度平分成12个格，每一格的宽度和整个屏幕分辨率是有关系的，如果整个屏幕分辨率越大那么这12格的每一格的宽度就大，是按比例来算出的，而且这12格的layout是水平排列的。）

比如，我们定义一个div，我们不指定这个div的宽度是多少像素或者占多少百分比，我们是指定这个div占12格中的几格，我们这个div占12格中的8格，不同的分辨率底下它始终是占12格中的8格。系统会根据屏幕分辨率的大小，自动拆成12格，每一格大小根据屏幕分辨率自动在变。这样的话在各浏览器或分辨率下都可以兼容我们这个8:4这个比例。

新建一个ch02的Web项目

将第一节课中新建的web项目ch01打开将css文件、fonts文件、img文件、js文件复制

将复制内容粘贴到ch02中

回到HBuilder，在ch02项目下新建一个demo01.html

打开demo01.html，引入bootstrap头文件

在body里面定义一个容器，它就会根据屏幕的大小自动设定div的宽度。定义第一行有12列，每一列占一定的自己的小格，第二行第一个占了12格中的8格的位置，相当于占了8列的宽度，第二个占了12格中4格的位置，相当于占了4列的宽度。

<body>

</div>

</div>

</body>

运行效果

第一行有12列，每一列占一定的自己的小格，第二行第一个占了8列的宽度，第二个占了4列的宽度。

我们再在bootstrap头文件中加一个样式style让我们能看出这样的效果

div{ border: 1px #333333 solid;}

}

</style>

现在，我们再来看一下运行的效果

理解：我电脑的分辨率是1280x800的，由于我们之前设置的类前缀是.col-md-的，所以它默认把container设置成970像素。md表示中等分辨率，我们设置的第一行表示把这个屏幕拆分成12等分，这里就占了12列。每一列就占了12等分的一等分。第二行我们给了两列，第一列占了12等分的8等分，第二列占了12等分的4等分。

如果我们把屏幕变小，它就垂直排列了。因为我们设置的md是中等分辨率的参数，在小分辨率底下就垂直排列了。

接着我们修改第二行的分辨率

运行效果

这时，将屏幕变小md8占6等分md4占6等分，是自动的，这样就转到了小屏幕的分辨率区间。

注意： 1）一行(row)必须在.container中

2）使用行在水平方向创建列组

3）具体内容应放置于列(column)内

4）内置像.row和.col-xs-4(占4列)

3）媒体查询

我们可以指定在哪些分辨率底下执行特定的css样式

例如：

div{ border: 1px #333333 solid;}

@media(max-width:767px)

/*在小于767px的屏幕里，这样的样式才生效。*/

{

div{ background: #F0AD4E;}

/*设定一个div的样式*/

}

</style>

运行结果：

（分辨率大于767px）

（分辨率小于767px，此时div的背景就变成了我们自己设定的这个颜色。）

• 媒体查询是进行响应式设计的核心要素，其功能非常强大

• Bootstrap主要用到min-width,max-width以及and语法，用于在不同的分辨率下设置不同的css样式

示例：

@media(max-width:767px){

/*在小于767px的屏幕里，这里的样式才生效*/

}

@media(min-width:768px) and (max-width:991px){

/*768-991px屏幕里，这里的样式才生效*/

}

4）课后练习

自己尝试在body里面加container，然后再做行和列，并且我们可以任意指定这个列占我们12小格中的几格。