如何使用Bootstrap快速开发Web前端

作为一名菜鸟程序员，曾有幸参与过几个站点的架设，感触最深的是，前端堆砌太痛苦了!为了让你的站点看起来美观一点，你可能需要一点一点的去调整各个参数，反复修改，上下求索。这还只是考虑外观的，要是再考虑交互的话，没有一些工具在手，还真不是正常人能干的活。

世界著名社交网站Twitter的前端程序员们当然也面临了同样的问题，他们在解决了自己的痛苦之后，造福世界，创造了一个叫Bootstrap的开源项目，专门用于快速开发Web应用程序和网站。不得不说，他们太伟大了。

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，基于HTML、CSS和javascript。看这三个是不是觉得有点不明觉厉?没错，Bootstrap几乎包含了前端开发中你所需要的一切东西。而且，因为伟大的Twitter前端程序员们痛定思痛推己及人造福大众，他们把Bootstrap做的非常简洁方便，容易上手!是不是迫不及待了。
 为什么使用Bootstrap?

移动设备优先：自Bootstrap3.0起，框架包含了贯穿于整个库的移动设备优先的样式。就是说，你不需要专门针对移动设备进行优化、识别，Bootstrap能够自动以优雅的方式将你的站点展现在用户的移动设备上!在移动互联网大行其道的今天，这一特性实在太诱人了。

浏览器支持：所有的主流浏览器都支持Bootstrap，没错，包括IE在内，Firefox、Opera、Chrome、Safari等等。前端程序员另一个非常头疼的问题应该就是浏览器的兼容性了，你无法想象在Windows10已经放出来的今天，仍然有人在使用IE6.0，但是Web前端是不得不考虑这个的……

容易上手：只要你具备HTML和CSS的基础知识，你就可以开始学习和使用Bootstrap!你没听错，不需要专家，就是你，你可以很快上手Bootstrap!

响应式设计：查看 Web 页面的设备包括小型移动电话，以及大于普通台式计算机外形规格的显示器。在响应式设计 中，一开始就在 Web 页面中构建了灵活性，这样用户就可以通过所有设备查看页面。响应式设计的核心是 CSS3 媒体查询，这是根据设备性质(尤其是用户的显示器大小)来调用 CSS 规则的一种标准方法。对于典型开发人员启动的各种项目，我建议首先使用启用了响应特性的固定布局。固定布局更易于组织，而且响应特性支持从一开始就培养考虑网站如何在移动设备上运行的良好习惯。如果项目要应用于生产环境中，而且您正在与设计人员合作，那么设计人员应能够使您的文件适用于更加适合的其他任何模型。Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。在各个平台上，你都能够看到优雅的响应式效果!

还有好多特性，在此简单罗列一下，虽只是简单罗列，但是每一项对于Web前端人员来说都是十分诱人的：

•它为开发人员创建接口提供了一个简洁统一的解决方案。
•它包含了功能强大的内置组件，易于定制。
•它还提供了基于 Web 的定制。
•它是开源的。
• ……

如何使用Bootstrap

针对 Bootstrap 的 HTML

清单 • 是一个有用的框架 HTML 文件，用于结合使用 Bootstrap 与一个固定布局和响应特性：

清单 • 用于 Bootstrap 项目的基本框架 HTML 文件 (listing1.html)

缩小版本

在 Bootstrap 下载中，请注意，每个 CSS 和 JavaScript 文件有两个版本可用(例如 bootstrap.js 和 bootstrap.min.js)。第一种形式是一个常规文件，第二种形式是压缩文件或 “缩小文件”。就像在本文中一样，使用缩小版本即可实现最有效的页面加载。

listing1.html 的开始之处的 DOCTYPE 声明将其标记为一个 HTML5 文件。head 元素内的 meta标记控制移动的小屏幕布局。(为方便起见，我将它们称作 meta/viewport 标记。)默认情况下，大多数移动设备按比例缩小 Web 页面，使之适应屏幕大小，就像在桌面浏览器窗口中一样。这就是为什么许多网站上的文本和图像在手机浏览器中看起来很小的原因。meta/viewport 声明中的 initial-scale=1.0 部分禁用了这一行为，告诉设备要保持页面的原有尺寸。该声明表示 Web 设计人员(在本例中为 Bootstrap)已经完成了实现较小屏幕的响应式设计这一任务，所以在默认情况下，没必要采用蛮力方法。

稍后，清单 1 的 head 标记是 Bootstrap CSS 的链接。在文件的末尾，加载 jQuery 和 Bootstrap 实用程序 JavaScript。这些脚本在末尾运行可实现最佳性能。

设置代码

当使用 Bootstrap(或任何 Web 支持文件集)时，您可以从多种方法中选择用来设置 HTML 和其他代码的方法。我建议您创建一个文件夹来存储自己的项目，然后将 Bootstrap 文件及其完整的文件夹结构复制到项目文件夹中。将您自己的 HTML 文件放在最顶层，并将您自己的 CSS、JavaScript 和图像文件放在相应的 Bootstrap 子文件夹中(这些文件夹的名称分别为 css、js 和 img)。然后，整体结构如下所示：

CSS 设备调整

meta/viewport 标记是当前的约定，用于将页面调整为设备的可视浏览器空间。万维网联盟 (World Wide Web Consortium, W3C) 正在准备一种替换机制，该机制以一种新的 CSS 规则的形式出现(参见 参考资料)。清单 1 中 meta/viewport 声明的等效 CSS 是：

目前，您可以将这个代码包含在您的 CSS 中，并在 HTML 中保留 meta/viewport 标记。当 CSS 形式受到广泛支持时，您就可以删除meta/viewport 声明。本文来自：http://cda.pinggu.org/