[+]文章目录

使用 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);
    }

« 前一篇