Bootstrap之网站导航栏制作

网站导航栏制作通过bootstrap变得十分简单。只需要引入相关的样式文件和js文件即可。

第一步引入相关文件：

	<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>


<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

第二步就是编写html代码：

<div class="navbar navbar-default">
		<a class="navbar-brand" href="#">  <img id="logo" height="102px" width="137px" src="image/logo2.png">
		</a>
		<div class="container-fluid">
			

			<div class="navbar-header">

				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
					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>
		</div>
</div>

	<!-- Collect the nav links, forms, and other content for toggling -->
	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	 
		
		<ul class="nav navbar-nav">
			<li><a href="NavServlet?action=index">首页</a></li>
			<li><a href="#">活动与新闻</a></li>
			<li><a href="#">成员风采</a></li>
			<li><a href="NavServlet?action=softwaredownload">软件下载</a></li>
			<li><a href="NavServlet?action=feedback">意见反馈</a></li>
			<li><a href="#">知识库</a></li>
			<li><a href="NavServlet?action=aboutus">关于我们</a></li>
		</ul>

	
	</div>

其中第一个大的div是响应式布局（意思就是在小屏幕上切换出的菜单栏），第二个大div是在电脑上或者高分辨率上显示的菜单。

如果只适配电脑端，可以把前面的那个最大的div删除。