响应式导航栏的制作

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

响应式导航栏

9.30日响应式导航栏的练习

---

一、如何做一个响应式导航栏？

就是将一个默认的导航栏中你需要折叠的内容放在一个含有.collapse和.navbar-collapsediv中，之后在类名为.navbar-header加上一个按钮，见代码：

<div class="collapse navbar-collapse" id="my-navbar-collapse">
						<ul class="nav navbar-nav">
							<li class="active"><a href="#">iOS</a></li>
							<li><a href="#">SVN</a></li>
						</ul> 
					</div>

<!-- 折叠后要转换成目标的按钮 data-toggle = "collapse"告诉js需要对按钮做什么-->
					<button type="button" class="navbar-toggle" data-toggle = "collapse" data-target = "#my-navbar-collapse">
						<!-- 汉堡按钮 -->
						<span class="sr-only">切换导航</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>

二、解释和代码

1.解释

响应式导航栏（缩小后会变成汉堡菜单需要将要折叠的内容放带有在下边类名的div内）
class=“collapse navbar-collapse” id=“my-navbar-collapse”
id="my-navbar-collapse是为了告诉上边button按钮要切换到哪个div中的元素,button利用data-target = "#my-navbar-collapse"来告诉自己要切换到哪个元素
折叠后的导航栏实际上是一个按钮

2.代码

代码如下（示例）：

<!-- 导航 -->
		<nav class="navbar navbar-default" role="navigation">
		    <div class="container">
				<div class="navbar-header">
					<!-- 折叠后要转换成目标的按钮 data-toggle = "collapse"告诉js需要对按钮做什么-->
					<<button type="button" class="navbar-toggle" data-toggle = "collapse" data-target = "#my-navbar-collapse">
						<!-- 汉堡按钮 -->
						<span class="sr-only">切换导航</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">小嘿小嘿</a>
				</div>
				<!-- 
				响应式导航栏（缩小后会变成汉堡菜单需要将要折叠的内容放带有在下边类名的div内）
				class="collapse navbar-collapse" id="my-navbar-collapse" 
				id="my-navbar-collapse是为了告诉上边button按钮要切换到哪个div中的元素,button利用data-target = "#my-navbar-collapse"来告诉自己要切换到哪个元素
				折叠后的导航栏实际上是一个按钮
				-->
					<div class="collapse navbar-collapse" id="my-navbar-collapse">
						<ul class="nav navbar-nav">
							<li class="active"><a href="#">iOS</a></li>
							<li><a href="#">SVN</a></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">
									Java
									<b class="caret"></b>
								</a>
								<ul class="dropdown-menu">
									<li><a href="#">jmeter</a></li>
									<li><a href="#">EJB</a></li>
									<li><a href="#">Jasper Report</a></li>
									<li class="divider"></li>
									<li><a href="#">分离的链接</a></li>
									<li class="divider"></li>
									<li><a href="#">另一个分离的链接</a></li>
								</ul>
							</li>
						</ul>
						<!-- 右侧登录 -->
						<ul class="nav navbar-nav navbar-right"> 
							<li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li> 
							<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li> 
						</ul> 
					</div>
		    </div>
		</nav>