MATERI 4
Bootstrap
TUJUAN BELAJAR
Mahasiswa dapat menggunakan Bootstrap untuk meningkatkan proses pengaturan
layout laman web.
MATERI
Sifat responsive bootstrap, file-file bootstrap, konsep grid bootstrap, layout form dalam
bootstrap.
TEORI
Tentang Bootstrap
Bootstrap merupakan framework HTML, CSS, Javascript populer untuk
membangun situs web yang responsive. RWD (Responsive Web Design) adalah desain
situs yang otomatis akan menyesuaikan diri agar tampil baik di semua perangkat dari
ponsel sampai dekstop. Bootstrap terdiri dari satu set file css, javascript. Bootstrap
diciptakan oleh 2 orang programmer Twitter: Mark Otto dan Jacob Thornton pada tahun
2011. Dikenal pertama kali dengan nama Twitter Bootstrap → Bootstrap.
Dengan Bootstrap, kita bisa membuat tampilan web menarik tanpa harus paham
kode-kode rumit dibaliknya. Dasar yang diperlukan cukup basic HTML, CSS dan sedikit
JavaScript jika ingin membuat efek-efek interaktif. Bootstrap bersifat open source dan
bisa digunakan secara gratis. Website resmi Bootstrap beralamat di getbootstrap.com.
Container di Bootstrap
Container adalah struktur paling dasar di dalam Bootstrap. Jika kita ingin memakai
Bootstrap grid system, seluruh kode HTML harus berada di dalam container. Cara
pembuatan container sangat sederhana, cukup tambah class .container ke dalam sebuah
tag HTML.
<div class=”container”>
……
……
</div>
Di dalam container inilah tempat seluruh komponen Bootstrap berada. Tag yang sering
dipakai untuk container adalah tag <div> karena bersifat generik dan tidak memiliki efek
tambahan apapun.
Grid System
Grid adalah istilah untuk menyebut garis bantu yang menjadi panduan seorang designer.
Di dalam container inilah tempat seluruh komponen Bootstrap berada. Bootstrap
membagi layer menjadi maksimal 12 kolom. Berikut ilustrasi pembagian kolom sistem
grid.
Secara logis, lebar satu layar penuh diasumsikan sebagai angka 12. Untuk membagi
layar menjadi beberapa kolom, digunakan variable angka pembagi.
▪ Baris pertama membagi layar 12/1, sehingga ada 12 kolom.
▪ Baris kedua membagi layar 12/3, sehingga ada 4 kolom.
▪ Baris ketiga membagi layar 12/4, sehingga ada 3 kolom.
▪ Baris keempat membagi layar 12/6, sehingga ada 2 kolom.
▪ Baris terakhir membagi layar 12/12, sehingga ada 1 kolom.
Dengan demikian, class col-md-4 pada contoh bisa diartikan bahwa lebar kolom saat di
layar desktop adalah sepertiga layar (12/4). Jika di- preview. maka kode HTML pada
contoh akan menjadi seperti berikut:
▪ Jika diakses di desktop atau layar lebar, maka masing-masing kolom akan
ditampilkan berjajar dengan ukuran sepertiga layar.
▪ Jika diakses dari ponsel atau tablet, maka masing-masing kolorn akan ditampilkan
bertumpuk dengan ukuran satu layar penuh.
Contoh:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.row {
margin-top: 1em;
}
[class^="col"] {
background-color: rgba(61, 124, 75, 0.15);
border: 1px solid rgba(97, 124, 61, 0.2);
padding: 0.4em;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12"> Col-12 </div>
</div>
<div class="row">
<div class="col-4"> Col-4 </div>
<div class="col-4"> Col-4 </div>
<div class="col-4"> Col-4 </div>
</div>
<div class="row">
<div class="col-3"> Col-3 </div>
<div class="col-6"> Col-6 </div>
<div class="col-3"> Col-3 </div>
</div>
<div class="row">
<div class="col-2"> Col-2 </div>
<div class="col-8"> Col-8 </div>
<div class="col-2"> Col-2 </div>
</div>
<div class="row">
<div class="col-1"> Col-1 </div>
<div class="col-10"> Col-10 </div>
<div class="col-1"> Col-1 </div>
</div>
<div class="row">
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
</div>
<div class="row">
<div class="col-2"> Col-2 </div>
<div class="col-2"> Col-2 </div>
<div class="col-2"> Col-2 </div>
<div class="col-2"> Col-2 </div>
<div class="col-2"> Col-2 </div>
</div>
</div>
<script src="js/bootstrap.bundle.js"></script>
</body>
</html>
Penjelasan:
<div class="row">
<div class="col-12"> Col-12 </div>
</div>
class=”col-12″. Ini berarti lebar kolom mencakup 12 segmen, sehingga kolom tersebut
akan menempati satu baris penuh.
<div class="row">
<div class="col-4"> Col-4 </div>
<div class="col-4"> Col-4 </div>
<div class="col-4"> Col-4 </div>
</div>
class=”col-4″. Karena nilai kolom ini sama-sama bernilai 4, maka lebar segmen akan
dibagi sama rata.
<div class="row">
<div class="col-3"> Col-3 </div>
<div class="col-6"> Col-6 </div>
<div class="col-3"> Col-3 </div>
</div>
nilai class sudah berbeda, yakni class=”col-3″, class=”col-6″ dan class=”col-3″. Akibatnya,
kolom tengah berukuran 2 kali lebih besar daripada kolom pertama dan ketiga.
<div class="row">
<div class="col-2"> Col-2 </div>
<div class="col-8"> Col-8 </div>
<div class="col-2"> Col-2 </div>
</div>
class=”col-2″, class=”col-8″ dan class=”col-2″. Hasilnya, kolom kedua menjadi cukup
lebar dan mengambil sekitar 66% lebar baris.
<div class="row">
<div class="col-1"> Col-1 </div>
<div class="col-10"> Col-10 </div>
<div class="col-1"> Col-1 </div>
</div>
Kombinasi row-nya adalah class=”col-1″, class=”col-10″ dan class=”col-1″. Sekarang
kolom kedua akan menempati 83% lebar baris.
<div class="row">
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
<div class="col-1"> Col-1 </div>
</div>
Class=”col-1 sebanyak 12, sehingga kolom yang terbentuk sebanyak 12 dengan lebar
yang sama.
<div class="row">
<div class="col-2"> Col-2 </div>
<div class="col-2"> Col-2 </div>
<div class="col-2"> Col-2 </div>
<div class="col-2"> Col-2 </div>
<div class="col-2"> Col-2 </div>
</div>
Class=”col-2 sebanyak 5, sehingga kolom yang terbentuk sebanyak 5
Menggunakan teknik penomoran segmen seperti ini kita bisa membuat struktur halaman
dengan mudah, misalnya di sisi kiri terdapat sidebar dengan lebar 4 segmen, lalu di kanan
adalah bagian konten dengan lebar 8 segmen. Maka kode untuk grid Bootstrap menjadi:
<div class="container">
<div class="row">
<div class="col-4"> Sidebar </div>
<div class="col-8"> Konten </div>
</div>
</div>
GAMBAR
Bootstrap dapat menampilkan gambar pada halaman web dengan beberapa jenis style
sebagai berikut:
1. Rounded
class image jenis ini akan membentuk gambar persegi dengan bentuk bulat/melengkung
pada setiap sudutnya. Syntax untuk membuat gambar dengan tipe ini dengan
menggunakan class rounded
<img src="pantai.png" class="rounded" alt="Pantai">
2. Rounded Circle
Class image jenis ini akan membentuk gambar menjadi bulat. Untuk membuat gambar
dengan jenis ini menggunakan class rounded-circle
<img src="pantai.png" class="rounded-circle" alt="Pantai">
3. Thumbnail
Class image jenis ini akan membentuk gambar thumbnail. Menggunakannya cukup
menggnakan class img-thumbnail
<img src="pantai.png" class="img-thumbnail" alt="Pantai">
Mengatur Posisi gambar dengan Bootstrap
Kita dapat mengatur posisi gambar pada halaman web kita dengan menggunakan
bootstrap. Terdapat tiga posisi yang dapat kita atur yaitu:
▪ Rata kiri menggunakan class = float-left
▪ Rata kanan menggunakan class = float-right
▪ Tepat ditengah menggunakan class = mx-auto d-block
TEXT
Ukuran default font di Bootsraop adalah 16px dan spasi 1.5. Jika menggunakan tag <p>
maka margin-atas=0 dan margin bawah:1rem. Semua Heading HTML, mulai dari <h1>
sampai <h6> tersedia di Bootstrap. Untuk mengatur posisi rata tengah gunakan
class=”text-center”, rata kanan gunakan class=”text-end”, rata kiri gunakan class=”text-
end”.
Di dalam Bootstrap 5, terdapat 13 class untuk mengubah warna teks, yakni:
▪ .text-primary ▪ .text-dark
▪ .text-secondary ▪ .text-body
▪ .text-success ▪ .text-muted
▪ .text-danger ▪ .text-white
▪ .text-warning ▪ .text-black-50
▪ .text-info ▪ .text-white-50
▪ .text-light
Contoh:
COLOR
Warna untuk background memiliki beberapa kelas yaitu: .bg-primary, .bg-
success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-
dark and .bg-light.
TABEL
Beberapa class boostrap yang digunakan untuk table sebagai berikut:
1. Basic
Menggunakan style basic, dimana garis hanya ada pada row atau baris.
Menggunaka class=”table”
2. Striped row
Menggunakan class=”table-striped”
3. Boredered
Pada class=”teble-bordered” semua table baik kolom dan baris memiliki garis.
BUTTON
Bootstrap 5 mendukung 10 style tombol(button)
NAVBAR
1. Menu Horizontal
Untuk membuat menu simple secara horizontal tambahkan class=”nav” pada tag
<ul>, kemudian diikuti class=”nav-item” untuk setiap tag <li> dan class=”nav-link untuk
linknya>
2. Pills
Untuk membuat menu navigasi pills gunakan class=”nav nav-pills”.
3. Menu Vertikal
Untuk membuat menu vertikal tambahkan class=”nav flex-column” pada tag <ul>,
kemudian diikuti class=”nav-item” untuk setiap tag <li> dan class=”nav-link untuk
linknya>
FORM
1. Untuk mengatur tampilan form kita menggunakan class="form-control" pada tag
<input>. class ini dapat digunakan untuk type inputan text, password, dan textarea
<input type="text" name="username" class="form-control"
placeholder="username" />
2. Inputan select menus: class yang digunakan adalah form-select
<select class="form-select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
3. Inputan bertipe checkboxes dan radio buttons menggunakan class=” form-
check-input”. inputan bertipe checboxes harus di bungkus dengan elemen
class="form-check">”
checkboxes
div class="form-check">
<input type="checkbox" class="form-check-input" id="check1"
name="option1" value="something" checked>
<label class="form-check-label" for="check1">Option 1</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check2"
name="option2" value="something">
<label class="form-check-label" for="check2">Option 2</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" disabled>
<label class="form-check-label">Option 3</label>
</div>
Radio buttons
<div class="form-check">
<input type="radio" class="form-check input" id="radio1"
name="optradio" value="option1" checked>Option 1
<label class="form-check-label" for="radio1"></label>
</div>
<div class="form-check">
<input type="radio" class="form-check-
input" id="radio2" name="optradio" value="option2">Option 2
<label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" >Option 3
<label class="form-check-label"></label>
</div>
Untuk pembelajari lebih lanjut mengenai bootstaps 5 silahkan klik link
berikut:
Bootstrap 5 Tutorial (w3schools.com)
Atau
Introduction · Bootstrap v5.0 (getbootstrap.com)
PRAKTIKUM
I. Instalasi Bootstrap
1. Buat Folder baru dengan nama bs.
2. Silahkan buka web resmi Bootstrap di getbootstrap.com, lalu klik tombol
Download yang ada di tengah halaman.
3. Di halaman Download, scroll sedikit ke bawah hingga judul “Compiled CSS and
JS“, lalu klik lagi tombol Download.
4. Silahkan extract file ini ke folder bs.
5. Terdapat 2 folder dalam file ini, yakni folder css dan folder js. Setiap folder berisi
cukup banyak file, tapi yang kita perlukan hanya 2 saja, yakni
css\bootstrap.css, dan js\bootstrap.bundle.js.
II. Website
1. Silahkan buat file tes.html di dalam folder bs, lalu isi dengan kode berikut:
Penjelasan:
a. Baris 5: Responsive Design
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
Viewport: menggambarkan alat (notebook, tablet, dekstop PC, cellular phone,
dll) yang dapat menampilkan halaman web. meta viewport ini digunakan untuk
mengatur tampilan browser pada mobile device / tablet.
Tag content=“width=device-width” digunakan untuk mengatur lebar tampilan
awal browser sesuai dengan lebar device yang digunakan.
Tag “initial-scale=1.0” digunakan untuk mengatur level zoom dari tampilan
saat ditampilkan
b. Baris 7
Digunakan untuk mengaktifkan fitur responsive web.
<link rel="stylesheet" href="css/bootstrap.css">
2. Jika tidak ada kesalahan dalam penulisan, Salah satu bukti jika kode CSS
Bootstrap sudah berhasil diakses adalah teks "Belajar Bootstrap" berada sedikit
ke tengah sebagai efek dari tag <div class="container">. Selain itu teks tampil
dengan font sans-serif (font tanpa "kaki") yang jika dijalankan di Windows 10
akan memakai font Segoe UI.
Untuk membuat halaman website seperti diatas, Langkah-langkah yang akan
dilakukan adalah:
3. Buat halaman baru dengan nama index.html
4. Dibagian head tambah code berikut
5. Dibagian body. Buat tag <div> dengan kelas container, kemudian didalamnya
buat 3 class=”row”.
- class=”row” pertama (Header) memiliki 1 kolom dengan ukuran 12 bagian
- class=”row” kedua memiliki, 2 kolom, kolom pertama (Sidebar navigasi)
ukurannya 3 bagian, kemudian kolom kedua ( konten) ukuran 9 bagian.
- class=”row” ketiga (footer) memiliki 1 kolom dengan ukuran 12 bagian
6. Dibagian header tambahkan
- baris 13: class=”bg-primary” digunakan untuk memberi warna background
pada header.
- Baris 14: img-circle digunakan untuk membuat gambar menjadi lingkaran.
Mx-auto d-block mengatur letak gambar di tengah, p-3 mengatur padding
7. Dibagian Sidebar tambahkan
- Baris 21: nav flex-column digunakan untuk membuat menu secara vertical
8. Dibagian konten tambahkan
- Baris 34: text-primary digunakan untuk memberi warna biru pada tulisan.
- Untuk textnya gunakan dummy text !Lorem
9. Dibagian footer tambahkan
- Baris 38: text- center digunakan untuk mengatur text ditengah
10. Source secara lengkap:
III. Form
1. Buka kembali halaman buku_tamu.html
2. Dibagian head tambah code berikut
TUGAS
1. Kerjakan praktikum!
2. Buka Kembali tugas 2: artikel.html, kemudian gunakan bootstraps untuk desain
tampilannya, mulai dari template website, text, gambar, dan tabel
3. Tambahkan juga program java script pada halaman artikel.html. Untuk program
java script yang di tambahkan terserah anda.
Yang dikumpulkan adalah file dalam bentuk rar.
