首页 > 代码库 > 不知道从哪里来的

不知道从哪里来的

2024-07-03 20:48:04   228人阅读

 

Bootstrap—由less来架构Bootstrap

分类： css2012-12-11 15:39 3363人阅读 评论(0) 收藏 举报
 

目录(?)[+]

 

众所周知，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  

组件

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


联系
我们