bootstrap快速入門筆記（四）-less用法指南， mixin和變量

一，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>

請注意，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));
　　}
}
margin-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)); } }