快捷導(dǎo)航

很棒的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類(lèi) -->
<!-- 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è)精彩的專(zhuān)題：

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

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

Bootstrap插件使用教程

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

您可能感興趣的文章:

相關(guān)文章

詳解Javascript中document.execCommand()的用法以及指令參數(shù)列表
execCommand方法是執(zhí)行一個(gè)對(duì)當(dāng)前文檔，當(dāng)前選擇或者給出范圍的命令。在HTML5中，execCommand可以通過(guò)JavaScript代碼來(lái)調(diào)用，使得開(kāi)發(fā)者可以在網(wǎng)頁(yè)中實(shí)現(xiàn)一些復(fù)雜的文本操作。在HTML編輯器中這個(gè)命令用得很多，酷炫的強(qiáng)大功能。
2023-07-07
[js高手之路]單例模式實(shí)現(xiàn)模態(tài)框的示例
下面小編就為大家?guī)?lái)一篇[js高手之路]單例模式實(shí)現(xiàn)模態(tài)框的示例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
layer彈出層全屏及關(guān)閉方法
今天小編就為大家分享一篇layer彈出層全屏及關(guān)閉方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
分享JS表單驗(yàn)證源碼（帶錯(cuò)誤提示及密碼等級(jí)）
這篇文章主要介紹了JS表單驗(yàn)證源碼（帶錯(cuò)誤提示及密碼等級(jí)）,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-01-01
微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
js實(shí)現(xiàn)統(tǒng)計(jì)字符串中特定字符出現(xiàn)個(gè)數(shù)的方法
這篇文章主要介紹了js實(shí)現(xiàn)統(tǒng)計(jì)字符串中特定字符出現(xiàn)個(gè)數(shù)的方法,涉及javascript針對(duì)字符串中字符運(yùn)算操作相關(guān)技巧,需要的朋友可以參考下
2016-08-08
javascript DOM實(shí)用學(xué)習(xí)資料
比較詳細(xì)的實(shí)例分析了dom的一些常用方法
2008-09-09
微信小程序分包加載代碼實(shí)現(xiàn)方法詳解
這篇文章主要介紹了微信小程序分包加載代碼實(shí)現(xiàn)方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
JS頁(yè)面動(dòng)態(tài)繪圖工具SVG，Canvas，VML介簡(jiǎn)介
這篇文章主要介紹了JS頁(yè)面動(dòng)態(tài)繪圖工具SVG，Canvas，VML介簡(jiǎn)介,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-10-10
JS中call(),apply(),bind()函數(shù)的區(qū)別與用法詳解
這篇文章主要介紹了JS中call(),apply(),bind()函數(shù)的高級(jí)用法詳解,需要的朋友可以參考下
2022-12-12