Bootstrap 2 LESS - Bootstrap 2 基础教程 - 简单教程，简单编程

Less 是一个 CSS 预处理器，让 CSS 具有动态性

本章节中，我们将学习有关使用带有 Less CSS 的 Bootstrap 知识

然后你就可以在 CSS 中使用 Bootstrap 的 Less 变量、混合（mixins）和嵌套（ nesting）

获取 Bootstrap 和 Less CSS

下载 Bootstrap，解压缩文件

Bootstrap 的 Less 组件位于 'lib' 目录下

自 Bootstrap v1.4.0 版本起，就包含有九个 less 文件

下面我们一起来看看这九个文件分别包含什么

如果要使用它，需要在 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 文件夹内，需要下载并把它放置在指定的文件夹下

@linkColor	#08c	默认的链接颜色
@linkColorHover	darken(@linkColor, 15%)	默认悬停时的链接颜色

@primaryButtonBackground

@linkColor

@placeholderText

@grayLight

导航栏

@navbarHeight	40px
@navbarBackground	@grayDarker
@navbarBackgroundHighlight	@grayDark
@navbarText	@grayLight
@navbarLinkColor	@grayLight
@navbarLinkColorHover	@white

基本的混合

基本的混合从本质上来说，就是包括整个或是部分代码片段

写法类似一个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	用于给按钮指定渐变背景和浅暗的边框