導航欄：

<div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="container-fluid">
<div class="navbar-header">
<butotn class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">切換導航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</butotn>
<a href="#" class="navbar-brand">現代瀏覽器博物館</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">綜述</a></li>
<li><a href="">簡述</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">特點 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Chrome</a></li>
<li><a href="#">Firefox</a></li>
<li><a href="#">Safari</a></li>
<li><a href="#">Opera</a></li>
<li><a href="#">IE</a></li>
</ul>
</li>
<li><a href="#" data-toggle="modal" data-target="#about-modal">關于</a></li>
</ul>
</div>
</div>
</div>
</div>

navbar-inverse：背景色為黑色 navbar-fixed-top：固定導航欄在頂部 navbar-collapse：當窗口過小時，自動隱藏 data-toggle指以什么事件觸發，常用的如modal,popover,tooltips等，data-target指事件的目標，一起使用就是代表data-target所指的元素以data-toggle指定的形式顯示 <span class="caret"></span> 顯示下拉箭頭
要加載jquery.js 和 bootstrap.min.js 不然點擊下拉菜單會沒反應

轉載于:https://www.cnblogs.com/cherious/p/6726381.html

總結

以上是生活随笔為你收集整理的Bootstrap导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。