Bootstrap中的less基础

在线编译

因为 less 的语法毕竟相对简单，所以一些在线工具可以很轻松的做到。比如 http://less.cnodejs.net http://www.ostools.net/less 一般都有两个框，左侧输入less，右侧呈现编译的 css，方便在线学习和测试。

修改 bootstrap 中的 less

如下图，入口文件是 bootstrap.less 和 responsive.less 文件——

这个入口文件 bootstrap.less 是这样引用其他 less 文件的：

了解这份 less 的内容很有必要。通过这个入口文件，逐步了解 bootstrap 的全部内容，才能更加方便的自定义它。

比如，如果要修改每栏 column 的宽度，可以打开 variables.less ，修改其中的 @gridColumnWidth 变量的值。

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`	主要用于按钮和提示框的垂直颜色渐变