bootstrop框架（二）
bootstrop框架中的css
bootstrop框架是针对于移动设备优先。
为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Bootstrap设置了全局样式，包括显示、排版和链接。尤其是，我们还：
- 为
body标签设置了background-color: #fff;样式 - 设置了排版的基本属性
@font-family-base、@font-size-base和@line-height-base - Set the global link color via
@link-colorand apply link underlines only on:hover
这些样式可以在scaffolding.less文件中找到。
用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了max-width，用以匹配栅格系统。
<div class="container">
...
</div>
栅格系统用于通过一系列的行（row）与列（column）的组合创建页面布局，你的内容就可以放入创建好的布局中。下面就介绍以下Bootstrap栅格系统的工作原理：
- “行（row）”必须包含在
.container中，以便为其赋予合适的排列（aligment）和内补（padding）。 - 使用“行（row）”在水平方向创建一组“列（column）”。
- 你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）”的直接子元素。
- 类似Predefined grid classes like
.rowand.col-xs-4这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。 - 通过设置
padding从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。 - 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个
.col-xs-4来创建。
在栅格系统中，我们在LESS文件中使用以下媒体查询（media query）来创建关键的分界点阈值。
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
