前言：導航是一個網站重要的元素組件之一，可以便於用戶查找網站所提供的各項功能服務。導航的制作方法也是千奇百怪，五花八門。在下面的內容中，介紹兩種制作導航欄的方式。
一、用按鈕組實現，代碼如下：
<div style="width:100%; background:#ff0"> <div class="btn-group"> <button class="btn btn-default" type="button">首頁</button> <button class="btn btn-default" type="button">產品展示</button> <button class="btn btn-default" type="button">案例分析</button> <button class="btn btn-default" type="button">聯系我們</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">關於我們<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">公司簡介</a></li> <li><a href="#">企業文化</a></li> <li><a href="#">組織結構</a></li> <li><a href="#">客服服務</a></li> </ul> </div> </div> </div>
二、Bootstrap為導航專門做了相應的css類，代碼如下：
<div style="width:100%; background:#ff0"> <ul class="nav nav-pills nav-justified"> <li><a href="##">首頁</a></li> <li><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"> <li><a href="#">公司簡介</a></li> <li><a href="#">企業文化</a></li> <li><a href="#">組織結構</a></li> <li><a href="#">客服服務</a></li> </ul> </li> </ul> </div>
如果想要將導航欄設為垂直顯示，第一中方法在div.btn-group後追加.btn-group-vertical就可以，第二種在div.nav後追加.nav-stacked即可。
如果大家還想深入學習，可以點擊這裡進行學習，再為大家附3個精彩的專題：
Bootstrap學習教程
Bootstrap實戰教程
Bootstrap插件使用教程
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。