首頁 > 開發者 > JavaScript
很棒的Bootstrap選項卡轉場效果，bootstrap選項卡切換
今天學習了Bootstrap的選項卡，在這裡分享一下，具體解釋代碼中都有，不再重複了。
先看一下吧，顯目一些！
實現代碼：
<!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>
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
