首頁 > 開發者 > JavaScript
Bootstrap實現預設導覽列效果，bootstrap導覽列
導覽列是一個很好的功能，是 Bootstrap 網站的一個突出特點。導覽列是響應式元組件就，作為應用程式或網站的導航標題。導覽列在行動裝置的視圖中是摺疊的，隨著可用視口寬度的增加，導覽列也會水平展開。在 Bootstrap 導覽列的核心中，導覽列包括了為網站名稱和基本的導航定義樣式。
建立一個預設的導覽列的步驟如下：
為了嚮導航欄添加連結，只需要簡單地添加帶有 class .nav、.navbar-nav 的無序列表即可。
下面的執行個體示範了這點：
<!DOCTYPE html> <html> <head> <title>Bootstrap 執行個體 - 預設的導覽列</title> <link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery-2.1.4.min.js"></script> <script src="bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">林炳文在此～</a> </div> <div> <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"> 下拉式功能表 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">我是誰呢？</a></li> <li><a href="#">我也不知道</a></li> <li><a href="#">你是誰呢？</a></li> <li class="divider"></li> <li><a href="#">分離的連結</a></li> <li class="divider"></li> <li><a href="#">另一個分離的連結</a></li> </ul> </li> </ul> </div> </nav> </body> </html>
效果如下：
把
<nav class="navbar navbar-inverse" role="navigation">
改成
<nav class="navbar navbar-default" role="navigation">
效果如下：
以上就是Bootstrap實現預設導覽列效果的代碼，希望對大家的學習有所協助。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
