Bootstrap常⽤样式，导航栏，响应式导航栏1.基础导航栏：
1.添加⼀个容器nav或div标签，使⽤.navbar类和.navbar-default类，并且添加role="navigation"，增加可访问性
2.向div标签添加⼀个标题使⽤.navbar-header类，内部包含带有.navbar-brand类的a标签，⽤于定义品牌图标
3.为了向导航栏添加链接，只需要简单地添加带有.nav类，.navbar-nav类的⽆序列表就⾏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>基础导航栏</title>
<link rel="stylesheet"href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default"role="navigation">
<!-- 这⾥可以定义品牌图标 -->
<div class="navbar-header">
<a href="#"class="navbar-brand"id="nav-brand-itheima">
⽹站⾸页
</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">系列教程</a></li>
<li><a href="#">名师介绍</a></li>
<li><a href="#">成功案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</body>
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>
js导航栏下拉菜单
基础导航栏只能适应⼤屏幕，缩⼩页⾯将折叠
2.响应式导航栏：
1.实现菜单的折叠和隐藏，把⼩屏幕时需要折叠的内容包裹在⼀个div标签内，并且为这个标签使⽤.col
lapse， .navbar-collapse两个类，最后为这个div添加⼀个id
汉堡按钮的固定写法：
<button class="navbar-toggle"type="button"data-toggle="collapse"> <span class="sr-only">汉堡按钮</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>响应式导航栏</title>
<link rel="stylesheet"href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default"role="navigation">
<button type="button"class="navbar-toggle collapsed"data-toggle="collapse"
data-target="#navbar-collapse"aria-expanded="false">
<span class="sr-only">汉堡按钮</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 这⾥可以定义品牌图标 -->
<div class="navbar-header">
<a href="#"class="navbar-brand"id="nav-brand-itheima">
⽹站⾸页
</a>
</div>
<div class="collapse navbar-collapse"id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">系列教程</a></li>
<li><a href="#">名师介绍</a></li>
<li><a href="#">成功案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</nav>
</body>
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>
⼤屏幕下：
⼩设备时：
修改导航条的默认背景⾊：
.navbar-default{
background-color: #872657;        }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。