Bootstrap—由less来架构Bootstrap

众所周知，less是一种动态样式语言， bootstrap基于less来编写是为了让bootstrap能够继承less的优势，如变量，继承，运算，函数。如果大家想了解或者回顾下less可以看下以前苏河介绍的less

• 让css动起来—-lesscss（1）
• 让css动起来—-lesscss（2）

用less编写bootstrap

为什么使用less？

Bootstrap的核心是用less来编写的，这里允许我介绍下less的作者：Alexis Sellier（他的个人网站貌似被墙了）。Less让我们编写css代码更具乐趣，更加方便和迅速。

Less包含什么？

Less包含变量，混合，对可重用代码的继承以及一些数学的简单操作，甚至是一些颜色的函数。

学习更多

如果你想学习更多，可以直接去官方网站了解http://lesscss.org ，（附中文官网：http://www.lesscss.net/ ）

less的特性

变量

如何管理网站的主体颜色和主体容器的高度和宽度切实让人有点头疼，大家一定有不断的做ctrl+c和ctrl+v的操作来反复替换这些常量吧，但是一旦我们用了less来管理这些变量，就能达到牵一发而动全身的效果，管理起来非常方便

混合

还记得你写border-radius需要申明冗余的类似-moz-border-radius和-webkit-border-radius等属性吧，但是如果我用混合的特征来管理border-radius来达到重用的效果，那么，代码看起来就会非常简洁了。

函数

针对一些复杂的操作，比如栅格布局，数学的加减乘除计算，颜色的变化等等，我们都可以用函数来进行

 

介绍完less部分，该介绍主体的部分了，既然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，非常方便。