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="#">首頁 <span class="badge">42</span></a>
</li>
<li>
<a href="#">簡介</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> 首頁 </a>
</li>
<li>
<a href="#">簡介</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>
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
element-ui組件中input等的change事件中傳遞自定義參數(shù)
這篇文章主要介紹了element-ui組件中的input等的change事件中傳遞自定義參數(shù)的實(shí)例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
解決window.opener=null;window.close(),只支持IE6不支持IE7,IE8的問題
本篇文章主要是對window.opener=null;window.close(),只支持IE6不支持IE7,IE8的解決方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
JavaScript定時(shí)器setTimeout()和setInterval()詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript定時(shí)器setTimeout()和setInterval()的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
每天一對象,今天我們也來new一個(gè)。沒有系統(tǒng)的學(xué)過JS，沒有特別的寫過一個(gè)比較出色的類庫，沒有運(yùn)用過一個(gè)很強(qiáng)的類庫，prototype.js在進(jìn)行著，慢慢的前進(jìn)相信不久的將來就可以應(yīng)用prototype.js來開發(fā)自己的應(yīng)用程序了。2011-01-01
babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)化為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。這篇文章主要介紹了babel的使用以及安裝配置,需要的朋友可以參考下2018-02-02
JavaScript對象數(shù)組如何按指定屬性和排序方向進(jìn)行排序
這篇文章主要介紹了JavaScript對象數(shù)組如何按指定屬性和排序方向進(jìn)行排序的相關(guān)資料,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
小程序數(shù)據(jù)緩存機(jī)制應(yīng)用實(shí)現(xiàn)
這篇文章主要介紹了小程序數(shù)據(jù)緩存機(jī)制應(yīng)用實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要介紹了小程序錄音功能實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
一文概述ES7~12的語法及其相關(guān)使用規(guī)則
隨著JavaScript這門語言越來越流行，使得JavaScript這門語言越來越完善，這篇文章主要介紹了一文概述ES7~12的語法及其相關(guān)使用規(guī)則，需要的朋友可以參考下2023-01-01
本文給大家分享一段給url參數(shù)加密解密的javascript代碼，非常的好用，有需要的小伙伴直接拿走吧2014-11-11