如何自定义 Twitter Bootstrap 以适应您的网页设计
一份简短的指南，为网页开发人员介绍如何为他们的网页设计定制 Twitter Bootstrap
引言
将网页的图形设计转换为 HTML 和 CSS 的过程一直是一个巨大的挑战，因为网络上的每个浏览器都会按照自己的理解方式渲染您的设计，而不是按照您设计的方式。
幸运的是，最近，一些经验丰富的网页设计师在全球范围内启动了一些名为 Web 前端框架的项目，这些项目可以帮助网页开发人员专注于他们的设计，而不是在不同的浏览器中测试他们的页面并修复浏览器兼容性问题。
"Twitter Bootstrap" 是网络上流行的框架之一，由 Twitter 开发者 Mark Otto 和 Jacob Thornton 创建。
(非常感谢他们。)
Bootstrap 网站上的使用文档非常全面（入门 - Bootstrap），再加上网络上其他大量文章，解释了如何使用 Bootstrap 的网格系统和组件，但这个框架有一个默认的图形设计，虽然设计非常漂亮，但在所有使用 Bootstrap 作为布局框架的网站上重复相同的设计就不好玩了。
因此，我决定写这篇文章，解释如何定制 Bootstrap 框架以适应您自己的风格和设计。
我们开始吧...
要求
重要提示：要完成本教程，您必须具备基本的 Less 语言知识。
首先，请在此处从 Github 网站下载 Bootstrap 包：https://github.com/twitter/bootstrap。
然后，您需要一个配备“开发者工具”的网络浏览器，最好是“WebKit 浏览器”。我使用的是我最喜欢的“Apple Safari 浏览器”。您可以在此处下载“Google Chrome 浏览器”：https://www.google.com/intl/en/chrome/browser/。
此外，您还需要一个您选择的“文本编辑器”，最好支持“HTML”和“Less”语法高亮（我使用了 Sublime Text 2），以及一种编译您的 less 文件的方法，这在 Less 官方网站上有所说明。
（我将使用 Less.app。）
设置文件结构
解压缩您之前从 Bootstrap 的 Github 页面下载的 ZIP 文件，然后查看解压缩后的文件夹。
“less”、“js”和“img”文件夹是每个 Bootstrap 网页设计的核心文件夹。
在 less 文件夹中，包含了组成 Bootstrap CSS 框架的 less 文件。
仔细查看，您会在 less 文件夹中找到一个“test”文件夹。
此文件夹包含一些 HTML 文件，它们是简单的 Bootstrap 布局。这些可以用于定制目的，但我将创建我自己的测试页面，其中包含我将要定制的主要组件。
我创建了一个简单的 Bootstrap 布局，结合了上面解释的测试文件中的一些组件。
我的页面由两个“navbar”s、“hero-unit”、“button”s、“dropdown”和“dropup”菜单组成。
正如我之前提到的，Bootstrap 是一个框架，众所周知，修改主要框架文件来定制它并不是一个好习惯。为什么？
首先，这个框架可能会不时地进行更新，那样的话，您需要为新版本重新进行定制！
此外，那样的话，您可能会搞乱框架文件，框架可能无法正常工作！
因此，由于上述原因，我创建了一个文件夹结构，该结构将包含一个命名为框架名称的文件夹（不包括“less”和“js”文件夹中的“test”文件夹）内的 Bootstrap 原始文件夹和文件，一个用于存放我稍后将解释的 own less 文件的 less 文件夹，一个用于存放未来我将添加到我页面上的图片的 img 文件夹，最后是一个 js 文件夹，用于存放第三方 JavaScript 库以及我自己的 JavaScript 文件。
然后，我将我的 index.html 文件放在这些文件夹旁边。
下一步是添加我自己的 less 文件，这些文件将覆盖和定制我的 less 文件夹中的主框架。
Bootstrap 包含两个主要文件，如果覆盖它们，几乎整个框架都会被覆盖和定制。
这些文件是“variables.less”和“bootstrap.less”。
我创建了一个“custom-variables.less”和一个“custom-bootstrap.less”文件来覆盖等效的原始文件，另外还有一个“my-bootstrap-theme.less”文件，用于包含额外的自定义 less 代码，并将整个设置编译成一个名为“my-bootstrap-theme.css”的单一 CSS 文件。
我将“variables.less”和“bootstrap.less”文件的精确副本放在我自己的自定义文件中，并将自定义 bootstrap.less 中的文件 URL 修改为对应 bootstrap 文件夹内的框架文件，并将“variables.less”文件的 URL 修改为对应我自己的“custom-variables.less”文件，这样编译文件就会包含带有我的自定义设置的框架。
在下一步，我提取了默认的 Bootstrap 颜色，并使用“ColorSchemer Studio”来调整颜色，使其更温暖一些。
我还使灰色系的颜色稍微温暖了一些，这样白色和黑色就不再是绝对的白色和黑色了。
（可以在文件中添加和使用任何其他颜色，没有限制。）
因此，我将 custom-variables.less 文件中的颜色替换为新的颜色。
我还更改了 body 的背景和文本颜色。
在继续深入之前，我们需要实时更新样式以对应我们在 less 文件中的更改。
为此，我从 Less 官方网站下载了“less.js”文件。
我按照页面上的说明为我的 Bootstrap 页面设置了实时预览。
重要提示：由于 less.js 库使用 Ajax 加载 .less 文件，而大多数现代浏览器不允许跨域 Ajax 文件访问，因此您需要在您的工作站上运行一个简单的 HTML 服务器，并在 https:/// 的子 URL 下查看您的页面，这样 Ajax 请求才会有效，less.js 才能实时渲染您的 .less 文件。
（对于本文，我使用了 Mac OS X 的 WebSharing 选项，这是一个简单的 Apache 服务器设置。）
如上图所示，我同时包含了原始的 bootstrap.less 文件和我的 my-bootstrap-theme.less 文件，这样我们就可以切换回原始框架并看到区别。
好了，当我们访问 Web 服务器地址时，我们的页面将使用 less.js 进行渲染，我们可以看到我们布局的实际外观。
在 my-bootstrap-theme.less 文件中，我导入了 custom-bootstrap.less 文件，该文件本身导入了 custom-bootstrap.less。
所以，我通过注释掉原始文件并取消注释 my-bootstrap-theme.less 来切换我 HTML 文件中的 .less 文件，然后开始处理 custom-variables.less 文件中的变量。
但在开始定制之前，这里有一个小技巧可以让您的工作更轻松。
通常，您必须重新加载页面才能看到您在 less 文件中所做的更改并保存，但是 less.js 库引入了一个功能，可以省去重新加载页面的麻烦。
在您页面的 URL 末尾添加 #!watch 查询字符串，重新加载页面，这样就可以了。不再需要重新加载。
在这里，我对 custom-variables.less 文件中的 hero-unit 类进行了一个更改，在保存文件后，我的页面自动更新以显示更改。
更改 less 文件中的颜色很容易，您可以使用 less 内置函数来调整颜色，然后通过 less.js 的自动更新功能查看结果。但是，有时您需要一种更直接、更快速的方法来测试 CSS 值，这时“开发者工具”就派上用场了。
我想调整按钮的圆角半径，我想修改这个值并看到按钮的即时更新。
右键单击您选择的元素，然后选择“检查元素”，“开发者工具”就会出现，左侧有一个面板用于操作 HTML element 标签，右侧有一个面板显示 CSS 规则和值，允许您更改 CSS 值并查看浏览器窗口中元素的即时更新。
在这里，我正在更改圆角大小的值，我可以看到浏览器窗口中的结果。
运用我们的知识
我已经更改了按钮的边框和背景颜色（包括渐变），body 的背景和文本颜色，hero-unit 的背景颜色，navbar 的普通和反转颜色，以及 custom-variables.less 文件中变量的其他一些更改，我们的自定义 Bootstrap 主题几乎准备好了。
让我们完成最后几步。
最后步骤
最后，我想调整一些不在 variables.less 文件中的值。
一些组件（包括下拉菜单）的 less 样式位于直接的组件文件中，因此无法在 variables.less 文件中覆盖。在这种情况下，有两种解决方案可以进行调整。
第一种也是（我）不推荐的方法是创建一个 less 文件，如 custom-dropdown.less，并使用原始文件中的类来覆盖更改。但这会导致您创建太多文件。
第二种解决方案是复制原始文件中的相应类，并将其插入到单个文件中（我已经创建并命名为 my-bootstrap-theme.less），并设置样式，如果需要，可以创建单独的节，使用注释来方便查找。
这正是我所做的。
这是我最后的 my-bootstrap-theme.less 文件。
这样，我们的定制 less 文件就准备好了，我们可以编译最终的 .css 文件了。
有很多方法可以完成这个过程，但我更喜欢一个现成的工具，我选择了“Less.app”应用程序，并将“my-bootstrap-theme.less”文件编译成“my-bootstrap-theme.css”文件。
最后，我更新了 index.html 以链接最近生成的 .css 文件，并注释掉了 less 文件和 less.js 的引用，这样我的页面就只依赖于纯 CSS 了。
这是我们全新功能齐全且定制化的 Bootstrap 主题。
希望您喜欢它，不久我们将看到许多新的 Bootstrap 主题出现。