Bootstrap選項卡學習筆記分享
更新時間：2017年02月13日 14:25:57 作者：erdouzhang
這篇文章主要為大家詳細介紹了Bootstrap選項卡學習筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Bootstrap選項卡的學習筆記，供大家參考，具體內容如下
tab選項卡
<body>
<div class="container">
<!-- tab選項卡 -->
<ul class="nav nav-tabs">
<li class="active"><a href="#pan1" data-toggle="tab">發(fā)現(xiàn)</a></li>
<li><a href="#pan2" data-toggle="tab">搜索</a></li>
<li><a href="#pan3" data-toggle="tab">工具</a></li>
</ul>
<!-- 面板 -->
<div class="tab-content">
<div class="tab-pane active" id="pan1">發(fā)現(xiàn)面板內容發(fā)現(xiàn)面板內容</div>
<div class="tab-pane fade in" id="pan2">搜索面板內容搜索面板內容</div>
<div class="tab-pane fade" id="pan3">工具面板內容工具面板內容</div>
</div>
</div>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>
膠囊選項卡
<body>
<div class="container">
<!-- 膠囊選項卡 -->
<ul class="nav nav-pills">
<li class="active"><a href="#pan1" data-toggle="pill">發(fā)現(xiàn)</a></li>
<li><a href="#pan2" data-toggle="pill">搜索</a></li>
<li><a href="#pan3" data-toggle="pill">工具</a></li>
</ul>
<!-- 面板 -->
<div class="tab-content">
<div class="tab-pane active" id="pan1">發(fā)現(xiàn)面板內容發(fā)現(xiàn)面板內容</div>
<div class="tab-pane" id="pan2">搜索面板內容搜索面板內容</div>
<div class="tab-pane" id="pan3">工具面板內容工具面板內容</div>
</div>
</div>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了如何在 TypeScript 中聲明全局變量,在TypeScript中,可以使用declare關鍵字來聲明全局變量,這樣的聲明告訴編譯器該變量是在其他地方定義的,而不需要實際的實現(xiàn),文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-08-08
TypeScript判斷兩個數(shù)組的內容是否相等的實現(xiàn)
本文主要介紹了TypeScript?判斷兩個數(shù)組的內容是否相等，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-11-11
這篇文章主要給大家介紹了關于javascript實現(xiàn)拍照功能的相關資料, 最近做項目,遇到一個正常但又少見的需求之拍照,文中給出了詳細的代碼示例,需要的朋友可以參考下2023-07-07
JavaScript的setTimeout與setInterval是兩個很容易欺騙別人感情的方法,因為我們開始常常以為調用了就會按既定的方式執(zhí)行, 我想不少人都深有同感2010-10-10
搜索框無論是在電商網(wǎng)站還是小程序中都很常見，這篇文章主要就為大家詳細介紹了小程序如何實現(xiàn)搜索框，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了bootstrap表單按回車會自動刷新頁面的問題及解決辦法，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)簡單聊天室，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
JS 退出系統(tǒng)并跳轉到登錄界面的實現(xiàn)代碼
這篇文章介紹了退出系統(tǒng)后跳轉到登陸頁面的簡單JS代碼，有需要的朋友可以參考一下2013-06-06
使用flutter創(chuàng)建可移動的stack小部件功能
本文主要介紹我為桌面和 Web 設計的一個超級秘密 Flutter 項目使用了畫布和可拖動節(jié)點界面。本教程將展示我如何使用堆棧來使用小部件完成可拖動功能,需要的朋友可以參考下2021-10-10
bootstrap使用validate實現(xiàn)簡單校驗功能
這篇文章主要為大家詳細介紹了bootstrap使用validate實現(xiàn)簡單校驗功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12