BootStrap-CSS樣式_佈局元件_響應式導航欄(移動裝置摺疊隨寬度增加展開)
導航欄
導航欄是一個很好的功能，是 Bootstrap 網站的一個突出特點。導航欄在您的應用或網站中作為導航頁頭的響應式基礎元件。導航欄在移動裝置的檢視中是摺疊的，隨著可用檢視寬度的增加，導航欄也會水平展開。在 Bootstrap 導航欄的核心中，導航欄包括了站點名稱和基本的導航定義樣式
預設的導航欄
建立一個預設的導航欄的步驟如下：
1、向 <nav> 標籤新增 class .navbar、.navbar-default。
2、向上面的元素新增 role="navigation"，有劣亍增加可訪問性。
3、 向 <div> 元素新增一個標題 class .navbar-header，內部包噸了帶有
class navbar-brand 的 <a> 元素。這會讓文字看起來更大一號。
4、為了嚮導航欄新增連結，只需要簡單地新增帶有 class .nav、.navbar-nav 的無序列表卲可
響應式的導航欄
為 了 給 導 航 欄 添 加 響 應 式 特 性 ， 您 要 折 疊 的 內 容 必 須 包 裹 在 帶 有 classes .collapse、.navbar-collapse 的 <div> 中。摺疊起來的導航欄實際上是一個帶有class .navbar-toggle 及兩個 data- 元素的按鈕。第一個是 data-toggle，用於告訴 JavaScript 需要 對按鈕做什麼，第二個是 data-target，指示要切換到哪一個元素。三個帶有 class .icon-bar 的 <span> 建立所謂的漢堡按鈕。這些會切換為 .nav-collapse <div> 中的元素。為了實現以上這些功 能，您必須包含 Bootstrap 摺疊（Collapse）外掛
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>響應式導航欄</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <body> <div class="container"> <h2>1. 預設導航設定</h2> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">程式設計語言</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">.NET</a> </li> <li><a href="#">PHP</a> </li> <li><a href="#">HTML5</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a> </li> <li><a href="#">EJB</a> </li> <li><a href="#">Jasper Report</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> <h2>2. 響應式的導航欄</h2> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">程式設計語言</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-nav" > <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="my-nav" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">.NET</a> </li> <li><a href="#">PHP</a> </li> <li><a href="#">HTML5</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a> </li> <li><a href="#">EJB</a> </li> <li><a href="#">Jasper Report</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> </div> <script src="../js/jquery-1.11.1.min.js"></script> <script src="../js/bootstrap.min.js"></script> </body> </html>
大屏裝置顯示效果：
小屏裝置顯示效果：
