您的位置：首页 > Web前端 > BootStrap

bootstrap快速入门笔记（四）-less用法指南， mixin和变量

2015-12-01 11:47 816 查看

一，less变量,less文件

1.bootstrap.less

这是主要的Less文件。该文件中导入了一些其他的less文件。该文件中没有任何代码。

2.forms.less

这个Less文件包含了表单布局、输入框类型的样式。

3.mixins.less

4.这个Less文件让CSS代码可重复使用。

5.patterns.less

这个Less文件包含了重复的用户界面元素的CSS代码，不会被位于scaffoldingLess文件中的基本样式覆盖。

6.reset.less

这个Less文件包含了CSS重置。这是EricMeyer的CSS重置的一个更新。一些HTML元素比如dfn、samp等的重置被免除。

7.scaffolding.less

这个Less文件保存了创建网格系统、结构化布局、页面模板所需的基本样式。

8.tables.less

这个Less文件包含了创建表格的样式。

9.type.less

这个Less文件下可找到排版相关的样式。标题、段落、列表、代码等的样式位于这个文件里边。

10.variables.less

这个Less文件包含了要定制Bootstrap外观和感观的变量。

注意：

如果要使用它，请在您的HTML页面包含下面代码：

<linkrel="stylesheet/less"href="lib/bootstrap.less"media="all"/>
<scriptsrc="js/less-1.1.5.min.js"></script>
请注意，less-1.1.5.min.js不在js文件夹内，您需要下载并把它放置在指定的文件夹下。

二，less用法指南

超链接

@linkColor	#08c	默认的链接颜色
@linkColorHover	darken(@linkColor,15%)	默认悬停时的链接颜色

灰度色

@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

按钮

@primaryButtonBackground

@linkColor

表单

@placeholderText

@grayLight

导航栏

@navbarHeight	40px
@navbarBackground	@grayDarker
@navbarBackgroundHighlight	@grayDark
@navbarText	@grayLight
@navbarLinkColor	@grayLight
@navbarLinkColorHover	@white

表单状态和通知

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

三，混合用法

基本混合：.element{.clearfix();}

代餐素混合：.element{.border-radius(4px);}

混合实用工具：


混合	参数	用法
.clearfix()	无	清除浮动
.tab-focus()	无	添加类似Webkit获得焦点的风格和类似Firefox的的外包线
.center-block()	无	使用 margin:auto 把块级元素自动居中
.ie7-inline-block()	无	添加规则的 display:inline-block 以支持IE7
.size()	@height:5px,@width:5px	快速设置行高和行宽
.square()	@size:5px	基于 .size() 设置正方形区域
.opacity()	@opacity:100	设置透明度的百分比(比如"50"或"75")

表单


混合	参数	用法
.placeholder()	@color:@placeholderText	设置输入框中 placeholder 的字体颜色

排版


混合	参数	用法
#font>#family>.serif()	无	对某个元素应用一系列serif衬线字体
#font>#family>.sans-serif()	无	对某个元素应用一系列sans-serif字体
#font>#family>.monospace()	无	对某个元素应用一系列monospace字体
#font>.shorthand()	@size:@baseFontSize,@weight:normal,@lineHeight:@baseLineHeight	方便设置字体大小，粗细和行间距
#font>.serif()	@size:@baseFontSize,@weight:normal,@lineHeight:@baseLineHeight	设置衬线字体族serif，字体大小，粗细和行间距
#font>.sans-serif()	@size:@baseFontSize,@weight:normal,@lineHeight:@baseLineHeight	设置sans-serif字体族，字体大小，粗细和行间距
#font>.monospace()	@size:@baseFontSize,@weight:normal,@lineHeight:@baseLineHeight	设置monospace字体族，字体大小，粗细和行间距

栅格系统


混合	参数	用法
.container-fixed()	无	创建一个水平居中的容器，用以容纳内容
#grid>.core()	@gridColumnWidth,@gridGutterWidth	使用n列和x像素间距宽度，生成一个象素栅格系统(容器，行，列)
#grid>.fluid()	@fluidGridColumnWidth,@fluidGridGutterWidth	使用n列和x%间距宽度，生成一个百分比栅格系统

CSS3属性


混合	参数	用法
.border-radius()	@radius:5px	元素圆角化，可以是一个单独的值，也可以分别是四个角的值
.box-shadow()	@shadow:01px3pxrgba(0,0,0,.25)	对元素应用阴影
.transition()	@transition	添加CSS3过渡效果(比如， all.2slinear )
.rotate()	@degrees	旋转一个元素n度
.scale()	@ratio	对一个元素缩放原有大小的n倍
.translate()	@x:0,@y:0	在平面上移动x和y个像素
.background-clip()	@clip	裁剪一个元素的背景(用于 border-radius )
.background-size()	@size	通过CSS3更改背景图片的大小
.box-sizing()	@boxmodel	改变一个元素的盒(box)模型(比如，用在100%宽度 input 上的 border-box )
.user-select()	@select	更改页面文本的选择光标
.resizable()	@direction:both	改变右下角坐标以重置元素大小
.content-columns()	@columnCount,@columnGap:@gridColumnGutter	让元素中的内容使用CSS3的列

背景和渐变


混合	参数	用法
#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	用于给按钮指定渐变背景和浅暗的边框

通过变量来定义列数、槽（gutter）宽、媒体查询阈值，生成栅格类。

@grid-columns:12;//行12列
@grid-gutter-width:30px;
@grid-float-breakpoint:768px;

二.mixin:和栅格变量一同使用，为每个列（column）生成语义化的CSS代码
.make-row(@gutter:@grid-gutter-width){
　　.clearfix();
　　@media(min-width:@screen-sm-min){
　　　　margin-left:(@gutter/-2);
　　　　margin-right:(@gutter/-2);
　　}
//负margin嵌套行对齐列的内容
.row{
　　margin-left:(@gutter/-2);
　　margin-left:(@gutter/-2);

　　}
}
//生成额外的小列
.make-xs-column(@columns;@gutter:@grid-gutter-width){
　　position:relative;
　　min-height:1px;
　　padding-left:(@gutter/2);
　　[code]padding-left:(@gutter/2);
//计算宽度根据可用的列数
　　@media(min-width:@grid-float-breakpoint){
　　　　float:left;
　　　　width:percentage((@columns/@grid-columns));
　　}
}
[/code]

//Generatethesmallcolumns
.make-sm-column(@columns;@gutter:@grid-gutter-width){
position:relative;
//Preventcolumnsfromcollapsingwhenempty
min-height:1px;
//Innergutterviapadding
padding-left:(@gutter/2);
padding-right:(@gutter/2);

//Calculatewidthbasedonnumberofcolumnsavailable
@media(min-width:@screen-sm-min){
float:left;
width:percentage((@columns/@grid-columns));
}
}

//生成小列偏移量
.make-sm-column-offset(@columns){
@media(min-width:@screen-sm-min){
margin-left:percentage((@columns/@grid-columns));
}
}
.make-sm-column-push(@columns){
@media(min-width:@screen-sm-min){
left:percentage((@columns/@grid-columns));
}
}
.make-sm-column-pull(@columns){
@media(min-width:@screen-sm-min){
right:percentage((@columns/@grid-columns));
}
}

//Generatethemediumcolumns
.make-md-column(@columns;@gutter:@grid-gutter-width){
position:relative;
//Preventcolumnsfromcollapsingwhenempty
min-height:1px;
//Innergutterviapadding
padding-left:(@gutter/2);
padding-right:(@gutter/2);

//Calculatewidthbasedonnumberofcolumnsavailable
@media(min-width:@screen-md-min){
float:left;
width:percentage((@columns/@grid-columns));
}
}

//Generatethemediumcolumnoffsets
.make-md-column-offset(@columns){
@media(min-width:@screen-md-min){
margin-left:percentage((@columns/@grid-columns));
}
}
.make-md-column-push(@columns){
@media(min-width:@screen-md-min){
left:percentage((@columns/@grid-columns));
}
}
.make-md-column-pull(@columns){
@media(min-width:@screen-md-min){
right:percentage((@columns/@grid-columns));
}
}

//Generatethelargecolumns
.make-lg-column(@columns;@gutter:@grid-gutter-width){
position:relative;
//Preventcolumnsfromcollapsingwhenempty
min-height:1px;
//Innergutterviapadding
padding-left:(@gutter/2);
padding-right:(@gutter/2);

//Calculatewidthbasedonnumberofcolumnsavailable
@media(min-width:@screen-lg-min){
float:left;
width:percentage((@columns/@grid-columns));
}
}

//Generatethelargecolumnoffsets
.make-lg-column-offset(@columns){
@media(min-width:@screen-lg-min){
margin-left:percentage((@columns/@grid-columns));
}
}
.make-lg-column-push(@columns){
@media(min-width:@screen-lg-min){
left:percentage((@columns/@grid-columns));
}
}
.make-lg-column-pull(@columns){
@media(min-width:@screen-lg-min){
right:percentage((@columns/@grid-columns));
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航