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>

如按以上要求填寫完整，就能在瀏覽器中看到效果了。