Bootstrap LESS

最后更新于：2022-03-26 23:05:01

Bootstrap LESS

简介

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

另一方面，Bootstrap 是一个快速开发 Web App 和站点的工具包。

在本教程中，我们将讨论了有关使用带有 Less CSS 的 Bootstrap 知识。这样，您可以在 CSS 中使用 Bootstrap 的 Less 变量、混合（mixins）和嵌套（ nesting）。

查看 Less 入门教程

获取 Bootstrap 和 Less CSS

Bootstrap 官网：http://getbootstrap.com/

Less 官网：http://lesscss.org/

包含哪些内容

下载 Bootstrap，解压缩文件。Bootstrap 的 Less 组件位于 ‘lib’ 目录下。自 Bootstrap v1.4.0 版本起，就包含有九个 less 文件。下面我们一起来看看这九个文件分别包含什么。

bootstrap.less

这是主要的 Less 文件。该文件中导入了一些其他的 less 文件。该文件中没有任何代码。

forms.less

这个 Less 文件包含了表单布局、输入框类型的样式。

mixins.less

这个 Less 文件让 CSS 代码可重复使用。

patterns.less

这个 Less 文件包含了重复的用户界面元素的 CSS 代码，不会被位于 scaffolding Less 文件中的基本样式覆盖。

reset.less

这个 Less 文件包含了 CSS 重置。这是 Eric Meyer 的 CSS 重置的一个更新。一些 HTML 元素比如 dfn、samp 等的重置被免除。

scaffolding.less

这个 Less 文件保存了创建网格系统、结构化布局、页面模板所需的基本样式。

tables.less

这个 Less 文件包含了创建表格的样式。

type.less

这个 Less 文件下可找到排版相关的样式。标题、段落、列表、代码等的样式位于这个文件里边。

variables.less

这个 Less 文件包含了要定制 Bootstrap 外观和感观的变量。

如何使用

如果要使用它，请在您的 HTML 页面包含下面代码：

请注意，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

Bootstrap 混合

基本的混合

基本的混合从本质上来说，就是包括整个或是部分代码片段。写法类似一个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 % 间距宽度，生成一个百分比栅格系统

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`	用于给按钮指定渐变背景和浅暗的边框

如何编译

带有makefile的Node.js

运行下列命令，利用npm在全局环境下安装LESS命令行编译器和uglify-js：

$ npm install -g less uglify-js

安装成功后，在您的Bootstrap的根目录下运行 make 即可编译CSS。

此外，如果您已经安装了 watchr ，您可以运行 make watch ，这样您每次修改Bootstrap后，就会自动重编译Bootstrap。（不是必须运行，这样做仅仅是出于方便。）

使用 JavaScript

只需要简单的引用 less.js 文件(下载最新的 Less.js )并重新加载页面。

js 文件就会编译 less。

<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>

命令行

如果您已经安装了 Less 命令行（Command Line），原型下面要编译的命令：

$ lessc ./lib/bootstrap.less > bootstrap.css

如果您想要一个压缩的编译，可以使用 –compress 命令。

Less Mac app

虽然是非官方的，但是这里有一个可用的 Less Mac 应用程序可用于编译。

点击这里，下载本教程中使用到的所有 HTML、CSS、JS 和图片文件。