Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills Bootstrap


Membuat Navigasi Tabs dan Pills Bootstrap

Ini dia class bootstrap yang paling banyak di gunakan dan sangat besar kegunaannya dalam membangun sebuah front-end yang modern dan sangat menghemat waktu. yaitu anda dapat membuat navigasi tabs dan pills dengan sangat cepat tentunya sangat menghemat waktu. karena anda hanya perlu menambahkan class-class yang di sediakan oleh bootstrap untuk membuat navigasi yang berbentuk tabs dan navigasi pills dengan bootstrap.

silahkan perhatikan penjelasan berikut ini untuk membuat navigasi tabs dan pills dengan bootstrap.

Membuat menu navigasi tabs

Navigasi tabs di buat menggunakan class “nav nav-tabs”. class “nav” untuk mendefinisikan bahwa yang kita buat adalah navigasi. dan “nav-tabs” di gunakan untuk membuat navigasi dengan bentuk tabs.

class “nav” dan “nav-tabs” di letakkan pada tag <ul>. sedikit penjelasan tambahan tentang penggunaan class “active” dan “disabled” dalam membuat navigasi tabs. anda bisa menambahkan class active atau disabled pada tag <li> yang anda inginkan.

membuat navigasi tabs dan pills bootstrap

membuat navigasi tabs dan pills bootstrap

dapat di lihat pada contoh di atas navigasi tabs sudah jadi. dan untuk membuat navigasi tabs yang memiliki dropdown dapat perhatikan contoh berikut

See the Pen Membuat navigasi tabs bootstrap by Malas Ngoding (@malasngoding) on CodePen.0

Membuat Dynamic tabs

See the Pen Membuat konten dynamic tabs by Malas Ngoding (@malasngoding) on CodePen.0

Membuat Menu Navigasi Pills

Untuk membuat navigasi pills tambahkan class “nav nav-pills”.

membuat navigasi pills dengan bootstrap

membuat navigasi pills dengan bootstrap

dan cara membuat pills dengan bentuk vertikal

membuat nav pills vertikal dengan bootstrap

membuat nav pills vertikal dengan bootstrap

Sekian tutorial bootstrap part 11 : Membuat navigasi tabs dan pills bootstrap.

Tutorial Bootstrap Dasar Lainnya

Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap

Incoming search terms:

  • cara menhubungkan isi tab menu dengan konten pada boostrap
  • cara membuat tab di html
  • vertikal navigasi bootstrap
  • cara nav tab dinamis
  • cara mengatur navigasi tabs di bootstrap css
  • cara membuatmenu navigasi vertikaldengan css
  • cara membuat Tabbed Navigation CSS
  • cara membuat tab menu navigatin
  • Cara Membuat Tab dengan Bootstrap
  • cara membuat simple responsive tab




About the author
Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
  • 5 Comments

Write a Comment

Your email address will not be published. Required fields are marked *


CENTANG untuk bisa mengirimkan komentar. [ Verifikasi bukan robot ]