Bootstrap是什么？
Bootstrap是一个用来快速并且容易的开发web页面，强大的前端框架。它包含html和css基本设计模板，包含通用用户界面组件，如：排版，形式，按钮，表格，导航，下拉框，警告，模式对话框，tab页面，折叠块，Carousel(图片展示) 和其他一些可选的javascript 扩展。
bootstrap通用给你容易的创建相应式展示的能力。
Twitter Bootstrap的优势：
1，节省时间 2，响应式功能(针对不同设备) 3，一致性设计 4， 易用 5，浏览器兼容 6，开源。
开始：
1， 下载文件： download Bootstrap files from here.
2， 创建你的第一个网页：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Basic Bootstrap Template</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 8 </head> 9 <body> 10 <h1>Hello, world!</h1> 11 <script src="http://code.jquery.com/jquery.min.js"></script> 12 <script src="js/bootstrap.min.js"></script> 13 </body> 14 </html>
Bootstrap Grid System 栅格系统
Bootstrap 提供最快并且容易的方法来创建网页。
Bootstrap3 包含预定义的栅格类为了快速制作栅格展示针对不同类型的设备，像是手机，平板，pc，等等。如：.col-xs-类来创建栅格列，针对特别小的设备，.col-sm-针对小屏设备。
Container=》row=》col-md-4
| Features Bootstrap 3 Grid System | Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) |
|---|---|---|---|---|
| Max container width | None (auto) | 750px |
970px |
1170px |
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Max column width | Auto |
~62px |
~81px |
~97px |
| Gutter width | 15px on each side of a column (i.e. 30px) |
|||