很棒的Bootstrap選項(xiàng)卡切換效果
更新時(shí)間：2016年07月01日 14:36:22 作者：super_yang_android
這篇文章主要為大家分享了一款很棒的Bootstrap選項(xiàng)卡切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
今天學(xué)習(xí)了Bootstrap的選項(xiàng)卡，在這里分享一下，具體解釋代碼中都有，不再重復(fù)了。
先看一下效果圖吧，顯目一些！
實(shí)現(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選項(xiàng)卡</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的默認(rèn)樣式 --> <!-- nav-tabs 定義選項(xiàng)卡的標(biāo)題欄 --> <!-- tab-content 定義了選項(xiàng)卡的內(nèi)容欄 --> <!-- 在內(nèi)容欄中，每個(gè)子框都必須包含tab-pane類 --> <!-- a標(biāo)簽中的href必須要和內(nèi)容欄中的子框的id對(duì)應(yīng) --> <!-- active表示活動(dòng)中的標(biāo)題欄和內(nèi)容子框，且每個(gè)標(biāo)簽欄都必須對(duì)于一個(gè)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>
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- bootstrap選項(xiàng)卡擴(kuò)展功能詳解
- 簡單實(shí)現(xiàn)bootstrap選項(xiàng)卡效果
- bootstrap選項(xiàng)卡使用方法解析
- bootstrap導(dǎo)航、選項(xiàng)卡實(shí)現(xiàn)代碼
- 使用Bootstrap Tabs選項(xiàng)卡Ajax加載數(shù)據(jù)實(shí)現(xiàn)
- Bootstrap選項(xiàng)卡動(dòng)態(tài)切換效果
- BootStrap tab選項(xiàng)卡使用小結(jié)
- 精彩的Bootstrap案例分享 重點(diǎn)在注釋!(選項(xiàng)卡、柵格布局)
- 全面解析Bootstrap中tab（選項(xiàng)卡）的使用方法
- bootstrap實(shí)現(xiàn)tab選項(xiàng)卡切換
相關(guān)文章
在javascript中申明變量使用的關(guān)鍵字都是var，這點(diǎn)與其他的編程語言不盡相同，但是javascript亦含有五種基本的數(shù)據(jù)類型（也可以說是簡單數(shù)據(jù)類型），它們分別是：Undefined，Null，Boolean，Number和String。還含有一種復(fù)雜數(shù)據(jù)類型—Object。這里我們不談復(fù)雜數(shù)據(jù)類型2015-08-08
這篇文章主要介紹了微信小程序wx.request攔截器詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
JavaScript之瀏覽器對(duì)象_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
JavaScript可以獲取瀏覽器提供的很多對(duì)象，并進(jìn)行操作。下面通過本文給大家介紹JavaScript之瀏覽器對(duì)象的相關(guān)知識(shí)，一起看看吧2017-07-07
mysql輸出數(shù)據(jù)賦給js變量報(bào)unterminated string literal錯(cuò)誤原因
mysql 數(shù)據(jù)庫數(shù)據(jù)賦給js變量報(bào)unterminated string literal錯(cuò)誤原因2010-05-05
javascript基于定時(shí)器實(shí)現(xiàn)進(jìn)度條功能實(shí)例
這篇文章主要介紹了javascript基于定時(shí)器實(shí)現(xiàn)進(jìn)度條功能,簡單分析了javascript定時(shí)器的功能、使用方法并給出了基于定時(shí)器實(shí)現(xiàn)的進(jìn)度條功能實(shí)例,需要的朋友可以參考下2017-10-10
本文主要介紹了JavaScript函數(shù)返回值,包括基本返回值、多返回值、異步函數(shù)的返回值等,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
JavaScript對(duì)數(shù)字的判斷與處理實(shí)例分析
這篇文章主要介紹了JavaScript對(duì)數(shù)字的判斷與處理方法,實(shí)例分析了javascript判斷數(shù)字的常見方法與針對(duì)數(shù)字處理的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
JS實(shí)現(xiàn)在Repeater控件中創(chuàng)建可隱藏區(qū)域的代碼
在WEB應(yīng)用中，如何才能使應(yīng)用高效率呢?如何才能吸引用戶呢?這的確是個(gè)大學(xué)問,頁面的內(nèi)容,色搭配等都十分重要。但不可忽視的是,多數(shù)情況下，對(duì)于數(shù)據(jù)的呈現(xiàn)方式也是十分重要的。2010-09-09
JS實(shí)現(xiàn)網(wǎng)頁每隔3秒彈出一次對(duì)話框的方法
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁每隔3秒彈出一次對(duì)話框的方法,涉及JavaScript結(jié)合時(shí)間函數(shù)遞歸調(diào)用的相關(guān)技巧,非常簡單,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
JavaScript實(shí)現(xiàn)捕獲鼠標(biāo)坐標(biāo)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)捕獲鼠標(biāo)坐標(biāo)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04