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 浏览器。