• Bootstrap4后台导航栏制作


    <!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,导入字体图标。

    源码:https://gitee.com/Alexander360/LearnBootStrap4.git
  • 相关阅读:
    jchdl
    jchdl
    UVa 10256 (判断两个凸包相离) The Great Divide
    UVa 11168 (凸包+点到直线距离) Airport
    LA 2572 (求可见圆盘的数量) Kanazawa
    UVa 10652 (简单凸包) Board Wrapping
    UVa 12304 (6个二维几何问题合集) 2D Geometry 110 in 1!
    UVa 10674 (求两圆公切线) Tangents
    UVa 11796 Dog Distance
    LA 3263 (平面图的欧拉定理) That Nice Euler Circuit
  • 原文地址:https://www.cnblogs.com/AlexanderZhao/p/BootstrapNav.html
Copyright © 2020-2023  润新知