Bootstrap源碼中的LESS變量詳解

2013-08-02 15:41:51來源：RIA之家作者：

Bootstrap的核心是用less來編寫的，bootstrap對(duì)less進(jìn)行了二次封裝，提供了很多基礎(chǔ)的less變量和函數(shù)，個(gè)人覺得非常有用，下面就來具體看下bootstrap為我們提供了哪些常用的變量和函數(shù)吧。

Bootstrap的核心是用less來編寫的，bootstrap對(duì)less進(jìn)行了二次封裝，提供了很多基礎(chǔ)的less變量和函數(shù)，個(gè)人覺得非常有用，下面就來具體看下bootstrap為我們提供了哪些常用的變量和函數(shù)吧。
 


Bootstrap變量


基礎(chǔ)設(shè)置

@bodyBackground @white 頁(yè)面背景色  
@textColor @grayDark 默認(rèn)的文字顏色  
@linkColor #08c 默認(rèn)的鏈接顏色  
@linkColorHover darken(@linkColor, 15%) 默認(rèn)鏈接hover樣式  


頁(yè)面柵格

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6.382978723%
@fluidGridGutterWidth 2.127659574%


字體

@sansFontFamily “Helvetica Neue”, Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, “Courier New”, monospace
@baseFontSize 13px 以像素為單位
@baseFontFamily @sansFontFamily
@baseLineHeight 18px 以像素為單位
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit


表格tables

@tableBackground transparent
@tableBackgroundAccent #f9f9f9
@tableBackgroundHover #f5f5f5
@tableBorder ddd


冷色調(diào)

@black #000  
@grayDarker #222  
@grayDark #333  
@gray #555  
@grayLight #999  
@grayLighter #eee  
@white #fff  


暖色調(diào)

@blue #049cdb  
@green #46a546  
@red #9d261d  
@yellow #ffc40d  
@orange #f89406  
@pink #c3325f  
@purple #7a43b6  


組件

按鈕buttons

@btnBackground @white  
@btnBackgroundHighlight darken(@white, 10%)  
@btnBorder darken(@white, 20%)  
@btnPrimaryBackground @linkColor  
@btnPrimaryBackgroundHighlight spin(@btnPrimaryBackground, 15%)  
@btnInfoBackground #5bc0de  
@btnInfoBackgroundHighlight #2f96b4  
@btnSuccessBackground #62c462  
@btnSuccessBackgroundHighlight 51a351  
@btnWarningBackground lighten(@orange, 15%)  
@btnWarningBackgroundHighlight @orange  
@btnDangerBackground #ee5f5b  
@btnDangerBackgroundHighlight #bd362f  
@btnInverseBackground @gray  
@btnInverseBackgroundHighlight @grayDarker  

表單Forms

@placeholderText @grayLight
@inputBackground @white
@inputBorder #ccc
@inputBorderRadius 3px
@inputDisabledBackground @grayLighter
@formActionsBackground #f5f5f5

表單Form提示背景及文字顏色

@warningText #c09853  
@warningBackground #f3edd2  
@errorText #b94a48  
@errorBackground #f2dede  
@successText #468847  
@successBackground #dff0d8  
@infoText #3a87ad  
@infoBackground #d9edf7  

導(dǎo)航欄

@navbarHeight 40px  
@navbarBackground @grayDarker  
@navbarBackgroundHighlight @grayDark  
@navbarText @grayLight  
@navbarLinkColor @grayLight  
@navbarLinkColorHover @white  
@navbarLinkColorActive @navbarLinkColorHover  
@navbarLinkBackgroundHover transparent  
@navbarLinkBackgroundActive @navbarBackground  
@navbarSearchBackground lighten(@navbarBackground, 25%)  
@navbarSearchBackgroundFocus @white  
@navbarSearchBorder darken(@navbarSearchBackground, 30%)  
@navbarSearchPlaceholderColor #ccc  
@navbarBrandColor @navbarLinkColor  

下拉Dropdowns

@dropdownBackground @white
@dropdownBorder rgba(0,0,0,.2)
@dropdownLinkColor @grayDark
@dropdownLinkColorHover @white
@dropdownLinkBackgroundHover @linkColor

Hero unit

@heroUnitBackground @grayLighter  
@heroUnitHeadingColor inherit  
@heroUnitLeadColor inhereit  


Bootstrap混合


關(guān)于混合

基礎(chǔ)的混合

混合就是將一段需要進(jìn)行合并的樣式通過less的一種申明方式寫到一起，它可以方便的被其他樣式調(diào)用，從而達(dá)到能夠重用的目的。

.element {
.clearfix();
}

帶參數(shù)的混合
這種混合和基礎(chǔ)混合比較類似，它增加接受參數(shù)的功能，當(dāng)然如果你不傳任何參數(shù)，它會(huì)提供一個(gè)默認(rèn)值

.element {
.border-radius(4px);
}

易于擴(kuò)展

所有的混合都是存儲(chǔ)在mixins.less中的，如果各位有什么需要增加的混合可以直接集成到utilities.less中，方便調(diào)用。

bootstrap包含的混合

常用混合

混合 參數(shù) 用途
.clearfix() none 清除浮動(dòng)
.tab-focus() none 自動(dòng)聚焦
.center-block() none 居中，相當(dāng)于margin: auto
.ie7-inline-block() none 讓IE6,7支持display: inline-block
.size() @height @width 設(shè)置容器寬高
.square() @size 設(shè)置該容器為正方形，參數(shù)為邊長(zhǎng)
.opacity() @opacity 設(shè)置容器透明度

表單forms

混合 參數(shù) 用途
.placeholder() @color: @placeholderText 設(shè)置輸入框的默認(rèn)文案

字體

混合 參數(shù) 用途
#font > #family > .serif() none 設(shè)置這個(gè)元素的字體為有襯線字體
#font > #family > .sans-serif() none 設(shè)置這個(gè)元素的字體為無襯線字體
#font > #family > .monospace() none 設(shè)置這個(gè)元素的字體為等寬字體
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight 簡(jiǎn)單的設(shè)置字體的大小粗細(xì)等等
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight 設(shè)置該字體為有襯線字體，并設(shè)置字體的大小粗細(xì)等等
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight 設(shè)置該字體為無襯線字體，并設(shè)置字體的大小粗細(xì)等等
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight 設(shè)置該字體為等寬字體，并設(shè)置字體的大小粗細(xì)等等

柵格系統(tǒng)

相關(guān)的less代碼在mixins.less中

混合 參數(shù) 用途
.container-fixed() none 指定該容器為居中
#grid > .core() @gridColumnWidth, @gridGutterWidth 初始化柵格系統(tǒng)，參數(shù)傳遞分別為柵格的列寬和柵格之間的距離
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth 初始化柵格系統(tǒng)，參數(shù)傳遞分別為每個(gè)柵格的所占柵格總寬度的百分比和柵格之間的距離所占柵格總寬度的百分比
#grid > .input() @gridColumnWidth, @gridGutterWidth 生成input相關(guān)元素的柵格布局，參數(shù)傳遞分別為柵格的列寬和柵格之間的距離
.makeColumn @columns: 1, @offset: 0 在柵格系統(tǒng)中初始化一個(gè)占幾列的div容器，columns為該容器跨域的列數(shù)，offset為改容器的左偏移

css3屬性

混合 參數(shù) 用途
.border-radius() @radius css3圓角，參數(shù)為圓角像素
.box-shadow() @shadow css3陰影
.transition() @transition css3動(dòng)畫，(如, all .2s linear)
.rotate() @degrees 旋轉(zhuǎn)一個(gè)元素，參數(shù)為旋轉(zhuǎn)的度數(shù)
.scale() @ratio 縮放元素，參數(shù)為縮放后和元尺寸的比列
.translate() @x, @y 在平面上移動(dòng)元素，參數(shù)對(duì)應(yīng)分別為相對(duì)于x軸和y軸的移動(dòng)距離
.background-clip() @clip 背景裁剪，傳入clip，clip選擇border | padding | content
.background-size() @size 通過css3來控制背景圖片的尺寸
.box-sizing() @boxmodel 改變?nèi)萜鞯暮心Ｐ�，例如我們可以改變類似input button的盒模型為傳統(tǒng)的IE模型，即設(shè)置第一個(gè)參數(shù)為border-box就可以達(dá)到所有瀏覽器兼容的目的
.user-select() @select 用來控制內(nèi)容的可選擇性
.backface-visibility() @visibility: visible css3D動(dòng)畫效果是否隱藏內(nèi)容的背面，
.resizable() @direction: both 讓元素可以進(jìn)行向右和向下的拉伸縮放
.content-columns() @columnCount, @columnGap: @gridGutterWidth 讓容器具有css3的屬性content-count和column-gap，第一個(gè)參數(shù)為列數(shù)，第二個(gè)參數(shù)為列數(shù)之間的間距

背景和漸變

混合 參數(shù) 用途
#translucent > .background() @color: @white, @alpha: 1 給元素半透明的背景色，第一個(gè)參數(shù)為背景色，第二個(gè)參數(shù)為透明度
#translucent > .border() @color: @white, @alpha: 1 給元素半透明的邊框色，第一個(gè)參數(shù)為邊框顏色，第二個(gè)參數(shù)為透明度
#gradient > .vertical() @startColor, @endColor 讓一個(gè)容器從自上而下顏色漸變，兼容任何瀏覽器，第一個(gè)參數(shù)是開始的顏色，第二個(gè)參數(shù)是結(jié)束的顏色
#gradient > .horizontal() @startColor, @endColor 讓一個(gè)容器從自左而右顏色漸變，兼容任何瀏覽器，第一個(gè)參數(shù)是開始的顏色，第二個(gè)參數(shù)是結(jié)束的顏色
#gradient > .directional() @startColor, @endColor, @deg 讓一個(gè)容器按照一個(gè)角度進(jìn)行漸變，第一個(gè)參數(shù)是開始的演示，第二個(gè)參數(shù)是結(jié)束的顏色，第三個(gè)參數(shù)是進(jìn)行漸變的角度
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor 讓一個(gè)容器按照開始顏色和中間顏色以及結(jié)束顏色進(jìn)行漸變，第一個(gè)參數(shù)是開始的顏色，第二個(gè)參數(shù)是中間的顏色，第三個(gè)參數(shù)是中間漸變結(jié)束的位置，最后一個(gè)參數(shù)是漸變結(jié)束的顏色
#gradient > .radial() @innerColor, @outerColor 讓一個(gè)容器放射性漸變，第一個(gè)參數(shù)是容器中心的顏色，第二個(gè)參數(shù)是容器最外層的顏色
#gradient > .striped() @color, @angle 條紋漸變，第一個(gè)參數(shù)為漸變的顏色，第二個(gè)參數(shù)為漸變的角度
#gradientBar() @primaryColor, @secondaryColor 主要用于按鈕和提示框的垂直顏色漸變


關(guān)于less的編譯

如果你從githib上下載了源碼并對(duì)bootstrap進(jìn)行了修改，你必須針對(duì)bootstrap進(jìn)行編譯。關(guān)于less的編譯我有話要說，現(xiàn)在針對(duì)less的編譯已經(jīng)有很多工具了，http://less.cnodejs.net/tools 大家可以訪問中文官網(wǎng)對(duì)這些工具逐一認(rèn)識(shí)，個(gè)人推薦simpleless，非常方便。


關(guān)鍵詞：BootstrapLESS

贊助商鏈接: