bootstrap快速入门笔记(四)-less用法指南, mixin和变量

一,less变量,less文件

1.bootstrap.less

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

2.forms.less

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

3.mixins.less

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

5.patterns.less

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

6.reset.less

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

7.scaffolding.less

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

8.tables.less

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

9.type.less

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

10.variables.less

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

注意:

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

<link rel="stylesheet/less" href="lib/bootstrap.less" media="all" /> <script src="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: 0 1px 3px rgba(0,0,0,.25)

对元素应用阴影

.transition()

@transition

添加CSS3过渡效果(比如, all .2s linear)

.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);
  padding-left:(@gutter/2);
/ /计算宽度根据可用的列数
  @media (min-width:@grid-float-breakpoint){
    float:left;
    width:percentage((@columns/@grid-columns));
  }
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @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));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.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));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.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));
  }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏流川疯编写程序的艺术

vs2010修改状态栏的CStatusBar指针的的SetPaneText()方法时死活不对问题

vs2010的mfc在有些地方不太一样不容易注意到,今天在修改状态栏的时候,就碰见了问题,死活修改不了。

18020
来自专栏老欧说安卓

Android开发笔记(八十八)同步与加锁

synchronized可用来给方法或者代码块加锁,当它修饰一个方法或者一个代码块的时候,同一时刻最多只有一个线程执行这段代码。这就意味着,当两个并发线程同时...

10020
来自专栏中科院渣渣博肆僧一枚

如何用tensorflow训练神经网络

设置神经网络参数的过程就是神经网络的训练过程。只有经过有效训练的神经网络模型才可以真正地解决分类或者回归问题使用监督学习的方式设置神经网络参数需要有一个标注好的...

19650
来自专栏中科院渣渣博肆僧一枚

字符串处理

在name.title()中,name后面的点(.)让Python对变量name执行title()指定的操作。每个方法后面都跟着一对括号,这是因为方法通常需要额...

9520
来自专栏老欧说安卓

Android开发笔记(八十七)几个修饰关键字

native是方法修饰符,表示该方法是由其他一种语言(如C/C++)实现的原生方法。其实native只在JNI接口中使用,java代码中只有原生方法的定义,...

15320
来自专栏流川疯编写程序的艺术

【编程练习】收集的一些c++代码片,算法排序,读文件,写日志,快速求积分等等

 c语言实现如下功能 输入全部文件名(绝对路径加文件名)得到,文件名,扩展名,文件长度

14860
来自专栏指点的专栏

PAT--L3-001. 凑零钱

题目链接:https://www.patest.cn/contests/gplt/L3-001

14040
来自专栏中科院渣渣博肆僧一枚

如何用tensorflow生成常值函数

13150
来自专栏老欧说安卓

Android开发笔记(九十五)自定义Drawable

Bitmap是Android对图像的定义描述,而Drawable则是对图像的展现描述,在View视图中显示图像都是通过Drawable来实现的。其中有关Bi...

14620
来自专栏中科院渣渣博肆僧一枚

Python标准库和类编写风格

正如你看到的,在组织大型项目代码方面,Python提供了很多选项,熟悉所有这些选项很重要,这样你才能确定哪种项目是最佳的,并能理解别人开发的项目。开始应让代码结...

15320

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励