Bootstrap 的 CSS 文件是通過 Less 源碼編譯而來的。Less 是一門預(yù)處理語言，支持變量、mixin、函數(shù)等額外功能。對于希望使用 Less 源碼而非編譯而來的 CSS 文件的用戶，Bootstrap 框架中包含的大量變量、mixin 將非常有價(jià)值。
針對柵格系統(tǒng)的變量和 mixin 包含在柵格系統(tǒng)章節(jié)。
可以通過兩種方式使用 Bootstrap ：使用編譯后的 CSS 文件或者使用 Less 源碼文件。若要編譯 Less 文件，請參考“起步”章節(jié)的內(nèi)容以了解如何設(shè)置開發(fā)環(huán)境并運(yùn)行必須的編譯指令。
整個(gè) Bootstrap 項(xiàng)目中使用了大量的變量，這些變量被用來代表顏色、空白（內(nèi)部、邊距）、字體等。詳細(xì)內(nèi)容請參考定制工具。
Bootstrap 使用了兩種顏色模式：灰度顏色和語義顏色?；叶阮伾糜诳焖佾@取常用的黑色色調(diào)；語義顏色包含了各種賦予語義的顏色值。
@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;你在項(xiàng)目中可以使用這些預(yù)定義的顏色變量，或者重新為其賦予別名，使其更有語義。
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}某幾個(gè)變量是改變網(wǎng)站外觀的關(guān)鍵要素。
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;僅僅通過改變一個(gè)變量，可以很容易地為鏈接賦予正確的顏色。
// 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 提供的一個(gè)內(nèi)置函數(shù)，用于自動為鼠標(biāo)懸停設(shè)置合適的顏色。你還可以使用 darken、lighten、saturate 和 desaturate 等Less 內(nèi)置的函數(shù)。
通過幾個(gè)變量就能輕松的設(shè)置字體、字號、行距等。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;以下兩個(gè)變量用于設(shè)置圖標(biāo)文件的位置和文件名。
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";組件貫穿整個(gè) Bootstrap 框架，他們通過一些變量來設(shè)置默認(rèn)值。下面列出的是常用的幾個(gè)。
@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 用于為不同廠商的瀏覽器使用相應(yīng)的 CSS 屬性前綴來支持各廠商的瀏覽器。
通過這一個(gè) mixin 來為所有組件設(shè)置盒模型。請參考這篇 來自 Mozilla 的文章。
此 mixin 從 v3.2.0 版本開始就被列為 不建議使用 了，取而代之的是使用 Autoprefixer。為了保持向后兼容，在 v4 版本之前，Bootstrap 將在內(nèi)部繼續(xù)使用這些 mixin。
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}現(xiàn)在，所有現(xiàn)代瀏覽器都支持不帶廠商前綴的 border-radius 屬性了。有鑒于此，我們沒有提供 .border-radius() mixin，但是，Bootstrap does 提供了用于快速設(shè)置同一側(cè)圓角的 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;
}如果你的目標(biāo)用戶使用的是最新版本和更高級的瀏覽器和設(shè)備，只需單獨(dú)使用 box-shadow 屬性即可。如果你需要兼容較老的 Android (低于 v4) 和 iOS 設(shè)備 (低于 iOS 5)，可以使用下面這個(gè) 不建議使用 的 mixin，便于幫你添加 -webkit 前綴。
由于 Bootstrap 并未官方提供對過時(shí)（不支持標(biāo)準(zhǔn)屬性）平臺的支持，此 mixin 從 v3.1.0 版本期就 不建議使用 了。為了保持向后兼容，Bootstrap 將繼續(xù)在內(nèi)部使用此 mixin， 直到 Bootstrap v4。
在設(shè)置 box 陰影時(shí)務(wù)必使用 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;
}有多個(gè) mixin 供你靈活使用?？梢砸淮涡栽O(shè)置所有的過渡效果的屬性，或者根據(jù)需要只是指定延時(shí)和持續(xù)時(shí)間。
此 mixin 從 v3.2.0 版本開始就被列為 不建議使用 了，取而代之的是使用 Autoprefixer。為了保持向后兼容，在 v4 版本之前，Bootstrap 將在內(nèi)部繼續(xù)使用這些 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;
}旋轉(zhuǎn)、縮放、平移（移動）或傾斜任何對象。
此 mixin 從 v3.2.0 版本開始就被列為 不建議使用 了，取而代之的是使用 Autoprefixer。為了保持向后兼容，在 v4 版本之前，Bootstrap 將在內(nèi)部繼續(xù)使用這些 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;
}僅適用一個(gè) mixin 就可以在一個(gè)聲明中使用所有 CSS3 所提供的動畫屬性，其他 mixin 用于設(shè)置單個(gè)屬性。
T此 mixin 從 v3.2.0 版本開始就 不建議使用 了，取而代之的是使用 Autoprefixer。為了保持向后兼容，在 v4 版本之前，Bootstrap 將在內(nèi)部繼續(xù)使用這些 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;
}為所有瀏覽器設(shè)置透明度，并為IE8提供 filter 備用濾鏡。
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}為表單控件中每個(gè)文本域提供占位符（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 在一個(gè)單獨(dú)的元素中生成列。
.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;
}便于把任何兩種顏色變成背景漸變色。想要使他更高級些，可以設(shè)置一個(gè)direction（方向），使用三種顏色，也可以使用徑向（radial）漸變。使用一個(gè)mixin（混入），你就可以得到所有需要的前綴語法。
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);你也可以為標(biāo)準(zhǔn)的里兩顏色線性漸變指定角度：
#gradient > .directional(#333; #000; 45deg);如果你需要一個(gè)條紋風(fēng)格的漸變，這也很容易。只要指定一個(gè)顏色，我們將該顏色半透明的條紋覆蓋其上。
#gradient > .striped(#333; 45deg);再來試試三種顏色。利用此 mixin ，并為其設(shè)置第一種顏色、第二種顏色、第二種顏色的色標(biāo)（例如 25%），還有第三種顏色：
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);當(dāng)心！ 如果你想刪除某個(gè)漸變，確保將你所添加的針對 IE 的 filter 一并刪除。你可以通過使用 .reset-filter() mixin 和 background-image: none;達(dá)到目的。
實(shí)用工具 mixin 用于與不相關(guān)的 CSS 結(jié)合以達(dá)到特定目的或任務(wù)。
建議為需要清除浮動的元素使用 .clearfix() mixin ，盡量不要直接添加 class="clearfix" 類。基于 Nicolas Gallagher 的 micro clearfix 代碼。
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}讓元素在其父元素中水平居中。需要設(shè)置 width 或 max-width 屬性。
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}用于方便的指定對象的尺寸。
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }方便設(shè)置任何文本域或其他元素的尺寸可調(diào)整。默認(rèn)依循瀏覽器默認(rèn)行為 (both)，即垂直、水平都可以調(diào)整。
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}此 mixin 用來以省略號代替被截?cái)嗟奈谋?。元素必須?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();
}通過指定兩個(gè)圖片路徑和 @1x 圖片尺寸，Bootstrap 還提供了對 @2x 媒體查詢的支持。 如果你的頁面上有很多圖片，建議在一個(gè)單獨(dú)的媒體查詢中手工編寫針對視網(wǎng)膜屏幕的 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);
}
掃碼關(guān)注鍍金池微信號
手機(jī)訂課，優(yōu)惠多多