Bootstrap中的less基础

在线编译

因为 less 的语法毕竟相对简单,所以一些在线工具可以很轻松的做到。比如 http://less.cnodejs.net http://www.ostools.net/less  一般都有两个框,左侧输入less,右侧呈现编译的 css,方便在线学习和测试。

修改 bootstrap 中的 less

如下图,入口文件是 bootstrap.less 和 responsive.less 文件——


这个入口文件 bootstrap.less 是这样引用其他 less 文件的:


了解这份 less 的内容很有必要。通过这个入口文件,逐步了解 bootstrap 的全部内容,才能更加方便的自定义它。

比如,如果要修改每栏 column 的宽度,可以打开 variables.less ,修改其中的 @gridColumnWidth 变量的值。

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 主要用于按钮和提示框的垂直颜色渐变
时间: 2024-11-03 00:43:34

Bootstrap中的less基础的相关文章

Bootstrap中六种表格样式

表格 表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格.在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中,我们会详细介绍Bootstrap的表格使用. 同样的,如果你对CSS预处理器熟悉,你可以使用Bootstrap提供的预处理版本: ?  LESS版本,对应的文件是 tables.less ?  Sass版本,对应的文件是 _tables.scss 如果你不懂LESS

Bootstrap 中文文档教程

Bootstrap 中文文档教程 全局样式和grid布局—Bootstrap中文使用指南 全局样式1.要求html5文档类型 Bootstrap使用的css属性和html元素依赖于html5的文档类型声明,请确保每个Bootstrap的页面包含下面的代码: <!DOCTYPE html> <html> ... </html> 2.排版和链接样式 全局的排版和链接样式放在scaffolding.less文件内(关于less教程后面会有详细说明).默认做了如下处理: 移除b

Bootstrap定制(二)less基础语法

前几日花了一天去看less,这几日在捣鼓其他东西,项目也在有序的进行中,今天花点时间整理下less的基础语法,也分享实际中的一些经验,与众人共享. 本篇笔者以less的基础语法着手,并配合bootstrap的逻辑结构给大家梳理下less的语法,方面以后实战中快速开发. 1.变量 与许多后台编辑语法类似,less也有着自己的变量,不过less中的变量更确切来说是一种常量,一次赋值永不改变. @font-size:14px; p{font-size:@font-size} -->p{font-siz

bootstrap中dialog水平垂直居中

方法一: HTML: <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">     Launch demo modal </button> <!-- Modal --> <div class="modal fade" id=&q

如何在ASP.NET Core中实现一个基础的身份认证

注:本文提到的代码示例下载地址> How to achieve a basic authorization in ASP.NET Core 如何在ASP.NET Core中实现一个基础的身份认证 ASP.NET终于可以跨平台了,但是不是我们常用的ASP.NET, 而是叫一个ASP.NET Core的新平台,他可以跨Windows, Linux, OS X等平台来部署你的web应用程序,你可以理解为,这个框架就是ASP.NET的下一个版本,相对于传统ASP.NET程序,它还是有一些不同的地方的,比

Android中Canvas绘图基础详解(附源码下载)

Android中,如果我们想绘制复杂的自定义View或游戏,我们就需要熟悉绘图API.Android通过Canvas类暴露了很多drawXXX方法,我们可以通过这些方法绘制各种各样的图形.Canvas绘图有三个基本要素:Canvas.绘图坐标系以及Paint.Canvas是画布,我们通过Canvas的各种drawXXX方法将图形绘制到Canvas上面,在drawXXX方法中我们需要传入要绘制的图形的坐标形状,还要传入一个画笔Paint.drawXXX方法以及传入其中的坐标决定了要绘制的图形的形状

Bootstrap中well的使用

作用:Well 是一种会引起内容凹陷显示或插图效果的容器 <div>. <div class="container"> <h3> Bootstrap中well的使用</h3> <div class="well"> I'm well. </div> I'm well. <div class="well well-lg"> I'm well-lg</div>

Java中String的基础知识

Java中String的基础知识 ==与equal的区别 基本数据类型,指的是java中的八种基本数据结构(byte,short,char,int,long,float,double,boolean),一般的比较是使用的 ==,比较的是他们的值. 复合数据类型(类) ==比较的是两个对象的引用,可以理解为在内存中的地址,除非是同一个new出来的对象,他们的 ==为true,否则,都为false. equal是object中的方法.object中的实现如下,内部还是使用==实现,也就是说,如果一个

Bootstrap中的排版(1)-标题

bootstrap中的排版 标题(h1~h6/.h1~.h6) h1:36px;h2:30px;h3:24px;h4:18px;h5:14px;h6:12px; 副标题(small) 小练习(标题大小和副标题的使用): 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link href=&quo