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"
				 >
				管理后台
			</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

原文地址：https://www.cnblogs.com/AlexanderZhao/p/BootstrapNav.html

时间： 2024-11-10 14:29:59

Bootstrap4后台导航栏制作的相关文章

水平导航栏制作

在网页中水平导航栏是每一张网页都有的. 现在做一个简单的导航栏: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta content="text/html" charset="utf-8">

无序列表是html页面排版经常用到的非常实用的标签,但是新手在使用无序列表时,经常会在横向排版上出现问题,笔者在这里提供了笔者在使用无序列表制作网页导航栏时的几种方法与常见问题的解决问题.(以css内部样式为例) [注:有同学之前问过我怎么制作一张网页,但只会html,本文用到均为css.故说明:若急需制作导航,无css技术基础的,在<head>标签中加<style rel="stylesheet" type="text/css"><s

03-Flutter移动电商实战-底部导航栏制作

1.cupertino_IOS风格介绍在Flutter里是有两种内置风格的: material风格: Material Design 是由 Google 推出的全新设计语言,这种设计语言是为手机.平板电脑.台式机和其他平台提供一致,更广泛的外观和感觉.我喜欢称它为纸墨设计.Material Design 风格是一种非常有质感的设计风格,并会提供一些默认的交互动画. cupertino风格:即 IOS 风格组件,它重现了很多经典的有 IOS 特性的交互和界面风格,让适用于 IOS 的人感觉亲切和

导航栏制作

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0px; /*盒子外边距*/ padding: 0px; /*盒子内边距*/ } .NavigatorView { width: 100%; height: 50px; background-color: WhiteSmoke;

网站导航栏如何实现动态效果

导航栏是每一个网站都要有的,那么对于一般的导航栏制作,相信大家都会,而且也不会遇到什么麻烦,但是如何才能让网站导航栏实现动态效果估计这会难倒很多技术人员,那么下面就来为大家分析解答一下. Html代码: <html><head><title>导航演示</title><meta charset="UTF-8"><link rel="stylesheet" href="nav.css"

html css二级导航栏

二级导航栏制作: 1.将一级导航栏去除列表样式(list-style:none),并给予浮动,使其横向排列(float:left) 2.给每个li中添加一个<a></a>标签,给a设置样式,使其成为块级元素( display:block),这样只需要点击当前 li 范围区域即可触发a的跳转 3.给需要添加二级导航栏的li里面添加 ul>li ,给个类名,设置其样式为(display:none),使其在普通情况下隐藏 4.设置一级导航栏划过效果,当滑到有二级导航栏的 li 时,

制作水平导航栏

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <title>制作水平导航栏</title> 9 <style type="text/css&qu

巧妙使用checkbox制作纯css动态导航栏

前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked 属性.巧妙地制作导航栏结果: 我们主要制作成这样这样的的导航栏: 首先.我们写出相对的html 由于时间问题.svg没有处理到类中.所以这里给出svg的空标签.大家如果想看效果.可以到我的git里面fork一份 <div class="nav-child"> <in

2017-3-30 Js实现导航栏，选项卡，图片轮播的制作

(一)导航栏的制作显示的效果: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type=&quo