Bootstrap 的 CSS 文件是通过 Less 源码编译而来的。Less 是一门预处理语言，支持变量、mixin、函数等额外功能。
对于希望使用 Less 源码而非编译而来的 CSS 文件的用户，Bootstrap 框架中包含的大量变量、mixin 将非常有价值。
可以通过两种方式使用 Bootstrap：使用编译后的 CSS 文件，或者使用 Less 源码文件。若要编译 Less 文件，请参考编译Bootstrap的内容，以了解如何设置开发环境并运行必须的编译指令。
变量
整个 Bootstrap 项目中使用了大量的变量，这些变量被用来代表颜色、内边距、外边距、字体等。详细内容请参考定制工具。
1、颜色
Bootstrap 使用了两种颜色模式：灰度颜色和语义颜色。
灰度颜色用于快速获取常用的黑色色调。如：
<pre class="prettyprint linenums" style="padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; display: block; margin: 0px 0px 20px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background: rgb(255, 255, 255); border: 1px solid rgb(245, 245, 245); box-shadow: rgb(251, 251, 252) 44px 0px 0px inset, rgb(245, 245, 245) 45px 0px 0px inset; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 1.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
@gray-darker: lighten(#000, 13.5%); // #222@gray-dark: lighten(#000, 20%); // #333@gray: lighten(#000, 33.5%); // #555@gray-light: lighten(#000, 46.7%); // #777@gray-lighter: lighten(#000, 93.5%); // #eee
</pre>
得到的颜色如图 2‑84所示：
灰度颜色
<figcaption style="display: block; margin-top: 1em; font-size: 0.86em; font-family: Georgia, SimHei; white-space: pre;">图2-84 灰度颜色</figcaption>
语义颜色包含了各种赋予语义的颜色值。如：
<pre class="prettyprint linenums" style="padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; display: block; margin: 0px 0px 20px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background: rgb(255, 255, 255); border: 1px solid rgb(245, 245, 245); box-shadow: rgb(251, 251, 252) 44px 0px 0px inset, rgb(245, 245, 245) 45px 0px 0px inset; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 1.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
@brand-primary: darken(#428bca, 6.5%); // #337ab7@brand-success: #5cb85c;@brand-info: #5bc0de;@brand-warning: #f0ad4e;@brand-danger: #d9534f;
</pre>
得到的颜色如图 2‑85所示：
语义颜色
<figcaption style="display: block; margin-top: 1em; font-size: 0.86em; font-family: Georgia, SimHei; white-space: pre;">图2-85 语义颜色</figcaption>
在你的项目中，你可以直接使用这些预定义的颜色变量，或者重新为其赋予别名，使其更有语义。如：
<pre class="prettyprint linenums" style="padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; display: block; margin: 0px 0px 20px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background: rgb(255, 255, 255); border: 1px solid rgb(245, 245, 245); box-shadow: rgb(251, 251, 252) 44px 0px 0px inset, rgb(245, 245, 245) 45px 0px 0px inset; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 1.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
// 直接使用.masthead {background-color: @brand-primary;}// 使用别名@alert-message-background: @brand-info;.alert {background-color: @alert-message-background;}
</pre>
2、脚手架
某几个变量是改变网站外观的关键要素。如：
<pre class="prettyprint linenums" style="padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; display: block; margin: 0px 0px 20px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background: rgb(255, 255, 255); border: 1px solid rgb(245, 245, 245); box-shadow: rgb(251, 251, 252) 44px 0px 0px inset, rgb(245, 245, 245) 45px 0px 0px inset; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 1.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
@body-bg: #fff;@text-color: @black-50;
</pre>
3、链接
仅仅通过改变一个变量，可以很容易地为链接赋予正确的颜色。如：
<pre class="prettyprint linenums" style="padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; display: block; margin: 0px 0px 20px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background: rgb(255, 255, 255); border: 1px solid rgb(245, 245, 245); box-shadow: rgb(251, 251, 252) 44px 0px 0px inset, rgb(245, 245, 245) 45px 0px 0px inset; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 1.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
// 变量@link-color: @brand-primary;@link-hover-color: darken(@link-color, 15%);// 使用a {color: @link-color;text-decoration: none;&:hover {color: @link-hover-color;text-decoration: underline;}}
</pre>
注意：@link-hover-color使用了 Less 提供的一个内置函数，用于自动为鼠标悬停设置合适的颜色。你还可以使用darken、lighten、saturate和desaturate等 Less 内置的函数。
4、排版
通过几个变量就能轻松的设置字体、字号、行距等。Bootstrap 利用这些变量提供了简单地定制排版的功能。
<pre class="prettyprint linenums" style="padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; display: block; margin: 0px 0px 20px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background: rgb(255, 255, 255); border: 1px solid rgb(245, 245, 245); box-shadow: rgb(251, 251, 252) 44px 0px 0px inset, rgb(245, 245, 245) 45px 0px 0px inset; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 1.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;@font-family-serif: Georgia, "Times New Roman", Times, serif;@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;@font-family-base: @font-family-sans-serif;@font-size-base: 14px;@font-size-large: ceil((@font-size-base * 1.25)); // ~18px@font-size-small: ceil((@font-size-base * 0.85)); // ~12px@font-size-h1: floor((@font-size-base * 2.6)); // ~36px@font-size-h2: floor((@font-size-base * 2.15)); // ~30px@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px@font-size-h5: @font-size-base;@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px@line-height-base: 1.428571429; // 20/14@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px@headings-font-family: inherit;@headings-font-weight: 500;@headings-line-height: 1.1;@headings-color: inherit;
</pre>
5、图标
以下两个变量用于设置图标文件的位置和文件名。
<pre class="prettyprint linenums" style="padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; display: block; margin: 0px 0px 20px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background: rgb(255, 255, 255); border: 1px solid rgb(245, 245, 245); box-shadow: rgb(251, 251, 252) 44px 0px 0px inset, rgb(245, 245, 245) 45px 0px 0px inset; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 1.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
@icon-font-path: "../fonts/";@icon-font-name: "glyphicons-halflings-regular";
</pre>
6、组件
组件贯穿整个 Bootstrap 框架，他们通过一些变量来设置默认值。下面列出的是常用的几个。
<pre class="prettyprint linenums" style="padding: 8px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; font-size: 13px; color: rgb(51, 51, 51); border-radius: 4px; display: block; margin: 0px 0px 20px; line-height: 20px; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap; background: rgb(255, 255, 255); border: 1px solid rgb(245, 245, 245); box-shadow: rgb(251, 251, 252) 44px 0px 0px inset, rgb(245, 245, 245) 45px 0px 0px inset; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 1.4px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
@padding-base-vertical: 6px;@padding-base-horizontal: 12px;@padding-large-vertical: 10px;@padding-large-horizontal: 16px;@padding-small-vertical: 5px;@padding-small-horizontal: 10px;@padding-xs-vertical: 1px;@padding-xs-horizontal: 5px;@line-height-large: 1.33;@line-height-small: 1.5;@border-radius-base: 4px;@border-radius-large: 6px;@border-radius-small: 3px;@component-active-color: #fff;@component-active-bg: @brand-primary;@caret-width-base: 4px;@caret-width-large: 5px;
</pre>
