Bootstrap的核心是用less來編寫的，bootstrap對less進行了二次封裝，提供了很多基礎的less變量和函數，個人覺得非常有用，下面就來具體看下bootstrap為我們提供了哪些常用的變量和函數吧。
Bootstrap變量
基礎設置
| @bodyBackground | @white | 頁面背景色 | |
| @textColor | @grayDark | 默認的文字顏色 | |
| @linkColor | #08c | 默認的鏈接顏色 | |
| @linkColorHover | darken(@linkColor, 15%) | 默認鏈接hover樣式 |
頁面柵格
| @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 |
冷色調
| @black | #000 | |
| @grayDarker | #222 | |
| @grayDark | #333 | |
| @gray | #555 | |
| @grayLight | #999 | |
| @grayLighter | #eee | |
| @white | #fff |
暖色調
| @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 |
導航欄
| @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混合
關于混合
基礎的混合
混合就是將一段需要進行合并的樣式通過less的一種申明方式寫到一起，它可以方便的被其他樣式調用，從而達到能夠重用的目的。
|
.element {
.clearfix();
}
|
帶參數的混合
這種混合和基礎混合比較類似，它增加接受參數的功能，當然如果你不傳任何參數，它會提供一個默認值
|
.element {
.border-radius(4px);
}
|
易于擴展
所有的混合都是存儲在mixins.less中的，如果各位有什么需要增加的混合可以直接集成到utilities.less中，方便調用。
bootstrap包含的混合
常用混合
| 混合 | 參數 | 用途 |
|---|---|---|
| .clearfix() | none | 清除浮動 |
| .tab-focus() | none | 自動聚焦 |
| .center-block() | none | 居中，相當于margin: auto |
| .ie7-inline-block() | none | 讓IE6,7支持display: inline-block |
| .size() | @height @width | 設置容器寬高 |
| .square() | @size | 設置該容器為正方形，參數為邊長 |
| .opacity() | @opacity | 設置容器透明度 |
表單forms
| 混合 | 參數 | 用途 |
|---|---|---|
| .placeholder() | @color: @placeholderText | 設置輸入框的默認文案 |
字體
| 混合 | 參數 | 用途 |
|---|---|---|
| #font > #family > .serif() | none | 設置這個元素的字體為有襯線字體 |
| #font > #family > .sans-serif() | none | 設置這個元素的字體為無襯線字體 |
| #font > #family > .monospace() | none | 設置這個元素的字體為等寬字體 |
| #font > .shorthand() | @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight | 簡單的設置字體的大小粗細等等 |
| #font > .serif() | @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight | 設置該字體為有襯線字體，并設置字體的大小粗細等等 |
| #font > .sans-serif() | @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight | 設置該字體為無襯線字體，并設置字體的大小粗細等等 |
| #font > .monospace() | @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight | 設置該字體為等寬字體，并設置字體的大小粗細等等 |
柵格系統
相關的less代碼在mixins.less中
| 混合 | 參數 | 用途 |
|---|---|---|
| .container-fixed() | none | 指定該容器為居中 |
| #grid > .core() | @gridColumnWidth, @gridGutterWidth | 初始化柵格系統，參數傳遞分別為柵格的列寬和柵格之間的距離 |
| #grid > .fluid() | @fluidGridColumnWidth, @fluidGridGutterWidth | 初始化柵格系統，參數傳遞分別為每個柵格的所占柵格總寬度的百分比和柵格之間的距離所占柵格總寬度的百分比 |
| #grid > .input() | @gridColumnWidth, @gridGutterWidth | 生成input相關元素的柵格布局，參數傳遞分別為柵格的列寬和柵格之間的距離 |
| .makeColumn | @columns: 1, @offset: 0 | 在柵格系統中初始化一個占幾列的div容器，columns為該容器跨域的列數，offset為改容器的左偏移 |
css3屬性
| 混合 | 參數 | 用途 |
|---|---|---|
| .border-radius() | @radius | css3圓角，參數為圓角像素 |
| .box-shadow() | @shadow | css3陰影 |
| .transition() | @transition | css3動畫，(如, all .2s linear) |
| .rotate() | @degrees | 旋轉一個元素，參數為旋轉的度數 |
| .scale() | @ratio | 縮放元素，參數為縮放后和元尺寸的比列 |
| .translate() | @x, @y | 在平面上移動元素，參數對應分別為相對于x軸和y軸的移動距離 |
| .background-clip() | @clip | 背景裁剪，傳入clip，clip選擇border | padding | content |
| .background-size() | @size | 通過css3來控制背景圖片的尺寸 |
| .box-sizing() | @boxmodel | 改變容器的盒模型，例如我們可以改變類似input button的盒模型為傳統的IE模型，即設置第一個參數為border-box就可以達到所有瀏覽器兼容的目的 |
| .user-select() | @select | 用來控制內容的可選擇性 |
| .backface-visibility() | @visibility: visible | css3D動畫效果是否隱藏內容的背面， |
| .resizable() | @direction: both | 讓元素可以進行向右和向下的拉伸縮放 |
| .content-columns() | @columnCount, @columnGap: @gridGutterWidth | 讓容器具有css3的屬性content-count和column-gap，第一個參數為列數，第二個參數為列數之間的間距 |
背景和漸變
| 混合 | 參數 | 用途 |
|---|---|---|
| #translucent > .background() | @color: @white, @alpha: 1 | 給元素半透明的背景色，第一個參數為背景色，第二個參數為透明度 |
| #translucent > .border() | @color: @white, @alpha: 1 | 給元素半透明的邊框色，第一個參數為邊框顏色，第二個參數為透明度 |
| #gradient > .vertical() | @startColor, @endColor | 讓一個容器從自上而下顏色漸變，兼容任何瀏覽器，第一個參數是開始的顏色，第二個參數是結束的顏色 |
| #gradient > .horizontal() | @startColor, @endColor | 讓一個容器從自左而右顏色漸變，兼容任何瀏覽器，第一個參數是開始的顏色，第二個參數是結束的顏色 |
| #gradient > .directional() | @startColor, @endColor, @deg | 讓一個容器按照一個角度進行漸變，第一個參數是開始的演示，第二個參數是結束的顏色，第三個參數是進行漸變的角度 |
| #gradient > .vertical-three-colors() | @startColor, @midColor, @colorStop, @endColor | 讓一個容器按照開始顏色和中間顏色以及結束顏色進行漸變，第一個參數是開始的顏色，第二個參數是中間的顏色，第三個參數是中間漸變結束的位置，最后一個參數是漸變結束的顏色 |
| #gradient > .radial() | @innerColor, @outerColor | 讓一個容器放射性漸變，第一個參數是容器中心的顏色，第二個參數是容器最外層的顏色 |
| #gradient > .striped() | @color, @angle | 條紋漸變，第一個參數為漸變的顏色，第二個參數為漸變的角度 |
| #gradientBar() | @primaryColor, @secondaryColor | 主要用于按鈕和提示框的垂直顏色漸變 |
關于less的編譯
如果你從githib上下載了源碼并對bootstrap進行了修改，你必須針對bootstrap進行編譯。關于less的編譯我有話要說，現在針對less的編譯已經有很多工具了，http://less.cnodejs.net/tools 大家可以訪問中文官網對這些工具逐一認識，個人推薦simpleless，非常方便。