Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
本文主要包括三大方面，大家仔細(xì)學(xué)習(xí)。
1、導(dǎo)航欄中的表單
導(dǎo)航欄中的表單不是使用 Bootstrap 表單 章節(jié)中所講到的默認(rèn)的 class，它是使用 .navbar-form class。這確保了表單適當(dāng)?shù)拇怪睂?duì)齊和在較窄的視口中折疊的行為。使用對(duì)齊方式選項(xiàng)（這將在組件對(duì)齊方式部分進(jìn)行詳細(xì)講解）來(lái)決定導(dǎo)航欄中的內(nèi)容放置在哪里。
下面的實(shí)例演示了這點(diǎn)：
<!DOCTYPE html> <html> <head> <title>Bootstrap 實(shí)例 - 默認(rèn)的導(dǎo)航欄</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-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="#">導(dǎo)航一</a></li> <li><a href="#">導(dǎo)航二</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="#">我是誰(shuí)呢？</a></li> <li><a href="#">我也不知道</a></li> <li><a href="#">你是誰(shuí)呢？</a></li> <li class="divider"></li> <li><a href="#">分離的鏈接</a></li> <li class="divider"></li> <li><a href="#">另一個(gè)分離的鏈接</a></li> </ul> </li> </ul> </div> <div> <form class="navbar-form navbar-left" 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> </html>
效果：
黑色效果
2、導(dǎo)航欄中的按鈕
您可以使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按鈕，按鈕在導(dǎo)航欄上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上。
不要在 .navbar-nav 內(nèi)的 <a> 元素上使用 .navbar-btn，因?yàn)樗皇菢?biāo)準(zhǔn)的 button class。
下面的實(shí)例演示了這點(diǎn)：
<!DOCTYPE html> <html> <head> <title>Bootstrap 實(shí)例 - 默認(rèn)的導(dǎo)航欄</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="#">導(dǎo)航一</a></li> <li><a href="#">導(dǎo)航二</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="#">我是誰(shuí)呢？</a></li> <li><a href="#">我也不知道</a></li> <li><a href="#">你是誰(shuí)呢？</a></li> <li class="divider"></li> <li><a href="#">分離的鏈接</a></li> <li class="divider"></li> <li><a href="#">另一個(gè)分離的鏈接</a></li> </ul> </li> </ul> </div> <div> <form class="navbar-form navbar-left" 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-default navbar-btn"> 導(dǎo)航欄按鈕 </button> </div> </nav> </body> </html>
效果如下：
3、導(dǎo)航欄中的文本
如果需要在導(dǎo)航中包含文本字符串，請(qǐng)使用 class .navbar-text。這通常與 <p> 標(biāo)簽一起使用，確保適當(dāng)?shù)那皩?dǎo)和顏色。下面的實(shí)例演示了這點(diǎn)：
<div class="navbar-header"> <a class="navbar-brand" href="#">林炳文在此～</a> </div> <div> <p class="navbar-text">導(dǎo)航欄中的文本</p> </div> <div>
效果如下：
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專(zhuān)題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，大家可以更加熟練地實(shí)現(xiàn)Bootstrap導(dǎo)航欄。
- 詳解bootstrap導(dǎo)航欄.nav與.navbar區(qū)別
- Bootstrap實(shí)現(xiàn)漸變頂部固定自適應(yīng)導(dǎo)航欄
- BootStrap學(xué)習(xí)筆記之nav導(dǎo)航欄和面包屑導(dǎo)航
- BootStrap實(shí)現(xiàn)響應(yīng)式布局導(dǎo)航欄折疊隱藏效果（在小屏幕、手機(jī)屏幕瀏覽時(shí)自動(dòng)折疊隱藏）
- 解決bootstrap導(dǎo)航欄navbar在IE8上存在缺陷的方法
- Bootstrap編寫(xiě)導(dǎo)航欄和登陸框
- Bootstrap3制作自己的導(dǎo)航欄
- Bootstrap實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄效果
- bootstrap自定義樣式之bootstrap實(shí)現(xiàn)側(cè)邊導(dǎo)航欄功能
相關(guān)文章
用console.table()調(diào)試javascript
昨天我了解到Chrome調(diào)試工具一個(gè)小巧的調(diào)試方法，在WDCC期間， Marcus Ross（@zahlenhelfer） 介紹了，chrome調(diào)試工具各種調(diào)試方法，這個(gè)只是其中一種，現(xiàn)在我來(lái)給大家秀下。2014-09-09
原生JS實(shí)現(xiàn)匯率轉(zhuǎn)換功能代碼實(shí)例
這篇文章主要介紹了原生JS實(shí)現(xiàn)匯率轉(zhuǎn)換功能代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
ES6通過(guò)babel轉(zhuǎn)碼使用webpack使用import關(guān)鍵字
這篇文章主要介紹了es6通過(guò)babel轉(zhuǎn)碼還需要使用webpack才可以使用import關(guān)鍵字嗎的相關(guān)資料,需要的朋友可以參考下2016-12-12
JavaScript 節(jié)流函數(shù) Throttle 詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript 節(jié)流函數(shù) Throttle，感興趣的小伙伴們可以參考一下2016-07-07
微信開(kāi)發(fā)之企業(yè)付款到銀行卡接口開(kāi)發(fā)的示例代碼
這篇文章主要介紹了微信開(kāi)發(fā)之企業(yè)付款到銀行卡接口開(kāi)發(fā)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了Bootstrap下拉菜單樣式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
使用mouse事件實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)經(jīng)過(guò)特效
這篇文章主要介紹了使用mouse事件實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)經(jīng)過(guò)特效的方法,需要的朋友可以參考下2015-01-01
基于layui實(shí)現(xiàn)高級(jí)搜索（篩選）功能
這篇文章主要為大家詳細(xì)介紹了基于layui實(shí)現(xiàn)高級(jí)搜索、篩選功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
通過(guò)javascript關(guān)閉瀏覽器的時(shí)候，“一般”會(huì)彈出系統(tǒng)的默認(rèn)提示框，提示用戶是否關(guān)閉瀏覽器，這可以通過(guò)javascript解決，但是IE6，IE7解決的辦法是不一樣的2009-06-06
這篇文章主要介紹了JS實(shí)現(xiàn)的視頻彈幕效果,涉及javascript基于事件響應(yīng)的頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08