Pengenalan Bootstrap untuk Website PHP

Apr 21, 2022 by MyPHPtutorials Level: Menengah Komentar Print

Tutorial perkenalan Bootstrap untuk mempercantik website PHP. Membuat website yang cantik dan elegan memerlukan pengetahuan CSS yang tinggi, memerlukan waktu dan pengalaman. Dengan Bootstrap kita bisa membuat website cantik dengan kemampuan css dasar. Serta mengadopsi standar standar komponen website. Semua website bisa menggunakan Bootstrap termasuk website php. Di tutorial Bootstrap ini akan dibahas dasar menggunakan Bootstrap dan komponen komponen dasar Bootstrap, serta dilengkapi dengan video tutorial. Video tutorial bisa diakses di Youtube channel MyPHPtutorials di video "Tutorial Menggunakan Bootstrap di Website PHP". Dalam tutorial ini kita akan menggunakan versi terbaru saat ini versi 5.

Video tutorial menggunakan bootstrap di website php

tutorial menggunakan bootstrap

Berikut adalah materi tutorial Bootstrap ini:

  1. Apa itu Bootstrap
  2. Mulai menggunakan Bootstrap
  3. Breakpoints
  4. Containers
  5. Grid System
  6. Tabel
  7. Forms
  8. Buttons / Tombol
  9. Navbar / Menu Navigasi
  10. Pagination / Paginasi
  11. Modal / Dialog

Apa itu Bootstrap

Mengutip dari repository Bootstrap di github, Bootstrap adalah

"The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web."

Dalam bahasa Indonesia dapat diartikan:

"Framework HTML, CSS, dan JavaScript paling populer untuk mengembangkan projek website responsive atau mobile first."

Bootstrap memiliki system breakpoints and grid sehingga bisa menyesuaikan tampilan dan tata letak website sesuai dengan lebar layar komputer, tablet atau handphone.

Mulai Menggunakan Bootstrap

Untuk memulai menggunakan Bootstrap kunjungi website https://getbootstrap.com/ kemudian klik tombol Getting Started. Bootstrap terdiri dari 2 bagian atau file. File CSS untuk tampilan website dan file JavaScript untuk komponen dinamis seperti Modal dan Popover. File Javascript tidak perlu dipakai jika tidak menggunakan komponen yang membutuhkannya. Dari halaman Getting Started akan diberikan Starter template seperti di bawah.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Berdasarkan starter pack di atas ada hal hal penting yang harus terpenuhi. Pertama harus menggunakan doctype HTML5 <!doctype html>. Kedua harus responsive meta tag <meta name="viewport" content="width=device-width, initial-scale=1">. Ketiga menambahkan CSS file Bootstrap di dalam tag <head/> seperti

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

dan keempat (opsional) menambahkan javascript Bootstrap

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Starter template di atas menggunkan Content Delivery Network (CDN). Kita juga bisa mendownload file Bootstrap sehingga bisa digunakan tanpa koneksi internet. Dari Getting Started bisa gunakan menu Download. Dan untuk menambahkan CSS dan Javascript Bootstrap bisa dilakukan seperti di bawah.

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

<script src="bootstrap/js/bootstrap.bundle.min.js"></script>

Breakpoints

Breakpoints adalah ukuran ukuran yang dapat disesuaikan yang menentukan bagaimana prilaku tata letak website berdasarkan ukuran layar. Breakpoints adalah dasar design responsive. Breakpoints dibangun menggunakan media queries. Media queries adalah fitur CSS yang memungkinkan penerapan style berdasarkan kumpulan parameter dari browser dan sistem operasi. min-width adalah yang paling umum digunakan. Ada 6 breakpoints sebagai berikut

Breakpoint Sisipan Class CSS Lebar Layar
X-Small <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px

Salah satu breakpoint adalah X-Small, artinya pada saat layar kurang dari 576px akan diterapkan style/tampilan yang berbeda, ini ukuran umum Handphone. Misalnya Handphone kalian diputar maka lebar layar akan menjadi lebih besar dari 576px dan breakpoint Small yang akan diterapkan. Breakpoint ini menjadi dasar kalian untuk menentukan bagaimana tampilan website kalian di Handphone, tablet dan laptop atau layar besar. Informasi lebih lanjut ada di dokumentasi Bootstrap

Containers

Containers adalah elemen tata letak yang paling mendasar di Bootstrap dan diperlukan pada saat menggunakan sistem grid. Continers digunakan untuk menampung, melapisi, dan kadang kadang untuk membuat konten website berada di tengah tengah layar. Ada tiga containers di Bootstrap:

  • .container, yang lebar maksimalnya sesuai dengan setiap breakpoint
  • .container-fluid, lebarnya selalu 100% untuk semua breakpoint
  • .container-{breakpoint}, lebarnya 100% sampai breakpoint yang dipakai

Tabel di bawah mengilustrasikan setiap lebar maksimal container dibandingkan dengan container original .container dan .container-fluid untuk setiap breakpoint.

Extra small <576px Small ≥576px Medium ≥768px Large ≥992px X-Large ≥1200px XX-Large ≥1400px
.container 100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%

Menggunakan container cukup sederhana cukup tambahkan css class pada div sesuai kebutuhan misal <div class="container"></div> atau <div class="container-fluid"></div> atau <div class="container-md"></div>. Penjelasan lebih lengkap lagi ada di container di dokumentasi bootstrap tentang containers

Grid System

Grid system Bootstrap menggunakan flexbox untuk membangun tata letak untuk berbagai ukuran layar dengan sistem dua belas kolom, dan enam opsi responsive. Grid system Bootstrap menggunakan container, baris dan kolom untuk mengatur tata letak website. Container digunakan untuk menampung baris, dan baris digunakan untuk menampung kolom. Dalam setiap baris terdapat celah atau padding untuk setiap kolom. Ada enam opsi responsive berdasarkan breakpoint yaitu:

  • Extra small (xs)
  • Small (sm)
  • Medium (md)
  • Large (lg)
  • Extra large (xl)
  • Extra extra large (xxl)

Tabel di bawah menjelaskan bagaimana grid system bekerja untuk setiap breakpoint

xs <576px sm ≥576px md ≥768px lg ≥992px xl ≥1200px xxl ≥1400px
max-width Container None (auto) 540px 720px 960px 1140px 1320px
Prefix class .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Jumlah kolom 12
Lebar celah 1.5rem (.75rem di kiri dan kanan)
Celah khusus Ya
Bisa bertingkat Ya
Mengurut kolom Ya

Contoh menggunakan grid system:

Membuat 3 kolom untuk semua ukuran layar

<div class="container">
  <div class="row">
    <div class="col-4">
      Column
    </div>
    <div class="col-4">
      Column
    </div>
    <div class="col-4">
      Column
    </div>
  </div>
</div>

Membuat 3 kolom untuk ukuran layar besar

<div class="container">
  <div class="row">
    <div class="col-lg-4">
      Column
    </div>
    <div class="col-lg-4">
      Column
    </div>
    <div class="col-lg-4">
      Column
    </div>
  </div>
</div>

pada layar besar akan ada 3 kolom pada pada layar kecil dan medium akan jadi 1 kolom.

Membuat 3 kolom untuk semua ukuran layar besar dan 2 kolom di layar medium

<div class="container">
  <div class="row">
    <div class="col-md-8 col-lg-4">
      Column
    </div>
    <div class="col-md-4 col-lg-4">
      Column
    </div>
    <div class="col-md-12 col-lg-4">
      Column
    </div>
  </div>
</div>

Bagaimana hasil dari contoh di atas bisa dilihat di video tutorial boostrap. Perlu diperhatikan jumlah kolom tidak boleh lebih dari 12. Ada lebih banyak contoh di dokumentasi grid system Bootstrap.

Tabel

Materi selanjutnya mulai dari tabel ada di tutorial selanjutnya menggunakan Bootstrap di website php

Silahkan login atau register sebelum meninggalkan komentar.