Bootstrap4后台导航栏制作

?
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!Doctype html>
<html lang="zh-cn">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="css/bootstrap.css">
 
        <title>Admin后台示例</title>
    </head>
    <body>
 
        <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
            <a href="#" class="navbar-brand">
                <img width="30" height="30" class="d-inline-block align-top" src="https://v4.bootcss.com/assets/brand/bootstrap-solid.svg"
                 alt="">
                管理后台
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
             aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a href="#" class="nav-link">
                            <span class="glyphicon glyphicon-cog"></span> 网站设置
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            <span class="glyphicon glyphicon-lock"></span> 管理员
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            <span class="glyphicon glyphicon-list"></span> 栏目设置
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            <span class="glyphicon glyphicon-user"></span> 用户管理
                        </a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                         aria-haspopup="true" aria-expanded="false">
                            Dropdown
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
                <form action="" class="form-inline my-2 my-lg-0">
                    <input type="search" placeholder="搜索内容" aria-label="Search" class="form-control mr-sm-2">
                    <button class="btn btn-outline-light my-2 my-sm 0" type="submit">搜索</button>
                </form>
                <ul class="navbar-nav justify-content-end">
                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            Alexander
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            <span class="glyphicon glyphicon-eye-close"></span> 退出
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
 
        <div class="container" style="margin-top:70px;">
 
            主内容区域
 
        </div>
 
        <footer class="fixed-bottom bg-primary">
            <br>
            <div class="text-center" style="height:50px;color:white;">
                <p class="font-weight-bold">2019</p>
            </div>
        </footer>
 
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
         crossorigin="anonymous"></script>
        <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
         crossorigin="anonymous"></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
         crossorigin="anonymous"></script>
    </body>
</html>

　　Bootstrap4 无法直接使用字体图标glyphicon,参考博客园https://www.cnblogs.com/humi/p/8496152.html，导入字体图标。

 

?
1
源码：https://gitee.com/Alexander360/LearnBootStrap4.git
posted @   星空天宇  阅读(1783)  评论(0)  编辑  收藏  举报
编辑推荐：
· 后端思维之高并发处理方案
· 理解Rust引用及其生命周期标识（下）
· 从二进制到误差：逐行拆解C语言浮点运算中的4008175468544之谜
· .NET制作智能桌面机器人：结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
阅读排行：
· 2025成都.NET开发者Connect圆满结束
· 后端思维之高并发处理方案
· 千万级大表的优化技巧
· 在 VS Code 中，一键安装 MCP Server！
· 10年+ .NET Coder 心语 ── 继承的思维：从思维模式到架构设计的深度解析
点击右上角即可分享
微信分享提示