1. Home
    2. »
  2. Web Design
    3. » Tutorial Lengkap Penggunaan Bootstrap untuk Layout Web

Tutorial Lengkap Penggunaan Bootstrap untuk Layout Web

Web Design
didi Comments

Bootstrap adalah framework front-end yang populer digunakan untuk membangun situs web responsif dan mobile-first. Framework ini menyediakan berbagai komponen siap pakai seperti tombol, navigasi, dan sistem grid yang memudahkan proses desain web. Tutorial ini akan membahas secara lengkap tentang penggunaan Bootstrap untuk layout web, mulai dari dasar-dasar hingga teknik yang lebih kompleks.

1. Menyertakan Bootstrap

Langkah pertama adalah menyertakan Bootstrap ke dalam proyek web Anda. Anda dapat melakukannya dengan dua cara:

  • Menggunakan CDN (Content Delivery Network): Cara termudah adalah dengan menyertakan Bootstrap melalui CDN. Anda dapat menambahkan kode berikut ke dalam bagian  <head>  dari file HTML Anda:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  • Mengunduh Bootstrap: Anda juga dapat mengunduh Bootstrap dari situs web resminya dan menyertakannya secara lokal.

2. Memahami Sistem Grid

Sistem grid Bootstrap adalah jantung dari framework ini. Ia memungkinkan Anda untuk mengatur tata letak konten web Anda dengan mudah dan responsif. Sistem grid menggunakan kelas-kelas seperti  container ,  row , dan  col-*  untuk mengatur kolom dan baris.

  • Container:  container  adalah kelas yang digunakan untuk membungkus konten Anda dan memberikan padding di kedua sisinya. Ini memastikan bahwa konten Anda tidak menyentuh tepi layar.
  • Row:  row  adalah kelas yang digunakan untuk membungkus kolom-kolom Anda. Setiap baris dapat berisi satu atau lebih kolom.
  • Col:  col-*  adalah kelas yang digunakan untuk menentukan lebar kolom Anda. Angka setelah  col-*  menunjukkan lebar kolom dalam fraksi dari total lebar layar. Misalnya,  col-md-4  akan membuat kolom dengan lebar 4/12 dari total lebar layar pada ukuran layar medium (md).

Contoh:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <!-- Konten kolom pertama -->
    </div>
    <div class="col-md-4">
      <!-- Konten kolom kedua -->
    </div>
    <div class="col-md-4">
      <!-- Konten kolom ketiga -->
    </div>
  </div>
</div>

 

Kode di atas akan membuat tiga kolom dengan lebar yang sama pada layar medium (md).

3. Breakpoints dan Responsivitas

Bootstrap dirancang untuk menjadi responsif, artinya situs web Anda akan tampak baik pada berbagai ukuran layar. Bootstrap menggunakan media queries untuk menyesuaikan tata letak situs web Anda berdasarkan ukuran layar. Bootstrap memiliki beberapa breakpoint yang menentukan ukuran layar untuk setiap perangkat:

  • xs: Ukuran layar kecil (kurang dari 576px)
  • sm: Ukuran layar medium (576px atau lebih)
  • md: Ukuran layar medium (768px atau lebih)
  • lg: Ukuran layar besar (992px atau lebih)
  • xl: Ukuran layar sangat besar (1200px atau lebih)
  • xxl: Ukuran layar sangat besar (1400px atau lebih)

Anda dapat menggunakan kelas-kelas seperti  col-xs-* ,  col-sm-* ,  col-md-* ,  col-lg-* ,  col-xl-* , dan  col-xxl-*  untuk mengatur lebar kolom pada setiap breakpoint.

Contoh:

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <!-- Konten untuk layar medium dan besar -->
    </div>
    <div class="col-sm-12 col-md-6">
      <!-- Konten untuk layar kecil dan medium -->
    </div>
  </div>
</div>

 

Kode di atas akan menampilkan konten dalam satu kolom pada layar kecil ( sm ), dan dalam dua kolom pada layar medium ( md ) dan besar.

4. Mengatur Tata Letak dengan Grid System

Berikut adalah beberapa contoh penggunaan sistem grid Bootstrap untuk membuat berbagai tata letak:

Layout Dua Kolom
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <!-- Konten kolom pertama -->
    </div>
    <div class="col-md-6">
      <!-- Konten kolom kedua -->
    </div>
  </div>
</div>

 

Layout Tiga Kolom
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <!-- Konten kolom pertama -->
    </div>
    <div class="col-md-4">
      <!-- Konten kolom kedua -->
    </div>
    <div class="col-md-4">
      <!-- Konten kolom ketiga -->
    </div>
  </div>
</div>

 

Layout Asymmetris
<div class="container">
  <div class="row">
    <div class="col-md-8">
      <!-- Konten kolom pertama -->
    </div>
    <div class="col-md-4">
      <!-- Konten kolom kedua -->
    </div>
  </div>
</div>

 

Layout dengan Nested Rows
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <!-- Konten kolom pertama -->
    </div>
    <div class="col-md-6">
      <!-- Konten kolom kedua -->
      <div class="row">
        <div class="col-md-6">
          <!-- Konten kolom pertama dalam kolom kedua -->
        </div>
        <div class="col-md-6">
          <!-- Konten kolom kedua dalam kolom kedua -->
        </div>
      </div>
    </div>
  </div>
</div>

 

5. Menggunakan Komponen Bootstrap

Bootstrap menyediakan berbagai komponen siap pakai yang dapat Anda gunakan untuk membangun situs web Anda. Beberapa komponen yang paling umum digunakan meliputi:

  • Tombol:  btn ,  btn-primary ,  btn-secondary ,  btn-success ,  btn-danger ,  btn-warning ,  btn-info ,  btn-light ,  btn-dark ,  btn-outline-primary ,  btn-outline-secondary ,  btn-outline-success ,  btn-outline-danger ,  btn-outline-warning ,  btn-outline-info ,  btn-outline-light ,  btn-outline-dark
  • Navigasi:  nav ,  navbar ,  navbar-expand-lg ,  navbar-light ,  navbar-dark ,  nav-item ,  nav-link ,  dropdown ,  dropdown-menu 
  • Formulir:  form ,  form-group ,  form-control ,  input ,  textarea,  select ,  checkbox ,  radio ,  button 
  • Tabel:  table ,  table-striped ,  table-bordered ,  table-hover ,  table-sm ,  table-lg 
  • Kartu:  card ,  card-body ,  card-header ,  card-footer ,  card-title ,  card-text 

Contoh:

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1 class="text-center">Judul Halaman</h1>
      <p>Ini adalah paragraf contoh.</p>
      <button class="btn btn-primary">Tombol Utama</button>
    </div>
  </div>
</div>

 

Kode di atas akan membuat judul halaman, paragraf contoh, dan tombol utama dengan warna biru.

6. Kustomisasi Bootstrap

Bootstrap dapat dikustomisasi dengan mudah. Anda dapat mengubah warna, font, dan tata letak default Bootstrap dengan menggunakan CSS. Anda juga dapat menambahkan JavaScript Anda sendiri untuk membuat situs web Anda lebih interaktif.

7. Dokumentasi Bootstrap

Bootstrap memiliki dokumentasi yang lengkap dan mudah dipahami. Anda dapat menemukan dokumentasi Bootstrap di situs web resminya:

8. Contoh Lengkap

Berikut adalah contoh lengkap penggunaan Bootstrap untuk membuat layout website sederhana:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Website Bootstrap</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Website Saya</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Beranda</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Tentang Kami</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Kontak</a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="container">
    <div class="row mt-4">
      <div class="col-md-8">
        <h1 class="mb-4">Judul Artikel</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
      </div>
      <div class="col-md-4">
        <div class="card mb-4">
          <div class="card-body">
            <h5 class="card-title">Judul Sidebar</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
            <a href="#" class="btn btn-primary">Baca Selengkapnya</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <footer class="bg-light py-4 mt-5">
    <div class="container">
      <p class="text-center mb-0">Copyright © 2023 Website Saya</p>
    </div>
  </footer>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

 

Kode di atas akan membuat layout website sederhana dengan navbar, konten utama, sidebar, dan footer.

Kesimpulan

Bootstrap adalah framework yang mudah digunakan dan sangat membantu dalam membangun situs web yang responsif dan mobile-first. Dengan memahami dasar-dasar penggunaan Bootstrap, Anda dapat dengan cepat membangun situs web yang menarik dan profesional.

Quiz

Tags

Comments