使用 Less

Bootstrap 的 CSS 文件是通过 Less 源码编译而来的。Less 是一门预处理语言，支持变量、mixin、函数等额外功能。对于希望使用 Less 源码而非编译而来的 CSS 文件的用户，Bootstrap 框架中包含的大量变量、mixin 将非常有价值。

针对栅格系统的变量和 mixin 包含在栅格系统章节。

编译 Bootstrap

可以通过两种方式使用 Bootstrap ：使用编译后的 CSS 文件或者使用 Less 源码文件。若要编译 Less 文件，请参考“起步”章节的内容以了解如何设置开发环境并运行必须的编译指令。

变量

整个 Bootstrap 项目中使用了大量的变量，这些变量被用来代表颜色、空白（内部、边距）、字体等。详细内容请参考定制工具。

颜色

Bootstrap 使用了两种颜色模式：灰度颜色和语义颜色。灰度颜色用于快速获取常用的黑色色调；语义颜色包含了各种赋予语义的颜色值。

@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

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

你在项目中可以使用这些预定义的颜色变量，或者重新为其赋予别名，使其更有语义。

    // Use as-is
    .masthead {
      background-color: @brand-primary;
    }

    // Reassigned variables in Less
    @alert-message-background: @brand-info;
    .alert {
      background-color: @alert-message-background;
    }

Scaffolding

某几个变量是改变网站外观的关键要素。

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

链接

仅仅通过改变一个变量，可以很容易地为链接赋予正确的颜色。

    // 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 利用这些变量提供了简单地定制排版的功能。

    @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;

图标

以下两个变量用于设置图标文件的位置和文件名。

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

组件

组件贯穿整个 Bootstrap 框架，他们通过一些变量来设置默认值。下面列出的是常用的几个。

    @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。

.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 。

.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() 颜色，这样可以使他们尽可能地与背景无缝融入。

.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。

.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。

    .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。

.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 备用滤镜。

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

占位符文本

为表单控件中每个文本域提供占位符（Placeholder）文本的颜色。

.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 在一个单独的元素中生成列。

.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（混入），你就可以得到所有需要的前缀语法。

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

你也可以为标准的里两颜色线性渐变指定角度：

#gradient > .directional(#333; #000; 45deg);

如果你需要一个条纹风格的渐变，这也很容易。只要指定一个颜色，我们将该颜色半透明的条纹覆盖其上。

#gradient > .striped(#333; 45deg);

再来试试三种颜色。利用此 mixin ，并为其设置第一种颜色、第二种颜色、第二种颜色的色标（例如 25%），还有第三种颜色：

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

当心！ 如果你想删除某个渐变，确保将你所添加的针对 IE 的 filter 一并删除。你可以通过使用 .reset-filter() mixin 和 background-image: none;达到目的。

实用工具 mixin

实用工具 mixin 用于与不相关的 CSS 结合以达到特定目的或任务。

Clearfix -- 清除浮动

建议为需要清除浮动的元素使用 .clearfix() mixin ，尽量不要直接添加 class="clearfix" 类。基于 Nicolas Gallagher 的 micro clearfix 代码。

    // Mixin
    .clearfix() {
      &:before,
      &:after {
        content: " ";
        display: table;
      }
      &:after {
        clear: both;
      }
    }

    // Usage
    .container {
      .clearfix();
    }

水平居中

让元素在其父元素中水平居中。需要设置 width 或 max-width 属性。

    // Mixin
    .center-block() {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    // Usage
    .container {
      width: 940px;
      .center-block();
    }

尺寸助手 mixin

用于方便的指定对象的尺寸。

    // Mixins
    .size(@width; @height) {
      width: @width;
      height: @height;
    }
    .square(@size) {
      .size(@size; @size);
    }

    // Usage
    .image { .size(400px; 300px); }
    .avatar { .square(48px); }

可调整大小的文本域

方便设置任何文本域或其他元素的尺寸可调整。默认依循浏览器默认行为 (both)，即垂直、水平都可以调整。

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

截断文本

此 mixin 用来以省略号代替被截断的文本。元素必须是 block 或 inline-block 级。

    // 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 代码。

    .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);
    }