蓝蓝站点

Java读书笔记

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

6.4.3 增强的HTML元素

Bootstrap出于风格统一、美观的目的,可能对如下HTML元素进行了强化,但我们只要像以往一样使用这些HTML元素即可。

常见HTML元素

  • <mark>元素:用于显示HTML页面中需要重点”关注”的内容,就像看书时喜欢用荧光笔把某些重点内容标注出来一样。
  • <del>和<s>元素:浏览器通常会以中画线形式显示<del>或<s>包含的文本。其中<del>的语义表示文档中被删除的文本;<s>的语义表示文档中无用的文本。
  • <ins>和<u>元素:浏览器通常会以下画线形式显示<ins>或<u>包含的文本。其中<ins>还有额外的语义:用于定义文档中插入的文本。
  • <strong>和<b>元素:浏览器通常会以粗体字形式显示<strong>或<b>包含的文本。其中<strong>还有额外的语义:用于定义文档中需要强调的文本。此外也可在CSS样式中使用font-weight来实现更丰富的粗体字效果。
  • <em>或<i>元素:浏览器通常会以斜体字形式显示<em>或<i>包含的文本。其中<em>的语义表示文档中需要强调的文本;<i>标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。
  • <abbr>元素:用于表示一个缩写。使用该元素时通常建议指定title属性,该属性用于指定该缩写所代表的全称。外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有”问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上。此外,Bootstrap还为缩略语定义了.initialism样式,可以让font-size变得稍微小些。
  • <address>元素:用于表示一个地址,让地址信息以最接近日常使用的格式显示出来。在每行结尾添加<br>可以保留需要的样式。
  • <blockquote>元素:用于定义一段长的引用文本。使用<blockquote>元素时可指定cite属性,该属性指定引用文本所引用的网址URL或出处。 Bootstrap建议添加<footer>用于标明引用来源,来源的名称可以放在<cite>标签内。此外,Bootstrap还提供了一个.blockquote-reverse样式,其可以让被引用的内容呈现右对齐的效果。
  • <code>元素:用于表示一段计算机代码。
  • <kbd>元素:用于定义键盘文本。该元素用于表示文本是通过键盘输入的。通常在计算机使用文档、使用说明中会经常使用该元素。
  • <samp>元素:用于标记程序输出的内容。
  • <pre>元素:用于表示该元素所包含的文本已经被进行了”预格式化”。也就是说,<pre>元素所包含文本中的空格、回车、Tab键和其他格式字符都会被保留下来,但浏览器会处理<pre>元素内大部分HTML元素。Bootstrap推荐使用<pre>标签来包含大段代码。此外,Bootstrap还提供了.pre-scrollable样式,其作用是设置max-height为350px,并在垂直方向展示滚动条。
  • <var>元素:用于表示一个变量。浏览器通常会用斜体字显示<var>所包含的文本。

程序示例

下面的页面代码示范了前面几个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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!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> 增强的HTML元素 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <div class="container">
        <p>
            <mark>HTML 5</mark>是下一代的HTML规范，
            <mark>HTML 5</mark>即将把前端开发者从繁重的开发中释放出来。</p>
        <p>Android是一个
            <del>开发</del>
            <ins>开放</ins>式的手机、平板电脑操作系统
        </p>
        <p>Android是一个
            <s>开发</s>
            <u>开放</u>式的手机、平板电脑操作系统
        </p>
        <p>strong标签的效果：
            <strong>被强调的文本</strong>
        </p>
        <p>b标签的效果：
            <b>加粗文本</b>
        </p>
        <p>i标签的效果：
            <i>斜体文本</i>
        </p>
        <p>em标签的效果：
            <em>被强调的文本</em>
        </p>
        <p>
            <abbr title="Hyper Text Markup Language">HTML</abbr>。
        </p>
        天安门广场的地址是:
        <address>北京市
            <br> 东城区
            <br> 东长安街
            <br>
        </address>
        <blockquote cite="李义山诗集">
            锦瑟无端五十弦，一弦一柱思华年。
            <br> 庄生晓梦迷蝴蝶，望帝春心托杜鹃。
            <br> 沧海月明珠有泪，蓝田日暖玉生烟。
            <br> 此情可待成追忆，只是当时已惘然。
        </blockquote>
        <p>下面是右对齐的引用</p>
        <blockquote cite="李义山诗集" class="blockquote-reverse">
            锦瑟无端五十弦，一弦一柱思华年。
            <br> 庄生晓梦迷蝴蝶，望帝春心托杜鹃。
            <br> 沧海月明珠有泪，蓝田日暖玉生烟。
            <br> 此情可待成追忆，只是当时已惘然。
        </blockquote>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

下面的页面代码示范了另外几个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
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 增强的HTML元素 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <div class="container">
        <p>下面代码定义了一个Java类：
            <!-- 代码 -->
            <code>Cat</code>类
        </p>
        <!-- pre元素包含的内容是“预格式化”文本。 -->
        <pre>public class Cat
    {
        private int name = "garfield";
    }</pre>
        <p>可通过输入如下命令：
            <br>
            <!-- 键盘输入 -->
            <kbd>ls -l</kbd>
            <br> 在Linux的Shell窗口查看当前目录下所有文件、目录的详细信息。
            <br> 该命令可能产生如下输出:
            <br>
            <!-- 程序输出 -->
            <samp>
                -rw-r--r--. 1 root root 683 Aug 19 09:59 fkjava.png
                <br> drwxr-xr-x. 2 root root 4096 Jul 31 02:48 Desktop
                <br> drwxr-xr-x. 2 root root 4096 Jul 31 02:48 Documents
                <br> drwxr-xr-x. 4 root root 4096 Aug 16 02:55 Downloads
                <br>
            </samp>
        </p>
        <!-- 使用var定义变量 -->
        <var>i</var>、
        <var>j</var>、
        <var>k</var>通常用于作为循环计数器变量。
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

提示

由于上面这些元素是Bootstrap直接借用了HTML 5元素，因此读者可以通过《疯狂HTML 5/CSS 3/JavaScript讲义》第2章找到关于这些元素更详细的介绍。

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

6.4.2 段落

Bootstrap为<body>元素设置了font-size为14px,line-height为1.428。此外,Bootstrap还为所有<p>元素设置了margin-bottom=10px。
如果希望让某个段落突出显示,可使用Bootstrap提供的.lead样式。

下面代码示范了段落相关样式的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 段落相关样式 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <div class="container">
        <p>静夜思 作者：李白床前明月光，疑是地上霜。举头望明月，低头思故乡。</p>
        <p class="lead">静夜思 作者：李白床前明月光，疑是地上霜。举头望明月，低头思故乡。</p>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

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

6.4 Bootstrap排版相关样式

Bootstrap的排版相关的样式很多都是直接借用了HTML 5元素,或者说Bootstrap可以和HTML元素结合使用以达到最佳效果。

6.4.1 标题元素和样式

如果要实现标题效果,既可直接使用<h1>到<h6>这样的HTML 元素,也可使用Bootstrap提供的.h1到.h6这样的CSS样式。

例如如下代码:

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
<!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> 标题相关样式 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <div class="container">
        <h1>HTML的一级标题</h1>
        <h2>HTML的二级标题</h2>
        <h5>HTML的五级标题</h5>
        <hr/>
        <div class="h1">Bootstrap的一级标题</div>
        <div class="h2">Bootstrap的二级标题</div>
        <div class="h5">Bootstrap的五级标题</div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

使用HTML的<h1>到<h6>标签和使用Bootstrap的.h1到.h6样式的效果基本是相同的。

如果要在标题内使用小标题,可使用HTML的<small>标签或Bootstrap的.small样式来实现。small效果中的line-height变成1,字体大小在h1到h3中变成主标题的65%,在h4到h6中变成主标题的75%。

例如如下代码:

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
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 标题相关样式 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <div class="container">
        <h1>HTML的一级标题
            <span class="small">小标题</span>
        </h1>
        <h2>HTML的二级标题
            <span class="small">小标题</span>
        </h2>
        <h5>HTML的五级标题
            <span class="small">小标题</span>
        </h5>
        <hr/>
        <div class="h1">Bootstrap的一级标题
            <small>小标题</small>
        </div>
        <div class="h2">Bootstrap的二级标题
            <small>小标题</small>
        </div>
        <div class="h5">Bootstrap的五级标题
            <small>小标题</small>
        </div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

发表于 更新于 分类于 ， ， 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)之后再访问。

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

6.3.5 内嵌规则

通过Less的内嵌规则可以批量地将选择器直接放入指定命名空间下。例如如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
#container{
    .a {
        width:200px;
        height:35px;
    }
    span {
        font-size: 16px;
        text-decoration: none;
    }
    div li {
        list-style: circle;
    }
}

上面的代码先将.a、span、div li 这三个选择器都放在#container命名空间下,这表明以#container为包来生成包含选择器。上面代码经编译后会生成如下CSS样式:

1
2
3
4
5
6
7
8
9
10
11
#container .a {
  width: 200px;
  height: 35px;
}
#container span {
  font-size: 16px;
  text-decoration: none;
}
#container div li {
  list-style: circle;
}

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

6.3.4 mix in

所谓mixin就相当于一段可重用的代码块,类似于C语言的宏定义。与C语言的宏定义类似,mixin还支持参数,因此**mixin可以很方便地将某段通用CSS定义提取出来,方便后面复用它**。
例如如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@block-width : 300px;
@block-height : 120px;
@block-back : rgba(86,61,124,.15);
// mixin
.make-block(@width: @block-width, @height: @block-height, @back: @block-back) {
    width: @width;
    height: @width;
    border: 1px solid black;
    background-color: @back;
    border-radius: 5px;
}
.md-block {
    .make-block();
}
.big-block {
    .make-block(500px, 200px, #eee);
}
.small-block {
    .make-block(150px, 60px, #bbb);
}

在以上代码中的:

1
2
3
4
5
6
7
8
// mixin
.make-block(@width: @block-width, @height: @block-height, @back: @block-back) {
    width: @width;
    height: @width;
    border: 1px solid black;
    background-color: @back;
    border-radius: 5px;
}

就是定义了一个名为.make-block的mixin,该mixin支持3个参数,这3个参数都被指定了默认值,因此使用时也可不传入参数。mixin的语法是以.号开头,这**和CSS的class选择器定义有点类似,但mixin可以支持参数**。
定义了mixin之后,在后面代码中可以复用这些mixin。在上面的源码中使用.make-block这个mixin定义了.md-block、.big-block 和.small-block 这3个样式。上面代码经编译后会生成如下CSS样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.md-block {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background-color: rgba(86, 61, 124, 0.15);
  border-radius: 5px;
}
.big-block {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  background-color: #eee;
  border-radius: 5px;
}
.small-block {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  background-color: #bbb;
  border-radius: 5px;
}

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

6.3.3 Less的变量和运算符

正如我们在前面Less示例文件中见到的,Less源文件可以使用@关键字定义变量。

Less源文件支持各种加(+)、减(-)、乘(*)、除(/)等常见的运算符,也可使用圆括号来改变运算符的优先级。而且任何数字、颜色、长度单位、百分比及变量都可以参与运算。
例如如下Less源文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@normal-height : 25px;
@baseColor : #eee;
@width: 1px;
.a {
    height: @normal-height;
    background-color: @baseColor;
    border: @width solid black;
}
.b {
    height: @normal-height - 5px;
    // 除法
    background-color: @baseColor / 2;
    border: @width + 1 solid black;
}
.c {
    height: 2 * @normal-height;
    // 加法
    background-color: @baseColor + #111;
    // 圆括号,乘法
    border: (@width + 1) * 2 dotted black;
}

这里的代码会对颜色值、长度值进行了计算。使用lessc命令编译上面的Less源文件:

1
$ lessc var.less var.css

生成CSS代码如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.a {
  height: 25px;
  background-color: #eee;
  border: 1px solid black;
}
.b {
  height: 20px;
  background-color: #777777;
  border: 2px solid black;
}
.c {
  height: 50px;
  background-color: #ffffff;
  border: 4px dotted black;
}

在线Less编译工具

在线 LESS CSS 编译器

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

6.3.2 Less的两种用法

Less源文件只有被编译成CSS样式单才能被浏览器识别,根据编译Less源文件的时机,Less通常有两种用法。

  1. 预编译:预先使用特定的编译器将Less 源文件编译成CSS 文件,在网页中直接引用CSS文件即可。
  2. 浏览器即时编译:直接在网页中引入Less 源文件,并在网页中导入编译Less 源文件的JS库,从而让浏览器在运行时即时编译Less源文件。

1.预编译方式

使用默认的Grunt遍历Less

先看”预编译”使用Less源文件的方式。如果要预编译Less源文件,就需要使用特定的编译工具。Bootstrap默认使用Grunt作为编译系统,并提供一些便捷的工具方法用于编译整个Bootstrap框架。
使用Grunt之前,必须先安装Grunt,推荐使用Node.js来安装Grunt,因此开发者应该先安装Node.js,安装Node.js时会自动安装npm工具—npm是node packaged modules的简称,它的作用是基于Node.js管理扩展包之间的依赖关系。
提示:在Windows上安装Node.js非常简单,只要登录Node.js官网下载一个node-vx.x.x.msi安装文件,就像安装其他Windows程序一样安装它即可。

Grunt安装步骤

安装Grunt请按如下步骤进行。

  1. 启动命令行窗口,在命令行窗口中输入如下命令来安装grunt-cli:
    1
    npm install -g grunt-cli
  2. 下载并解压Bootstrap的源代码包,在该解压路径下会看到package.json文件。
  3. 进入Bootstrap源代码包的解压路径,在该路径下输入如下命令:
    1
    npm install
    该命令将会读取package.json文件并自动安装此文件中列出的所有被依赖的扩展包。

成功安装Grunt之后,接下来要编译Bootstrap的Less源代码非常简单,直接使用Bootstrap提供的工具方法进行编译即可。下面是Bootstrap提供的工具方法。

  1. grunt dist:重新生成dist/目录,并将编译、压缩后的CSS和JavaScript文件放入这个目录中。大部分时候只要执行该命令即可。
  2. grunt watch:监测Less源文件的改变,并自动重新将其编译为CSS文件。
  3. grunt test:在PhantomJS环境中运行JSHint和QUnit自动化测试用例。

其他Less编译器

如果仅仅只是编译少量的Less源文件,也有一些简便、易用的Less编译工具。

  • WinLess:Windows平台的Less编译软件。
  • Koala:全平台的Less/Sass编译工具。该工具支持Windows、Linux和Mac OS X平台。
  • SimpleLESS:跨平台的Less编译工具。该工具支持Windows和Mac OS X平台

NodeJS中使用lessc命令编译less

打开git-bash,输入乳腺npm命令安装less:

1
npm install -g less

安装成功后进入less文件所在的目录,使用lessc xxx.less xxxx.css命令把less文件编译成css文件,例如:

1
$ lessc var.less var.css

这样就会在同级目录下生成编译好的var.css文件。

VSCode中安装less自动编译插件

在VScode中依次打开查看,扩展,然后在搜索框中输入less进行搜索,然后:

  1. 安装Beautify css/sass/scss/less这个插件,这个插件可以格式化less文件,
  2. 安装Easy LESS这个插件,这个插件可以在保存less文件时自动编译该less文件.这样我们就不用手动去输入指令编译了。

2.即时编译方式

使用即时编译方式,需要额外下载一个编译Less源文件的JS库。登录less的Github仓库即可下载Less.js的源文件压缩包。解压压缩包,我们只需要压缩包dist/目录下的less.min.js文件。
在HTML页面中直接使用link标签引入Less源文件,然后使用script标签引入less.min.js文件即可。

1
2
3
4
<!-- 引入less源文件 -->
<link rel="stylesheet/less" href="sample.less" media="all" />
<!-- 引入less编译器 -->
<script src="../less.min.js"></script>

程序示例

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
<!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> Less即时编译 </title>
    <!-- 引入less源文件 -->
    <link rel="stylesheet/less" href="sample.less" media="all" />
    <!-- 引入less编译器 -->
    <script src="../less.min.js"></script>
    <style type="text/css">
        div {
            margin-bottom: 20px;
            background-color: rgba(86, 61, 124, .15)
        }
    </style>
</head>

<body>
    <div class="a">
        .a
    </div>
    <div class="b">
        .b
    </div>
    <div class="c">
        .c
    </div>
</body>

</html>

注意:引入less源文件和less的编译器文件如下所示

1
2
3
4
<!-- 引入less源文件 -->
<link rel="stylesheet/less" href="sample.less" media="all" />
<!-- 引入less编译器 -->
<script src="../less.min.js"></script>
  • 第一行代码表明在页面中引入sample.less源文件,其中rel属性值为stylesheet/less,这表明被引入的文件是Less源文件,而不是CSS样式单文件。
  • 第二行代码引入了less.min.js文件,浏览器将会使用该JS文件在运行时即时编译Less文件,生成CSS样式文件。

注意一定要先引入所有Less源文件,然后后才引入less.min.js文件。

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

可以看出3个<div>元素的高度关系:第二个<div>高度比第一个<div>高度小5px;第三个<div>高度是第一个<div>高度的2倍。而且从图6.17下方也可以看到浏览器即时编译Less文件并生成CSS文件的提示信息。

总体来说,要想使用即时编译的方式,只要在HTML页面中增加less.min.js文件即可,使用起来简单、方便,但这种方式会在浏览页面时即时编译,因此会产生额外的性能开销。
我们在学习阶段可采用这种方式使用Less源文件,
但在实际项目上线时,还是推荐先将Less源文件编译成CSS文件,然后在HTML页面中直接引用预编译的CSS样式文件。

参考资料

编译less的四种方式以及node.js的安装

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

6.3 Less和mixin

Bootstrap并不是直接提供CSS源文件,CSS源文件是通过编译Less源码而来的。Less是一种CSS预处理语言,支持变量、mixin、函数等功能。如果掌握了Less的用法,Bootstrap用户将可以直接使用Less源码,从而使用Bootstrap框架中包含的大量变量、mixin。

6.3.1 Less简介

CSS作为一门功能强大的样式单语言,用于为HTML页面定义丰富多彩的样式,工作得一直非常好。虽然CSS号称是一门语言,但CSS并不具备编程语言的特征。

CSS缺陷

总体上,CSS存在着如下缺陷。

CSS无法定义变量

比如在页面上有很多地方都希望使用＃aaa 这个颜色,但在CSS样式单文件中只能一直重复地书写这个颜色。如果有一天希望对整个网页风格进行调整,希望将#aaa这个颜色改为＃ccc,开发者只能将原来所有出现＃aaa的地方手动修改为＃ccc,这一点非常不利于页面后期的升级和维护。

CSS无法执行计算

由于CSS本身不支持变量,自然也就谈不上计算了。但在实际开发中确实非常需要计算。比如我们要定义一个普通的高度为25px,另外2个高度要以此为基准。例如如下代码:

1
2
3
.a{height: 25px;}
.b{height: 20px;}
.c{height: 50px;}

如果有一天客户要求将普通的高度改为20px,另外两个高度也随之变化,但你看上面的代码能实现吗?当然不行,开发者必须手动修改另外两个变量,这真的令人沮丧。多希望有如下语法啊:

1
2
3
4
@normal-height 25px;
.a{height: @normal-height;}
.b{height: @normal-height -5px;}
.c{height: 2 * @normal-height;}

CSS不支持命名空间嵌套

CSS 经常要通过子元素选择器或包含选择器来实现命名空间嵌套。例如如下CSS样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#container.a
{
    width: 200px;
    height: 35px;
}
#container span
{
    font-size: 16px;
    text-decoration: none;
}
# container div li
{
    list-style: circle;
}

上面这个例子中所有样式都需要被id为container的元素包含才有效,编写该CSS样式文件时你可能还意识不到问题。但如果在编写之后页面结构发生了改变,那就需要为所有CSS样式添加包含元素,这就非常麻烦了。例如需要修改为如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.a
{
    width: 200px;
    height: 35px;
}
span
{
    font-size: 16px;
    text-decoration: none;
}
div li
{
    list-style: circle;
}

假如有几十个类似的CSS样式定义,突然要将它们全部放在id为container的元素内才有效,此时可能就需要在每个CSS选择器之前都增加container,这也是非常痛苦的事情。

Less用来干什么

由于CSS存在一些固有的缺陷,因此开发者为CSS重新开发了”预处理语言”—Less。这种语言通常可以支持变量、计算、命名空间嵌套甚至流程控制等功能。

使用Less编译得到最终的CSS

开发者使用这种”CSS预处理语言”来编写源代码,然后使用特定的编译器对源代码进行处理,从而得到最终的CSS文件—请记住:CSS 预处理语言完全可以支持变量、计算、命名空间嵌套甚至流程控制,因此CSS预处理语言可以很好地弥补CSS的缺陷。
Less是一种诞生于2009年的CSS预处理语言,Less增加了变量、运算符、mixin、函数等功能,让CSS更易维护。Less既可在浏览器上运行(通过JS库实时编译),也可借助Node.js或Rhino在服务器端运算。

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

6.2.6 嵌套网格

Bootstrap 的网格系统是支持嵌套的,在单元格内可以再次添加class="row"来增加行,在行内可再次添加单元格。
嵌套网格不再需要放在class="container"或class="container-fluid"的容器内。

例如如下示例代码示范了列嵌套:

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
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 网格 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
    <style type="text/css">
        .row {
            margin-bottom: 20px;
        }

        [class*="col-"] {
            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="row">
            <div class="col-sm-4">（1）.col-md-4</div>
            <div class="col-sm-8">
                <div class="row">
                    <div class="col-sm-6">（1-1-1）.col-md-6</div>
                    <div class="col-sm-6">（1-1-2）.col-md-6</div>
                </div>
                <div class="row">
                    <div class="col-sm-3">（1-2-1）.col-md-3</div>
                    <div class="col-sm-9">（1-2-2）.col-md-9</div>
                </div>
            </div>
        </div>
        <div class="clearfix  visible-sm-block"></div>
        <div class="row">
            <div class="col-sm-4">（1）.col-md-7</div>
            <div class="col-sm-8">（2）.col-md-5</div>
        </div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

上面代码在第一个行的第二个单元格内再次嵌套了2行。