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

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

為了向?qū)Ш綑谔砑渔溄?，只需要?jiǎn)單地添加帶有 class .nav、.navbar-nav 的無序列表即可。

下面實(shí)例為大家分享使用Bootstrap3制作的導(dǎo)航欄，具體內(nèi)容如下

比如

google

微博

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

使用bootstrap3吧！

直接說使用

一般情況下導(dǎo)航放到如下的結(jié)構(gòu)中

<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標(biāo)簽

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

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

效果如上

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

2、表單
在導(dǎo)航里添加表單，比如搜索，登錄什么的也比較常見

比如我上面的搜索

 <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類會(huì)把這個(gè)form定位在左邊
當(dāng)然也對(duì)應(yīng)有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類

我的導(dǎo)航   

<!--導(dǎo)航-->
 <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" >注冊(cè)</a></li>
    <li><a data-toggle="modal" data-target="#signin" >登錄</a></li>
    </ul>
   </div>
   </div>
  </nav>

  </div>
 </div>

效果如下

更多內(nèi)容大家可以參考一下文章進(jìn)行學(xué)習(xí)：

Bootstrap實(shí)現(xiàn)默認(rèn)導(dǎo)航欄效果

Bootstrap每天必學(xué)之導(dǎo)航條(二)

Bootstrap每天必學(xué)之附加導(dǎo)航（Affix）插件

關(guān)于Bootstrap的更多內(nèi)容大家還可以參考專題進(jìn)行學(xué)習(xí)： 《Bootstrap學(xué)習(xí)教程》

以上就是利用Bootstrap3制作的導(dǎo)航欄，希望對(duì)大家的學(xué)習(xí)有所幫助，做出屬于自己的導(dǎo)航欄

最新評(píng)論