6.3.6 Bootstrap网格系统的变量和mixin
Bootstrap
使用Less
作为CSS
的预编译语言,它为网格系统定义了如下变量:
Bootstrap的提供的网格系统变量
1 | @grid-columns: 12; |
3个变量的定义非常清楚,其中,
@grid-columns
指定了网格的最大列数为12
,因此如果我们想定制Bootstrap
的网格系统,改变它的最大列数,只要修改该变量即可。@grid-gutter-width
指定了默认的列间距为30px
(左右各15px),@grid-float-breakpoint
指定了媒体查询的阈值为768px
。这些变量都是可以改变的。
Bootstrap定义的mixin
此外Bootstrap
还定义了如下mixin
。
.make-row(@gutter:@grid-gutter-width)
:用于生成行(.row
)的mixin
,该mixin
支持@gutter
参数,该参数有默认值。.make-xs-column(@columns;@gutter:@grid-gutter-width)
:用于生成在xs尺寸的viewport
上的单元格(.col-xs-N
)的mixin
,该mixin
支持@columns
参数和@gutter
参数,其中@gutter
参数有默认值。.make-xx-column(@columns;@gutter:@grid-gutter-width)
:用于生成在xx尺寸的viewport
上的单元格(.col-xx-N
)的mixin
,该mixin
支持@columns
参数和@gutter
参数,其中@gutter
参数有默认值。其中xx可表示sm
、md
、lg
这3种viewport
尺寸。.make-xx-column-offset(@columns)
:用于生成在xx
尺寸的viewport
上的单元格偏移(.col-xx-offset-N
)的mixin
,该mixin
支持@columns
参数和@gutter
参数,其中@gutter
参数有默认值。其中xx
可表示sm
、md
、lg
这3种viewport
尺寸。.make-xx-column-push(@columns)
:用于生成在xx
尺寸的viewport
上的单元格排序(.col-xx-push-N
)的mixin
,该mixin
支持@columns
参数和@gutter
参数,其中@gutter
参数有默认值。其中xx
可表示sm
、md
、lg
这3种viewport
尺寸。.make-xx-column-pull(@columns)
:用于生成在xx
尺寸的viewport
上的单元格(.col-xx-pull-N
)的mixin
,该mixin
支持@columns
参数和@gutter
参数,其中@gutter
参数有默认值。其中xx
可表示sm
、md
、lg
这3种viewport
尺寸。
因此开发者完全可以在自己的页面中使用这些mixin
,例如如下代码:
1 | @import "../bootstrap/less/bootstrap.less"; |
上面在Less
代码中先导入了bootstrap.less
源代码,然后使用.make-row
、.make-sm-column
、.make-sm-column
定义了样式。
接下来我们打算在HTML
页面中以即时编译的方式来使用这些Less
源文件。该HTML
页面代码如下:
1 |
|
该页面的关键点是如下的的3行代码:
1 | <!-- 引入bootstrap的less源码 --> |
其中:
- 第一行代码先导入
Bootstrap
的Less
源文件:bootstrap.less
; - 第二行导入了我们自己编写的
Less
源代码; - 第三行导入了用于即时编译
Less
源代码的JS代码库。
由于存在跨域访问的问题,因此需要将上面页面部署在Web
服务器(如Tomcat
)之后再访问。