首頁 >web前端 >Bootstrap教程 >聊聊Bootstrap中的導航條
聊聊Bootstrap中的導航條
- 青灯夜游轉載
- 2021-03-31 09:49:563733瀏覽
導航條（navbar）和導航（nav），就相差一個字，多了一個「條」字。其實在Bootstrap框架中他們還是明顯的差別。在導航條(navbar)中有一個背景色、而且導航條可以是純連結（類似導航），也可以是表單，還有就是表單和導航一起結合等多種形式。本文將詳細介紹Bootstrap導航條。
基礎導航條
在Bootstrap框架中，導航條和導航從外觀上差別不是太多，但在實際使用中導航條比導航複雜得多。
導覽條是在應用程式或網站中作為導覽頁頭的響應式基礎元件。它們在行動裝置上可以折疊（並且可開可關），且在視窗（viewport）寬度增加時逐漸變為水平展開模式
在製作一個基礎導航條時，主要分以下幾步：
1、首先在製作導覽的清單(
- )基礎上新增類別名稱「navbar-nav」
2、在清單外部新增一個容器（p），並且使用類別名稱“navbar”和“navbar-default”
【原理分析】
“.navbar”樣式的主要功能就是設定左右padding和圓角等效果，但它和顏色相關的樣式沒有進行任何的設定
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
導航條的顏色都是透過「.navbar-default」來進行控制
.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
}
navbar-nav樣式是在導覽.nav的基礎上重新調整了選單項目的浮動與內外邊距。同時也不包含顏色等樣式設置，而顏色和其他樣式是透過配合父容器「navbar-default」來一起實現
[注意]最好使用 <nav></nav> 元素，如果使用的是通用的 <p></p> 元素的話，務必為導航條設定 role="navigation" 屬性，這樣能夠讓使用輔助設備的使用者明確知道這是一個導航區域
<div> <ul> <li><a>网站首页</a></li> <li><a>系列教程</a></li> <li><a>名师介绍</a></li> <li><a>成功案例</a></li> <li><a>关于我们</a></li> </ul> </div>
相關推薦：《bootstrap教學》
導航條元件
【標題】
在Web頁面製作中，常常在選單前面都會有一個標題（文字字號比其它文字稍大一些），其實在Bootstrap框架也做了這方面考慮，其透過「navbar-header」和「navbar-brand」來實現
<div> <div> <a>小火柴的蓝色理想</a> </div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> <li><a>Bootstrap</a></li> <li><a>jQuery</a></li> </ul> </div>
##【品牌圖示】
將導航條內放置品牌標誌的地方替換為 元素即可展示自己的品牌圖示。由於 .navbar-brand 已經被設定了內補（padding）和高度（height），需要根據自己的情況添加一些CSS 程式碼從而覆蓋預設值
<div> <div> <a> <img alt="聊聊Bootstrap中的導航條" > </a> </div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> <li><a>Bootstrap</a></li> <li><a>jQuery</a></li> </ul> </div>
【二級選單】
<div> <ul> <li><a>网站首页</a></li> <li> <a>系列教程<span></span></a> <ul> <li><a>CSS3</a></li> <li><a>JavaScript</a></li> <li><a>PHP</a></li> </ul> </li> <li><a>关于我们</a></li> </ul> </div>
【零件排列】
# 透過新增 .navbar-left 和 .navbar-right工具類別讓導覽連結、表單、按鈕或文字對齊。兩個類別都會透過 CSS 設定特定方向的浮動樣式。例如，要對齊導航鏈接，就要把它們放在個分開的、應用了工具類的- 標籤裡<p></p> 這些類是 .pull-left 和 .pull-right 的 mixin 版本，但是他們被限定在了媒體查詢（media query）中，這樣可以更容易的在各種尺寸的屏幕上處理導航條組件<p></p> [注意]導航條目前不支援多個
. navbar-right類別。為了讓內容之間有適當的空隙，最後一個.navbar-right元素使用負邊距(margin)。如果有多個元素使用這個類，它們的邊距(margin)將無法按照預期正常展現
【表單】
有的導航條中會帶有搜尋表單，Bootstrap框架中提供了一個“navbar-form”，使用方法很簡單，在navbar容器中放置一個帶有navbar-form類別名稱的表單即可<p></p> navbar-left實現左浮動，navbar-right實現右浮動<p></p><div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> <li><a>Bootstrap</a></li> <li><a>jQuery</a></li> </ul> <form> <div> <input> </div> <button>搜索</button> </form> </div>
【按钮】
对于不包含在 <form></form> 中的 <button></button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。有一些对于为辅助设备提供可识别标签的方法，例如， aria-label、aria-labelledby 或者 title 属性。如果这些方法都没有，屏幕阅读器将使用 placeholder 属性（如果这个属性存在的话），但是请注意，使用 placeholder 代替其他识别标签的方式是不推荐的
[注意]就像标准的 按钮类 一样，.navbar-btn 可以被用在 <a></a> 和 <input> 元素上。然而，在 .navbar-nav 内，.navbar-btn 和标准的按钮类都不应该被用在 <a></a> 元素上。
<div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> <button>Sign in</button> </div>
把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通常使用 <p></p> 标签
<div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> <p>Signed in as huochai</p> </div>
【非导航链接】
可以在标准的导航组件之外添加标准链接，使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置
<div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> <p>Signed in as <a>huochai</a></p> </div>
导航条位置
很多情况下，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了g两种固定导航条的方式：
☑ .navbar-fixed-top：导航条固定在浏览器窗口顶部
☑ .navbar-fixed-bottom：导航条固定在浏览器窗口底部
使用方法很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可
这个固定的导航条会遮住页面上的其它内容，除非给 元素底部设置了 padding。提示：导航条的默认高度是 50px
body { padding-top: 70px; }
body { padding-bottom: 70px; }
<nav> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> </nav> <p>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容<br><br>测试内容</p> <nav> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> </nav>
【静止在顶部】
通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失
<nav> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> </nav> <p>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容<br><br><br>测试内容</p>
响应式导航条
Bootstrap的响应式导航条实现如下：
1、保证在窄屏时需要折叠的内容必须包裹在带一个p内，并且为这个p加入collapse、navbar-collapse两个类名。最后为这个p添加一个class类名或者id名
<div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> </div>
或者
<div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> </div>
2、保证在窄屏时要显示的图标样式（固定写法）：
<button> <span>Toggle Navigation</span> <span></span> <span></span> <span></span> </button>
3、并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的p来决定。如
<button> <span>Toggle Navigation</span> <span></span> <span></span> <span></span> </button>
或者，对应class="example"
<button> <span>Toggle Navigation</span> <span></span> <span></span> <span></span> </button>
<div> <div> <button> <span>Toggle Navigation</span> <span></span> <span></span> <span></span> </button> </div> <div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> </div> </div>
反色导航条
反色导航条其实是Bootstrap框架提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改
<div> <ul> <li><a>HTML</a></li> <li><a>CSS</a></li> <li><a>Javascript</a></li> </ul> </div>
更多编程相关知识，请访问：编程视频！！
以上是聊聊Bootstrap中的導航條的詳細內容。更多資訊請關注PHP中文網其他相關文章！