Bootstrap實(shí)現(xiàn)的標(biāo)簽頁內(nèi)容切換顯示效果示例

更新時(shí)間：2017年05月25日 10:50:13 作者：騎小豬追火車

這篇文章主要介紹了Bootstrap實(shí)現(xiàn)的標(biāo)簽頁內(nèi)容切換顯示效果,結(jié)合完整實(shí)例形式分析了基于Bootstrap實(shí)現(xiàn)的標(biāo)簽頁內(nèi)容切換顯示功能相關(guān)操作技巧,非常簡單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了Bootstrap實(shí)現(xiàn)的標(biāo)簽頁內(nèi)容切換顯示效果。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Bootstrap 實(shí)例 - 標(biāo)簽頁（Tab）插件</title>
  <link  rel="external nofollow" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
  <li class="active col-md-4"><a href="#dingcan" rel="external nofollow" data-toggle="tab">訂餐</a></li>
  <li class="col-md-4"><a href="#yonghu" rel="external nofollow" data-toggle="tab">用戶中心</a></li>
  <li class="col-md-4"><a href="#dingdan" rel="external nofollow" data-toggle="tab">訂單中心</a></li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade in active" id="dingcan">
   <p>訂餐</p>
  </div>
  <div class="tab-pane fade" id="yonghu">
   <p>用戶中心</p>
  </div>
  <div class="tab-pane fade" id="dingdan">
   <p>訂單中心</p>
  </div>
</div>
</body>
</html>

PS：關(guān)于bootstrap布局，這里再為大家推薦一款本站的在線可視化布局工具供大家參考使用：

在線bootstrap可視化布局編輯工具：
http://tools.jb51.net/aideddesign/layoutit

希望本文所述對(duì)大家基于bootstrap的程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

attachEvent的使用方法與傳遞參數(shù)[IE|firefox]
attachEvent的使用方法與傳遞參數(shù)[IE|firefox]...
2007-05-05
多種js圖片預(yù)加載實(shí)現(xiàn)方式分享
這篇文章主要為大家詳細(xì)介紹了多種js圖片預(yù)加載實(shí)現(xiàn)方式，包括html標(biāo)簽或css加載圖片、純js實(shí)現(xiàn)預(yù)加載，感興趣的小伙伴們可以參考一下
2016-02-02
JS表格組件神器bootstrap table使用指南詳解
這篇文章主要為大家詳細(xì)介紹了JS表格組件神器bootstrap table使用指南，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
詳解如何使用Flutter動(dòng)畫魔法使UI元素活起來
這篇文章主要為大家介紹了如何使用Flutter動(dòng)畫魔法使UI元素活起來方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
分享一道筆試題[有n個(gè)直線最多可以把一個(gè)平面分成多少個(gè)部分]
今天地鐵上和一個(gè)同事閑聊,給我說的一道題,回來想了想,寫出來的,說來慚愧,我用的是行測方面數(shù)字推理里面的知識(shí)歸納出來的,當(dāng)然這個(gè)可以用遞歸寫出來,說說我的代碼,以及遞歸的思路
2012-10-10
Peer.js 構(gòu)建視頻聊天應(yīng)用使用詳解
這篇文章主要為大家介紹了Peer.js 構(gòu)建視頻聊天應(yīng)用使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
layer.confirm()右邊按鈕實(shí)現(xiàn)href的例子
今天小編就為大家分享一篇layer.confirm()右邊按鈕實(shí)現(xiàn)href的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JS自定義功能函數(shù)實(shí)現(xiàn)動(dòng)態(tài)添加網(wǎng)址參數(shù)修改網(wǎng)址參數(shù)值
本文自定義JS功能函數(shù)可動(dòng)態(tài)添加網(wǎng)址參數(shù),修改網(wǎng)址參數(shù)值，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
2013-08-08
JavaScript ECMA-262-3 深入解析（二）：變量對(duì)象實(shí)例詳解
這篇文章主要介紹了JavaScript ECMA-262-3變量對(duì)象,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript ECMA變量對(duì)象相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
JS 文字符串轉(zhuǎn)換unicode編碼函數(shù)
AJAX傳遞中文字符串時(shí)必須把中文字符串編碼成unicode,一般會(huì)用到JS的自帶函數(shù)escape().不過找到了更好的函數(shù)來確決中文字符轉(zhuǎn)換成unicode編碼的函數(shù)
2009-05-05