bootstrap基本布局
HTML5文档 类型
移动设备优先
width 属性控制设备的宽度。设置为 device-width 确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
布局容器
.container 类用于固定宽度并支持响应式布局的容器
<div class="container"></div>
.container-fluid 类用于100%宽度，占据全部视口的容器
<div class="container-fluid"></div>
栅格系统
栅格系统通过行（row）与列（column）组合页面布局
行（row）必须在容器.container或。container-fluid中.
栅格系统中的列是通过指定1到12的值来表示范围
超小屏幕（<768px） .col-xs-列
小屏幕（>=768px）.col-sm-列
中等屏幕（>=992px）.col-md-列
大屏幕（>=1200px）.col-lg-列
<div class="container main">
<div class="row"><!--小屏幕两列。中等屏幕四列-->
<div class="col-md-3 col-sm-6">
col-md-3 col-sm-6
</div>
<div class="col-md-3 col-sm-6">
col-md-3 col-sm-6
</div>
<div class="col-md-3 col-sm-6">
col-md-3 col-sm-6
</div><div class="col-md-3 col-sm-6">
col-md-3 col-sm-6
列偏移
.col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 *范围是从 1 到 11。
列排序
.col-md-push-*和.col-md-pull-*
显示或隐藏
.show和hidden类可以强制任意元素显示或隐藏
响应式隐藏或显示
显示
超小屏幕（<768）.visible-xs-*
小屏幕（>=768）.visible-sm-*
中等屏幕（>=992）.visible-md-*
大屏幕（>=1200）.visible-lg-*
.visible-*-*类有三种变体，每个针对CSS中不同的display
.visible-*-block
.visible-*-inline
.visible-*-inline-block
隐藏
超小屏幕（<768）.hidden-xs
小屏幕（>=768）.hidden-sm
中等屏幕（>=992）.hidden-md
大屏幕（>=1200）.hidden-lg
快速浮动
任意元素向左或者向右浮动
.pull-left和pull-right
<div class="pull-left"></div><div class="pull-right">
</div>
不能用于导航条组件中
导航条使用.navbar-left或.navbar-right
<ul class="nav navbar-nav navbar-left"></ul><ul class="nav navbar-nav navbar-right"></ul>
水平居中center-block
清除浮动.clearfix
想要学习前端开发的同学，可以加群：434623999 学习哦！
