Membuat Tab Content dengan Bootstrap 4

31/08/2017    Maykhel David    2379     Website

Fitur utama bootstrap adalah memberikan kemudahan dalam membuat website responsive agar tetap nyaman ketika pengunjung webste membuka dari mobile device. Dengan adanya bootstrap tentu setiap pengembang website bisa mempelajarinya untuk mempercepat proses pembuatan template website responsive yang baik.

Selain Responsive, banyak sekali plugin bootstrap yang bisa kita gunakan untuk mempercantik website kita, contohnya seperti artikel sebelumnya yang membahas tentang system grid terbaru pada bootstrap atau artikel yang lainnya yang membahas tentang menerapkan table inverse pada bootstrap 4, kali ini kita akan membahas tentang bagaimana cara membuat tab content pada bootstrap 4.

Cara membuatnya cukup mudah, pertama saya anggap kalian sudah mengerti cara menyambungkan file HTML dengan file bootstrap seperti biasa. Lalu kita ketikkan kode berikut untuk membuat struktur dari tab content


<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" href="#profile" role="tab" data-toggle="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#buzz" role="tab" data-toggle="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#references" role="tab" data-toggle="tab">Setting</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="profile">Ini Halaman Home</div>
  <div role="tabpanel" class="tab-pane fade" id="buzz">Ini Halaman Profile</div>
  <div role="tabpanel" class="tab-pane fade" id="references">Ini Halaman Setting</div>
</div>

Pada artikel terdahulu kita juga pernah membahas tentang cara membuat JQuery tab dengan Bootstrap 3. Kita masih bisa menggunakan cara tersebut untuk membuat tab content, hanya saja sekarang pada bootstrap versi 4 beta ini semua lebih dipermudah.

Jika kalian masih penasaran bisa langsung lihat demo dibawah ini

 

Pada demo diatas tidak terlalu banyak kelihatan dari versi sebelumnya, hanya saja disini kita lebih dimudahkan dengan tidak terlalu banyak mengetik kode javascript.

Dari sekian banyak fitur terbaru dari bootstrap 4 tentu banyak diantaranya adalah fitur lama yang mengalami peningkatan, baik dari sisi tampilan maupun penggunaannya, dan bahkan mungkin penulisan kode yang lebih dibuat simple namun tetap efektif untuk digunakan dalam membuat website. Baiklah teman-teman demikian artikel tentang cara membuat side content menggunakan bootstrap 4

 

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More