6.3.6 Bootstrap网格系统的变量和mixin

发表于 更新于 分类于 ， ， Waline： 本文字数： 3.6k 阅读时长 ≈ 3 分钟

6.3.6 Bootstrap网格系统的变量和mixin

Bootstrap使用Less作为CSS的预编译语言,它为网格系统定义了如下变量:

Bootstrap的提供的网格系统变量

1
2
3
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;

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
2
3
4
5
6
7
8
9
10
11
12
13
@import "../bootstrap/less/bootstrap.less";
.wrapper {
    .make-row();
}

.content-main {
    .make-sm-column(3);
}

.content-secondary {
    .make-sm-column(2);
    .make-sm-column-offset(1);
}

上面在Less代码中先导入了bootstrap.less源代码,然后使用.make-row、.make-sm-column、.make-sm-column定义了样式。
接下来我们打算在HTML 页面中以即时编译的方式来使用这些Less 源文件。该HTML页面代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 使用Bootstrap的mixin </title>
    <!-- 引入bootstrap的less源码 -->
    <link rel="stylesheet/less" href="../bootstrap/less/bootstrap.less" media="all" />
    <!-- 引入自定义的less源码 -->
    <link rel="stylesheet/less" href="mixin.less" media="all" />
    <!-- 引入编译器 -->
    <script src="../less.min.js"></script>
    <style type="text/css">
        .wrapper {
            margin-bottom: 20px;
        }

        [class*="content-"] {
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #eee;
            background-color: rgba(86, 61, 124, .15);
            border: 1px solid #ddd;
            border: 1px solid rgba(86, 61, 124, .2);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="wrapper">
            <div class="content-main">第1行第1格.</div>
            <div class="content-secondary">第1行第2格</div>
        </div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <!-- 引入bootstrap的js库 -->
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

该页面的关键点是如下的的3行代码：

1
2
3
4
5
6
<!-- 引入bootstrap的less源码 -->
<link rel="stylesheet/less" href="../bootstrap/less/bootstrap.less" media="all" />
<!-- 引入自定义的less源码 -->
<link rel="stylesheet/less" href="mixin.less" media="all" />
<!-- 引入编译器 -->
<script src="../less.min.js"></script>

其中:

  • 第一行代码先导入Bootstrap的Less源文件:bootstrap.less;
  • 第二行导入了我们自己编写的Less源代码;
  • 第三行导入了用于即时编译Less源代码的JS代码库。

由于存在跨域访问的问题,因此需要将上面页面部署在Web服务器(如Tomcat)之后再访问。