EL Creative Academy Site of The Month
Pembahasan Lengkap Tentang Bootstrap 4

Halo semuanya, selamat datang di EL Creative Academy. Kali ini saya akan membagikan tutorial Bootstrap 4 yang mungkin adalah artikel pertama tentang Bootstrap. Untuk mempersingkat artikel tutorial ini, mari langsung saja kita pelajari Bootstrap 4 dengan cara yang mudah dipahami.



Apa itu Bootstrap?

  • Bootstrap adalah Front-End Framework yang gratis digunakan dalam proses Web Development agar menjadi lebih mudah dan cepat.
  • Bootstrap adalah Front-End Framework yang memiliki Template berbasis HTML dan CSS yang dapat kita gunakan untuk membuat Tipografi, Formulir (Forms), Tombol, tabel, Navigasi, Modal atau Pop-Up, Image Carousel atau Slider, dan masih banyak lagi. Selain itu, Bootstrap juga memiliki plugin opsional JavaScript.
  • Bootstrap dapat kita gunakan untuk membuat Desain Web menjadi semakin Responsive dan Support semua jenis Web Browser.

Apa itu Responsive Web Design?

Responsive Web Design adalah segala hal tentang proses pembuatan atau pengembangan Website agar tampilan Website tersebut dapat menyesuaikan semua jenis dan ukuran layar perangkat secara otomatis.

Contoh Kode Bootstrap 4

Berikut adalah contoh kode Bootstrap 4:

<!DOCTYPE html>
<html lang="ID">
<head>
  <title>Contoh Bootstrap | EL Creative Academy</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>

  <div class="jumbotron text-center">
    <h1>Halaman Bootstrap Pertamaku</h1>
    <p>Resize (Ubah Ukuran) jendela Browser untuk melihat efeknya!</p>
  </div>
 
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <h3>Kolom 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>

      <div class="col-sm-4">
        <h3>Kolom 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>

      <div class="col-sm-4">
        <h3>Kolom 3</h3>        
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
    </div>
  </div>

</body>
</html>

Lihat kode di Github | Lihat Live Demo

Apa Perbedaan Bootstrap 3 dan Bootstrap 4?

  • Bootstrap 4 adalah versi terbaru dari Bootstrap yang memiliki komponen baru, Stylesheet yang lebih cepat, ringan, dan lebih Responsive.
  • Bootstrap 4 adalah rilisan terbaru dari Bootstrap yang stabil dan cocok dengan semua jenis Web Browser kecuali Internet Explorer 9 kebawah.

Catatan:
  • Jika kalian ingin fokus dengan dukungan Internet Explorer 8 sampai 9, kalian dapat menggunakan Bootstrap 3 yang merupakan versi Bootstrap paling stabil dan masih ada dukungan dari Tim untuk perbaikan Critical Bug dan perubahan dokumentasi. Tetapi tidak ada fitur baru yang ditambahkan.
  • Dukungan Icon: Bootstrap 4 tidak mendukung BS3 Glyphicons. Sebagai penggantinya, kalian dapat menggunakan Font-Awesome atau Icon Library lainnya.

Mengapa Harus Menggunakan Bootstrap?

Berikut adalah beberapa kelebihan dari Bootstrap:
  • Mudah digunakan: Siapa saja yang hanya memiliki pengetahuan dasar tentang HTML dan CSS dapat mulai menggunakan Bootstrap.
  • Fitur Responsive: CSS pada Bootstrap dapat menyesuaikan semua jenis ukuran layar perangkat seperti Smartphone, Tablet, dan Desktop.
  • Mobile-First: Pada Bootstrap, Style Mobile-First adalah bagian inti dari Front-End Framework.
  • Kompatibilitas Browser: Bootstrap 4 sangat kompatibel dengan semua jenis Browser Modern seperti Google Chrome, Mozilla Firefox, Internet Explorer 10 keatas, Microsoft Edge, Apple Safari, Opera, dll.

Bagaimana Cara Menggunakan Bootstrap 4?

Terdapat dua cara untuk mulai menggunakan Bootstrap 4 pada Website kalian:
  • Memasukkan Bootstrap 4 dari CDN (Content Delivery Network), dan;
  • Mendownload Bootstrap 4 dari Website getbootstrap.com.

Bootstrap 4 Content Delivery Netword (CDN)

Jika kalian tidak ingin mendownload dan meng-hosting Bootstrap 4 sendiri, kalian dapat memasukkannya dari Content Delivery Network (CDN).

Content Delivery Network yang menyediakan dukungan untuk file CSS dan JavaScript dari Bootstrap adalah MaxCDN. Selain itu, kalian juga harus memasukkan jQuery kedalam Website kalian.

Memasukkan Bootstrap 4 melalui CDN

Berikut adalah contoh kode untuk memasukkan Bootstrap 4 kedalam Website melalui CDN:

<!-- CSS terbaru yang sudah di Compile dan di Minified -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- Library jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- JavaScript terbaru yang sudah di Compile dan di Minified -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> 


Keuntungan Menggunakan CDN Bootstrap 4

Banyak pengguna yang telah mendownload Bootstrap 4 dari CDN ketika mengunjungi Website lain yang menggunakan Bootstrap. Alhasil, hal tersebut dapat mempercepat proses Loading Website karena file Bootstrap akan diambil dari Cache ketika pengguna mengunjungi Website kita. Selain itu, dari CDN yang ada, rata-rata mereka akan memastikan bahwa jika terdapat pengguna yang meminta file tersebut, maka CDN akan melayani dari Server yang paling dekat.

Menggunakan jQuery atau Popper?

Untuk komponen JavaScript seperti Modals, Tooltips, Popovers, dll. Bootstrap 4 menggunakan jQuery dan Popper.js. Namun, jika kalian hanya menggunakan bagian CSS dari Bootstrap saja, kalian tidak perlu menggunakannya.

Apa Saja Komponen Bootstrap 4 yang Tersedia untuk jQuery?

Berikut adalah komponen yang tersedia untuk jQuery:
  • Scrollspy untuk melihat tindakan Scrolling.
  • Tooltip dan Popover (Memerlukan Popper.js agar penempatannya sempurna).
  • Navbar (Untuk menu Collapsible).
  • Modal (Buka dan Tutup).
  • Dropdown (Memerlukan Popper.js agar penempatannya sempurna).
  • Toggle - Collapse untuk konten.
  • Carousel Slider beserta kontrol dan indikatornya.
  • Tombol dan Checkbox/Radio Button untuk Toggle.
  • Closable Alert.
  • ...dll.

Cara Mendownload Bootstrap 4

Jika kalian ingin mendownload dan meng-hosting Bootstarp 4 sendiri, kalian dapat mengunjungi getbootstrap.com dan ikutilah instruksi yang ada di Website tersebut.

Membuat Halaman Web dengan Bootstrap 4

Berikut adalah langkah-langkah dasar untuk membuat halaman Web dengan menggunakan Bootstrap 4:

Menambahkan HTML5 doctype

Bootstrap 4 menggunakan elemen HTML serta properti CSS yang sangat memerlukan HTML5 doctype. Untuk itu, kita harus selalu menyertakan HTML5 doctype tepat di awal halaman Web yang dibuat bersamaan dengan atribut lang dan Charset (Character Set) yang benar. Berikut adalah contoh kodenya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
</html>


Bootstrap 4 Fokus pada Mobile-First

Bootstrap 4 dibuat dan dirancang agar Responsive pada semua jenis dan ukuran layar perangkat. Maka dari itu, Bootstrap 4 sangat mementingkan Mobile-First sebagai bagian inti dari Front-End Framework.

Untuk dapat memastikan Rendering dan Zooming yang tepat, kalian dapat menambahkan tag <meta> ke dalam elemen <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">


Keterangan:
  • Kode width=device-width berfungsi untuk mengatur lebar halaman agar dapat mengikuti lebar layar pada perangkat yang memiliki ukuran bervariasi.
  • Kode initial-scale=1 berfungsi untuk mengatur Zoom Level pada saat halaman Website dimuat pertama kali oleh Browser.

Menggunakan Container Bootstrap 4

Bootstrap 4 juga membutuhkan elemen Container sebagai wadah atau bungkus dari konten pada Website. Terdapat dua jenis Class yang dapat kita gunakan antara lain:
  • .container - menyediakan Container dengan lebar Fixed (tetap) dan responsif.
  • .container-fluid - menyediakan Container lebar Full (Penuh/Full Width) dan mencakup seluruh lebar dari viewport.

Contoh Dasar Halaman Bootstrap 4

Berikut adalah dua contoh dasar halaman Bootstrap 4 dengan desain Container Fixed dan Full Width yang responsive:

Contoh Container


<!DOCTYPE html>
<html lang="ID">
<head>
  <title>Contoh Bootstrap | EL Creative Academy</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>

  <div class="container">
    <h1>Halaman Bootstrap</h1>
    <p>Bagian ini berada di dalam Class .container.</p>
    <p>Class .container dapat menyediakan Container yang Responsive.</p>
  </div>

</body>
</html>

Lihat kode di Github | Lihat Live Demo

Contoh Container Fluid (Full Width)


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Contoh Bootstrap | EL Creative Academy</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body>

  <div class="container-fluid">
    <h1>Halaman Bootstrap</h1>
    <p>Bagian ini berada di dalam Class .container-fluid.</p>
  </div>

</body>
</html>

Lihat kode di Github | Lihat Live Demo

Referensi dan Sumber

0 Komentar