Bootstrap latihan

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%;

}

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>

.img-responsive {

display: block;

max-width: 100%;

height: auto;

}

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>

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

style.css

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” >

https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

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...

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...

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

Referensi

• Rozi, Zaenal A. (2015), Bootstrap Design Framework, Elexmedia Komputindo,

Jakarta Pusat

• http://getbootstrap.com

http://getbootstrap.com/

Bootstrap latihan

Software

Transcript of Bootstrap latihan