Membuat Collapsible Content pada Bootstrap 4

31/08/2017    Maykhel David    1432     Website

Penempatan layout pada sebuah website menjadi hal penting agar dapat membuat apapun konten yang kita ingin bagikan ke pengunjung akan tersampaikan dengan baik. Banyak sekali cara untuk menata letak layout atau konten agar dapat terlihat rapi dan mudah dibaca oleh para pengunjung. Seperti menggunakan bootstrap sebagai salah satu framework paling popular. Dengan susunan class yang benar maka kita bisa membuat layout yang sangat rapi dan sangat terlihat professional.

Pada penambahan fitur  bootstrap 4 kita bisa menggunakan fitur collapsible yang di miliki komponen header untuk diterapkan pada tempat lain. Collapsible yang digunakan adalah mirip seperti yang ada pada header bootstrap ketika berada dalam mobile device.

Cara pembuatannya juga sangat mudah, pertama kita hubungkan dahulu file bootstrap 4 ke dalah HTML yang kita punya dengan script dibawah ini.

CSS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">

 

JAVASCRIPT

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

 

Jika kalian sudah menghubungkan file bootstrap diatas maka sekarang kita akan membuat struktur HTML dan Class untuk membuat collapsible content menggunakan bootstrap 4 menggunakan baris kode dibawah ini

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">DUMET School</h4>
      <span class="text-muted">Kursus Website dan Digital Marketing</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

 

Dengan menggunakan kode diatas kita bisa membuat sebuah elemen  collapsible seperti pada header bootstrap. 

Pada metode diatas kita bisa gunakan secara langsung dimanapun kita inginkan, karena plugin bootstrap tersebut bekerja dengan id dan juga property data-target yang saling dicocokan, sangat mudah sekali diterapkan.

Baiklah teman teman, perkembangan bootstrap saat ini sudah mencapai versi 4.0.0-beta, dimana pada versi ini kita sudah bisa menggunakan bootstrap untuk pengembangan website, namun  karena saat ini masih versi beta, jadi masih ada kemungkinan muncul bug yang belum kita ketahui, tapi tentu pastinya bug tersebut harusnya tidak terlalu berpengaruh besar terhadap pengembangan website. Demikian artikel kali ini yang membahas tentang cara membuat collapsible content menggunakan bootstrap 4

 

DEMO

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