Bootstrap基本組件學(xué)習(xí)筆記之導(dǎo)航(10)
更新時(shí)間：2016年12月07日 09:01:34 作者：kikay
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之導(dǎo)航,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
Bootstrap的導(dǎo)航很有特色，主要分為膠囊式導(dǎo)航、面包屑導(dǎo)航、頭部導(dǎo)航共3大類，可以滿足絕大部分需求。
0x01 膠囊式導(dǎo)航
膠囊式導(dǎo)航采用的是無(wú)序列表ul來(lái)實(shí)現(xiàn)：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>膠囊式導(dǎo)航</title> </head> <body> <div class="container"> <div class="page-header"> <h1>膠囊式導(dǎo)航</h1> </div> <div class="col-lg-3"> <h3>水平樣式</h3> <ul class="nav nav-pills"> <li class="active"><a href="#">首頁(yè)</a></li> <li><a href="#">新聞</a></li> <li><a href="#">關(guān)于</a></li> </ul> </div> <div class="col-lg-3"> <h3>垂直樣式</h3> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">首頁(yè)</a></li> <li><a href="#">新聞</a></li> <li><a href="#">關(guān)于</a></li> </ul> </div> </div> </body> </html>
效果如下：
0x02面包屑導(dǎo)航
面包屑導(dǎo)航采用的是有序列表ol來(lái)實(shí)現(xiàn)：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>面包屑導(dǎo)航</title> </head> <body> <div class="container"> <div class="page-header"> <h1>面包屑導(dǎo)航</h1> </div> <div class="breadcrumb"> <li class="active"><a href="#">學(xué)校</a></li> <li><a href="#">一年級(jí)</a></li> <li><a href="#">一班</a></li> </div> </div> </body> </html>
效果如下：
0x03 頭部導(dǎo)航
頭部導(dǎo)航在網(wǎng)站開發(fā)中比較常見，依賴于Bootstrap庫(kù)的collapse插件。基本樣式如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<style>
/*body{*/
/*padding-top: 50px;*/
/*}*/
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<title>頭部導(dǎo)航</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="btn btn-default navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">網(wǎng)站標(biāo)題</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首 頁(yè)</a></li>
<li><a href="#">新聞</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
下拉菜單
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">菜單1</a></li>
<li><a href="#">菜單2</a></li>
<li><a href="#">菜單3</a></li>
</ul>
</li>
</ul>
<form class="nav navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="用戶名">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="密碼">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary form-control">提 交</button>
</div>
</form>
</div>
</nav>
<div class="page-header">
<h1>頭部導(dǎo)航</h1>
</div>
<div>
<p>內(nèi)容</p>
</div>
</div>
</body>
</html>
效果如下：
當(dāng)屏幕寬度很窄時(shí)，會(huì)出現(xiàn)下面樣式：
這是因?yàn)槲覀冊(cè)趯?shí)現(xiàn)過(guò)程中使用了如下代碼：
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Bootstrap每天必學(xué)之導(dǎo)航條
- Bootstrap實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄效果
- Bootstrap實(shí)現(xiàn)默認(rèn)導(dǎo)航欄效果
- Bootstrap每天必學(xué)之導(dǎo)航
- Bootstrap~多級(jí)導(dǎo)航(級(jí)聯(lián)導(dǎo)航)的實(shí)現(xiàn)效果【附代碼】
- 第一次接觸神奇的Bootstrap菜單和導(dǎo)航
- Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
- Bootstrap每天必學(xué)之附加導(dǎo)航（Affix）插件
- Bootstrap每天必學(xué)之響應(yīng)式導(dǎo)航、輪播圖
- 第一次接觸神奇的Bootstrap導(dǎo)航條
相關(guān)文章
async、await是es7里面的新語(yǔ)法，async申明一個(gè)function是異步，而await等待一個(gè)異步方法執(zhí)行完成。替代promise中的then。async函數(shù)返回一個(gè)Promise對(duì)象，當(dāng)函數(shù)執(zhí)行的時(shí)候，一旦遇到await就會(huì)先返回，等到觸發(fā)的異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語(yǔ)句。2023-01-01
JavaScript實(shí)現(xiàn)隱藏省略文字效果的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)隱藏省略文字效果的方法,涉及javascript基于事件響應(yīng)實(shí)現(xiàn)頁(yè)面字符串元素的獲取、截取、設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
JavaScript實(shí)現(xiàn)HTML5游戲斷線自動(dòng)重連的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)HTML5游戲斷線自動(dòng)重連的方法,需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)下拉篩選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
JS中Map、WeakMap和Object的區(qū)別解析
Map、WeakMap和Object都是JavaScript中用于存儲(chǔ)鍵值對(duì)的數(shù)據(jù)結(jié)構(gòu)，它們?cè)阪I類型、垃圾回收、可枚舉性、方法和操作、以及繼承等方面存在一些區(qū)別，適用于不同的場(chǎng)景，本文給大家詳細(xì)講解js map、weakmap和object區(qū)別，需要的朋友可以參考下2023-04-04
Draggable Elements 元素拖拽功能實(shí)現(xiàn)代碼
雖說(shuō)js框架到處都是, 都封裝了很多實(shí)用的功能,能快速的讓我們實(shí)現(xiàn)如動(dòng)畫,元素拖拽等功能, 不過(guò)由于好奇心的驅(qū)使, 有時(shí)想一探究竟, 看看一些功能是如何實(shí)現(xiàn)的2011-03-03
平常，我們經(jīng)常使用Gif格式的圖片以保持圖片在瀏覽器中透明，以支持底色。但由于IE瀏覽器本身的原因，我們無(wú)法使透明的PNG圖片透明起來(lái)。那么，如何將它在IE瀏覽器下變得透明呢？2008-09-09
在開始設(shè)計(jì)你的腳本之前，要考慮的第一件事情就是檢查一下你要為其編寫腳本的HTML代碼，看看有什么東西可以幫助你達(dá)到目的。2008-10-10
js獲得指定控件輸入光標(biāo)的坐標(biāo)兼容IE,Chrome,火狐等多種主流瀏覽器
js獲得指定控件光標(biāo)的坐標(biāo)，兼容IE,Chrome,火狐等多種主流瀏覽器，實(shí)現(xiàn)代碼及調(diào)用代碼如下，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-05-05
淺談javascript的url參數(shù)parse和build函數(shù)
下面小編就為大家?guī)?lái)一篇淺談javascript的url參數(shù)parse和build函數(shù)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03