一，less變量,less文件
1.bootstrap.less
這是主要的 Less 文件。該文件中導入了一些其他的 less 文件。該文件中沒有任何代碼。
2.forms.less
這個 Less 文件包含了表單布局、輸入框類型的樣式。
3.mixins.less
4.這個 Less 文件讓 CSS 代碼可重復使用。
5.patterns.less
這個 Less 文件包含了重復的用戶界面元素的 CSS 代碼，不會被位於 scaffolding Less 文件中的基本樣式覆蓋。
6.reset.less
這個 Less 文件包含了 CSS 重置。這是 Eric Meyer 的 CSS 重置的一個更新。一些 HTML 元素比如 dfn、samp 等的重置被免除。
7.scaffolding.less
這個 Less 文件保存了創建網格系統、結構化布局、頁面模板所需的基本樣式。
8.tables.less
這個 Less 文件包含了創建表格的樣式。
9.type.less
這個 Less 文件下可找到排版相關的樣式。標題、段落、列表、代碼等的樣式位於這個文件里邊。
10.variables.less
這個 Less 文件包含了要定制 Bootstrap 外觀和感觀的變量。
注意：
如果要使用它，請在您的 HTML 頁面包含下面代碼：
<link rel="stylesheet/less" href="lib/bootstrap.less" media="all" />
<script src="js/less-1.1.5.min.js"></script>
<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 |
三，混合用法
基本混合：.element { .clearfix(); }
代餐素混合：.element { .border-radius(4px); }
混合實用工具：
| 混合 | 參數 | 用法 |
|---|---|---|
.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 |
用於給按鈕指定漸變背景和淺暗的邊框 |
通過變量來定義列數、槽（gutter）寬、媒體查詢閾值，生成柵格類。
@grid-columns: 12;//行12列 @grid-gutter-width: 30px; @grid-float-breakpoint: 768px;
二.mixin:和柵格變量一同使用，為每個列（column）生成語義化的 CSS 代碼
.make-row(@gutter:@grid-gutter-width){
.clearfix();
@media(min-width:@screen-sm-min){
margin-left:(@gutter/-2);
margin-right:(@gutter/-2);
}
/ /負margin嵌套行對齊列的內容
.row{
margin-left:(@gutter/-2);
margin-left:(@gutter/-2);
}
}
/ /生成額外的小列
.make-xs-column(@columns;@gutter:@grid-gutter-width){
position:relative;
min-height:1px;
padding-left:(@gutter/2);
padding-left:(@gutter/2);
/ /計算寬度根據可用的列數
@media (min-width:@grid-float-breakpoint){
float:left;
width:percentage((@columns/@grid-columns));
}
}
// Generate the small columns .make-sm-column(@columns; @gutter: @grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); // Calculate width based on number of columns available @media (min-width: @screen-sm-min) { float: left; width: percentage((@columns / @grid-columns)); } } // 生成小列偏移量 .make-sm-column-offset(@columns) { @media (min-width: @screen-sm-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-sm-column-push(@columns) { @media (min-width: @screen-sm-min) { left: percentage((@columns / @grid-columns)); } } .make-sm-column-pull(@columns) { @media (min-width: @screen-sm-min) { right: percentage((@columns / @grid-columns)); } } // Generate the medium columns .make-md-column(@columns; @gutter: @grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); // Calculate width based on number of columns available @media (min-width: @screen-md-min) { float: left; width: percentage((@columns / @grid-columns)); } } // Generate the medium column offsets .make-md-column-offset(@columns) { @media (min-width: @screen-md-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-md-column-push(@columns) { @media (min-width: @screen-md-min) { left: percentage((@columns / @grid-columns)); } } .make-md-column-pull(@columns) { @media (min-width: @screen-md-min) { right: percentage((@columns / @grid-columns)); } } // Generate the large columns .make-lg-column(@columns; @gutter: @grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); // Calculate width based on number of columns available @media (min-width: @screen-lg-min) { float: left; width: percentage((@columns / @grid-columns)); } } // Generate the large column offsets .make-lg-column-offset(@columns) { @media (min-width: @screen-lg-min) { margin-left: percentage((@columns / @grid-columns)); } } .make-lg-column-push(@columns) { @media (min-width: @screen-lg-min) { left: percentage((@columns / @grid-columns)); } } .make-lg-column-pull(@columns) { @media (min-width: @screen-lg-min) { right: percentage((@columns / @grid-columns)); } }