Mudah Membuat Navigasi Tabs Dengan Bootstrap

Assalamu'alaikum Wr.Wb
Salam dan Bahagia

Pendahuluan
Pada kali ini saya akan membagikan sedikit tutorial yaitu bagaimana sih cara membuat Navigasi tabs pada framework Css yaitu Bootstrap, nah langsung saja dibaca dan dipahami serta dipraktikkan.

Latar Belakang
      Nah latar belakang saya membuat navigasi tabs ini adalah, navigasi ini banyak sekali digunakan oleh developer Frontend ketika menDesemberain sebuah halaman Website, nah maka dari itu saya beriniatif untuk membuat tutorial ini.

Maksud Dan Tujuan
Agar mengerti dan paham tentang tag-tag css yang ada dibootstrap, salah satunya cara membuat navigasi tabs pada Bootstrap.

Alat dan bahan
        Laptop.
        Browser.
        Teks Editor.

Jangka Waktu yang dibutuhkan
        40 Menit

Pembahasan atau langkah Kerja
       Seperti yang saya sudah bilang diawal tadi bahwa Navigasi tabs inilah class yang paling banyak digunakan oleh developer FrontEnd Untuk Mendesain Halaman Web yang dia rancang, Karena hanya perlu menambahkan class-class yang sudah disediakan oleh Bootstrap Untuk membuat navigasi tabs.

Untuk membuat navigasi tabs ini sangatlah mudah kita hanya perlu membuat tag <ul> dan setelah itu kita berikan cass "nav nav-tabs",class "nav" Unutk mendefinisikan bahwa yang dibuat adalah class navigasi dan class "nav-tabs" mendefinikasn yang dibuat adalah navbar tabs.

Nah Dari script diatas sudah terlihat bahwa tag <ul> Menggunakan class "nav nav-tabs"yang dimana class ini merupakan unutk membuat navbar tabs, dibagian content kalain bisa mendisable atau mengaktifkan tabs dengan cara menambahkan class "active" untuk mengaktifkan.

Dan Berikut Merupakan hasilnya :

Nah gimana Mudah Bukan?

       Dengan adanya framwork Bootstrap Ini, kita jadi lebih mudah unutk membuat navbar tabs, hanya dengan memanggil class dari navbar tabs tersebut.

Sekian yang dapat saya sampaikan, mohon maaf bila ada kesalahan dalam penulisan maupun tata bahasa, sekian dan terima kasih.

Wassalamu'alaikum Wr.Wb