1. BOOTSTRAP
1. Memahami Responsive Design
1.1. Menggunakan Meta Viewport
<meta name=”viewpoort” content=”width=device-width,
initial-scale=1”>
Baris meta viewport di atas untuk menerapkan pendekatan desain web yang
mobile first. Penjelasannya sebagai berikut.
a. name=”viewport“: mendefinisikan nama meta viewport. Tag-nya harus diletakkan
di bagian <head>. Bergungsi sebagai pengatur area yang dapat dilihat di layar
peranti mobile.
b. width=device-width: menetapkan lebar virtual viewport bagi peranti mobile. Nilai
device-width artinya lebar fisik peranti mobile. Jadi ukuran virtual viewport
ditetapkan sama dengan lebar fisik peranti.
c. initial-scale=1: menetapkan default pembesaran (zoom) halaman web saat pertama
kali di load di browser. Nilai 1 berarti tidak diperbesar atau ditampilkan sesuai
dengan ukuran aslinya.
Tanpa ada aturan initial-scale di viewport, maka ukuran font dan gambar
halaman web di peranti mobile akan tampak sangat kecil dan sulit dibaca jika tidak
diperbesar. Tanpa aturan width di viewport, halaman web di peranti mobile akan
terpotong dan harus di scroll secara vertikal dan horizontal untuk melihat bagian yang
terpotong.
1.2. Menggunakan Satuan Ukuran Relatif
Pendekatan paling penting dalam membuat tampilan yang responsive adalah
pemakaian satuan ukuran relatif. Lebar sebuah elemen web tidak menggunakan satuan
tetap seperti px (piksel), akan tetapi menggunakan persentase.
Perhatikan contoh berikut:
/*tidak responsive*/
.navbar {
width: 1024px;
}
/*responsive*/
.navbar {
width: 100%;
}
2. Pada class navbar pertama, bilah navigasi dibuat dengan lebar tetap 1024px. Jika
dibuka dengan peranti layar kecil, maka bilah navigasi menjadi terpotong. Sedangkan
pada layar yang lebih lebar dari 1024 piksel, bilah navigasi menjadi terlalu kecil dan
menyisakan ruang kosong.
Pada class navbar kedua, bilah navigasi dibuat agar lebarnya tetap penuh 100%.
Sehingga meskipun dilihat dari peranti yang berbeda, bilah navigasi akan secara dinamis
berubah mengikuti perubahan layar.
Untuk kebutuhan tertentu misalnya gambar, class CSS juga dilengkapi dengan
aturan batas lebar maksimal, tinggi otomatis, dan ditampilkan dengan mode blok.
Tujuannya agar gambar tidak terpotong dan mengubah ukuran secara otomatis sesuai
dengan ukuran layar. Berikut contoh class-nya:
2. Memahami Grid System
Grid system bootstrap menyediakan sistem tata-letak yang membagi layar
menjadi maksimal 12 kolom. Pengaturannya ditetapkan di file CSS. Pembagian layar
hampir menyerupai sebuah tabel normal, akan tetapi jumlah kolom dan baris dapat
berubah secara dinamis mengikuti lebar layar peranti. Teknik ini biasa disebut dengan
fluid design.
2.1. Membuat Kolom
Untuk memahami cara kerja pembuatan kolom, perhatikan contoh kode HTML
berikut:
Pengaturan lebar sekelompok kolom ditempatkan di dalam sebuah class CSS
bernama row. Penetapan lebar masing-masing kolom menggunakan class dengan
susunan: col-[layar]-[pembagi]. Contoh di atas menggunakan col-md-4.
Variable [layar] untuk menerapkan aturan pada jenis peranti tertentu. Nilai
selengkapnya adalah sebagai berikut.
a. xs : untuk ponsel (layar < 768px)
b. sm : untuk tablet (layar >= 768px)
<div class=”row”>
<div class=”col-md-4”>Kolom 1</div>
<div class=”col-md-4”>Kolom 2</div>
<div class=”col-md-4”>Kolom 3</div>
</div>
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
3. c. md : untuk layar desktop (layar >= 992px)
d. lg : untuk desktop berlayar lebar (layar>=1200px)
1 1 1 1 1 1 1 1 1 1 1 1
3 3 3 3
4 4 4
6 6
12
Gambar 1 Ilustrasi Pembagian Kolom Sistem Grid
Lebar satu layar diasumsikan sebagai angka 12. Untuk membagi layar menjadi
beberapa kolom, digunakan variabel angka pembagi (Gambar 1).
a. Baris pertama membagi layar 12/1, sehingga ada 12 kolom.
b. Baris pertama membagi layar 12/3, sehingga ada 4 kolom.
c. Baris pertama membagi layar 12/4, sehingga ada 3 kolom.
d. Baris pertama membagi layar 12/6, sehingga ada 2 kolom.
e. Baris pertama membagi layar 12/12, sehingga ada 1 kolom.
2.2. Mengatur Ukuran Kolom untuk Berbagai Layar Piranti
Ukuran kolom dapat juga diatur untuk beberapa peranti layar dengan cara
menambahkan class col di tiap kolom. Misalnya tambahkan aturan col-sm-6 dan col-lg-
3 sehingga menjadi seperti berikut:
Jika di preview maka hasilnya adalah:
a. Pada ponsel, lebar tiap kolom tetap seperti sebelumnya, karena tidak diberi aturan
tambahan;
b. Pada tablet, lebar tiap kolom berubah menjadi setengah layar, karena diberi aturan
col-sm-6. Kolom ketiga otomatis menempati baris baru di bawahnya.
c. Pasa desktop, lebar tiap kolom tetap seperti sebelumnya, karena masih memakai
aturan col-md-4.
d. Pada desktop layar lebar, tiap kolom berubah menjadi seperempat layar, karena
diberi aturan col-lg-3. Ruang untuk kolom keempat masih kosong karena memang
tidak didefinisikan dalam kode HTML.
<div class=”row”>
<div class=”col-sm-6 col-md-4 col-lg-3”>Kolom 1</div>
<div class=” col-sm-6 col-md-4 col-lg-3”>Kolom 2</div>
<div class=” col-sm-6 col-md-4 col-lg-3”>Kolom 3</div>
</div>
4. Setiap kolom dalam satu class row tidak harus selalu sama, akan tetapi sangat
disarankan total lebarnya selalu 12. Dalam satu baris, dapat dibuat kolom dengan ukuran
yang berbeda.
3. Langkah-langkah Mendesain Web dengan Bootstrap
Untuk mencoba membuat desain menggunakan bootstrap, lakukan langkah-
langkah berikut ini.
a. Buat sebuah folder di komputer kerja anda. Beri nama latihanbootstrap pada folder
tersebut.
b. Letakkan folder CSS, fonts, dan js di dalam folder latihanbootstrap.
c. Ketikkan script HTML di bawah ini.
d. Kemudian ambahkan juga script css dan simpan di dalam folder CSS.
index.html
7. Bootstrap Lanjut
Pastikan file CSS versi ringkas Bootstrap (bootstrap.min.css) disisipkan di antara tag
<head>. Berikut adalah kode pemanggilan jika CSS Bootstrap diletakkan di dalam
folder css.
<link href=”css/bootstrap.min.css” rel=”stylesheet” >
Pastikan JavaScript versi ringkas dari jQuery dan Bootstrap disisipkan di bagian paling
bawah dokumen, tepat sebelum tag penutup <body>. Penempatan JavaScript di akhir
dokumen HTML bertujuan agar nantinya loading halaman web menjadi lebih cepat.
jQuery merujuk langsung ke google API, sedangkan JavaScript Bootstrap dipanggil dari
internal Web.
<script
src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.m
in.js”></script>
<script src=”js/bootstrap.min.js”></script>
Alternatif lain yang dapat digunakan adalah memanfaatkan Bootstrap CDN (Content
Delivery Network). Bootstrap CDN adalah layanan CDN yang khusus menyediakan file
untuk Bootstrap. Cara ini lebih praktis karena tidak perlu men-download dan
menempatkan file-file Bootstrap ke proyek web. Untuk menggunakan file Bootstrap
CDN, cukup dengan merujuk URL file CSS dan file JavaScript Bootstrap dari sebuah
CDN.
<link href=”css/bootstrap.min.css” rel=”stylesheet” >
Ubah dengan baris berikut:
<link
href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstr
ap.min.css” rel=”stylesheet” >
Selain itu ubah rujukan berikut
<script src=”js/bootstrap.min.js”></script>
Menjadi:
<link
href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstra
p.min.js” rel=”stylesheet” >
8. Teknik merujuk file dari CDN lebih praktis dan menghemat bandwith hosting. Loading
dari web juga menjadi lebih cepat karena file-file dari CDN tersebut kemungkinan besar
sudah di cache oleh browser pengunjung ketika membuka situs berbasis Bootstrap
lainnya. Akan tetapi, teknik ini kurang tepat jika ingin melakukan penyesuaian-
penyesuaian pada file-file bootstrap (customize). Solusinya, dibuat sebuah file CSS
custom untuk memodifikasi Bootstrap.
Latihan 1
Tambahkan kode berikut untuk memanggil CSS Bootstrap agar dapat membuat customize
tampilan web anda.
Untuk membuat sebuah carousel (slide gambar) ubah bagian ini:
Menjadi:
Next code...
9. Tambahkan tautan JavaScript CDN seperti berikut tepat di atas tag penutup </body>
Atau dapat menggunakan kode berikut:
Hasil Carousel
Latihan 2
Memanfaatkan component yang disediakan oleh Bootstrap. Tuliskan kode berikut kemudian
simpan di folder kerja anda. (misal: index2.html)
Next code...
10. Buka komponen navbar. Copy kode berikut ke dalam index2.html
Hasilnya adalah sebagai berikut:
Latihan 3
1. Modivikasi index2.html dengan pengaturan grid seperti yang dilakukan pada index.html
2. Buat tampilan gambar carousel menjadi penuh (contoh seperti gambar)
3. Modifikasi grid (pengaturan kolom) di halaman beranda anda
4. Isikan judul konten pada masing-masing kolom tersebut
5. Modifikasi tampilan CSS melalui bootstrap.js
11. Referensi
• Rozi, Zaenal A. (2015), Bootstrap Design Framework, Elexmedia Komputindo,
Jakarta Pusat
• http://getbootstrap.com
![Pada class navbar pertama, bilah navigasi dibuat dengan lebar tetap 1024px. Jika
dibuka dengan peranti layar kecil, maka bilah navigasi menjadi terpotong. Sedangkan
pada layar yang lebih lebar dari 1024 piksel, bilah navigasi menjadi terlalu kecil dan
menyisakan ruang kosong.
Pada class navbar kedua, bilah navigasi dibuat agar lebarnya tetap penuh 100%.
Sehingga meskipun dilihat dari peranti yang berbeda, bilah navigasi akan secara dinamis
berubah mengikuti perubahan layar.
Untuk kebutuhan tertentu misalnya gambar, class CSS juga dilengkapi dengan
aturan batas lebar maksimal, tinggi otomatis, dan ditampilkan dengan mode blok.
Tujuannya agar gambar tidak terpotong dan mengubah ukuran secara otomatis sesuai
dengan ukuran layar. Berikut contoh class-nya:
2. Memahami Grid System
Grid system bootstrap menyediakan sistem tata-letak yang membagi layar
menjadi maksimal 12 kolom. Pengaturannya ditetapkan di file CSS. Pembagian layar
hampir menyerupai sebuah tabel normal, akan tetapi jumlah kolom dan baris dapat
berubah secara dinamis mengikuti lebar layar peranti. Teknik ini biasa disebut dengan
fluid design.
2.1. Membuat Kolom
Untuk memahami cara kerja pembuatan kolom, perhatikan contoh kode HTML
berikut:
Pengaturan lebar sekelompok kolom ditempatkan di dalam sebuah class CSS
bernama row. Penetapan lebar masing-masing kolom menggunakan class dengan
susunan: col-[layar]-[pembagi]. Contoh di atas menggunakan col-md-4.
Variable [layar] untuk menerapkan aturan pada jenis peranti tertentu. Nilai
selengkapnya adalah sebagai berikut.
a. xs : untuk ponsel (layar < 768px)
b. sm : untuk tablet (layar >= 768px)
<div class=”row”>
<div class=”col-md-4”>Kolom 1</div>
<div class=”col-md-4”>Kolom 2</div>
<div class=”col-md-4”>Kolom 3</div>
</div>
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)