Bootstrap基本組件學習筆記之導航(10)
更新時間：2016年12月07日 09:01:34 作者：kikay
這篇文章主要為大家詳細介紹了Bootstrap基本組件學習筆記之導航,具有一定的參考價值，感興趣的小伙伴們可以參考一下
Bootstrap的導航很有特色，主要分為膠囊式導航、面包屑導航、頭部導航共3大類，可以滿足絕大部分需求。
0x01 膠囊式導航
膠囊式導航采用的是無序列表ul來實現：
<!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>膠囊式導航</title> </head> <body> <div class="container"> <div class="page-header"> <h1>膠囊式導航</h1> </div> <div class="col-lg-3"> <h3>水平樣式</h3> <ul class="nav nav-pills"> <li class="active"><a href="#">首頁</a></li> <li><a href="#">新聞</a></li> <li><a href="#">關于</a></li> </ul> </div> <div class="col-lg-3"> <h3>垂直樣式</h3> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">首頁</a></li> <li><a href="#">新聞</a></li> <li><a href="#">關于</a></li> </ul> </div> </div> </body> </html>
效果如下：
0x02面包屑導航
面包屑導航采用的是有序列表ol來實現：
<!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>面包屑導航</title> </head> <body> <div class="container"> <div class="page-header"> <h1>面包屑導航</h1> </div> <div class="breadcrumb"> <li class="active"><a href="#">學校</a></li> <li><a href="#">一年級</a></li> <li><a href="#">一班</a></li> </div> </div> </body> </html>
效果如下：
0x03 頭部導航
頭部導航在網站開發(fā)中比較常見，依賴于Bootstrap庫的collapse插件?；緲邮饺缦拢?/p>
<!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>頭部導航</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">網站標題</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首 頁</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>頭部導航</h1>
</div>
<div>
<p>內容</p>
</div>
</div>
</body>
</html>
效果如下：
當屏幕寬度很窄時，會出現下面樣式：
這是因為我們在實現過程中使用了如下代碼：
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
async、await是es7里面的新語法，async申明一個function是異步，而await等待一個異步方法執(zhí)行完成。替代promise中的then。async函數返回一個Promise對象，當函數執(zhí)行的時候，一旦遇到await就會先返回，等到觸發(fā)的異步操作完成，再接著執(zhí)行函數體內后面的語句。2023-01-01
這篇文章主要介紹了JavaScript實現隱藏省略文字效果的方法,涉及javascript基于事件響應實現頁面字符串元素的獲取、截取、設置等相關操作技巧,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了JavaScript實現HTML5游戲斷線自動重連的方法,需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細介紹了微信小程序實現下拉篩選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
JS中Map、WeakMap和Object的區(qū)別解析
Map、WeakMap和Object都是JavaScript中用于存儲鍵值對的數據結構，它們在鍵類型、垃圾回收、可枚舉性、方法和操作、以及繼承等方面存在一些區(qū)別，適用于不同的場景，本文給大家詳細講解js map、weakmap和object區(qū)別，需要的朋友可以參考下2023-04-04
雖說js框架到處都是, 都封裝了很多實用的功能,能快速的讓我們實現如動畫,元素拖拽等功能, 不過由于好奇心的驅使, 有時想一探究竟, 看看一些功能是如何實現的2011-03-03
平常，我們經常使用Gif格式的圖片以保持圖片在瀏覽器中透明，以支持底色。但由于IE瀏覽器本身的原因，我們無法使透明的PNG圖片透明起來。那么，如何將它在IE瀏覽器下變得透明呢？2008-09-09
在開始設計你的腳本之前，要考慮的第一件事情就是檢查一下你要為其編寫腳本的HTML代碼，看看有什么東西可以幫助你達到目的。2008-10-10
js獲得指定控件輸入光標的坐標兼容IE,Chrome,火狐等多種主流瀏覽器
js獲得指定控件光標的坐標，兼容IE,Chrome,火狐等多種主流瀏覽器，實現代碼及調用代碼如下，感興趣的朋友可以參考下哈，希望對你有所幫助2013-05-05
淺談javascript的url參數parse和build函數
下面小編就為大家?guī)硪黄獪\談javascript的url參數parse和build函數。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03