很棒的Bootstrap選項(xiàng)卡切換效果

更新時間：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)容欄中，每個子框都必須包含tab-pane類 -->
<!-- a標(biāo)簽中的href必須要和內(nèi)容欄中的子框的id對應(yīng) -->
<!-- active表示活動中的標(biāo)題欄和內(nèi)容子框，且每個標(biāo)簽欄都必須對于一個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個精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript中的五種基本數(shù)據(jù)類型
在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攔截器使用詳解
這篇文章主要介紹了微信小程序wx.request攔截器詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
JavaScript之瀏覽器對象_動力節(jié)點(diǎn)Java學(xué)院整理
JavaScript可以獲取瀏覽器提供的很多對象，并進(jìn)行操作。下面通過本文給大家介紹JavaScript之瀏覽器對象的相關(guān)知識，一起看看吧
2017-07-07
mysql輸出數(shù)據(jù)賦給js變量報(bào)unterminated string literal錯誤原因
mysql 數(shù)據(jù)庫數(shù)據(jù)賦給js變量報(bào)unterminated string literal錯誤原因
2010-05-05
javascript基于定時器實(shí)現(xiàn)進(jìn)度條功能實(shí)例
這篇文章主要介紹了javascript基于定時器實(shí)現(xiàn)進(jìn)度條功能,簡單分析了javascript定時器的功能、使用方法并給出了基于定時器實(shí)現(xiàn)的進(jìn)度條功能實(shí)例,需要的朋友可以參考下
2017-10-10
JavaScript函數(shù)返回值的具體使用
本文主要介紹了JavaScript函數(shù)返回值,包括基本返回值、多返回值、異步函數(shù)的返回值等,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-01-01
JavaScript對數(shù)字的判斷與處理實(shí)例分析
這篇文章主要介紹了JavaScript對數(shù)字的判斷與處理方法,實(shí)例分析了javascript判斷數(shù)字的常見方法與針對數(shù)字處理的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
JS實(shí)現(xiàn)在Repeater控件中創(chuàng)建可隱藏區(qū)域的代碼
在WEB應(yīng)用中，如何才能使應(yīng)用高效率呢?如何才能吸引用戶呢?這的確是個大學(xué)問,頁面的內(nèi)容,色搭配等都十分重要。但不可忽視的是,多數(shù)情況下，對于數(shù)據(jù)的呈現(xiàn)方式也是十分重要的。
2010-09-09
JS實(shí)現(xiàn)網(wǎng)頁每隔3秒彈出一次對話框的方法
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁每隔3秒彈出一次對話框的方法,涉及JavaScript結(jié)合時間函數(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