标签：
BootStrap是一个用于快速开发web应用程序和网站的前端框架. BootStrap是基于HTML, CSS, JavaScript. BootStrap是由Twitter的Mark Otto和Jacob Thomton开发的. BootStrap是2011年八月在GitHub上发面的开源产品.
常见网站基本框架:
下载之前先去准备一个代码编辑器，比如像 notepad ++，并且最好能了解点 HTML 与 CSS 的知识。我们不会去说明源代码，不过你可以下载它们。我们主要是介绍编译之后的 Bootstrap 文件的使用。
获得编译后和最小化的 CSS，JS还有图像文件是最快速的启动方法。不包含文档和原始代码文件。
获得所有 CSS 和 JavaScript 原始文件，另外还包含一个说明文档的本地版本，可以直接在 GitHub 中下载最新的版本。
在下载里你可以找到下面这些文件和内容，按类型分了组，提供了编译之后和最小化两个版本。
下载编译之后的压缩包，解压以后你会得到下面这些文件：
这是 Bootstrap 最基础的东西：编译后的这些文件可以快速地用在所有 Web 项目上。我们提供了编译后的 CSS 和 JS (bootstrap.)，另外还有编译后并最小化的 CSS 和 JS (bootstrap.min.)。图像使用了 ImageOptim 进化压缩。这是用在 Mac 上的压缩 PNG 图像的软件。
要注意的是，所有 JavaScript 插件都需要用到 jQuery。
Bootstrap 有很多东西，了解它们可以参阅 Bootstrap 使用说明。
Glyphicons 的图标集。JavaScript 插件与组件类似，工具提示，对话框等等。组件 和 JavaScript 插件 提供了下面这些界面元素：
在以后的说明文档里，我们会详细的逐个介绍。在此之前，你可以查看这个文档来学习如何使用和定制它们。
想要使用 Bootstrap，可以基于这个简单的 HTML 模板，这里面包含了我们在 文件结构 里提到的所有东西。
下面是一个典型的 html 文件：
把它变成 Bootstrap 模板，只需要包含合适的 CSS 和 JS 文件：
用这两个添加的文件，你就可以开发基于 Bootstrap 的应用了。
为了确保适当的绘制和触屏缩放，需要在 之中添加 viewport 元数据标签。
在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
最基本的网格系统是由一系列水平和垂直并且彼此交叉的线组合而成的, 这让web设计布局变得更加简单, 而且让内容更加有可读性. BootStrap提供了一套响应式, 移动设备优先的流式网格系统, 随着屏幕或视窗尺寸的增加, 系统会自动最多分为12列.下面就介绍一下网格的工作原理.
行(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中, 以便为其赋予合适的排列(aligment)和内补(padding)行(row)在水平方向创建一组列(column)列(column)内, 并且, 只有列(column)可以作为行(row)的直接子元素..row和.col-xs-4这种预定义的类, 可以用不算数快速创建栅格布局..row元素设置负值margin从而抵消掉为.container元素设置的padding, 也就间接为行(row)所包含的列(column)抵消掉了padding.| 超小屏幕手机(<768px) | 小屏幕平板(>=768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) |
| 网格系统行为 | 总是水平排列 | 开始是堆叠在一起的, 当大于这些阈值进将变为水平排列C | 相同 | 相同 |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列数 | 12 | 12 | 12 | 12 |
| 最大列 | 自动 | 62px | 81px | 97px |
| 宽 | 30px (每列左右均有 15px) | 相同 | 相同 | 相同 |
使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。
参考代码:
将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs-* 和 .col-md-*。请看下面的实例，研究一下这些是如何工作的。
在上面案例的基础上，通过使用针对平板设备的 .col-sm-* 类，我们来创建更加动态和强大的布局吧。
现在总结一下:
.row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。其中.col-md-offset-4是向右偏移4列.
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。.col-md-push-*是向右浮动, .col-md-pull-*是向左浮动. *是代表浮动的列等份.(1~12)
HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6类，为的是给内联（inline）属性的文本赋予标题的样式。
在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。small标签中的line-height:1, 字体的大小h1~h3变为主标题的65%, h4~h6变为主标题的75%.
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p>（段落）元素还被设置了等于 1/2 行高margin-bottom=10px。
如果要突出显示某个段落内容, 则只需在这标签中添加class=‘lead‘.
标签：
原文地址：http://www.cnblogs.com/Mrzhangjwei/p/5982663.html
