Bootstrap LESS
簡介
Less 是一個 CSS 預處理器，讓 CSS 具有動態性。
另一方面，Bootstrap 是一個快速開發 Web App 和站點的工具包。
在本教學中，我們將討論了有關使用帶有 Less CSS 的 Bootstrap 知識。這樣，您可以在 CSS 中使用 Bootstrap 的 Less 變數、混合（mixins）和嵌套（ nesting）。
獲取 Bootstrap 和 Less CSS
Bootstrap 官網：http://getbootstrap.com/
Less 官網：http://lesscss.org/
包含哪些內容
下載 Bootstrap，解壓縮檔。Bootstrap 的 Less 組件位於 'lib' 目錄下。自 Bootstrap v1.4.0 版本起，就包含有九個 less 檔。下麵我們一起來看看這九個檔分別包含什麼。
bootstrap.less
這是主要的 Less 檔。該檔中導入了一些其他的 less 檔。該檔中沒有任何代碼。
forms.less
這個 Less 檔包含了表單佈局、輸入框類型的樣式。
mixins.less
這個 Less 檔讓 CSS 代碼可重複使用。
patterns.less
這個 Less 檔包含了重複的用戶介面元素的 CSS 代碼，不會被位於 scaffolding Less 檔中的基本樣式覆蓋。
reset.less
這個 Less 檔包含了 CSS 重置。這是 Eric Meyer 的 CSS 重置的一個更新。一些 HTML 元素比如 dfn、samp 等的重置被免除。
scaffolding.less
這個 Less 檔保存了創建網格系統、結構化佈局、頁面範本所需的基本樣式。
tables.less
這個 Less 檔包含了創建表格的樣式。
type.less
這個 Less 檔下可找到排版相關的樣式。標題、段落、列表、代碼等的樣式位於這個檔裏邊。
variables.less
這個 Less 檔包含了要定制 Bootstrap 外觀和感觀的變數。
如何使用
如果要使用它，請在您的 HTML 頁面包含下麵代碼：
<script src="js/less-1.1.5.min.js"></script>
請注意，less-1.1.5.min.js 不在 js 檔夾內，您需要下載並把它放置在指定的檔夾下。
LESS變數和變數值，以及用法指南
超鏈接
@linkColor |
#08c | 默認的鏈接顏色 | |
@linkColorHover |
darken(@linkColor, 15%) |
默認懸停時的鏈接顏色 |
灰度色
@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 |
按鈕
@primaryButtonBackground |
@linkColor |
表單
@placeholderText |
@grayLight |
導航欄
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
表單狀態和通知
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Bootstrap 混合
基本的混合
基本的混合從本質上來說，就是包括整個或是部分代碼片段。寫法類似一個CSS類，可以隨處調用。
.element {
.clearfix();
}
帶參數的混合
帶參數的混合和基本混合很像，不同之處是前者可以接收參數(根據名稱)，參數可以有默認值。
.element {
.border-radius(4px);
}
易於定制
基本上Bootstrap所有的混合都保存在mixins.less， 這是一個出色的工具類.less檔，我們可以在任何一個.less檔中使用其中的混合。
因此，直接使用已有的混合或是自定義一個新混合皆可。
包含混合
實用工具
| 混合 | 參數 | 用法 |
|---|---|---|
.clearfix() |
無 | 清除浮動 |
.tab-focus() |
無 | 添加類似Webkit獲得焦點的風格和類似Firefox的的外包線 |
.center-block() |
無 | 使用margin: auto把塊級元素自動居中 |
.ie7-inline-block() |
無 | 添加規則的 display: inline-block 以支持IE7 |
.size() |
@height: 5px, @width: 5px |
快速設置行高和行寬 |
.square() |
@size: 5px |
基於.size() 設置正方形區域 |
.opacity() |
@opacity: 100 |
設置透明度的百分比 (比如 "50" 或 "75") |
表單
| 混合 | 參數 | 用法 |
|---|---|---|
.placeholder() |
@color: @placeholderText |
設置輸入框中 placeholder 的字體顏色 |
排版
| 混合 | 參數 | 用法 |
|---|---|---|
#font > #family > .serif() |
無 | 對某個元素應用一系列serif襯線字體 |
#font > #family > .sans-serif() |
無 | 對某個元素應用一系列sans-serif字體 |
#font > #family > .monospace() |
無 | 對某個元素應用一系列monospace字體 |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
方便設置字體大小，粗細和行間距 |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
設置襯線字體族serif，字體大小，粗細和行間距 |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
設置sans-serif字體族，字體大小，粗細和行間距 |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
設置monospace字體族，字體大小，粗細和行間距 |
柵格系統
| 混合 | 參數 | 用法 |
|---|---|---|
.container-fixed() |
無 | 創建一個水準居中的容器，用以容納內容 |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
使用 n 列和 x 像素間距寬度，生成一個象素柵格系統(容器，行，列) |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
使用 n 列和 x % 間距寬度，生成一個百分比柵格系統 |
CSS3屬性
| 混合 | 參數 | 用法 |
|---|---|---|
.border-radius() |
@radius: 5px |
元素圓角化，可以是一個單獨的值，也可以分別是四個角的值 |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
對元素應用陰影 |
.transition() |
@transition |
添加CSS3過渡效果(比如， all .2s linear) |
.rotate() |
@degrees |
旋轉一個元素 n 度 |
.scale() |
@ratio |
對一個元素縮放原有大小的 n 倍 |
.translate() |
@x: 0, @y: 0 |
在平面上移動x和y個像素 |
.background-clip() |
@clip |
裁剪一個元素的背景 (用於 border-radius) |
.background-size() |
@size |
通過CSS3更改背景圖片的大小 |
.box-sizing() |
@boxmodel |
改變一個元素的盒(box)模型 (比如，用在100%寬度 input 上的 border-box ) |
.user-select() |
@select |
更改頁面文本的選擇游標 |
.resizable() |
@direction: both |
改變右下角座標以重置元素大小 |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
讓元素中的內容使用CSS3的列 |
背景和漸變
| 混合 | 參數 | 用法 |
|---|---|---|
#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 |
用於給按鈕指定漸變背景和淺暗的邊框 |
如何編譯
帶有makefile的Node.js
運行下列命令，利用npm在全局環境下安裝LESS命令行編譯器和uglify-js：
$ npm install -g less uglify-js
安裝成功後，在您的Bootstrap的根目錄下運行 make 即可編譯CSS。
此外，如果您已經安裝了 watchr ，您可以運行 make watch ， 這樣您每次修改Bootstrap後，就會自動重編譯Bootstrap。（不是必須運行，這樣做僅僅是出於方便。）
使用 JavaScript
只需要簡單的引用 less.js 檔(下載最新的 Less.js )並重新加載頁面。
js 檔就會編譯 less。
<link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script>
命令行
如果您已經安裝了 Less 命令行（Command Line），原型下麵要編譯的命令：
$ lessc ./lib/bootstrap.less > bootstrap.css
如果您想要一個壓縮的編譯，可以使用 --compress 命令。
Less Mac app
雖然是非官方的，但是這裏有一個可用的 Less Mac 應用程式可用於編譯。