Bootstrap3 源码中的 LESS 变量详解

发布于 2019-07-22 15:14:39 字数 13097 浏览 1418 评论 0

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

Bootstrap 变量

基础设置

@bodyBackground@white页面背景色
@textColor@grayDark默认的文字颜色
@linkColor#08c默认的链接颜色
@linkColorHoverdarken(@linkColor, 15%)默认链接hover样式

页面栅格

@gridColumns12
@gridColumnWidth60px
@gridGutterWidth20px
@fluidGridColumnWidth6.382978723%
@fluidGridGutterWidth2.127659574%

字体

@sansFontFamily“Helvetica Neue”, Helvetica, Arial, sans-serif
@serifFontFamilyGeorgia, "Times New Roman", Times, serif
@monoFontFamilyMenlo, Monaco, “Courier New”, monospace
@baseFontSize13px以像素为单位
@baseFontFamily@sansFontFamily
@baseLineHeight18px以像素为单位
@altFontFamily@serifFontFamily
@headingsFontFamilyinherit
@headingsFontWeightbold
@headingsColorinherit

表格tables

@tableBackgroundtransparent
@tableBackgroundAccent#f9f9f9
@tableBackgroundHover#f5f5f5
@tableBorderddd

冷色调

@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
@btnBackgroundHighlightdarken(@white, 10%)
@btnBorderdarken(@white, 20%)
@btnPrimaryBackground@linkColor
@btnPrimaryBackgroundHighlightspin(@btnPrimaryBackground, 15%)
@btnInfoBackground#5bc0de
@btnInfoBackgroundHighlight#2f96b4
@btnSuccessBackground#62c462
@btnSuccessBackgroundHighlight51a351
@btnWarningBackgroundlighten(@orange, 15%)
@btnWarningBackgroundHighlight@orange
@btnDangerBackground#ee5f5b
@btnDangerBackgroundHighlight#bd362f
@btnInverseBackground@gray
@btnInverseBackgroundHighlight@grayDarker

表单Forms

@placeholderText@grayLight
@inputBackground@white
@inputBorder#ccc
@inputBorderRadius3px
@inputDisabledBackground@grayLighter
@formActionsBackground#f5f5f5

表单Form提示背景及文字颜色

@warningText#c09853
@warningBackground#f3edd2
@errorText#b94a48
@errorBackground#f2dede
@successText#468847
@successBackground#dff0d8
@infoText#3a87ad
@infoBackground#d9edf7

导航栏

@navbarHeight40px
@navbarBackground@grayDarker
@navbarBackgroundHighlight@grayDark
@navbarText@grayLight
@navbarLinkColor@grayLight
@navbarLinkColorHover@white
@navbarLinkColorActive@navbarLinkColorHover
@navbarLinkBackgroundHovertransparent
@navbarLinkBackgroundActive@navbarBackground
@navbarSearchBackgroundlighten(@navbarBackground, 25%)
@navbarSearchBackgroundFocus@white
@navbarSearchBorderdarken(@navbarSearchBackground, 30%)
@navbarSearchPlaceholderColor#ccc
@navbarBrandColor@navbarLinkColor

下拉Dropdowns

@dropdownBackground@white
@dropdownBorderrgba(0,0,0,.2)
@dropdownLinkColor@grayDark
@dropdownLinkColorHover@white
@dropdownLinkBackgroundHover@linkColor

Hero unit

@heroUnitBackground@grayLighter
@heroUnitHeadingColorinherit
@heroUnitLeadColorinhereit

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()@radiuscss3 圆角,参数为圆角像素
.box-shadow()@shadowcss3 阴影
.transition()@transitioncss3 动画,(如, 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: visiblecss3D动画效果是否隐藏内容的背面,
.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,非常方便。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。