Hai kawan-kawan Dumet…. Kali ini saya akan sharing tutorial membuat tab menu menggunakan bootstrap. Barangkali beberapa teman sedikit kesulitan dengan dokumentasi bootstrap yang menggunakan bahasa Inggris. Ok langsung saja ke TKP…

 

PENJELASANNYA:

Sebelum membuat Tab menu menggunakan bootstrap, perhatikan;

  • Teks berwarna oranye di dalam tag <head> harus kamu panggil terlebih dahulu. Yaitu:

Bootstrap.min.css, jquery.js, dan bootstrap.min.js

  • Bungkus menu menggunakan tag <div class=”col-md-6”> (kamu bisa membungkusnya sesuai dengan jumlah grid yang kamu inginkan).
  • Selanjutnya teks berwarna merah adalah markup HTML yang akan kita gunakan untuk membuat tab menu nya.

Tutorial Membuat Tab Menu Dengan Bootstrap

  • Teks berwarna hijau adalah class dan data-toggle yang akan dipanggil.
  • pada tag <ul> gunakan class =”nav nav-tabs”
  • setelah itu kita akan membuat isi dari Tab menu menggunakan class=”tab-content”, dan di dalam “tab-content” akan ada <div class=”tab-pane”>. Tab-pane nantinya akan kamu gunakan sebagai isi dari menu-menu kamu. Banyaknya tab-pane pada tab-content sesuai dengan list menu <li> yang kamu buat.
  • Penting! Gunakan data-toggle=”tab”, karena kita akan menggunakan Tab menu.
  • Teks berwarna biru adalah id. Id di dalam tag <div class=”tab-pane” id=”tab1”>. Nama id sesuai dengan keinginan kamu, pada contoh kali ini kita menggunakan nama “satu” sebagai id-nya. Id=”satu” ini akan kita sisipkan pada tag <a href=   >Tab1</a> sehingga hasilnya seperti ini <a href=”#tab1”>Tab1</a>. ingat! Untuk memanggil id gunakan tanda #. Setelah id nya dipanggil maka isi dari tab-pane akan ada pada tab menu yang telah kamu buat.

Setelah selesai maka hasilnya akan seperti berikut.

Tutorial Membuat Tab Menu Dengan Bootstrap

Semoga tutorialnya bermanfaat kawan-kawan… terima kasih.