3
選項卡會加載，但在單擊無效選項卡時，它會加載該內容，並且仍然具有來自其他選項卡的內容。所有來自其他標籤的內容在點擊該標籤時加載。Twitter Bootstrap選項卡 - 不隱藏每個選項卡上的內容點擊
鏈接到HTML：http://stl-sportszone.com/taco/
HTML - 加載默認BS NAV-標籤。
<div class="row">
<div class="span4">
<h2>Your Brands</h2>
</div>
<div class="span12">
<ul class="nav nav-tabs">
<li class="active"><a href="#pane1" data-toggle="tab">Sewing</a></li>
<li><a href="#pane2" data-toggle="tab">Vacs</a></li>
<li><a href="#pane3" data-toggle="tab">Commerical</a></li>
<li><a href="#pane4" data-toggle="tab">Fans</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="pane1">
<div class="row">
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
</div>
<div class="spacer10"></div>
<div class="row">
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="pane2">
<div class="row">
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="pane3">
<div class="row">
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="pane4">
<div class="row">
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
<div class="span3"><img src="http://placehold.it/200x145" alt="" class="pull-left img-polaroid"/></div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- /container -->
的Javascript
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Bootstrap JS: compiled and minified -->
<script src="js/bootstrap.min.js"></script>