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用法指南

超链接

灰度色

强调色

按钮

表单

导航栏

表单状态和通知

三，混合用法

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

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

混合实用工具：

表单

排版

栅格系统

CSS3属性

背景和渐变

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