一,less变量,less文件
这是主要的 Less 文件。该文件中导入了一些其他的 less 文件。该文件中没有任何代码。
这个 Less 文件包含了表单布局、输入框类型的样式。
4.这个 Less 文件让 CSS 代码可重复使用。
这个 Less 文件包含了重复的用户界面元素的 CSS 代码,不会被位于 scaffolding Less 文件中的基本样式覆盖。
这个 Less 文件包含了 CSS 重置。这是 Eric Meyer 的 CSS 重置的一个更新。一些 HTML 元素比如 dfn、samp 等的重置被免除。
这个 Less 文件保存了创建网格系统、结构化布局、页面模板所需的基本样式。
这个 Less 文件包含了创建表格的样式。
这个 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 % 间距宽度,生成一个百分比栅格系统 |
混合 | 参数 | 用法 |
---|---|---|
.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));
}
}