Bootstrap3 - 3.网格系统

网格系统：Grid System
文章介绍：https://www.w3cplus.com/css3/introduction-into-css3-grid-layout.html

把一个页面分成了一定份数的网格，常见的有12栏网格，16栏网格。在布局的时候可以使用指定的网格数，你可以让主要内容占用8份/12， 让边栏的内容占用剩余的4份。
Bootstrap3使用的是12栏网格。
用户在元素上面的应用上面的运用有一些的区别。
在Bootstrap3的网格系统里面，每一个网格有4种类型：

col-xs-*   # col: 栏， 列。  xs: 特别小（屏幕宽度小于768pix时候会使用这样的网格类）
col-sm-*  # sm: small 。 这样的网格类可以使用在小尺寸的屏幕上面，比如平板电脑。  768px<=窗口宽度 
col-md-*  # md: middle。 中等尺寸的设备。  992px <= 窗口宽度。 一般尺寸的桌面电脑上。
col-lg-*    # lg: large。  大尺寸的设备。  1200px<=窗口宽度 

详细的就是比如：col-xs-6，元素会占用6个网格的宽度，也就是50%。
如果我们没有为元素设置在其他的宽度窗口上面的网格类的话，那么这个元素就会在所有的窗口的宽度上面都占用50%的宽度。如果你想元素在一般尺寸的桌面电脑上面占用9个网格的宽度，我们可以在这个元素上面添加一个col-md-9的网格类，