Bootstrap源码中的LESS变量详解

最新推荐文章于 2023-07-11 12:15:00 发布
最新推荐文章于 2023-07-11 12:15:00 发布
阅读量424 收藏 1
点赞数
分类专栏： Bootstrap Less Html5 文章标签： Bootstrap源码中的LESS变量详解
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzc1684/article/details/84724286
版权
Html5 同时被 3 个专栏收录
27 篇文章 0 订阅
订阅专栏
Bootstrap
26 篇文章 0 订阅
订阅专栏
Less
10 篇文章 0 订阅
订阅专栏

 

 

Bootstrap的核心是用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的编译已经有很多工具了，http://less.cnodejs.net/tools 大家可以访问中文官网对这些工具逐一认识，个人推荐simpleless，非常方便。

 

zzc1684
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
三、bootstrap v3的变量系统是如何设置的？
大梦前端
05-04 433
bootstrap v3的变量系统是如何设置的？ 变量系统是贯穿整个ui框架的重要设置，通过设置统一的变量，控制系统统一的色调、间距、响应式设置等参数。 那么，像bootstrap这样一个庞大的UI框架，是如何通过变量系统来控制的呢？那么下面我们来细品。 还是打开上一章我们下载的sass源码，stylesheets>bootstrap>_variables.scss _variable...
4221简洁宽屏扁平化设计bootstrap模板下载5469_企业网站模板PHP整站源码.zip.7z
08-01
3. 容易定制：Bootstrap的LESS预处理器使得定制主题变得简单，只需修改几个变量即可实现整体风格的改变。 二、扁平化设计概念 扁平化设计是一种设计理念，强调去除冗余的装饰元素，使设计更加简洁明了。扁平化设计...
【Bootstrap 学习笔记】如何使用 Less
DeepLearning_的博客
07-11 235
CSS 是一门非程序式语言，没有变量、函数、作用域等概念。CSS 被称之为静态样式语言，从而导致样式文件的修改和维护困难。动态样式语言是指，在静态样式语言的基础上，添加了一门真正的语言所必需的元素：变量、数据类型、运算、逻辑结构、函数、继承等，从而大大提高样式的可修改和可维护性。Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Bootstrap之Less
m0_47708359的博客
08-17 564
使用 Less Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。 在Bootstrap 中的 CSS 文件是通过 Less 源码编译而来的。Less 是一门预处理语言，支持变量、mixin、函数等额外功能。对于希望使用 Less 源码而非编译而来的 CSS 文件的用户，Bootstrap 框架中包含的大量变量、mixin 将非常有价值。 本人使用的识 Koala编译软件。 我们先在你的项目中创建一个css
Bootstrap LESS
dahanhe的博客
11-14 299
Less 是一个 CSS 预处理器，让 CSS 具有动态性。 另一方面，Bootstrap 是一个快速开发 Web App 和站点的工具包。 在本教程中，我们将讨论了有关使用带有 Less CSS 的 Bootstrap 知识。这样，您可以在 CSS 中使用 Bootstrap 的 Less 变量、混合（mixins）和嵌套（ nesting）。
Bootstrap框架--Less
Archer1724的博客
04-05 277
文章目录1.变量（Variables）2.运算（Operations）3.混合（Mixins）4.嵌套（Nesting）5.转义（Escaping）6.函数（Functions）7.映射（Maps） Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。LESS 为 CSS 赋予了动态语言的特性，如变量、继承、运算、函数。LESS 既可以在客户端上运行...
BootStrop前端框架入门教程详解
10-20
Bootstrap还支持自定义，允许开发者通过修改Less变量来调整主题颜色、间距和其他样式。此外，还可以通过第三方插件和扩展来增强功能。 总之，Bootstrap是一个强大的工具，可以帮助开发者快速构建响应式、美观的网页...
H334_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-04
6. **预处理器**：如Sass和Less，是CSS的扩展，引入变量、嵌套规则、函数等功能，提高了CSS的组织性和可维护性。 7. **优化与性能**：前端开发中需要考虑加载速度和资源优化，包括代码压缩、合并、图片压缩、懒加载...
Blog-main-源码.rar
10-10
- CSS预处理器（如Sass/Less）：提高CSS的可维护性和可扩展性，通过变量、嵌套规则和函数实现更复杂的样式逻辑。 - JavaScript库和框架：例如jQuery用于DOM操作，Vue或React用于组件化开发，提供数据绑定和状态...
Bootstrap的less
张新丁
07-18 540
一、LESS的概念 1、一种动态样式语言   LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。 2、变量   变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行
前端----Boostrap(二)
qq_38977566的博客
02-28 118
2.Bootstrap的使用 2.1 表格 和之前的表格相比，标签更丰富更加语义化，效果更佳美观 2.1.1 丰富的标签 <table> 为表格添加基础样式 <thead> 表格标题行的容器元素（<tr>） <tbody> 表格主体中的表格行的容器元素（<tr>） <tr> 表格行 <td> 默认的表格单元格。 <th> 特殊的表格单元格，（居中和加粗的效果）。必须在<thead&g
bootstrapTable api
杜海的博客
11-17 4144
表格参数 Edit on GitHub 表格的参数定义在 jQuery.fn.bootstrapTable.defaults。 名称 标签 类型 默认 描述 - data-toggle String 'table' 不用写 JavaScript 直接启用表格。 c
bootstrap的Hello World
weixin_34122604的博客
02-14 273
<!DOCTYPEhtml> <htmllang="zh-CN"> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"...
bootstrap和less
weixin_34184561的博客
12-11 456
前端框架bootstrap Android使用的是webkit浏览器内核，其它国产浏览器也是基于webkit的二次开发ios使用的是safari内核。不同的内核解析呈现出来的html和css也不尽相同，需要手动调整代码以便兼容这两个平台。而bootstrap这个框架集成了很多的css样式、css+html组件、js组件，也可以利用该框架实现响应式布局。 基本模...
Bootstrap 使用Less变量
歪脖先生的博客
05-12 873
使用Less Bootstrap 的 CSS 文件是通过 Less 源码编译而来的。Less 是一门预处理语言，支持变量、mixin、函数等额外功能。 对于希望使用 Less 源码而非编译而来的 CSS 文件的用户，Bootstrap 框架中包含的大量变量、mixin 将非常有价值。 可以通过两种方式使用 Bootstrap：使用编译后的 CSS 文件，或者使用 Less 源码文件。若要编译...
Bootstrap定制(二)less基础语法
weixin_34037515的博客
07-18 243
前几日花了一天去看less，这几日在捣鼓其他东西，项目也在有序的进行中，今天花点时间整理下less的基础语法，也分享实际中的一些经验，与众人共享。 本篇笔者以less的基础语法着手，并配合bootstrap的逻辑结构给大家梳理下less的语法，方便以后实战中快速开发。 1.变量 与许多后台编辑语法类似，less也有着自己的变量，不过less中的变量更确切来说是一种常量，一次...
Bootstrap之LESS基本
wangxuznb的博客
11-21 1556
通过LESS生成CSS非常方便，同时方便更改 嵌套规则 嵌套规则可以极大的提高组合样式的效率，比如css中常见的： .navbar-nav {...} .navbar-nav >li {...} .navbar-nav >li >a {...} .navbar-nav >li >a:hover, .navbar-nav >li >a:focus {...} 而在LESS中表示方法简
bootstrap的使用与less源码解析（框架自定义）
weixin_46104231的博客
12-05 360
目录 容器 流体容器 固定容器 栅格系统（网格容器） 三种的源码解析（需要less基础） 栅格系统实例 响应式工具源码解析 栅格盒模型的设计巧妙之处 对less的复习 Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 它是一个响应式的开发框架 容器 流体容器 <div class="container-fluid">test</div> 意为width等于百分之百，也就是...
net mvc+bootstrap 源码
最新发布
12-19
在Net MVC Bootstrap源码中，我们可以看到许多关键的组件和功能，包括基于MVC模式的架构设计，可重用的Bootstrap样式和组件，以及丰富的JavaScript插件集成。这些功能使开发者能够快速创建具有良好用户体验的响应式...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值