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删除。