Membuat Nav Tabs & Pills Mudah pada Bootstrap

Membuat Nav Tabs dan Nav Pills pada bootstrap

Seputar sharing mengenai bootstrap. Sebuah cara yang cukup efektif jika sebuah web sudah penuh dengan konten2 seperti banner, facebook like box, recent post, dan lainnya ingin ditambah beberapa konten lagi. Caranya dengan membuat nav tabs atau pills yang bisa diletakkan pada widget sidebar. Kita bisa mengatur banyak tabs sesuai kebutuhan namun menyesuaikan lebar widget. Dalam satu widget bisa memuat beberapa konten seperti tabs untuk recent testimonial, recent comment, recent popular post, atau directory blog.

Navs tersedia di Bootstrap dengan berbagi markup , dimulai dengan kelas dasar .nav. Kelas pengubah Swap untuk beralih di antara masing-masing gaya. Menggunakan navs untuk panel tab JavaScript Plugin tab.

Untuk tab dengan daerah tabbable , Anda harus menggunakan Plugin tab JavaScript. Markup juga akan membutuhkan peran tambahan dan ARIA atribut – melihat plugin contoh markup untuk keterangan lebih lanjut.

Cus langsung saya kode untuk membuat Nav Tabs dengan mudah pada bootstrap:

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#tab1" data-toggle="tab">Home</a></li>
  <li role="presentation"><a href="#tab2" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#tab3" data-toggle="tab">Messages</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade in active" id="tab1">
        Isi tab 1
    </div>
    <div class="tab-pane" id="tab2">
        Isi tab 2
    </div>
    <div class="tab-pane" id="tab3">
        Isi tab 3
    </div>
</div>

Kode membuat nav tabs di atas pada tag <ul></ul> berisi nama tab untuk diklik. sedangkan class=”tab-content” digunakan untuk isi konten sesuai nama tabs yang diklik. untuk menambah banyak tabs silakan tambah pada <li> untuk nama tabs dan class=”tab-pane” untuk isi tabs. Kode di atas sudah saya coba dan berhasil. untuk CSS tidak perlu kwatir karena sudah ada defaultnya pada bootstrap.

Berikut gambarnya:

Membuat Nav Tabs dan Nav Pills pada bootstrap

Pada Nav Pills ul class nya dengan kode berikut:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Oke, jika Anda ingin merubah tampilan nav tabs agar warnanya berbeda sesuai tema Anda, maka alangkah baiknya jika anda membuat file css sendiri pada tema tersebut seperti style.css agar tidak merubah2 bawaan dari bootstrap.  Contoh saya merubah warna tabs menjadi kuning seperti gambar berikut:

Cara membuat nav Tabs pada bootstrapUntuk merubah warna bacground hover dan active tabs perlu menambah di style.css yang dibuat sendiri. Contoh:

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li > a:hover {
background-color: #FFBB02 !important;
border-color: #FFBB02 !important;
color: #FFF;
}

Oke, sekian tutorial bootstrap membuat nav tabs dan pills dengan mudah, semoga Agan lebih tau dan belajar kembali.

About Mr.Gng 247 Articles
Si Anak dari Orang Tua tersayang ingin berbagi ilmu dengan harapan bermanfaat bagi orang lain. Situs SeputarTI.Com ini sebagai salah satu media berbagi saya, khususnya dibidang TI. Salam Kenal dari saya... :-)

2 Comments

Leave a Reply

Your email address will not be published.


*