获取BootStrap源码。其zip文件只有css,没有less,因此先从GitHub获取开发代码:
$ git clone git://github.com/twitter/bootstrap.git $ cd bootstrap/less
网上有一份less.vim,用Vim阅读LESS文件语法高亮:
$ wget http://leafo.net/lessphp/vim/less.vim$ mv less.vim ~/.vim/syntax/$ vi ~/.vimrc # 在~/.vimrc中添加au BufNewFile,BufRead *.less set filetype=less
variables.less 文件
variables.less定义了一堆的基础变量(包括色彩和列宽)。BootStrap默认页面大小为940px,页面划分为12列,这里用了几个变量:
@gridColumns: 12;@gridColumnWidth: 60px;@gridGutterWidth: 20px;
12列构成一行,其中每列宽度60px,列间距为20px(共11个间距)。对浮动布局而言,列宽是个百分比:
@fluidGridColumnWidth: percentage(@gridColumnWidth / @gridRowWidth);
除了默认940px的页面,BootStrap还预定义了1200px和768px的页面。
定义了一坨颜色:几种灰度颜色、几种强调色(accent colors),包括我们常见的蓝红黄粉等色彩。这些色彩视觉效果不错,因此我也抄录一份在此:
@blue: #049cdb;@blueDark: #0064cd;@green: #46a546;@red: #9d261d;@yellow: #ffc40d;@orange: #f89406;@pink: #c3325f;@purple: #7a43b6;@linkColor: #08c;@linkColorHover: darken(@linkColor, 15%);
mixins.less
clearfix
.clearfix {
*zoom: 1; /* for IE 6/7 */
&:before,
&:after {
display: table;
content: "";
line-height: 0; /* for Opera */
}
&:after {
clear: both;
}}
要理解clearfix的作用先看一个浮动div的示例。如果一个div作为外部容器,内部div设置float后,外部div不能被撑开,如下图:
<div class="cfout">
<div class="cfin"></div></div>
加上clearfix后的效果:
<div class="cfout clearfix">
<div class="cfin"></div></div>
clearfix在BootStrap中的几个应用。例如在.dl-horizontal(type.less)中,dt/dd是浮动的,它们的外层是dl:
.dl-horizontal {
.clearfix();
dt { float:left; }}<dl class="dl-horizontal">
在.container-fluid(layout.less)中:
.container-fluid { .clearfix(); }
layout.less
这个文件很短,只定义了2个变量:.container, .container-fluid。