Bootstrap實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄效果
為了給導(dǎo)航欄添加響應(yīng)式特性，您要折疊的內(nèi)容必須包裹在帶有 classes .collapse、.navbar-collapse 的 <div> 中。折疊起來的導(dǎo)航欄實(shí)際上是一個(gè)帶有class .navbar-toggle 及兩個(gè) data- 元素的按鈕。第一個(gè)是 data-toggle，用于告訴 JavaScript 需要對(duì)按鈕做什么，第二個(gè)是 data-target，指示要切換到哪一個(gè)元素。三個(gè)帶有 class .icon-bar 的 <span> 創(chuàng)建所謂的漢堡按鈕。這些會(huì)切換為 .nav-collapse <div> 中的元素。為了實(shí)現(xiàn)以上這些功能，您必須包含 Bootstrap 折疊（Collapse）插件。
效果圖：
下面的實(shí)例演示了這點(diǎn)：
<!DOCTYPE html> <html> <head> <title>Bootstrap 實(shí)例 - 響應(yīng)式的導(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"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">切換導(dǎo)航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">12345</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">fgghh</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">vgghhr</a></li> <li><a href="#">dg</a></li> <li><a href="#">sfg</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> </nav> </body> </html>
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
- 詳解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編寫導(dǎo)航欄和登陸框
- Bootstrap3制作自己的導(dǎo)航欄
- Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
- bootstrap自定義樣式之bootstrap實(shí)現(xiàn)側(cè)邊導(dǎo)航欄功能
相關(guān)文章
有時(shí)候我們需要復(fù)制一個(gè)框的內(nèi)容或者整個(gè)表格，一般的操作很可能造成一些不方便，一是操作步驟較為復(fù)制，一是復(fù)制表格的時(shí)候容易復(fù)制不完整或者格式出錯(cuò)。2011-04-04
使用BootStrap實(shí)現(xiàn)用戶登錄界面UI
本文給大家介紹使用BootStrap實(shí)現(xiàn)用戶登錄界面UI，布局風(fēng)格采用左右各一半的風(fēng)格設(shè)計(jì)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-08-08
基于javascript實(shí)現(xiàn)貪吃蛇小游戲
這篇文章主要介紹了基于javascript實(shí)現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
HTML<video>元素用于在HTML或者XHTML文檔中嵌入媒體播放器,用于支持文檔內(nèi)的視頻播放,你也可以將<video>標(biāo)簽用于音頻內(nèi)容,在前端中實(shí)現(xiàn)音頻和視頻播放通常涉及使用HTML5的<audio>和<video>元素以及JavaScript來控制這些媒體元素的播放、暫停、音量等屬性2023-10-10
JavaScript實(shí)現(xiàn)公歷轉(zhuǎn)農(nóng)歷功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)公歷轉(zhuǎn)農(nóng)歷功能,涉及javascript日期與時(shí)間相關(guān)操作及運(yùn)算操作技巧,需要的朋友可以參考下2017-02-02
EditPlus注冊(cè)碼生成器(js代碼實(shí)現(xiàn))
在線的EditPlus注冊(cè)碼生成器，看了看還真是，在這里exe的注冊(cè)機(jī)病毒太多，純js的在線注冊(cè)機(jī)可就放心了，感興趣的各位可以參考下哈，希望可以幫助到你2013-03-03
JavaScript中逗號(hào)運(yùn)算符介紹及使用示例
這篇文章主要介紹了JavaScript中逗號(hào)運(yùn)算符介紹及使用示例,本文講解了逗號(hào)運(yùn)算符的定義、使用例子及實(shí)際使用的一些技巧,需要的朋友可以參考下2015-03-03
Javascript實(shí)現(xiàn)禁止輸入中文或英文的例子
這篇文章主要介紹了Javascript實(shí)現(xiàn)禁止輸入中文或英文的方法實(shí)例,本文方法都是使用正則表達(dá)式實(shí)現(xiàn),需要的朋友可以參考下2014-12-12
ES6模塊化的import和export用法方法總結(jié)
這篇文章主要介紹了ES6模塊化的import和export用法方法總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
Django1.7+JQuery+Ajax驗(yàn)證用戶注冊(cè)集成小例子
下面是散仙使用Django+Jquery+Ajax的方式來模擬實(shí)現(xiàn)了一個(gè)驗(yàn)證用戶注冊(cè)時(shí)，用戶名存在不存在的一個(gè)小應(yīng)用。注意，驗(yàn)證存在不存在使用的是Ajax的方式，不用讓用戶點(diǎn)擊按鈕驗(yàn)證是否存在,需要的朋友可以參考下2017-04-04