欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap3制作自己的導航欄

 更新時間:2016年05月12日 09:29:40   投稿:lijiao  
這篇文章主要教會大家如何利用Bootstrap3制作自己的導航欄,設計自己喜歡的元素、樣式,感興趣的小伙伴們可以參考一下

導航欄是一個很好的功能,是Bootstrap 網(wǎng)站的一個突出特點。導航欄是響應式元組件就,作為應用程序或網(wǎng)站的導航標題。導航欄在移動設備的視圖中是折疊的,隨著可用視口寬度的增加,導航欄也會水平展開。在 Bootstrap 導航欄的核心中,導航欄包括了為站點名稱和基本的導航定義樣式。
創(chuàng)建一個默認的導航欄的步驟如下:

  • 向 <nav> 標簽添加 class .navbar、.navbar-default(白底黑字),navbar-inverse(黑底白字)
  • 向上面的元素添加 role="navigation",有助于增加可訪問性。
  • 向 <div> 元素添加一個標題 class .navbar-header,內部包含了帶有 class navbar-brand 的 <a> 元素。這會讓文本看起來更大一號。

為了向導航欄添加鏈接,只需要簡單地添加帶有 class .nav、.navbar-nav 的無序列表即可。

下面實例為大家分享使用Bootstrap3制作的導航欄,具體內容如下

比如

google


微博


那么如何寫出這樣方便這樣的組件

使用bootstrap3吧!

直接說使用

一般情況下導航放到如下的結構中

<nav class="navbar navbar-default" role="navigation">
 <div class="container-fluid">
 <div class="navbar-header">
  <a class="navbar-brand" href="#">
  <img alt="Brand" src="...">
  </a>
 </div>
 </div>
</nav>

1、nav標簽

第一層 class中 navbar是必須的 其他的屬性是可選的
添加navbar-default創(chuàng)建的是最基本的導航,不會固定在哪個位置顏色是透明的
添加navbar-inverse類 顏色變?yōu)楹谏?br /> 添加navbar-fixed-top固定在頂部,添加navbar-fixed-bottom固定在底部
添加navbar-static-top 效果如下


<div class="navbar-header">
導航的頭 比如說網(wǎng)站的loge 點擊進去主頁,或者是網(wǎng)站的名稱


效果如上

這里可以換成文字 我感覺效果會更好

2、表單
在導航里添加表單,比如搜索,登錄什么的也比較常見

比如我上面的搜索

 <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>

解釋一下其中的navbar-left類會把這個form定位在左邊
當然也對應有navbar-right類

同理 按鈕可以這樣加

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

文本可以這樣加

<p class="navbar-text">Signed in as Mark Otto</p>

鏈接可以這樣加

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

并且這樣都可以添加navbar-right或者navbar-left類

我的導航   

<!--導航-->
 <div class="navbar-wrapper">
  <div class="container" id="navcontainer">
  <nav class="navbar navbar-inverse navbar-fixed-top " role="navigation">
   <div class="container">
   <div class="navbar-header">
    <a class="navbar-brand" href="#">先聲文庫</a>
   </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 class="navbar-right">
    <ul class="nav navbar-nav">
    <li><a data-toggle="modal" data-target="#register" >注冊</a></li>
    <li><a data-toggle="modal" data-target="#signin" >登錄</a></li>
    </ul>
   </div>
   </div>
  </nav>

  </div>
 </div>

效果如下


更多內容大家可以參考一下文章進行學習:

Bootstrap實現(xiàn)默認導航欄效果

Bootstrap每天必學之導航條(二)

Bootstrap每天必學之附加導航(Affix)插件

關于Bootstrap的更多內容大家還可以參考專題進行學習: 《Bootstrap學習教程》

以上就是利用Bootstrap3制作的導航欄,希望對大家的學習有所幫助,做出屬于自己的導航欄

相關文章

  • 詳細聊聊閉包在js中充當著什么角色

    詳細聊聊閉包在js中充當著什么角色

    在js中,閉包是一個很重要又相當不容易完全理解的要點,下面這篇文章主要給大家介紹了關于閉包在js中充當著什么角色的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-01-01
  • 微信小程序網(wǎng)絡請求模塊封裝的具體實現(xiàn)

    微信小程序網(wǎng)絡請求模塊封裝的具體實現(xiàn)

    大家做小程序項目的時候肯定會遇到數(shù)據(jù)對接需求,下面這篇文章主要給大家介紹了關于微信小程序網(wǎng)絡請求模塊封裝的具體實現(xiàn),文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-03-03
  • H5用戶注冊表單頁 注冊模態(tài)框!

    H5用戶注冊表單頁 注冊模態(tài)框!

    這篇文章主要為大家詳細介紹了H5用戶注冊表單頁的相關代碼,注冊模態(tài)框,如何設計用戶注冊表單頁,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • BootStrap智能表單實戰(zhàn)系列(八)表單配置json詳解

    BootStrap智能表單實戰(zhàn)系列(八)表單配置json詳解

    這篇文章主要介紹了BootStrap智能表單實戰(zhàn)系列(八)表單配置json詳解的相關資料,本章節(jié)屬于高級部分,介紹一些表單中的配置知識,非常不錯具有參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • 微信小程序實現(xiàn)多選框全選與反全選及購物車中刪除選中的商品功能

    微信小程序實現(xiàn)多選框全選與反全選及購物車中刪除選中的商品功能

    這篇文章主要介紹了微信小程序實現(xiàn)多選框全選與反全選及購物車中刪除選中的商品功能,本文通過截圖實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2019-12-12
  • Validform表單驗證總結篇

    Validform表單驗證總結篇

    這篇文章主要介紹了Validform表單驗證,包括通用表單驗證方法的知識,本文給大家介紹的非常詳細具有參考借鑒價值,需要的朋友可以參考下
    2016-10-10
  • JavaScript樹型數(shù)據(jù)與一維數(shù)組相互轉換方式

    JavaScript樹型數(shù)據(jù)與一維數(shù)組相互轉換方式

    這篇文章主要介紹了JavaScript樹型數(shù)據(jù)與一維數(shù)組相互轉換方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • 微信小程序用戶授權,以及判斷登錄是否過期的方法

    微信小程序用戶授權,以及判斷登錄是否過期的方法

    這篇文章主要介紹了微信小程序用戶授權及判斷登錄是否過期,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • kindeditor修復會替換script內容的問題

    kindeditor修復會替換script內容的問題

    這里給大家分享的是個人修改的kindeditor的代碼,主要是修復了一些BUG,添加了些常用功能,推薦給大家,有需要的小伙伴可以參考下。
    2015-04-04
  • JavaScript Pinia代替 Vuex的可行性分析

    JavaScript Pinia代替 Vuex的可行性分析

    這篇文章主要介紹了JavaScript中Pinia是否可以代替Vuex,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-07-07

最新評論