Bootstrap導航欄各元素操作方法(表單、按鈕、文本)
更新時間：2015年12月28日 14:18:26 作者：林炳文Evankaka
這篇文章主要介紹了Bootstrap導航欄各元素操作方法，針對表單、按鈕、文本進行操作，感興趣的小伙伴們可以參考一下
本文主要包括三大方面，大家仔細學習。
1、導航欄中的表單
導航欄中的表單不是使用 Bootstrap 表單 章節(jié)中所講到的默認的 class，它是使用 .navbar-form class。這確保了表單適當?shù)拇怪睂R和在較窄的視口中折疊的行為。使用對齊方式選項（這將在組件對齊方式部分進行詳細講解）來決定導航欄中的內(nèi)容放置在哪里。
下面的實例演示了這點：
<!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-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="#">導航一</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> <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、導航欄中的按鈕
您可以使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按鈕，按鈕在導航欄上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上。
不要在 .navbar-nav 內(nèi)的 <a> 元素上使用 .navbar-btn，因為它不是標準的 button class。
下面的實例演示了這點：
<!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> <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"> 導航欄按鈕 </button> </div> </nav> </body> </html>
效果如下：
3、導航欄中的文本
如果需要在導航中包含文本字符串，請使用 class .navbar-text。這通常與 <p> 標簽一起使用，確保適當?shù)那皩Ш皖伾Ｏ旅娴膶嵗菔玖诉@點：
<div class="navbar-header"> <a class="navbar-brand" href="#">林炳文在此～</a> </div> <div> <p class="navbar-text">導航欄中的文本</p> </div> <div>
效果如下：
如果大家還想深入學習，可以點擊這里進行學習，再為大家附兩個精彩的專題：Bootstrap學習教程 Bootstrap實戰(zhàn)教程
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，大家可以更加熟練地實現(xiàn)Bootstrap導航欄。
相關文章
JS實現(xiàn)的4種數(shù)字千位符格式化方法分享
這篇文章主要介紹了JS實現(xiàn)的4種數(shù)字千位符格式化方法分享,本文給出了4種千分位格式化方法并對它們的性能做了比較,需要的朋友可以參考下2015-03-03
document.documentElement的一些使用技巧
documentElement 屬性可返回文檔的根節(jié)點，接下來為大家詳細介紹下document.documentElement的一些使用技巧，感興趣的朋友可以參考下哈2013-04-04
這篇文章主要介紹了JS代碼實現(xiàn)電腦配置檢測功能,需要的朋友可以參考下2018-03-03
Webpack 5 是一款強大的模塊打包工具,可用于將許多分散的模塊按照依賴關系打包成一個（或多個）bundle,這篇文章給大家介紹webpack 5 mode的作用和區(qū)別解析,感興趣的朋友跟隨小編一起看看吧2024-01-01
本文介紹了如何自定義trim方法，trim的作用就是去除字符串前后空格,這個方法在字符串處理方面很有實用價值，需要的朋友可以參考下2015-07-07
Flow之一個新的Javascript靜態(tài)類型檢查器
今天我們興奮的發(fā)布了 Flow 的嘗鮮版，一個新的Javascript靜態(tài)類型檢查器。Flow為Javascript添加了靜態(tài)類型檢查，以提高開發(fā)效率和代碼質(zhì)量，本文給大家分享Flow之一個新的Javascript靜態(tài)類型檢查器，感興趣的朋友一起學習吧2015-12-12
JavaScript 禁止用戶保存圖片的實現(xiàn)代碼
這篇文章主要介紹了JavaScript 禁止用戶保存圖片的實現(xiàn)代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
js前臺分頁顯示使用jquery1.8.7框架，本文目的主要給那些剛?cè)胄熊浖_發(fā)，喜歡這也看看，程序需要有投入才有收獲感興趣的你可不要錯過了哈，希望可以幫助到你2013-03-03
這篇文章主要為大家詳細介紹了js實現(xiàn)彈窗效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了js中的原型，原型對象，原型鏈的相關資料，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07