選項卡--膠囊式選項卡（nav-pills）
在Bootstrap除了可以讓 nav-tabs 具有選項卡的切換功能之外，還可以對膠囊式 nav-pills 導航也具有選項卡的功能。我們只需要將 nav-tabs 換成 nav-pills，另外關(guān)鍵一點是將 data-toggle="tab"換成data-toggle="pill"。
下面的示例是將上面的 nav-tabs 換成 nav-pills：
<!-- 選項卡組件（菜單項nav-pills）-->
<ul id="myTab" class="nav nav-pills" role="tablist">
<li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li>
<li><a href="#rule" role="tab" data-toggle="pill">規(guī)則</a></li>
<li><a href="#forum" role="tab" data-toggle="pill">論壇</a></li>
<li><a href="#security" role="tab" data-toggle="pill">安全</a></li>
<li><a href="#welfare" role="tab" data-toggle="pill">公益</a></li>
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div>
<div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div>
<div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div>
<div class="tab-pane fade" id="security">安全內(nèi)容面板</div>
<div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div>
</div>
運行效果如下：
任務
我來試試：把右側(cè) nav-tab 的選項卡改成 nav-pills 選擇項卡
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>聲明式觸發(fā)選項卡（二）</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 選項卡組件（菜單項nav-pills）-->
<ul id="myTab" class="nav nav-pills" role="tablist">
<li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li>
<li><a href="#rule" role="tab" data-toggle="pill">規(guī)則</a></li>
<li><a href="#forum" role="tab" data-toggle="pill">論壇</a></li>
<li><a href="#security" role="tab" data-toggle="pill">安全</a></li>
<li><a href="#welfare" role="tab" data-toggle="pill">公益</a></li>
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div>
<div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div>
<div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div>
<div class="tab-pane fade" id="security">安全內(nèi)容面板</div>
<div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div>
</div>
<!--下面是代碼任務部分-->
<!-- 選項卡組件（菜單項nav-tabs）-->
<ul id="myTab2" class="nav nav-tabs" role="tablist">
<li><a href="" role="tab">娛樂</a></li>
<li><a href="" role="tab">房產(chǎn)</a></li>
<li><a href="" role="tab">國內(nèi)</a></li>
<li><a href="" role="tab">國外</a></li>
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent2" class="tab-content">
<div class="tab-pane fade in active" id="">娛樂內(nèi)容面板</div>
<div class="tab-pane fade" id="">房產(chǎn)內(nèi)容面板</div>
<div class="tab-pane fade" id="">國內(nèi)內(nèi)容面板</div>
<div class="tab-pane fade" id="">國外內(nèi)容面板</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
body{padding:10px;}
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
