Membuat NAV-TAB Bootstrap

Ada yang tahu gambar ini..??? Pastinya kalian tentu mengenalnya, Yaps..ini ada di SiS+ kalian 🙂

Setiap tab nya di klik pasti mengeluarkan data yang berbeda, nah..bagaimana cara membuatnya..??

Yukss..simak 🙂

Tampilan yang seperti itu pada bootstrap adalah Tabs, termasuk ke dalam komponan Nav.
Nahh.. untuk lebih jelasnya bisa langsung melihat disini.

Contoh codingnya seperti ini :

<ul class=”nav nav-tabs”>
<li class=”active”>
<a href=”#”>Home</a>
</li>
<li><a href=”#”>…</a></li>
<li><a href=”#”>…</a></li>
</ul>

Untuk membuatnya ternyata tidak sulit, cukup menggunakan coding seperti dibawah ini :

<div id=”information_tab” style=”background-color:#FFFFFF;” >
<!– MEMBUAT TAB–>
<ul class=”nav nav-tabs” style=”background-color:#FFFCCC;” >
<li class=”active”><a href=”#tab1″ data-toggle=”tab”><i class=”icon-file”></i> Kartu bimbingan</a></li>
<li><a href=”#tab2″ data-toggle=”tab”><i class=”icon-list-alt”></i> List Bimbingan</a></li>
<li> <?php echo CHtml::link(“<i class=’icon-download-alt’></i> Download”, array(‘#’))?> </li>
</ul>
<div class=”tab-content”>
<div class=”tab-pane active” id=”tab1″>
<?php echo $this->renderPartial(‘namafile’,array(isi dengan model)); ?>
</div>

<div class=”tab-pane” id=”tab2″>
<?php echo $this->renderPartial(‘namafile’,array(isi dengan model)); ?>
</div>

</div>

</div>

Dan hasilnya seperti dibawah ini :