Bootstrap組件學(xué)習(xí)之導(dǎo)航、標(biāo)簽、面包屑導(dǎo)航(精品)
更新時(shí)間：2016年05月17日 16:55:08 作者：雨鈍風(fēng)輕
這篇文章主要介紹了Bootstrap組件學(xué)習(xí)之導(dǎo)航、標(biāo)簽、面包屑導(dǎo)航(精品)的相關(guān)資料,需要的朋友可以參考下
導(dǎo)航
Bootstrap中可用的導(dǎo)航有相似的標(biāo)記，用基類.nav開頭，這是相似的部分。改變修飾類可以改變樣式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <link rel="stylesheet" >-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
.container {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-3">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!--<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>-->
<!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>-->
</body>
</html>
1、標(biāo)簽頁
注意.nav-tabs類需要.nav基類。只要加上.nav-stacked,可以豎直堆疊。
<ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul>
2、膠囊式標(biāo)簽頁
nav-tabs用.nav-pills代替。
禁用的鏈接:
<li ><a >Profile</a></li>
沒有鼠標(biāo)懸停效果,鏈接功能沒有受到影響
3、使用下拉菜單
<ul class="nav nav-pills"> <li class="dropdown active"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"> </span> </a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </li> <li><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul>
4、可用的變體
<span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span>
5、面包屑導(dǎo)航
<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol>
以上所述是小編給大家介紹的Bootstrap組件學(xué)習(xí)之導(dǎo)航、標(biāo)簽、面包屑導(dǎo)航(精品)的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
JS實(shí)現(xiàn)禁止鼠標(biāo)右鍵的功能
遇到網(wǎng)頁上有精美圖片或者精彩文字想保存時(shí)，通常大家都是選中目標(biāo)后按鼠標(biāo)右鍵，在彈出菜單中選擇“圖片另存為”或“復(fù)制”來達(dá)到我們的目的。但是，目前有許多網(wǎng)頁都屏蔽了鼠標(biāo)右鍵，那么用js如何實(shí)現(xiàn)禁止鼠標(biāo)右鍵的功能呢？下面小編給大家介紹下2016-10-10
js通過八個(gè)點(diǎn) 拖動(dòng)改變div大小的實(shí)現(xiàn)方法
本篇文章主要是對(duì)js通過八個(gè)點(diǎn) 拖動(dòng)改變div大小的實(shí)現(xiàn)方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-03-03
js實(shí)現(xiàn)七夕表白彈幕效果 jQuery實(shí)現(xiàn)彈幕技術(shù)
這篇文章主要介紹了js實(shí)現(xiàn)七夕表白彈幕效果，jQuery實(shí)現(xiàn)彈幕技術(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序工具函數(shù)封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
Webpack中l(wèi)oader打包各種文件的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Webpack中l(wèi)oader打包各種文件的相關(guān)資料，其中包括處理css文件、less文件、scss文件、url地址以及ES6高級(jí)語法的方法，需要的朋友可以參考下2019-09-09
javascript實(shí)現(xiàn)一個(gè)網(wǎng)頁加載進(jìn)度loading
本篇文章主要介紹了javascript實(shí)現(xiàn)一個(gè)頁面加載進(jìn)度loading的具體步驟以及示例代碼，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
Echarts利用多X軸實(shí)現(xiàn)七天天氣預(yù)報(bào)效果的示例代碼
本文主要介紹了Echarts利用多X軸實(shí)現(xiàn)七天天氣預(yù)報(bào)效果的示例代碼，對(duì)于UI給出的設(shè)計(jì)圖，各個(gè)氣象網(wǎng)站都有類似的效果，分享給大家2021-10-10
分享十八個(gè)殺手級(jí)JavaScript單行代碼
這篇文章主要給大家分享了十八個(gè)殺手級(jí)JavaScript單行代碼,這些單行代碼可以幫助你提高工作效率并可以幫助調(diào)試代碼,對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了js實(shí)現(xiàn)進(jìn)度條的方法,實(shí)例分析了兩種不同的實(shí)現(xiàn)方法,并說明了setTimeout和setInterval的使用區(qū)別,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
6種javascript顯示當(dāng)前系統(tǒng)時(shí)間代碼
這篇文章主要介紹了6種javascript顯示當(dāng)前系統(tǒng)時(shí)間代碼，歡迎大家學(xué)習(xí)借鑒2015-12-12