HTML5文档类型
Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。
<!DOCTYPE html>
<html lang="zh-hans">
...
</html>移动设备优先
备的样式融合进了框架的每个角落，而不是一个单一的文件。
为了确保适当的绘制和触屏缩放，需要在<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">响应式图片
通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了max-width: 100%; 和height: auto;属性，可以让图片按比例缩放，不超过其父元素的尺寸。
<img src="..." class="img-responsive" alt="Responsive image">
排版和链接
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文件中找到。
Normalize
为了增强跨浏览器表现的一致性，我们使用了Normalize，这是由Nicolas Gallagher和 Jonathan Neal维护的一个reset库。
Containers
用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了width，用以匹配栅格系统。
注意，由于设置了padding 和 固定宽度，.container不能嵌套。
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。
简介
栅格系统用于通过一系列的行（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来创建
栅格与全宽布局Grids and full-width layouts
对于需要占据整个浏览器视口（viewport）的页面，需要将内容区域包裹在一个容器元素内，并且赋予padding: 0 15px;，为的是抵消掉为.row所设置的margin: 0 -15px;（如果不这样的话，你的页面会左右超出视口15px，页面底部出现横向滚动条）。
栅格选项
| 超小屏幕设备 手机 (<768px) | 小屏幕设备 平板 (≥768px) | 中等屏幕设备 桌面 (≥992px) | 大屏幕设备 桌面 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，超过这些阈值将变为水平排列 | ||
最大.container宽度 | None (自动) | 750px | 970px | 1170px |
| class前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列数 | 12 | |||
| 最大列宽 | 自动 | 60px | 78px | 95px |
| 槽宽 | 30px (每列左右均有15px) | |||
| 可嵌套 | Yes | |||
| 偏移（Offsets） | Yes | |||
| 列排序 | Yes | |||
案例：从堆叠到水平排列
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>案例：移动设备和桌面
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>案例：手机、平板和桌面
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>.clearfix
和
响应式工具classe
。
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>列偏移
使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如，.col-md-offset-4将.col-md-4向右移动了4个列的宽度。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>嵌套列
为了使用内置的栅格将内容嵌套，通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12。
<div class="row">
<div class="col-md-9">
Level 1: .col-md-9
<div class="row">
<div class="col-md-6">
Level 2: .col-md-6
</div>
<div class="col-md-6">
Level 2: .col-md-6
</div>
</div>
</div>
</div>列排序
通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序。
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
1260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
