Bootstrap 的 CSS 文件是通过 Less 源码编译而来的。Less 是一门预处理语言，支持变量、mixin、函数等额外功能。对于希望使用 Less 源码而非编译而来的 CSS 文件的用户，Bootstrap 框架中包含的大量变量、mixin 将非常有价值。
针对栅格系统的变量和 mixin 包含在栅格系统章节。
可以通过两种方式使用 Bootstrap ：使用编译后的 CSS 文件或者使用 Less 源码文件。若要编译 Less 文件，请参考“起步”章节的内容以了解如何设置开发环境并运行必须的编译指令。
整个 Bootstrap 项目中使用了大量的变量，这些变量被用来代表颜色、空白（内部、边距）、字体等。详细内容请参考定制工具。
Bootstrap 使用了两种颜色模式：灰度颜色和语义颜色。灰度颜色用于快速获取常用的黑色色调；语义颜色包含了各种赋予语义的颜色值。
你在项目中可以使用这些预定义的颜色变量，或者重新为其赋予别名，使其更有语义。
``` // Use as-is .masthead { background-color: @brand-primary; }// Reassigned variables in Less @alert-message-background: @brand-info; .alert { background-color: @alert-message-background; }
### Scaffolding
某几个变量是改变网站外观的关键要素。
<div style="height:1px;background:#ccc;"></div>// Scaffolding @body-bg: #fff; @text-color: @black-50;
### 链接
仅仅通过改变一个变量，可以很容易地为链接赋予正确的颜色。
<div style="height:1px;background:#ccc;"></div>// Variables @link-color: @brand-primary; @link-hover-color: darken(@link-color, 15%);
// Usage a { color: @link-color; text-decoration: none;
&:hover { color: @link-hover-color; text-decoration: underline; } }
注意：`@link-hover-color` 使用了 Less 提供的一个内置函数，用于自动为鼠标悬停设置合适的颜色。你还可以使用 `darken`、`lighten`、`saturate` 和 `desaturate` 等 Less 内置的函数。
### 排版
通过几个变量就能轻松的设置字体、字号、行距等。Bootstrap 利用这些变量提供了简单地定制排版的功能。
<div style="height:1px;background:#ccc;"></div>@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;
### 图标
以下两个变量用于设置图标文件的位置和文件名。
<div style="height:1px;background:#ccc;"></div>@icon-font-path: "../fonts/"; @icon-font-name: "glyphicons-halflings-regular";
组件
组件贯穿整个 Bootstrap 框架，他们通过一些变量来设置默认值。下面列出的是常用的几个。
<div style="height:1px;background:#ccc;"></div>@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;
## 特定浏览器厂商的 mixin
特定浏览器厂商的 mixin 用于为不同厂商的浏览器使用相应的 CSS 属性前缀来支持各厂商的浏览器。
### Box-sizing
通过这一个 mixin 来为所有组件设置盒模型。请参考这篇 来自 Mozilla 的文章。
此 mixin 从 v3.2.0 版本开始就被列为 不建议使用 了，取而代之的是使用 Autoprefixer。为了保持向后兼容，在 v4 版本之前，Bootstrap 将在内部继续使用这些 mixin。
<div style="height:1px;background:#ccc;"></div>.box-sizing(@box-model) { -webkit-box-sizing: @box-model; // Safari <= 5 -moz-box-sizing: @box-model; // Firefox <= 19 box-sizing: @box-model; }
### 圆角
现在，所有现代浏览器都支持不带厂商前缀的 `border-radius` 属性了。有鉴于此，我们没有提供 `.border-radius()` mixin，但是，Bootstrap does 提供了用于快速设置同一侧圆角的 mixin 。
<div style="height:1px;background:#ccc;"></div>.border-top-radius(@radius) { border-top-right-radius: @radius; border-top-left-radius: @radius; } .border-right-radius(@radius) { border-bottom-right-radius: @radius; border-top-right-radius: @radius; } .border-bottom-radius(@radius) { border-bottom-right-radius: @radius; border-bottom-left-radius: @radius; } .border-left-radius(@radius) { border-bottom-left-radius: @radius; border-top-left-radius: @radius; }
### Box (Drop) 隐形
如果你的目标用户使用的是最新版本和更高级的浏览器和设备，只需单独使用 `box-shadow` 属性即可。如果你需要兼容较老的 Android (低于 v4) 和 iOS 设备 (低于 iOS 5)，可以使用下面这个 不建议使用 的 mixin，便于帮你添加 -webkit 前缀。
由于 Bootstrap 并未官方提供对过时（不支持标准属性）平台的支持，此 mixin 从 v3.1.0 版本期就 不建议使用 了。为了保持向后兼容，Bootstrap 将继续在内部使用此 mixin， 直到 Bootstrap v4。
在设置 box 阴影时务必使用 rgba() 颜色，这样可以使他们尽可能地与背景无缝融入。
<div style="height:1px;background:#ccc;"></div>.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 box-shadow: @shadow; }
### 过渡效果
有多个 `mixin` 供你灵活使用。可以一次性设置所有的过渡效果的属性，或者根据需要只是指定延时和持续时间。
此 mixin 从 v3.2.0 版本开始就被列为 不建议使用 了，取而代之的是使用 Autoprefixer。为了保持向后兼容，在 v4 版本之前，Bootstrap 将在内部继续使用这些 mixin。
<div style="height:1px;background:#ccc;"></div>.transition(@transition) { -webkit-transition: @transition; transition: @transition; } .transition-property(@transition-property) { -webkit-transition-property: @transition-property; transition-property: @transition-property; } .transition-delay(@transition-delay) { -webkit-transition-delay: @transition-delay; transition-delay: @transition-delay; } .transition-duration(@transition-duration) { -webkit-transition-duration: @transition-duration; transition-duration: @transition-duration; } .transition-timing-function(@timing-function) { -webkit-transition-timing-function: @timing-function; transition-timing-function: @timing-function; } .transition-transform(@transition) { -webkit-transition: -webkit-transform @transition; -moz-transition: -moz-transform @transition; -o-transition: -o-transform @transition; transition: transform @transition; }
### 变形
旋转、缩放、平移（移动）或倾斜任何对象。
此 mixin 从 v3.2.0 版本开始就被列为 **不建议使用** 了，取而代之的是使用 Autoprefixer。为了保持向后兼容，在 v4 版本之前，Bootstrap 将在内部继续使用这些 mixin。
<div style="height:1px;background:#ccc;"></div>.rotate(@degrees) { -webkit-transform: rotate(@degrees); -ms-transform: rotate(@degrees); // IE9 only transform: rotate(@degrees); } .scale(@ratio; @ratio-y...) { -webkit-transform: scale(@ratio, @ratio-y); -ms-transform: scale(@ratio, @ratio-y); // IE9 only transform: scale(@ratio, @ratio-y); } .translate(@x; @y) { -webkit-transform: translate(@x, @y); -ms-transform: translate(@x, @y); // IE9 only transform: translate(@x, @y); } .skew(@x; @y) { -webkit-transform: skew(@x, @y); -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ transform: skew(@x, @y); } .translate3d(@x; @y; @z) { -webkit-transform: translate3d(@x, @y, @z); transform: translate3d(@x, @y, @z); }
.rotateX(@degrees) { -webkit-transform: rotateX(@degrees); -ms-transform: rotateX(@degrees); // IE9 only transform: rotateX(@degrees); } .rotateY(@degrees) { -webkit-transform: rotateY(@degrees); -ms-transform: rotateY(@degrees); // IE9 only transform: rotateY(@degrees); } .perspective(@perspective) { -webkit-perspective: @perspective; -moz-perspective: @perspective; perspective: @perspective; } .perspective-origin(@perspective) { -webkit-perspective-origin: @perspective; -moz-perspective-origin: @perspective; perspective-origin: @perspective; } .transform-origin(@origin) { -webkit-transform-origin: @origin; -moz-transform-origin: @origin; -ms-transform-origin: @origin; // IE9 only transform-origin: @origin; }
## 动画
仅适用一个 mixin 就可以在一个声明中使用所有 CSS3 所提供的动画属性，其他 mixin 用于设置单个属性。
T此 mixin 从 v3.2.0 版本开始就 不建议使用 了，取而代之的是使用 Autoprefixer。为了保持向后兼容，在 v4 版本之前，Bootstrap 将在内部继续使用这些 mixin。
<div style="height:1px;background:#ccc;"></div>.animation(@animation) { -webkit-animation: @animation; animation: @animation; } .animation-name(@name) { -webkit-animation-name: @name; animation-name: @name; } .animation-duration(@duration) { -webkit-animation-duration: @duration; animation-duration: @duration; } .animation-timing-function(@timing-function) { -webkit-animation-timing-function: @timing-function; animation-timing-function: @timing-function; } .animation-delay(@delay) { -webkit-animation-delay: @delay; animation-delay: @delay; } .animation-iteration-count(@iteration-count) { -webkit-animation-iteration-count: @iteration-count; animation-iteration-count: @iteration-count; } .animation-direction(@direction) { -webkit-animation-direction: @direction; animation-direction: @direction; }
### 透明度
为所有浏览器设置透明度，并为IE8提供 filter 备用滤镜。
<div style="height:1px;background:#ccc;"></div>.opacity(@opacity) { opacity: @opacity; // IE8 filter @opacity-ie: (@opacity * 100); filter: ~"alpha(opacity=@{opacity-ie})"; }
### 占位符文本
为表单控件中每个文本域提供占位符（Placeholder）文本的颜色。
<div style="height:1px;background:#ccc;"></div>.placeholder(@color: @input-color-placeholder) { &::-moz-placeholder { color: @color; } // Firefox &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ &::-webkit-input-placeholder { color: @color; } // Safari and Chrome }
## 列
通过CSS在一个单独的元素中生成列。
<div style="height:1px;background:#ccc;"></div>.content-columns(@width; @count; @gap) { -webkit-column-width: @width; -moz-column-width: @width; column-width: @width; -webkit-column-count: @count; -moz-column-count: @count; column-count: @count; -webkit-column-gap: @gap; -moz-column-gap: @gap; column-gap: @gap; }
## 渐变
便于把任何两种颜色变成背景渐变色。想要使他更高级些，可以设置一个direction（方向），使用三种颜色，也可以使用径向（radial）渐变。使用一个mixin（混入），你就可以得到所有需要的前缀语法。
<div style="height:1px;background:#ccc;"></div>
你也可以为标准的里两颜色线性渐变指定角度：
<div style="height:1px;background:#ccc;"></div>
如果你需要一个条纹风格的渐变，这也很容易。只要指定一个颜色，我们将该颜色半透明的条纹覆盖其上。
<div style="height:1px;background:#ccc;"></div>
再来试试三种颜色。利用此 mixin ，并为其设置第一种颜色、第二种颜色、第二种颜色的色标（例如 25%），还有第三种颜色：
<div style="height:1px;background:#ccc;"></div>
当心！ 如果你想删除某个渐变，确保将你所添加的针对 IE 的 filter 一并删除。你可以通过使用 .reset-filter() mixin 和 background-image: none; 达到目的。
### 实用工具 mixin
实用工具 mixin 用于与不相关的 CSS 结合以达到特定目的或任务。
### Clearfix -- 清除浮动
建议为需要清除浮动的元素使用 `.clearfix()` mixin ，尽量不要直接添加 `class="clearfix"` 类。基于 Nicolas Gallagher 的 micro clearfix 代码。
<div style="height:1px;background:#ccc;"></div>// Mixin .clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; } }
// Usage .container { .clearfix(); }
### 水平居中
让元素在其父元素中水平居中。需要设置 `width` 或 `max-width` 属性。
<div style="height:1px;background:#ccc;"></div>// Mixin .center-block() { display: block; margin-left: auto; margin-right: auto; }
// Usage .container { width: 940px; .center-block(); }
### 尺寸助手 mixin
用于方便的指定对象的尺寸。
<div style="height:1px;background:#ccc;"></div>// Mixins .size(@width; @height) { width: @width; height: @height; } .square(@size) { .size(@size; @size); }
// Usage .image { .size(400px; 300px); } .avatar { .square(48px); }
### 可调整大小的文本域
方便设置任何文本域或其他元素的尺寸可调整。默认依循浏览器默认行为 (both)，即垂直、水平都可以调整。
<div style="height:1px;background:#ccc;"></div>.resizable(@direction: both) { // Options: horizontal, vertical, both resize: @direction; // Safari fix overflow: auto; }
截断文本
此 mixin 用来以省略号代替被截断的文本。元素必须是 block 或 inline-block 级。
<div style="height:1px;background:#ccc;"></div>// Mixin .text-overflow() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
// Usage .branch-name { display: inline-block; max-width: 200px; .text-overflow(); }
### 视网膜屏幕（Retina）下的图片
通过指定两个图片路径和 @1x 图片尺寸，Bootstrap 还提供了对 @2x 媒体查询的支持。 如果你的页面上有很多图片，建议在一个单独的媒体查询中手工编写针对视网膜屏幕的 CSS 代码。
<div style="height:1px;background:#ccc;"></div>.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { background-image: url("@{file-1x}");
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { background-image: url("@{file-2x}"); background-size: @width-1x @height-1x; } }
// Usage .jumbotron { .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px); }
目录