bootstrap 导航栏

bootstrap这个css框架很好，能够很好的兼容各个浏览器，使用好它能作出专业的网页出来。

今天来讲说它的导航栏，这个标签很是好用，窗口缩小了菜单还能自适应变成下拉式，

 

使用应注意的事项：

所需的js库:

                1.  jquery.js     （这两个库版本如不匹配，在窗口自适应时也会出现不了下拉菜单效果，本人就遇到过，为找出缘由，搞了半天）

                2.  bootstrap-collapse.js

所需的css:

                1.   bootstrap-responsive.css

                2.  bootstrap.css

html基本格式:

 

 <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

如按以上要求填写完整，就能在浏览器中看到效果了。