Bootstrap導航欄 · 致力于web前端技術撰寫

導航欄在移動設備的視圖中是折疊的，隨著可用視口寬度的增加，導航欄也會水平展開。在 Bootstrap 導航欄的核心中，導航欄包括了站點名稱和基本的導航定義樣式。 ### 默認的導航欄 1、向 <nav> 標簽添加 class?**.navbar、.navbar-default**。 2、向上面的元素添加?**role="navigation"**，有助于增加可訪問性。 3、向 <div> 元素添加一個標題 class?**.navbar-header**，內部包含了帶有 class?**navbar-brand**?的 < a > 元素。這會讓文本看起來更大一號 4、為了向導航欄添加鏈接，只需要簡單地添加帶有 class?**.nav、.navbar-nav**?的無序列表即可。 ~~~ <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>demo</title> <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src = "bootstrap-3.3.4-dist/jquery-2.1.4.min.js"></script> <script type="text/javascript" src = "bootstrap-3.3.4-dist/js/bootstrap.min.js"></script> </head> <body> <nav class = "navbar navbar-default" role = "navigation"> <div class="navbar-header"> <a class="navbar-brand">hello</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">網站首頁</a></li> <li><a href="#">JS開發</a></li> <li><a href="#">html</a></li> <li><a href="#">jquery</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="#">html+css學習</a></li> <li><a href="#">javascript學習</a></li> <li><a href="#">jquery學習</a></li> ? <li class="divider"></li> ? <li><a href="#">bootstrap學習</a></li> <li><a href="#">less/sass學習</a></li> <li><a href="#">angularJS學習</a></li> </ul> </li> </ul> </nav> </body> </html> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f7a0d27.jpg) ### 響應式的導航欄 1、將要折疊的內容包含在帶有class .collapse和.navbar-collspae的<div>中。 2、折疊起來的導航欄是帶有class .navbar-toggle以及data-toggle和data-target兩個屬性的按鈕，data-toggle用于告訴javascript 需要對按鈕做什么，此處是折疊：collapse，data-target用于指示折疊哪個元素，此處是1中的導航菜單，data-target的屬性值是要指定的元素的id。 3、button中使用帶有class .icon-bar的<span>創建所謂的漢堡按鈕（就是按鈕中多了幾個橫線） ~~~ <body> <nav class = "navbar navbar-default" role = "navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle = "collapse" data-target = "#target-menu"> <span class="sr-only">qieh</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand">hello</a> </div> <div class="collapse navbar-collapse" id = "target-menu"> <ul class="nav navbar-nav"> <li class="active"><a href="#">網站首頁</a></li> <li><a href="#">JS開發</a></li> <li><a href="#">html</a></li> <li><a href="#">jquery</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="#">html+css學習</a></li> <li><a href="#">javascript學習</a></li> <li><a href="#">jquery學習</a></li> <pre name="code" class="html"> <li class="divider"></li> <li><a href="#">bootstrap學習</a></li> <li><a href="#">less/sass學習</a></li> <li><a href="#">angularJS學習</a></li> </ul> </li> </ul> </div> </nav></body> ~~~ 當屏幕的寬度大于等于768px時，顯示與默認的導航欄相同，而屏幕寬度小于768px時，顯示效果如下： ![](https://box.kancloud.cn/2016-04-07_570603f7b4ec2.jpg) 注意:data-target的屬性值其實是： #+id，如果只寫成id，點擊折疊按鈕是沒有任何反應的，另外，需要引入折疊插件，或者因為 bootstrap.min.js和jquery.js ### 導航欄中的表單導航中的form表單，需要使用class navbar-form，這確保了表單垂直對齊和在較窄的視口中的折疊行為。使用對齊方式選型來決定導航欄的內容放置在哪里，此處使用了navbar-right，居于右側（如果使用navbar-left那么就會居于左側，默認是左側）。 ~~~ <body> <nav class = "navbar navbar-default" role = "navigation"> <div class="navbar-header"> <a class="navbar-brand">hello</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">網站首頁</a></li> <li><a href="#">JS開發</a></li> <li><a href="#">html</a></li> <li><a href="#">jquery</a></li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">提交</button> </form> </div> </nav> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f7c713e.jpg) ### 導航欄中的按鈕不在 <form> 中的 <button>或者a 元素。通過添加class?**.navbar-btn**，使得按鈕在導航欄上垂直居中 ~~~ <body> <nav class = "navbar navbar-default" role = "navigation"> <div class="navbar-header"> <a class="navbar-brand">hello</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">網站首頁</a></li> <li><a href="#">JS開發</a></li> <li><a href="#">html</a></li> <li><a href="#">jquery</a></li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">提交</button> </form> <button type="button" class="btn btn-primary navbar-btn">button按鈕</button> <a href = "#" class="btn btn-warning navbar-btn">鏈接按鈕</a> </div> </nav> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f7d7dca.jpg) ### 導航欄中的文本使用 class?**.navbar-text，**確保適當的前導和顏色。 ~~~ <body> <nav class = "navbar navbar-default" role = "navigation"> <div class="navbar-header"> <a class="navbar-brand">hello</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">網站首頁</a></li> <li><a href="#">JS開發</a></li> <li><a href="#">html</a></li> <li><a href="#">jquery</a></li> </ul> <p class="navbar-text">導航欄中文字 <a href="#" class="navbar-link">鏈接</a> </p> </div> </nav> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f7ebb48.jpg) ### 非導航鏈接使用 class?**navbar-link**?為默認的和倒轉的導航欄選項添加適當的顏色，因為默認的a標簽的樣式可能與導航欄的樣式不協調 ~~~ <body> <nav class = "navbar navbar-default navbar-inverse" role = "navigation"> <div class="navbar-header"> <a class="navbar-brand">hello</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">網站首頁</a></li> <li><a href="#">JS開發</a></li> <li><a href="#">html</a></li> <li><a href="#">jquery</a></li> </ul> <p class="navbar-text">導航欄中文字 <a href="#" class="navbar-link">鏈接</a> </p> </div> </nav> <div style="background-color:#CCCCCC;height:1000px;"> </div> <div style="background-color:#BFFF70;height:200px;"> </div> </body> ~~~ ### 固定到頂部如果想要讓導航欄固定在頁面的頂部，向?**.navbar class**?添加 class?**.navbar-fixed-top。**為了防止導航欄與頁面主體中的其他內容的頂部相交錯，需要向 <body> 標簽添加內邊距，內邊距的值至少是導航欄的高度。 ~~~ <body> <nav class = "navbar navbar-default navbar-static-top" role = "navigation"> <div class="navbar-header"> <a class="navbar-brand">hello</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">網站首頁</a></li> <li><a href="#">JS開發</a></li> <li><a href="#">html</a></li> <li><a href="#">jquery</a></li> </ul> <p class="navbar-text">導航欄中文字 <a href="#" class="navbar-link">鏈接</a> </p> </div> </nav> <div style="background-color:#CCCCCC;height:1000px;"> </div> <div style="background-color:#BFFF70;height:200px;"> </div> </body> ~~~ 為了能夠看出效果，此處添加了兩個有背景色的div。 ![](https://box.kancloud.cn/2016-04-07_570603f809205.jpg) 固定到底部，只需要把class .navbar-fixed-top換成.navbar-fixed-bottom即可，不需要在body中添加內邊距。對于給nav添加?**.navbar-static-top**?class，實在是沒有看出有什么作用，開始以為是能夠創建一個浮動的導航條的。 ### 反色的導航欄向?**.navbar**?class 添加?**.navbar-inverse**?class，創建一個帶有黑色背景白色文本的導航欄 ~~~ <body> <nav class = "navbar navbar-default navbar-inverse" role = "navigation"> <div class="navbar-header"> <a class="navbar-brand">hello</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">網站首頁</a></li> <li><a href="#">JS開發</a></li> <li><a href="#">html</a></li> <li><a href="#">jquery</a></li> </ul> <p class="navbar-text">導航欄中文字 <a href="#" class="navbar-link">鏈接</a> </p> </div> </nav> <div style="background-color:#CCCCCC;height:1000px;"> </div> <div style="background-color:#BFFF70;height:200px;"> </div> </body> ~~~ ![](https://box.kancloud.cn/2016-04-07_570603f81c7bb.jpg)