Web前端：使用Booastrap3-实现标签页的简单实例

使用Booastrap3 实现标签页的简单实例
前端开发中，标签页样式，经常见到。以此次开发项目为契机，来学习实践Boostrap3标签页样式

运行环境 Runtime environment

1
2
3
4
5
操作系统 ： Windows10
IDE: JetBrains WebStorm 2018.2.1 x64
浏览器： Google Chrome 版本 67.0.3396.99（正式版本） （64 位）&& FireFox Developer Edition 版本63.0b4  (64位)
Bootstrap： v3.3.7
Jquery： 1.12.4

背景

讲真，光从Boostrap3标签页样式来看，还是远远不够的。
它的样例效果并没达到标签页的切换效果，仅仅只是有个样式在那里。
经过一轮搜索，基本查明了使用方法。

实现方法

参考锚点的思路，用<a>跳转id的方法，在href属性上面写上id地址。
然后在，标签内容页部分，给其id属性加上对应的id名，即可控制内容页部分的变化。
这部分功能使用了Boostrap.js插件，而此插件又是建立在JQ上。
所以，引入Boostrap.js之前必须先引入JQ。
代码中使用了Bootcdn来引入Boostrap和JQ

代码示例

传统标签页

具体代码如下：

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        * {
            /*校准标签对齐*/
            margin: 0px; /*清除外边距*/
            padding: 0px; /*清除内边距*/
        }

        li {
            /*去掉列表头*/
            list-style: none;
        }
        /* display、margin-right和margin-left 居中 */
        .container{
            width: 800px;
            height: auto;
            background-color:pink;

            display: block;
            margin: auto;
            padding-top:20px;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- begin 标签页标签 -->
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#tab_1" data-toggle="tab" class="tab-default"> 主页 </a>
        </li>
        <li>
            <a href="#tab_2" data-toggle="tab"> 附页 </a>
        </li>
        <li>
            <a href="#tab_3" data-toggle="tab"> 附页 </a>
        </li>
        <li>
            <a href="#tab_4" data-toggle="tab"> 正文 </a>
        </li>
        <li>
            <a href="#tab_5" data-toggle="tab"> 感言 </a>
        </li>

    </ul>
    <!-- end 导航条 -->
    <!-- begin 标签页内容  -->
    <div class="tab-content">
        <div class="tab-pane active" id="tab_1">
            Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.
        </div>
        <div class="tab-pane fade" id="tab_2">
            Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.
        </div>
        <div class="tab-pane fade" id="tab_3">
            non magna. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue
        </div>
        <div class="tab-pane fade" id="tab_4">
            eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum
        </div>
        <div class="tab-pane fade" id="tab_5">
             Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum
        </div>

    </div>
    <!-- end   导航条下方的内容 -->

    <!-- begin 引入前置JS文件 -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- end   引入前置JS文件 -->
</div>
</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
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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        * {
            /*校准标签对齐*/
            margin: 0px; /*清除外边距*/
            padding: 0px; /*清除内边距*/
        }

        li {
            /*去掉列表头*/
            list-style: none;
        }
        /* display、margin-right和margin-left 居中 */
        .container{
            width: 800px;
            height: 1000px;
            background-color:pink;

            display: block;
            margin: auto;
            padding-top:20px;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- begin 标签页标签 -->
    <ul class="nav nav-pills">
        <li class="active">
            <a href="#tab_1" data-toggle="tab" class="tab-default"> 主页 </a>
        </li>
        <li>
            <a href="#tab_2" data-toggle="tab"> 附页 </a>
        </li>
        <li>
            <a href="#tab_3" data-toggle="tab"> 附页 </a>
        </li>
        <li>
            <a href="#tab_4" data-toggle="tab"> 正文 </a>
        </li>
        <li>
            <a href="#tab_5" data-toggle="tab"> 感言 </a>
        </li>

    </ul>
    <!-- end 导航条 -->
    <!-- begin 标签页内容  -->
    <div class="tab-content">
        <div class="tab-pane active" id="tab_1">
            Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.
        </div>
        <div class="tab-pane fade" id="tab_2">
            Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.
        </div>
        <div class="tab-pane fade" id="tab_3">
            non magna. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue
        </div>
        <div class="tab-pane fade" id="tab_4">
            eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum
        </div>
        <div class="tab-pane fade" id="tab_5">
             Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum
        </div>

    </div>
    <!-- end   导航条下方的内容 -->

    <!-- begin 引入前置JS文件 -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- end   引入前置JS文件 -->
</div>
</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
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
84
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        * {
            /*校准标签对齐*/
            margin: 0px; /*清除外边距*/
            padding: 0px; /*清除内边距*/
        }

        li {
            /*去掉列表头*/
            list-style: none;
        }
        /* display、margin-right和margin-left 居中 */
        .container{
            display: block;
            margin: auto;
            padding-top:20px;
            width: 800px;
            height: 500px;
            background-color:pink;
            border: 1px silver solid;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-2">
            <!-- begin 标签页标签 -->
            <ul class="nav nav-pills nav-stacked text-center" style="border-right: 4px silver solid">
                <li class="active">
                    <a href="#tab_1" data-toggle="tab" class="tab-default"> 主页 </a>
                </li>
                <li>
                    <a href="#tab_2" data-toggle="tab"> 附页 </a>
                </li>
                <li>
                    <a href="#tab_3" data-toggle="tab"> 附页 </a>
                </li>
                <li>
                    <a href="#tab_4" data-toggle="tab"> 正文 </a>
                </li>
                <li>
                    <a href="#tab_5" data-toggle="tab"> 感言 </a>
                </li>

            </ul>
            <!-- end 标签页标签 -->
        </div>
        <div class="col-md-10">
            <!-- begin 标签页内容  -->
            <div class="tab-content">
                <div class="tab-pane active" id="tab_1">
                    Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.
                </div>
                <div class="tab-pane fade" id="tab_2">
                    Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.
                </div>
                <div class="tab-pane fade" id="tab_3">
                    non magna. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue
                </div>
                <div class="tab-pane fade" id="tab_4">
                    eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum
                </div>
                <div class="tab-pane fade" id="tab_5">
                    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum
                </div>

            </div>
            <!-- end   标签页内容 -->
        </div>
    </div>
    <!-- begin 引入前置JS文件 -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- end   引入前置JS文件 -->
</div>
</body>
</html>

两端对齐标签页

  • 由于Boostrap官网表示，两端对齐的导航条导航链接已经被弃用了。便不做演示了。

总结

常见的几种标签页样式，便以实例代码来展示了，部分排版依赖于Boostrap的栅格系统。
Boostrap是真的很方便，快速完成大概样式，然后自己diy的CSS样式覆盖修饰，一个个性的网页就很快出来了。
但是Boostrap的东西，真的太多，要完全吃透它得花不少的时间。

赏

×

也就放着玩的

扫码支持
扫码打赏，其实感觉也没人会给的。。

打开支付宝扫一扫，即可进行扫码打赏哦

本文标题:Web前端：使用Booastrap3-实现标签页的简单实例

文章作者:RaXianch

发布时间:2018年09月11日 - 16时29分

最后更新:2019年12月17日 - 10时44分

原始链接:https://blog.raxianch.moe/oldBlog/2018/09/11/Web前端：使用Booastrap3-实现标签页的简单实例/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 运行环境 Runtime environment
  • 背景
    1. 实现方法
    2. 代码示例
      1. 传统标签页
      2. 胶囊式标签页
      3. 垂直标签页
      4. 两端对齐标签页
  • 总结
    • ,