Sistem grid memudahkan kita mengatur tata letak elemen di web. Zaman dulu, kebanyakan web menggunakan tag table untuk mengatur tata letaknya. Sekarang sudah tidak lagi. Karena kurang efektif dan tidak SEO friendly. Oleh karena itu, website zaman sekarang menggunakan CSS untuk mengatur tata letaknya.
Sistem grid di Bootstrap mengadopsi konsep tabel. Karena itu, Kita hanya perlu menggunakan tiga kelas untuk membuatnya. Kelas tersebut kita terapkan dalam tag <div>. Berikut ini tiga kelas yang dimaksud:
Kelas .container
Kelas .row
Kelas .col-*
Mari kita bahas satu persatu :
1. Kelas .container
Kelas kontainer berfungsi membungkus konten web. Kelas ini sama fungsinya seperti tag <table> dalam pembuatan tabel. Ada dua jenis kelas .container: (1) Kelas .container yang ukuran lebarnya tetap (fixed) dan (2) kelas .container-fluid yang ukuran lebarnya mengikuti lebar browser.
Selanjutnya, kita tambahkan tag <div> dengan kelas .container dan kode CSS untuk background dan warna teks. Sehingga kodenya menjadi seperti berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Hello Bootstrap</title>
<!-- menyisipkan bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
</head>
<body>
<div class="container" style="background: #008080; color: white">
<h1>Hello Bootstrap!</h1>
<p>Selamat datang di tutorial framework bootstrap</p>
</div>
</body>
</html>
Maka, hasilnya akan seperti ini:
Konten web setelah dibungkus dengan kelas container
Konten web berpindah ke tengah, tidak lagi berada di tepi (samping). Itu disebabkan karena pengaruh dari kelas .container. Sekarang kita coba menggunakan kelas .container-fluid. Gantilah kelas container menjadi kelas container-fluid. Maka hasilnya akan seperti berikut ini:
Konten web yang dibungkus dengan kelas container-fluid
Ukuran lebar kontainer akan mengikuti lebar browser. Coba saja perbesar ukuran browser, maka ukuran lebar kontainernya pun akan ikut berubah (membesar).
Satu hal lagi, di dalam sebuah website boleh memiliki lebih dari satu elemen kontainer. Jadi, bila anda ingin memisahkan kontainer untuk header, artikel, footer, dll. Itu dibolehkan.
2. Kelas .row
Di dalam kelas .container ada kelas lagi, yaitu kelas .row. Fungsinya untuk membuat baris. Bila dibandungkan dengan tabel, kelas ini seperti tag <tr>. Kita harus membuat elemen div dengan kelas row di dalam kontainer. Jangan membuatnya di luar. Contohnya sebagai berikut:
<div class="container">
<div class="row">
<!-- konten web di sini -->
</div>
</div>
3. Kelas .col-*
Di dalam elemen row, ada kelas .col-*. Fungsinya untuk membuat kolom. Bila dibandingkan dengan tabel, kelas .col-* seperti tag <td>. Kelas .col-* memiliki ukuran-ukuran:
col-xs-* (Extra Small) untuk perangkat dengan layar kecil seperti ponsel;
col-sm-* (Small) untuk perangkat dengan layar agak kecil seperti tablet;
col-md-* (medium) untuk perangkat dengan layar sedang seperti laptop; dan
col-lg-* (Large) untuk perangkat dengan layar besar seperti komputer (PC).
Jadi, agar ukurannya sesui dengan perangkat yang digunakan, maka gunakanlah semuanya. Karena, sekarang website tidak hanya diakses melalui PC dan laptop saja. Namun, pada tutorial ini, kita sepakati menggunakan yang medium, yaitu col-md-*.
Ada lagi ukuran yang harus diketahui, yaitu ukuran lebar kolom. Lebar kolom paling panjang adalah 12 dan paling pendek adalah 1. Untuk membuat kolom dengan lebar 12, kita cukup memanggil nama kelasnya .col-md-12. Pada dokumentasi Boostrap, sudah dijelaskan seperti ini:
Sistem grid Bootstrap
Sekarang mari kita coba menerapkan konsep grid ini dengan membuat kode HTML untuk rancangan web seperti beikut ini:
Pada rancangan di atas, terdapat tiga baris (row) dan satu kolom (col). Maka bentuk kodenya akan seperti berikut ini:
Maka akan menghasilkan tampilan seperti berikut ini:
Semoga sampai disini teman - teman sudah mengerti dan bisa mengimplementasikannya ke dalam real project ya.
Komentar
Posting Komentar