Bootstrap如何激活導(dǎo)航狀態(tài)
更新時(shí)間：2017年03月22日 09:10:28 作者：boonyaxnn
這篇文章主要為大家詳細(xì)介紹了Bootstrap如何激活導(dǎo)航狀態(tài)，包括膠囊式導(dǎo)航中的激活狀態(tài)和列表導(dǎo)航中的激活狀態(tài)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Bootstrap激活導(dǎo)航狀態(tài)的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap-激活導(dǎo)航狀態(tài)</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 150px;
padding-bottom: 40px;
font-family: '楷體';
font-size: 24px;
}
span.badge {
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<h3>膠囊式導(dǎo)航中的激活狀態(tài)</h3>
<ul class="nav nav-pills">
<li class="active">
<a href="#">首頁(yè) <span class="badge">42</span></a>
</li>
<li>
<a href="#">簡(jiǎn)介</a>
</li>
<li>
<a href="#">消息 <span class="badge" >3</span></a>
</li>
</ul>
<br>
<h3>列表導(dǎo)航中的激活狀態(tài)</h3>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
<li class="active">
<a href="#"> <span class="badge pull-right">42</span> 首頁(yè) </a>
</li>
<li>
<a href="#">簡(jiǎn)介</a>
</li>
<li>
<a href="#"> <span class="badge pull-right">3</span> 消息 </a>
</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
效果圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Js如何判斷客戶端是PC還是手持設(shè)備簡(jiǎn)單分析
在工作過(guò)程中，許多朋友會(huì)經(jīng)常用到j(luò)s判斷客戶端是PC還是手持設(shè)備，今天將提供以下方法，需要的朋友可以參考下2012-11-11
js 實(shí)現(xiàn)菜單左右滾動(dòng)顯示示例介紹
菜單左右滾動(dòng)顯示的實(shí)現(xiàn)方法有很多，在本文將為大家介紹下如何使用js實(shí)現(xiàn)，需要的朋友可以參考下，希望對(duì)大家有所幫助2013-11-11
javascript實(shí)現(xiàn)平滑無(wú)縫滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)平滑無(wú)縫滾動(dòng)的具體代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
JavaScript數(shù)組合并的8種常見(jiàn)方法小結(jié)
項(xiàng)目過(guò)程中經(jīng)常會(huì)遇到 JS 數(shù)組合并的情況,時(shí)常為這個(gè)糾結(jié),這里整理一下,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組合并的8種常見(jiàn)方法,需要的朋友可以參考下2022-11-11
去tx面試過(guò)幾次，基本都會(huì)考到數(shù)組去重。其實(shí)平時(shí)工作中幾乎不會(huì)用到，再者也沒(méi)認(rèn)真去了解過(guò)，所以基本上每次面到這里都會(huì)露出很大的馬腳，面試自然也over了2011-05-05
微信小程序保存圖片到相冊(cè)權(quán)限設(shè)置
這篇文章主要為大家詳細(xì)介紹了微信小程序保存圖片到相冊(cè)權(quán)限設(shè)置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04
Bootstrap模態(tài)框（Modal）實(shí)現(xiàn)過(guò)渡效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap模態(tài)框（Modal）實(shí)現(xiàn)過(guò)渡效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
javascript每日必學(xué)之繼承,介紹了有關(guān)繼承的相關(guān)內(nèi)容，感興趣的小伙伴們可以參考一下2016-02-02
本篇文章給大家詳細(xì)介紹了JavaScript中EventLoop的相關(guān)知識(shí)，有這方面需要的朋友參考學(xué)習(xí)下。2018-01-01
本文主要對(duì)常見(jiàn)的完全錯(cuò)誤的隨機(jī)排列算法進(jìn)行介紹分析，并介紹了經(jīng)典的隨機(jī)排列算法，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12