如何使用bootstrap 栅格系统？

这里是修真院前端小课堂，每篇分享文从

八个方面深度解析前端知识/技能。

本篇分享的是：【如何使用bootstrap 栅格系统？】

一、背景介绍

今天小课堂分享的内容主要是讲，Bootstrap中的栅格系统(Grid System)

Bootstrap，来自 Twitter，是如今最流行的前端框架之一，Bootstrap功能强大，简单易学，很符合实际应用场景。 它是一个CSS/HTML框架。由动态CSS语言Less写成。Bootstrap一经推出后大受欢迎，一直是GitHub上的热门开源项目。bootstrap为我们提供了一套完整的流体栅格系统，而且随着屏幕或者视扣尺寸的增加，系统会自动分成最多12列，通过类名使用非常便捷。

二 .知识剖析

2.1 bootstrap中栅格系统的原理是采取12列的栅格体系，根据主流设备的尺寸进行分段，每段宽度固定并且浮动，通过百分比和媒体查询实现响应式布局。

2.2使用栅格系统

三、常见问题

3.1单元格的类如何选择和使用

单元格一共有四种：

.col-xs-: 无论屏幕宽度如何，单元格都在一行，宽度按照百分比设置

.col-sm-: 屏幕大于768px时，单元格在一行显示，屏幕小于768px时，独占一行

.col-md-: 屏幕大于992px时，单元格在一行显示，屏幕小于992px时，独占一行

.col-lg-: 屏幕大于1200px时，单元格在一行显示，屏幕小于1200px时，独占一行

3.2 栅格系统中的“15px”

相信细心的同学已经发现bootstrap的栅格系统在p