很棒的Bootstrap選項卡切換效果
更新時間：2016年07月01日 14:36:22 作者：super_yang_android
這篇文章主要為大家分享了一款很棒的Bootstrap選項卡切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
今天學習了Bootstrap的選項卡，在這里分享一下，具體解釋代碼中都有，不再重復了。
先看一下效果圖吧，顯目一些！
實現(xiàn)代碼：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Bootstrap選項卡</title> <!-- 引入Bootstrap的樣式表 --> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css"> </head> <body> <h1 class="btn btn-success btn-large"><i class="icon-user icon-white"></i>Hello world!</h1> <!-- nav 清除li的默認樣式 --> <!-- nav-tabs 定義選項卡的標題欄 --> <!-- tab-content 定義了選項卡的內容欄 --> <!-- 在內容欄中，每個子框都必須包含tab-pane類 --> <!-- a標簽中的href必須要和內容欄中的子框的id對應 --> <!-- active表示活動中的標題欄和內容子框，且每個標簽欄都必須對于一個data-toggle='tab' --> <ul class="nav nav-tabs"> <li><a href="#tab1" data-toggle="tab">li1</a></li> <li><a href="#tab2" data-toggle="tab">li2</a></li> <li class="active"><a href="#tab3" data-toggle="tab">li3</a></li> <li><a href="#tab4" data-toggle="tab">li4</a></li> </ul> <div class="tab-content"> <div class="tab-pane" id="tab1"><img src="img/1.png"></div> <div class="tab-pane" id="tab2"><img src="img/2.png"></div> <div class="active tab-pane" id="tab3"><img src="img/3.png"></div> <div class="tab-pane" id="tab4"><img src="img/4.png"></div> </div> <!-- 引入Bootstrap的js文件 --> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/bootstrap-tab.js"></script> </body> </html>
如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
詳解Javascript中document.execCommand()的用法以及指令參數(shù)列表
execCommand方法是執(zhí)行一個對當前文檔，當前選擇或者給出范圍的命令。在HTML5中，execCommand可以通過JavaScript代碼來調用，使得開發(fā)者可以在網(wǎng)頁中實現(xiàn)一些復雜的文本操作。在HTML編輯器中這個命令用得很多，酷炫的強大功能。2023-07-07![[js高手之路]單例模式實現(xiàn)模態(tài)框的示例](http://img.jbzj.com/images/xgimg/bcimg1.png)
[js高手之路]單例模式實現(xiàn)模態(tài)框的示例
下面小編就為大家?guī)硪黄猍js高手之路]單例模式實現(xiàn)模態(tài)框的示例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
今天小編就為大家分享一篇layer彈出層全屏及關閉方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了JS表單驗證源碼（帶錯誤提示及密碼等級）,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)菜單左右聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
js實現(xiàn)統(tǒng)計字符串中特定字符出現(xiàn)個數(shù)的方法
這篇文章主要介紹了js實現(xiàn)統(tǒng)計字符串中特定字符出現(xiàn)個數(shù)的方法,涉及javascript針對字符串中字符運算操作相關技巧,需要的朋友可以參考下2016-08-08
比較詳細的實例分析了dom的一些常用方法2008-09-09
這篇文章主要介紹了微信小程序分包加載代碼實現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
JS頁面動態(tài)繪圖工具SVG，Canvas，VML介簡介
這篇文章主要介紹了JS頁面動態(tài)繪圖工具SVG，Canvas，VML介簡介,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-10-10
JS中call(),apply(),bind()函數(shù)的區(qū)別與用法詳解
這篇文章主要介紹了JS中call(),apply(),bind()函數(shù)的高級用法詳解,需要的朋友可以參考下2022-12-12