Bootstrap—由less来架构Bootstrap
来源:互联网 发布:sap数据质量核对 编辑:程序博客网 时间:2024/05/29 15:27
众所周知,less是一种动态样式语言, bootstrap基于less来编写是为了让bootstrap能够继承less的优势,如变量,继承,运算,函数。如果大家想了解或者回顾下less可以看下以前苏河介绍的less
- 让css动起来—-lesscss(1)
- 让css动起来—-lesscss(2)
用less编写bootstrap
为什么使用less?
Bootstrap的核心是用less来编写的,这里允许我介绍下less的作者:Alexis Sellier(他的个人网站貌似被墙了)。Less让我们编写css代码更具乐趣,更加方便和迅速。
Less包含什么?
Less包含变量,混合,对可重用代码的继承以及一些数学的简单操作,甚至是一些颜色的函数。
学习更多
如果你想学习更多,可以直接去官方网站了解http://lesscss.org ,(附中文官网:http://www.lesscss.net/ )
less的特性
变量
如何管理网站的主体颜色和主体容器的高度和宽度切实让人有点头疼,大家一定有不断的做ctrl+c和ctrl+v的操作来反复替换这些常量吧,但是一旦我们用了less来管理这些变量,就能达到牵一发而动全身的效果,管理起来非常方便
混合
还记得你写border-radius需要申明冗余的类似-moz-border-radius和-webkit-border-radius等属性吧,但是如果我用混合的特征来管理border-radius来达到重用的效果,那么,代码看起来就会非常简洁了。
函数
针对一些复杂的操作,比如栅格布局,数学的加减乘除计算,颜色的变化等等,我们都可以用函数来进行
介绍完less部分,该介绍主体的部分了,既然bootstrap继承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组件
@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的编译已经有很多工具了,http://less.cnodejs.net/tools 大家可以访问中文官网对这些工具逐一认识,个人推荐simpleless,非常方便。
- Bootstrap—由less来架构Bootstrap
- bootstrap Less
- 修改 bootstrap :用 less 来写 css
- 修改 bootstrap :用 less 来写 css 编译less
- Less及定制bootstrap--less
- Bootstrap编译LESS
- bootstrap 之 LESS
- bootstrap 不得不说的less
- BootStrap less基础语法
- Bootstrap well.less 分析
- Bootstrap的less
- Bootstrap Less 笔记
- Bootstrap源码之旅-Less-wells.less
- Less/Sass/Compass/Bootstrap/H5bp
- play with bootstrap and less
- bootstrap玩不起来!!!!!!
- Bootstrap
- BootStrap
- 全国各主要城市的DNS地址查询
- http://hwzyyx.iteye.com/blog/992542JPAhibernate
- joomla组建开发中使用tab
- android4.0去电过程(RIL Framework Java 部分)
- SQlite命令行工具的使用
- Bootstrap—由less来架构Bootstrap
- 使用 Strace 和 GDB 调试工具的乐趣
- hibernater基础
- Android图片处理内存溢出学习
- VC++ Issues and Resolutions Collection
- Android万能遥控器
- JMX实例
- 如何获取数据库新插入数据的主键id
- strace使用详解(转)