首页 > 代码库 > Bootstrap 3.0 学习笔记（一）
Bootstrap 3.0 学习笔记（一）
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。截止到现在（2015-02-03）最新版本为 Bootstrap 3.0。
什么是 Bootstrap？
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
为什么使用 Bootstrap？
- 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
- 浏览器支持：所有的主流浏览器都支持 Bootstrap。
- 容易上手：只要具备 HTML 和 CSS 的基础知识，就可以开始学习 Bootstrap。
- 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。
- 它为开发人员创建接口提供了一个简洁统一的解决方案。
- 它包含了功能强大的内置组件，易于定制。
- 它还提供了基于 Web 的定制。
- 它是开源的。
下载 Bootstrap
从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。
当下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，将看到下面的文件/目录结构：
* 在开发中经常用到是 bootstrap.min.css bootstrap.min.js jquery.js(bootstrop 基于jQuery)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>在线尝试 Bootstrap 实例</title> 5 <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> 6 <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> 7 <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> 8 </head> 9 <body>10 11 <h1>Hello, world!</h1>12 13 </body>
HTML 5 文档类型（Doctype）
Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，需要使用 HTML5 文档类型（Doctype）。 因此，在使用 Bootstrap 项目的开头
包含下面的代码段。
1 <!DOCTYPE html>2 <html>3 ....4 </html>
* 如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型（Doctype），可能会面临一些浏览器显示不一致的问题，甚至可能面临一些特定情境下的不一致，
以致于代码不能通过 W3C 标准的验证。
移动设备优先
移动设备优先是 Bootstrap 3 的最显著的变化。
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：
1 <meta name="viewport" content="width=device-width, initial-scale=1.0">
width 属性控制设备的宽度。假设网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让网站看上去更像原生应用的感觉。
注意，这种方式并不推荐所有网站使用，还是要看情况而定！
1 <meta name="viewport" content="width=device-width, 2 initial-scale=1.0, 3 maximum-scale=1.0, 4 user-scalable=no">
避免跨浏览器的不一致
Bootstrap 使用 Normalize 来建立跨浏览器的一致性。
Normalize.css 是一个很小的 CSS 文件，在 HTML 元素的默认样式中提供了更好的跨浏览器一致性。
Bootstrap 浏览器/设备支持
Bootstrap 可以在最新的桌面系统和移动端浏览器中很好的工作。
旧的浏览器可能无法很好的支持。
下表为 Bootstrap 支持最新版本的浏览器和平台：
| Chrome | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|
| Android | YES | YES | 不适用 | NO | 不适用 |
| iOS | YES | 不适用 | 不适用 | NO | YES |
| Mac OS X | YES | YES | 不适用 | YES | YES |
| Windows | YES | YES | YES* | YES | NO |
* Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。
Bootstrap 3.0 学习笔记（一）