蓝蓝站点

Java读书笔记

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

6.5.7 表格行状态

Bootstrap为表格行或单元格提供了如下状态样式。

样式类 描述
.active 高亮状态。添加鼠标悬停在行或单元格上时所设置的背景色。
.success 添加标识成功行为的背景色。
.info 添加标识普通提示信息的背景色。
.warning 添加标识警告或用户注意的背景色。
.danger 添加标识危险或负面影响的背景色。

程序示例

例如如下代码:

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!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">
        <table class="table table-condensed">
            <caption>
                <b>疯狂体系图书</b>
            </caption>
            <thead>
                <tr>
                    <th>书名</th>
                    <th>作者</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody>
                <tr class="active">
                    <td>疯狂Java讲义</td>
                    <td>李刚</td>
                    <td>109</td>
                </tr>
                <tr>
                    <td>疯狂HTML 5/CSS 3/JavaScript讲义</td>
                    <td>李刚</td>
                    <td>79</td>
                </tr>
                <tr class="success">
                    <td>疯狂前端开发讲义</td>
                    <td>李刚</td>
                    <td>79</td>
                </tr>
                <tr>
                    <td>疯狂Android讲义</td>
                    <td>李刚</td>
                    <td>108</td>
                </tr>
                <tr class="info">
                    <td>轻量级Java EE企业应用实战</td>
                    <td>李刚</td>
                    <td>108</td>
                </tr>
                <tr>
                    <td>疯狂XML讲义</td>
                    <td>李刚</td>
                    <td>69</td>
                </tr>
                <tr class="warning">
                    <td>疯狂iOS讲义</td>
                    <td>李刚</td>
                    <td>99</td>
                </tr>
                <tr>
                    <td>经典Java EE企业应用实战</td>
                    <td>李刚</td>
                    <td>79</td>
                </tr>
                <tr class="danger">
                    <td>疯狂Swift讲义</td>
                    <td>李刚</td>
                    <td>69</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" style="text-align:right">现总计：9本图书</td>
                </tr>
            </tfoot>
        </table>
    </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为表格行状态提供的这些CSS样式只是为其添加了具有某种常规意义的背景色,这种背景色只是一种视觉上的效果。因此如果需要传达更明确的状态,请确保通过内容本身(比如通过文字说明)来表达对应的状态。

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

6.5.6 响应式表格

响应式表格的.table-responsive 样式并不作用于表格本身,而是作用于表格所在的容器,比如我们将表格放在一个<div>元素中,这样就应该为该<div>元素设置class="table-responsive"样式,这样该表格就变成了响应式表格。响应式表格在小屏幕设备上(viewport宽度小于768px)显示时会出现水平滚动条。当viewport宽度大于768px宽度时,水平滚动条消失。
响应式表格被设置了overflow-y:hidden属性,这样能将超出表格底部和顶部的内容截断。但这样也会截断下拉菜单和其他第三方组件。

程序示例

下面代码示范了响应式表格。

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
<!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="table-responsive">
        <table class="table table-border table-hover">
            <caption>
                <b>疯狂体系图书</b>
            </caption>
            <thead>
                <tr>
                    <th>书名</th>
                    <th>作者</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>疯狂Java讲义</td>
                    <td>李刚</td>
                    <td>109</td>
                </tr>
                <tr>
                    <td>疯狂HTML 5/CSS 3/JavaScript讲义是一本前端开发的基础图书</td>
                    <td>李刚</td>
                    <td>79</td>
                </tr>
                <tr>
                    <td>疯狂前端开发讲义</td>
                    <td>李刚</td>
                    <td>79</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" style="text-align:right">现总计：9本图书</td>
                </tr>
            </tfoot>
        </table>
    </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>

响应式表格在Firefox浏览器中显示时会有些问题,Firefox浏览器对<fieldset>元素设置了一些影响width 属性的样式,导致响应式表格会出现问题。可通过添加如下CSS 代码来解决该问题(该代码并未集成在Bootstrap中):
读者小蓝注:这个问题不知道是否还存在,可能火狐已经解决了这个bug,后面有空再验证.

1
2
3
4
@-moz-document url-prefix()
{
    fieldset{display: table-cell;}
}

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

6.5.5 紧凑型表格

为指定class="table"的表格增加一个.table-condensed样式即可实现紧凑型表格。紧凑型表格将单元格的padding减半让表格内容更加紧凑。

程序示例

例如如下代码:

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
<!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">
        <table class="table table-condensed">
            <caption>
                <b>疯狂Java体系图书</b>
            </caption>
            <thead>
                <tr>
                    <th>书名</th>
                    <th>作者</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>疯狂Java讲义</td>
                    <td>李刚</td>
                    <td>109</td>
                </tr>
                <tr>
                    <td>疯狂HTML 5/CSS 3/JavaScript讲义</td>
                    <td>李刚</td>
                    <td>79</td>
                </tr>
                <tr>
                    <td>疯狂前端开发讲义</td>
                    <td>李刚</td>
                    <td>79</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" style="text-align:right">现总计：3本图书</td>
                </tr>
            </tfoot>
        </table>
    </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： 本文字数： 1.7k 阅读时长 ≈ 2 分钟

6.5.4 鼠标高亮

为指定class="table"的表格增加一个.table-hover样式即可实现高亮效果:当鼠标移入某个表格行时,该表格行自动以高亮颜色显示;当鼠标移出该表格行时,该表格行的高亮效果消失。

程序示例

例如如下代码:

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
<!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">
        <table class="table table-hover">
            <caption>
                <b>疯狂Java体系图书</b>
            </caption>
            <thead>
                <tr>
                    <th>书名</th>
                    <th>作者</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>疯狂Java讲义</td>
                    <td>李刚</td>
                    <td>109</td>
                </tr>
                <tr>
                    <td>疯狂HTML 5/CSS 3/JavaScript讲义</td>
                    <td>李刚</td>
                    <td>79</td>
                </tr>
                <tr>
                    <td>疯狂前端开发讲义</td>
                    <td>李刚</td>
                    <td>79</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" style="text-align:right">现总计：3本图书</td>
                </tr>
            </tfoot>
        </table>
    </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： 本文字数： 1.9k 阅读时长 ≈ 2 分钟

6.5.3 边框表格

为指定class="table"的表格增加一个.table-borded样式即可实现Bootstrap的边框表格。

程序示例

例如如下代码:

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
<!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">
        <table class="table table-bordered">
            <caption>
                <b>疯狂Java体系图书</b>
            </caption>
            <thead>
                <tr>
                    <th>书名</th>
                    <th>作者</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>疯狂Java讲义</td>
                    <td>李刚</td>
                    <td>109</td>
                </tr>
                <tr>
                    <td>疯狂HTML 5/CSS 3/JavaScript讲义</td>
                    <td>李刚</td>
                    <td>79</td>
                </tr>
                <tr>
                    <td>疯狂前端开发讲义</td>
                    <td>李刚</td>
                    <td>79</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" style="text-align:right">现总计：3本图书</td>
                </tr>
            </tfoot>
        </table>
    </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的这些表格样式并不是互斥的,完全可以组合使用,例如我们希望表格既有条纹效果,又有边框效果,只要在该表格上同时指定.table、.table-striped、.table-borded三个样式即可。

例如如下代码:

1
2
<table class="table table-striped table-bordered">
<table>

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

6.5.2 条纹表格

为指定class="table"的表格增加一个.table-striped样式即可实现Bootstrap的条纹表格。

程序示例

例如如下代码:

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
<!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">
        <table class="table table-striped">
            <caption>
                <b>疯狂Java体系图书</b>
            </caption>
            <thead>
                <tr>
                    <th>书名</th>
                    <th>作者</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>疯狂Java讲义</td>
                    <td>李刚</td>
                    <td>109</td>
                </tr>
                <tr>
                    <td>疯狂HTML 5/CSS 3/JavaScript讲义</td>
                    <td>李刚</td>
                    <td>79</td>
                </tr>
                <tr>
                    <td>疯狂前端开发讲义</td>
                    <td>李刚</td>
                    <td>79</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" style="text-align:right">现总计：3本图书</td>
                </tr>
            </tfoot>
        </table>
    </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.2k 阅读时长 ≈ 2 分钟

6.5 表格相关样式

Bootstrap 提供了系列表格相关的样式,通过这些样式可以快速开发出样式美观的表格。Bootstrap提供了以下6种表格样式。

样式类 描述
.table 基本的表格。这种样式**为每行增加水平分割线和少量的padding**。
.table-striped 条纹表格。该样式用于给<tbody>内的每一行增加斑马条纹样式。
.table-bordered 边框表格。该样式为表格和其中的每个单元格增加边框。
.table-hover 鼠标高亮。该样式可以让<tbody>中的表格行对鼠标悬停做出高亮响应。
.table-condensed 紧凑表格。通过该样式可让单元格的padding减半,这样使得表格更加紧凑。
.table-responsive 响应式表格。如果将任何.table表格放在指定了class="table-responsive"的元素内,即可创建响应式表格。响应式表格会在小屏幕设备上(viewport 宽度小于768px)显示水平滚动条。当浏览器viewport宽度大于768px时,水平滚动条消失。

6.5.1 基础表格

只要为任意表格指定class="table"即可实现Bootstrap的基础表格。

程序示例

例如如下代码:

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
<!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">
        <table class="table">
            <caption>
                <b>疯狂Java体系图书</b>
            </caption>
            <thead>
                <tr>
                    <th>书名</th>
                    <th>作者</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>疯狂Java讲义</td>
                    <td>李刚</td>
                    <td>109</td>
                </tr>
                <tr>
                    <td>疯狂HTML 5/CSS 3/JavaScript讲义</td>
                    <td>李刚</td>
                    <td>79</td>
                </tr>
                <tr>
                    <td>疯狂前端开发讲义</td>
                    <td>李刚</td>
                    <td>79</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" style="text-align:right">现总计：3本图书</td>
                </tr>
            </tfoot>
        </table>
    </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： 本文字数： 5.3k 阅读时长 ≈ 5 分钟

6.4.6 列表

HTML本来已经提供了以下3类列表。

列表 描述
无序列表 使用<ul>和<li>元素定义。其中,<ul>元素作为<li>的父元素定义无序列表,而<li>定义列表项。
有序列表 使用<ol>和<li>元素定义。其中,<ol>元素作为<li>的父元素定义无序列表,而<li>定义列表项。
定义列表 使用<dl>、<dt>和<li>元素定义。其中,<dl>元素作为<dt>和<li>的父元素定义列表,而<dt>定义列表项标题,<dd>定义列表项描述。

Bootstrap对上面这3类列表的默认样式进行了一些改进,使得它们具有更好的一致性。但这些元素的用法与传统的用法并没有太大的区别。
此外,Bootstrap还提供了如下几个样式,用于实现特定的列表项。

样式类 描述
.list-unstyled 无样式列表。该样式的作用是去掉有序列表和无序列表前面的列表序号、列表符号。
.list-inline 行内列表。该样式通过display:inline-block;设置,并通过设置少量padding值,从而将所有列表项放在同一行。
.dl-horizontal 水平排列样式。该样式会将列表项标题和列表项描述排在同一行。该样式开始会将列表项标题和列表项描述堆叠在一起,随着导航条逐渐展开它们会排在一行。

程序示例

有序列表

下面代码示范了有序列表的效果。

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
<!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">
        <strong>下面是普通有序列表</strong>
        <br/>
        <ol>
            <li>疯狂Java讲义</li>
            <li>轻量级Java EE企业应用实战</li>
            <li>疯狂Android讲义</li>
        </ol>
        <strong>下面是无样式列表</strong>
        <br/>
        <ol class="list-unstyled">
            <li>疯狂Java讲义</li>
            <li>轻量级Java EE企业应用实战</li>
            <li>疯狂Android讲义</li>
        </ol>
        <strong>下面是行内列表</strong>
        <br/>
        <ol class="list-inline">
            <li>疯狂Java讲义</li>
            <li>轻量级Java EE企业应用实战</li>
            <li>疯狂Android讲义</li>
        </ol>
    </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>

无序列表

下面代码示范了无序列表的效果。

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
<!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">
        <strong>下面是普通无序列表</strong>
        <br/>
        <ul>
            <li>疯狂Java讲义</li>
            <li>轻量级Java EE企业应用实战</li>
            <li>疯狂Android讲义</li>
        </ul>
        <strong>下面是无样式列表</strong>
        <br/>
        <ul class="list-unstyled">
            <li>疯狂Java讲义</li>
            <li>轻量级Java EE企业应用实战</li>
            <li>疯狂Android讲义</li>
        </ul>
        <strong>下面是行内列表</strong>
        <br/>
        <ul class="list-inline">
            <li>疯狂Java讲义</li>
            <li>轻量级Java EE企业应用实战</li>
            <li>疯狂Android讲义</li>
        </ul>
    </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>

定义列表

下面是定义列表的示例。

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
<!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">
        <strong>普通的dl列表</strong>
        <dl>
            <dt>Java
                <dt>
                    <dd>Java是一门广泛使用的、跨平台的开发语言</dd>
                    <dt>疯狂Java体系图书</dt>
                    <dd>疯狂Java体系图书是李刚老师积十年之功创作的一套系统的Java学习图书，
                        <br> 且多次升级保持与最新技术同步，对广大初学者帮助很大。
                    </dd>
                    <dd>疯狂Java体系图书均已得到广泛的市场认同，多次重印成为超级畅销图书，
                        <br> 并被多所“985”、“211”高校选作教材，
                        <br> 部分图书已被翻译成繁体中文版、授权到台湾地区。
                    </dd>
        </dl>
        <strong>列表项标题和描述水平排列</strong>
        <dl class="dl-horizontal">
            <dt>Java
                <dt>
                    <dd>Java是一门广泛使用的、跨平台的开发语言</dd>
                    <dt>疯狂Java体系图书</dt>
                    <dd>疯狂Java体系图书是李刚老师积十年之功创作的一套系统的Java学习图书，
                        <br> 且多次升级保持与最新技术同步，对广大初学者帮助很大。
                    </dd>
                    <dd>疯狂Java体系图书均已得到广泛的市场认同，多次重印成为超级畅销图书，
                        <br> 并被多所“985”、“211”高校选作教材，
                        <br> 部分图书已被翻译成繁体中文版、授权到台湾地区。
                    </dd>
        </dl>
    </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： 本文字数： 1.1k 阅读时长 ≈ 1 分钟

6.4.5 改变大小写

Bootstrap提供了如下大小写相关的样式:

方法 描述
.text-lowercase 所有字母小写。
.text-uppercase 所有字母大写。
.text-capitalize 每个单词的首字母大写。

例如如下页面代码:

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 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 class="text-lowercase">bootStrap</p>
        <p class="text-uppercase">bootStrap</p>
        <p class="text-capitalize">bootStrap</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： 本文字数： 1.6k 阅读时长 ≈ 1 分钟

6.4.4 对齐

Bootstrap提供了如下对齐相关的样式:

方法 描述
.text-left 左对齐。
.text-right 右对齐。
.text-center 居中对齐。
.text-justify 使用justify的对齐方式。
.text-nowrap 不换行。

例如如下页面代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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">
        <p class="text-left">左对齐的文本</p>
        <p class="text-right">右对齐的文本</p>
        <p class="text-center">居中对齐的文本</p>
        <p class="text-justify">justify对齐的文本</p>
        <p class="text-nowrap">nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!nowrap对齐的文本永不换行!</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>