Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills Bootstrap

Bootstrap

Malas Ngoding

membuat navigasi tabs dan pills bootstrap

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.

Membuat Dynamic tabs

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

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:

  • tab div class container digunakan untuk
  • cara membuat header bar dan content bar
  • membuat tabs pills bootstrap
  • pengertian tab javascript pada getbootstrap
  • coding php untuk membuat fungsi dynamic tab
  • tabs pills bootstrap
  • cara membuat tab menu dropdown bootstrap
  • cara membuat navigation basic tab dengan bootstrap
  • cara membuat navigasi bar css dan html
  • cara membuat menutabs bootstrap



3 Comment

Write a Comment

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