rif

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

⼀，less变量,less⽂件

这是主要的Less⽂件。该⽂件中导⼊了⼀些其他的less⽂件。该⽂件中没有任何代码。

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

4.这个Less⽂件让CSS代码可重复使⽤。

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

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

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

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

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

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

注意：

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

请注意，不在js⽂件夹内，您需要下载并把它放置在指定的⽂件夹下。

⼆，less⽤法指南

超链接

@linkColor#08c默认的链接颜⾊

@linkColorHoverdarken(@linkColor,15%)默认悬停时的链接颜⾊

灰度⾊

@black#000

@grayDarker#222

@grayDark#333

@gray#555

@grayLight#999

@grayLighter#eee

@white#fff

@white#fff

强调⾊

@blue#049cdb

@green#46a546

@red#9d261d

@yellow#ffc4斑马线英语 0d

@orange#f89406

@pink#c3325f

@purple#7a43b6

按钮

@primaryButtonBackground@linkColor

表单

@placeholderText@grayLight

导航栏

@navbarHeight40px

@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>.rif()⽆对某个元素应⽤⼀系列rif衬线字体

#font>#family>.sans-rif()⽆对某个元素应⽤⼀系列sans-rif字体

#font>#family>

.monospace()⽆对某个元素应⽤⼀系列monospace字体

#font>.shorthand()

@size:@baFontSize,@weight:normal,@lineHeight:

@baLineHeight

⽅便设置字体⼤⼩，粗细和⾏间距

#font>.rifalrocco ()

@size:@baFontSize,@weight:normal,@lineHeight:

@baLineHeight

设置衬线字体族rif，字体⼤⼩，粗细和⾏间距

#font>.sans-rif()

@size:@baFontSize,@weight:normal,@lineHeight:

@baLineHeight

设置sans-rif字体族，字体⼤⼩，粗细和⾏间距

#font>.monospace()

@size:@baFontSize,@weight:normal,@lineHeight:

@baLineHeight

设置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)

.ur-lect()@lect更改页⾯⽂本的选择光标

.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>.direct不再哭泣 ional()@startColor,@endColor,@deg创建⼀个跨浏览器的有斜度的背景渐变

#gradient>.vertical-three-colors()@startColor,@midColor,@colorStop,@endColor创建⼀个跨浏览器的三⾊背景渐变

#gradient>.radial()@innerColor,@outerColor创建⼀个跨浏览器的放射背景渐变

#gradient>.striped()@color,@angle创建⼀个跨浏览器的条纹背景渐变

#gradientBar()@primaryColor,@condaryColor⽤于给按钮指定渐变背景和浅暗的边框

通过变量来定义列数、槽（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);

padding-left:(@gutter/2);

//计算宽度根据可⽤的列数

@media(min-width:@grid-float-breakpoint){

float:left;

width:percentage((@columns/@grid-columns));

}

}

//Generatethesmallcolumns

.make-sm-column(@columns;@gutter:@grid-gutter-width){

position:relative;

//Preventcolumnsfromcollapsingwhenempty

min-height:1px;

//Innergutterviapadding

padding-left:(@gutter/2);

padding-right:(@gutter/2);

//Calculatewidthbadonnumberofcolumnsavailable

@media(min-width:@screen-sm-min){

float:left;

width:percentage((@columns/@grid-columns));

}

}

//⽣成⼩列偏移量

.make-sm-column-offt(@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;

//Inner年会唱什么歌 gutterviapadding

padding-left:(@gutter/2);

padding-right:(@gutter/2);

//Calculatewidthbadonnumberofcolumnsavailable

@media(min-width:@screen-md-min){

float:left;

width:percentage((@columns/@grid-columns));

}

}

//Generatethemediumcolumnoffts

.make-md-column-offt(@columns){

@media(min-w跌打损伤丸 idth:@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);

//Calculatewidthbadonnumberofcolumnsavailable

@media(min-width:@screen-lg-min){

float:left;

width:percentage((@columns/@grid-columns));

}

}

//Generatethelargecolumnoffts

.make-lg-column-offt(@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((@column铁兰花的养殖方法 s/@grid-columns));

}

}