什么是Bootstrap ？
- Bootstrap是更快，更容易的Web开发的自由前端框架
- Bootstrap包括排版，表格，按钮，表格，导航，模态，图像转盘和许多其他，以及可选的JavaScript插件HTML和CSS基于设计模板
- Bootstrap也让您轻松地创建响应设计的能力
什么是响应网页设计？
自适应网页设计是如何创建的网站会自动调整自己好看上的所有设备，从小到手机桌面大。
Bootstrap历史
Bootstrap由Mark奥托和雅各桑顿在Twitter的开发，并在GitHub在2011年8月发布了作为一个开放源码产品。
在2014年6月Bootstrap是在GitHub上的一号工程！
为什么要使用Bootstrap ？
优势Bootstrap ：
- 使用方便：任何人使用HTML和CSS的只是基本的知识，就可以开始使用Bootstrap
- 响应特性： Bootstrap的响应CSS调整到手机，平板电脑和台式机
- 移动第一种方法：在Bootstrap 3，移动为先的风格是核心框架的一部分
- 浏览器兼容性： Bootstrap与所有现代浏览器（Chrome浏览器，火狐，IE，Safari和Opera）兼容
从哪里获得Bootstrap ？
有两种方法可以开始使用Bootstrap在自己的网站。
您可以：
- 下载Bootstrap从getbootstrap.com
- 包括Bootstrap从CDN
下载Bootstrap
如果你想下载和主机Bootstrap自己，去getbootstrap.com ，并按照指示。
Bootstrap CDN
如果你不想下载和主机Bootstrap自己，你可以从包括它CDN （内容分发网络）。
MaxCDN提供CDN支持Bootstrap的CSS和JavaScript。 还包括jQuery的：
MaxCDN：
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>使用的一个优点Bootstrap CDN ：
许多用户已经从下载的引导MaxCDN访问另一个网站时。 这样一来，它就会从缓存中，当他们访问您的网站，从而导致更快的加载时间加载。 此外，大多数CDN's将确保一旦用户请求从一个文件，它会从最接近他们的服务器上，这也导致更快的加载时间提供服务。
创建第一个Web页面Bootstrap
1.添加HTML5的doctype
Bootstrap使用HTML元素和需要HTML5文档类型CSS属性。
始终包含在页面开头的HTML5文档类型，使用lang属性和正确的字符集一起：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>2. Bootstrap 3是移动先行
Bootstrap 3被设计成响应于移动设备。 移动为先的风格是核心框架的一部分。
为了确保适当的渲染和触控缩放，添加以下<meta>的标记内<head>元素：
<meta name="viewport" content="width=device-width, initial-scale=1"> 的width=device-width部分设置页面的宽度跟随设备的屏幕宽度（这将取决于在设备上）。
该initial-scale=1部分设置当页面首先被浏览器加载的初始放大级。
3.集装箱
Bootstrap还需要包含的元素来包装网站内容。
有两个容器类可供选择：
- 该
.container类提供了一个响应固定宽度的容器 - 该
.container-fluid类提供了一个全宽的容器 ，跨越视口的整个宽度
注：容器不能嵌套（你不能把另一个容器内的容器）。
两个基本Bootstrap页
下面的示例演示了一个基本的代码Bootstrap页面（一个负责任的固定宽度容器）：
例
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap
Example</title>
<meta charset="utf-8">
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First
Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html> 试一试» 下面的示例演示了一个基本的代码Bootstrap页（全宽容器）：
例
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap
Example</title>
<meta charset="utf-8">
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My
First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html> 试一试»