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