Membuat TAB dengan bootstrap

31 October 2016 269

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 :

  • membuat data toggle bootstrap
  • membuat tab dengan bootstrap

Artikel Terkait

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

Cara mudah membuat theme wordpress responsif dengan bootstrap part 4

Pembahasan kali ini untuk sidebar.php dan footer.php, 2 file ini biasanya standard saja tidak ada banyak script. Untuk sidebar.php biasanya penempatan konten seperti widget, dan footer.php biasanya
Bootstrap
Belum ada komentar. Anda bisa menjadi yang pertama untuk berkomentar!

Tinggalkan komentar

*
*
-

error: Content is protected !!