Membuat TAB dengan bootstrap

23 June 2018 709

tab-dalam-bootstrap

Membuat tampilan jadi lebih menarik dengan TAB, langkah ini amat terbilang cukup mudah. Dalam bootstrap TAB sudah dipersiapakan, hanya tinggal menambah code saja TAB sudah terbentuk.

Contoh TAB dengan Bootstrap :

<ul class=”nav nav-pills nav-justified”>

<li class=”active”><a data-toggle=”tab” href=”#tab-1″>TAB Pertama</a></li>

<li><a data-toggle=”tab” href=”#tab-2″>TAB Kedua</a></li>

<li><a data-toggle=”tab” href=”#tab-3″>TAB Ketiga</a></li>

</ul>

<div class=”tab-content”>

<div id=”tab-1″ class=”tab-pane fade in active”>

Content Tab Pertama

</div>

<div id=”tab-2″ class=”tab-pane fade in”>

Content Tab Kedua

</div>

<div id=”tab-3″ class=”tab-pane fade in”>

Content Tab Ketiga

</div>

</div>

Code dalam <ul class=”nav nav-pills nav-justified”> adalah untuk navigasi menu dalam TAB, sedangkan <div class=”tab-content”> adalah untuk Content dari tab tersebut dengan memberikan <div id=”tab-1″ class=”tab-pane fade in active”> id=”tab-1″ untuk menghasilkan tampilan pada Tab Pertama, begitupun selanjutnya.

Kata kunci untuk Artikel ini :

  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1829 G3C6VNraOmBuEY4351Q0YpgeTzIebwaJzm1j0No2U_FT64IOJ6Iyx5mrc_K-jPKf 5448c35fa0a5dbc744c78c128cdb91217b47cc51&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme

Artikel Terkait

Cara mudah membuat theme wordpress responsif dengan bootstrap part 1

Tidak butuh banyak waktu untuk membuat theme wordpress menggunakan bootstrap, hal ini dikarenakan kita menggunakan resource kerangka template yang sudah ada, kita hanya mengatur posisi dan tampilan

Cara mudah membuat theme wordpress responsif dengan bootstrap part 5

Part terkahir akan dibahas tentang functions.php dalam membuat wordpress dengan bootstrap. functions.php ada tempat dimana kita memasang scrypt statik yang dapat kita gunakan disemua file php dalam
Bootstrap
Belum ada komentar. Anda bisa menjadi yang pertama untuk berkomentar!

Tinggalkan komentar

*
*
-

error: Content is protected !!