效果圖：
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="bootstrap-3.3.6-dist/js/jquery-1.11.2.min.js"></script> <link href="bootstrap-3.3.6-dist/css/bootstrap.css" rel="stylesheet"> <script src="bootstrap-3.3.6-dist/js/bootstrap.js"></script> <style> body { padding-top: 70px; } </style> </head> <body> //添加navbar-fixed-top可以讓導航條一直固定在頂部，不會因為滾動條改變而改變，navbar-inverse讓導航條黑底展示
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
<div class="container"> //container讓導航條居中container-fluid讓導航條自適應
<div class="navbar-header">
//粉色字體代表響應式布局：當瀏覽器寬度小於某個值時導航欄折疊變成三道杠 <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" type="button"> <span class="sr-only">看看這是什么</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> //綠色代表導航欄左側logo或者圖標
<a class="navbar-brand" href="www.baidu.com">瀏覽器博物館</a> </div>
//棕色包裹項目是導航條內容，為了響應式布局，點擊三道杠彈出導航欄 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
//紫色代表導航欄中的項目
<ul class="nav navbar-nav"> <li><a href="www.baidu.com">綜述</a></li> <li>//藍色為下拉菜單 <a class="dropdown-toggle" data-toggle="dropdown" href="www.baidu.com">簡述<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">谷歌瀏覽器</a></li> <li><a href="#">IE瀏覽器</a></li> <li><a href="#">360瀏覽器</a></li> <li><a href="#">谷歌火狐瀏覽器</a></li> </ul>
</li> <li><a href="www.baidu.com">特點</a></li> <li><a href="www.baidu.com">關於</a></li> </ul> </div> </div> </nav> <p>dsaf3ewqrfdsaf </p> <p>dsafdhtetf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> <p>dsafdsaf saf </p> </body> </html>