Pemrograman

Bahasa

Framework

Peralatan

Info

Tutorial Bootstrap (2) - Sistem Grid dan tata letak

– 04 January 2016
Cover TutorialSelamat datang di tutorial ke-2 Bootstrap. Pada tutorial kali ini, saya akan membahas sistem grid dan tata letak di Bootstrap. Langsung saja, ya!

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:
  1. Kelas .container
  2. Kelas .row
  3. 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.

Pertama kita coba dulu kelas .container. Kita tinjau ulang hasil dari tutorial pertama. Konten web yang belum menggunakan kelas .container: hello_bootstrap.html
Hasil output pada tutorial sebelumnya
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:
  1. col-xs-* (Extra Small) untuk perangkat dengan layar kecil seperti ponsel;
  2. col-sm-* (Small) untuk perangkat dengan layar agak kecil seperti tablet;
  3. col-md-* (medium) untuk perangkat dengan layar sedang seperti laptop; dan
  4. 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:

Nah, sampai di sini dulu tutorial kali ini. Semoga dapat dipahami dengan jelas. Kalau pun belum paham, silahkan berdiskusi melalui komentar. Selamat belajar Bootstrap.

Kode sumber: petanikode/tutorial-bootstrap
Referensi: Dokumentasi Bootstrap