Bootstrap3 源码中的 LESS 变量详解 - 文章教程

Bootstrap3 源码中的 LESS 变量详解

发布于 2019-07-22 字数 14484 浏览 1326 评论 0

Bootstrap 3 以前版本的核心是用 Less 来编写的,Bootstrap 对 Less 进行了二次封装,提供了很多基础的 less 变量和函数,个人觉得非常有用,下面就来具体看下 Bootstrap 为我们提供了哪些常用的变量和函数吧。

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

关于Less的编译

如果你从 githib 上下载了源码并对 bootstrap 进行了修改,你必须针对 bootstrap 进行编译。关于 less 的编译我有话要说,现在针对 less 的编译已经有很多工具了,个人推荐 simpleless,非常方便。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0