一、栅格系统
栅格系统是Bootstrap响应式布局的框架，栅格系统通过一系列的行（row）和列的组合来
创建页面布局：
使用栅格系统规则：
①、行（.row）必须包含在容器（container或者container-fluid）里；
②、在行内创建一组水平排开的列（.col）；
③、每一行被分为12个格，通过类似.col-sm-4的类来控制每一列占位多少格（这里是4格）；
④、每一行的列所占格数超过12，便会换行；
⑤、可以对不同大小的屏幕定义不同的布局。
屏幕适配：列宽
Bootstrap的栅格系统允许您根据屏幕大小调整列的宽度。上述col-sm-8中的sm用来匹配>=768px的屏幕，这样的尺寸匹配共有4种：
①、lg用来匹配大屏幕（大桌面显示器）：>=1200px的屏幕；
②、md用来匹配中等屏幕（桌面显示器）：>=992px的屏幕；
③、sm用来匹配小屏幕（平板）：>=768px的屏幕；
④、xs用来匹配超小屏幕（手机）：< 768px的屏幕；
lg、md、sm、xs的意思是当浏览器宽度大于等于列才起作用，小于的时候回重叠。
上述的4种规则可以同时存在。当同时被满足时，规则的序号越小，优先级越高。
tips:
栅格系统是根据浏览器宽度来判断屏幕大小的，你只需要量浏览器宽度拖动下，便会
产生上述效果。
提高：
你可以在每列上添加更多的col-xx-x规则，来匹配其他大小的屏幕。
二、Bootstrap导航栏
boostrap提供了一套基础CSS样式，与此同时还提供了一组前端组件。比如导航栏、轮播、
表单组件等等。
本文将关注于如何创建一个完整的、现代化的、响应式的导航栏。导航栏是一个非常常用的组件，
下图中最上面黑色的一栏就是Bootstrap提供的默认导航栏样式。
提高
为什么在点击按钮页面会产生变化呢？
这是Bootstrap的脚本在控制：当鼠标点击某个HTML控件时，浏览器会通知脚本（js），
页面脚本操作页面内容，使页面发生改变。
导航栏样式：
①、.navbar用来表示该元素的语义：它是一个导航栏，bootstrap将会以导航栏的方式设置其子元素的样式。
②、.navbar-default用来表示该元素的样式：使用default（默认）样式，即灰色的背景，黑色的文字。
如果使用上面的样式，默认如果body内容高度过高，页面会出现滚动条，如果想固定导航栏不随页面滚动。
在内navbar-fixed-top。
提高：
在bootstrap中，多数组件都是以xxx来设置组件语义，以xxx-default、xxx-inverse、xxx-success等来设置
组件样式。例如
