栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

简介

栅格系统用于通过一系列的行（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-* 不存在， 也影响大屏幕设备。

<!-- 什么是栅格系统?

        1. 会随着视口的改变发生改变,通过将盒子分为12列实现的

        2. 栅格系统使用了流式布局(百分比布局) 实现 响应式开发

    -->

<!-- 如何使用栅格系统?

        步骤:

        1. 必须给盒子设置类名 container(居中大小的一个盒子) 或者 container-fluid (通栏显示的盒子)

        2. 通过栅格参数实现响应式布局 [栅格参数必须记住]

          栅格参数就是我们设备对应的一个类名

          .col-xs-值  :  代表手机设备

          .col-sm-值  :  代表平板设备

          .col-md-值  :  PC设备

          .col-lg-值  :  大屏幕设备

          注意:

          1. 值的取值范围是 1- 12

          2. 如果希望盒子一行显示,那么值相加不能超过12

          3. 12代表当前元素的宽度为100%;

          4. 凡是调用了栅格参数,当前盒子都浮动了,脱标

          5. 如果要清除浮动,调用类名clearfix

          列偏移: 改变当前盒子的位置

          col-md-offset-2    当前盒子在pc端向右移动2列

          col-xs-offset-2    当前盒子在移动端向右移动2列

          col-sm-offset-2    当前盒子在平板设备向右移动2列

          col-lg-offset-2    当前盒子在大设备中向右移动2列

          响应式工具:

          .hidden-xs  代表移动端隐藏

          .hidden-sm  代表在平板隐藏

          .hidden-md  代表在PC设备隐藏

          .hidden-lg  代表在大屏幕设备中隐藏

    -->