我们使用 LESS (一种CSS预处理器)定制和扩展Bootstrap。 LESS充分利用变量,混合以及其他有用的工具来构建Bootstrap的CSS。
Bootstrap使用LESS构造核心,LESS是由我们的好友 Alexis Sellier 创造的一种动态样本表语言。 它让系统底层的CSS开发变得更快捷高效,更有生趣。
做为CSS的扩展,LESS包括变量,可重用代码段的混合,简单的数学操作,内嵌,以及颜色方法等等。
详见LESS官网 http://lesscss.org 。
详见LESS中国官网 http://lesscss.net 。
@linkColor |
#08c | 默认的链接颜色 | |
@linkColorHover |
darken(@linkColor, 15%) |
默认悬停时的链接颜色 |
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
@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 |
基本的混合从本质上来说,就是包括整个或是部分代码片段。写法类似一个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 % 间距宽度,生成一个百分比栅格系统 |
混合 | 参数 | 用法 |
---|---|---|
.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 |
用于给按钮指定渐变背景和浅暗的边框 |
运行下列命令,利用npm在全局环境下安装LESS命令行编译器和uglify-js:
$ npm install -g less uglify-js
安装成功后,在您的Bootstrap的根目录下运行 make
即可编译CSS。
此外,如果您已经安装了 watchr ,您可以运行 make watch
,
这样您每次修改Bootstrap后,就会自动重编译Bootstrap。(不是必须运行,这样做仅仅是出于方便。)
在Node下运行下列命令安装LESS命令行工具:
$ lessc ./lib/bootstrap.less > bootstrap.css
如果想压缩生成的css大小,就一定要在命令行参数中包含 --compress
。
下载最新的 Less.js 并在 <head>
中包含Bootstrap中的less路径和less.js文件路径。
<link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script>
要重编译.less文件,只要在保存文件后刷新页面。Less.js会重新编译.less文件并进行本地存储。
非官方Mac应用 监视.less文件所在的目录,每次观察到.less文件发生改动都会自动将.less编译成本地文件。
如果您喜欢,您可以在应用的首选项设置自动最小化代码,以及编译后的文件目录。
Crunch是一个用Abode Air构造的界面优美的LESS编辑器和编译器。
CodeKit同样是非官方的Mac应用,可以编译LESS,SASS,Stylus和CoffeeScript。
跨Mac, Linux, 和PC平台的应用,可以拖拽LESS文件进行编译,而且其代码开源, 代码托管在GitHub上 。