Bootstrap導航簡單實現代碼
更新時間：2017年03月06日 09:07:51 作者：deepquiet
這篇文章主要介紹了Bootstrap導航的簡單實現代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
Bootstrap導航的具體實現代碼，供大家參考，具體內容如下
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="external nofollow" rel="stylesheet">
<link rel="external nofollow" rel="stylesheet">
<style>
div{
border:1px solid #cccccc;
}
</style>
</head>
<body>
<div>
<!-- 標簽式 -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >home</a><li>
<li role="presentation"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >profile</a><li>
<li role="presentation"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Messages</a></li>
</ul>
<br/>
<br/>
<!-- 膠囊式 -->
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
<li role="presentation"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Profile</a></li>
<li role="presentation"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Messages</a></li>
</ul>
<br/>
<br/>
<!-- 垂直膠囊式 -->
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
<li role="presentation"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Profile</a></li>
<li role="presentation"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Messages</a></li>
</ul>
<br/>
<br/>
</div>
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script>
</body>
</html>
效果圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JS簡單實現點擊復制鏈接的方法,提供了2種簡單的復制鏈接操作方法供大家選擇使用,需要的朋友可以參考下2016-08-08
用js實現的客戶端即可實現md5值的代碼，一般情況下都是后臺語言才有的，客戶端也有了，方便有需要的朋友了。2011-02-02
這篇文章主要給大家介紹了Three.js基礎學習之場景對象的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用three.js具有一定的參考學習價值，需要的朋友們下面隨著小編來一起看看吧。2017-09-09
這篇文章主要為大家詳細介紹了js實現煙花效果，實現鼠標點擊出現模擬煙花爆炸的特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
使用weixin-java-tools完成微信授權登錄、微信支付的示例
這篇文章主要介紹了使用weixin-java-tools完成微信授權登錄、微信支付的示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了js實現彈窗猜數字游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了微信小程序開發(fā)中所碰到問題集錦，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-01-01
使用JavaScript判斷一個元素是否在可視范圍內的幾種方法
在Web開發(fā)中,有時我們需要知道一個元素是否在用戶的可視范圍內,以便執(zhí)行相應的操作,比如延遲加載圖片、實現懶加載、或是觸發(fā)動畫效果, 本文將詳細介紹使用 JavaScript 如何判斷一個元素是否在可視范圍內的幾種方法,需要的朋友可以參考下2024-02-02
JavaScript數組是一種特殊類型的對象,用于存儲多個值,數組中的每個值都有一個索引,索引從0開始,數組中的值可以是任何數據類型,包括數字、字符串、布爾值、對象和函數,2024-10-10
這篇文章主要介紹了JS隨機排序數組實現方法,結合具體實例形式對比分析了javascript針對數組進行隨機排序的相關操作技巧,需要的朋友可以參考下2017-10-10