亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

BootStrap 導(dǎo)航條實(shí)例代碼

 更新時(shí)間：2017年05月18日 08:56:08   作者：realDanielWu  
本文通過(guò)實(shí)例代碼給大家介紹了bootstrap導(dǎo)航條效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧

一、默認(rèn)的導(dǎo)航條

制作默認(rèn)的導(dǎo)航條，可分以下幾步：

1.在ul里加上（ul class="nav navbar-nav"）樣式；

2.在ul外加一層div或nav(ps:HTML5新屬性)，并且添加樣式（div class="navbar nabar-default"）;

<nav class="navbar navbar-default">
  <ul class="nav navbar-nav">
   <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃飯</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡覺(jué)</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打勇士</a></li>
  </ul>
</nav>

如圖下：

So easy吧qaq

二、帶有表單的導(dǎo)航條

1.在默認(rèn)導(dǎo)航條的基礎(chǔ)上，再一個(gè)form。

2.form中應(yīng)用樣式（form class="navbar-form"）

<nav class="navbar navbar-default">
  <ul class="nav navbar-nav">
   <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃飯</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡覺(jué)</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打勇士</a></li>
  </ul>
  <form class="navbar-form">
   <input type="text" class="form-control" placeholder="猜猜是誰(shuí)？">
   
   <input type="submit" class="form-control" value="我瞧瞧~">
  </form>
</nav>

如圖下：

擦，寫(xiě)錯(cuò)了，其實(shí)我想寫(xiě)打火箭的。。。

三、表單，下拉菜單等冗合的導(dǎo)航條

上一個(gè)綜合例子，不然一個(gè)一個(gè)寫(xiě)，小編得coding到天亮，廢話少說(shuō)，直說(shuō)上料。

<nav class="navbar navbar-default">
  <ul class="nav navbar-nav">
   <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃飯</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡覺(jué)</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打勇士</a></li>
   <li class="dropdown">
    <a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="dropdown" class="dropdown-toggle">西決幾比幾<span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:0</a></li>
    <li><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:1</a></li>
    <li class="disabled"><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:2</a></li>
    </ul>
   </li>
  </ul>
  <form class="navbar-form">
   <input type="text" class="form-control" placeholder="猜猜是誰(shuí)？">
   
   <input type="submit" class="form-control" value="我瞧瞧~">
  </form>
</nav>

如圖下：

咳咳，一般導(dǎo)航都有個(gè)大標(biāo)題，如圖下：

實(shí)現(xiàn)步驟：

1.在div里添加樣式（div class="navbar-header"）；

2.在此div添加a標(biāo)簽(a class="navbar-brand")；

navbar-brand(品牌)也就是大標(biāo)題啦！

<nav class="navbar navbar-default">
  <div class="navbar-header">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">阿爾德里奇</a>
  </div>
  <ul class="nav navbar-nav">
   <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃飯</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡覺(jué)</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打勇士</a></li>
   <li class="dropdown">
    <a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="dropdown" class="dropdown-toggle">西決幾比幾<span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:0</a></li>
    <li><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:1</a></li>
    <li class="disabled"><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4:2</a></li>
    </ul>
   </li>
  </ul>
  <form class="navbar-form">
   <input type="text" class="form-control" placeholder="猜猜是誰(shuí)？">
   
   <input type="submit" class="form-control" value="我瞧瞧~">
  </form>
</nav>

四、反色導(dǎo)航條

反色導(dǎo)航條其實(shí)是Bootstrap框架為大家提供的第二種風(fēng)格的導(dǎo)航條，只是將"navbar-deafult"類(lèi)名換成"navbar-inverse"。其他不變，見(jiàn)下圖：

個(gè)人還是比較喜歡這個(gè)風(fēng)格的

五、固定導(dǎo)航條

顧名思義，其實(shí)就是fixed樣式,

Bootstrap框架提供了兩種固定導(dǎo)航條的方式：

　　.navbar-fixed-top：導(dǎo)航條固定在瀏覽器窗口頂部

　　.navbar-fixed-bottom：導(dǎo)航條固定在瀏覽器窗口底部

使用方法很簡(jiǎn)單，只需要在制作導(dǎo)航條最外部容器navbar上追加對(duì)應(yīng)的類(lèi)名即可

<!--導(dǎo)航條固定在瀏覽器窗口頂部-->
<div class="navbar navbar-default navbar-fixed-top">
 　…
</div>
<!--導(dǎo)航條固定在瀏覽器窗口底部-->
<div class="navbar navbar-default navbar-fixed-bottom">
 　…
</div>

六、響應(yīng)式導(dǎo)航條

<div class="navbar navbar-inverse navbar-fixed-top">
 <div class="container">
  <div class="navbar-header">
  　 <!-- .navbar-toggle樣式用于toggle收縮的內(nèi)容，即navbar-collapse collapse樣式所在元素，-->
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle Navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </button>
   <!-- 確保無(wú)論是寬屏還是窄屏，navbar-brand都顯示 -->
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">我的主頁(yè)</a>
  </div>
  <!-- 屏幕寬度小于768px時(shí)，div.navbar-collapse容器里的內(nèi)容都會(huì)隱藏，顯示icon-bar圖標(biāo)，當(dāng)點(diǎn)擊icon-bar圖標(biāo)時(shí)，再展開(kāi)。屏幕大于768px時(shí)，默認(rèn)顯示。 -->
  <div id="navbar" class=" collapse navbar-collapse">
   <ul class="nav navbar-nav">
    <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >吃飯</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >睡覺(jué)</a></li>
    <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >打火箭</a></li>
   </ul>
  </div>
 </div>
</div>

我這是套的反色導(dǎo)航條的，現(xiàn)在分別看下寬屏和窄屏的顯示效果，如圖下：

<button>里面是窄屏右上角的按鈕，span標(biāo)簽是三道杠，

現(xiàn)在說(shuō)一下上面代碼中第5行，data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"，這都什么跟什么啊，我這逐一介紹一下；

data-toggle="collapse"     代表     告訴js要什么事件來(lái)觸發(fā),此處的coolapse為“伸展折疊”；

data-target="#navbar"     代表     誰(shuí)要以伸展折疊的方式來(lái)展示，綁定的是ID；

aria-expanded="false"      代表   是否展開(kāi)，false。

談到這aria-*，為無(wú)障礙網(wǎng)頁(yè)應(yīng)用。主要針對(duì)的是視覺(jué)缺陷，失聰，行動(dòng)不便的殘疾人以及假裝殘疾的測(cè)試人員。尤其像盲人，眼睛看不到，其瀏覽網(wǎng)頁(yè)則需要借助輔助設(shè)備，如屏幕閱讀器，屏幕閱讀機(jī)可以大聲朗讀或者輸出盲文。

以上所述是小編給大家介紹的BootStrap 導(dǎo)航條實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論