最近一個小項目需要用Tab標簽切換顯示不同div內容，用到了Bootstrap里面的東西，但是在Bootstrap3教程里卻沒有找到對應的代碼，這里記錄一下，方便以后快速查閱學習。
代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <style> html, body { height: 100%; width: 100%; padding: 0px; margin: 0px; overflow: hidden; } .bg_main { height: 100%; width: 100%; background: gray; margin: 0 auto; } .bg_left { position: relative; top: 3.5%; left: 2.5%; float: left; width: 15%; height: 85%; background: #404040; color: white; } .bg_body { position: relative; top: 3.5%; left: 2.5%; float: left; width: 80%; height: 85%; background: green; color: white; display: flex; align-items: center; justify-content: center; } </style> </head> <body> <div class="bg_main"> <div class="bg_left"> <ul class="nav nav-pills nav-stacked" style="width: 100%;"> <li class="active"><a href="#home" data-toggle="tab">檢測1</a></li> <li><a href="#profile" data-toggle="tab">檢測2</a></li> <li><a href="#haha" data-toggle="tab">檢測3</a></li> </ul> </div> <div class="bg_body"> <div class="tab-content" style="float: left; height: 90%;width: 90%; background: gray;"> <div class="tab-pane active" id="home">檢測1內容 </div> <div class="tab-pane" id="profile">檢測2內容</div> <div class="tab-pane" id="haha">檢測3內容</div> </div> </div> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </body> </html>
運行效果：
