当前位置: 首页>Bootstrap>bootstrap less教程

bootstrap less教程

时间:2015-06-08 13:14 来源:网络整理 作者:KKWL 点击:
在Bootstrap中使用LESS 我们使用 LESS (一种CSS预处理器)定制和扩展Bootstrap。LESS充分利用变量,混合以及其他有用的工具来构建Bootstrap的CSS。 使用LESS 为什么使用LESS? Bootstrap使用LESS构造核心

在Bootstrap中使用LESS

我们使用 LESS (一种CSS预处理器)定制和扩展Bootstrap。 LESS充分利用变量,混合以及其他有用的工具来构建Bootstrap的CSS。

使用LESS

为什么使用LESS?

Bootstrap使用LESS构造核心,LESS是由我们的好友 Alexis Sellier 创造的一种动态样本表语言。 它让系统底层的CSS开发变得更快捷高效,更有生趣。

包括什么?

做为CSS的扩展,LESS包括变量,可重用代码段的混合,简单的数学操作,内嵌,以及颜色方法等等。

了解更多

详见LESS官网 。
详见LESS中国官网 。

没有使用LESS之前,在CSS中管理颜色和像素值是个痛苦的事情,通常充斥着复制粘贴操作。现在可以借助LESS将颜色和像素值声明为变量,并对其一次性赋值。

需在一个规则的ol的CSS中声明三种边框圆角时怎么办?借助混合,可以将它们写到一行,然后在其他地方重用。

运算

通过数学运算可以即时灵活地调整栅格尺寸和行间距。借助加减乘除,将CSS变更有条理。

Bootstrap变量 LESS变量和变量值,以及用法指南

超链接

@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

Bootstrap 混合

关于混合

基本的混合

基本的混合从本质上来说,就是包括整个或是部分代码片段。写法类似一个CSS类,可以随处调用。

带参数的混合

带参数的混合和基本混合很像,不同之处是前者可以接收参数(根据名称),参数可以有默认值。

易于定制

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

使用LESS编译Bootstrap

注意: 如果您向Github pull修改后的代码,您必须通过下列方式重新编译CSS。

编译的工具

带有makefile的Node.js

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

$ npm install -g less uglify-js

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

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------