Pengenalan Sistem Grid

Sistem Grid

Selamat datang di tutorial ke-2 Bootstrap. Pada tutorial kali ini, saya akan membahas sistem grid dan tata letak di Bootstrap. Disarankan Untuk melihat postingan saya sebelum nya tentang cara Memasang dan Downlaod Bootstrap Dengan Click Link  ->>https://ngoding-gan.blogspot.com/2018/12/cara-mendownload-dan-menggunkan.html

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-

1. Kelas (class) .container

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

Contoh nya : 

Maka Hasil Nya Akan Seperti Berikut : 

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:

Ukuran lebar kontainer akan mengikuti lebar browser. Coba saja perbesar ukuran browser, maka ukuran lebar kontainernya pun akan ikut berubah (membesar).

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:

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:

Sekian Tutorial Kali ini Next akan ada Tutorial Membuat "Navigation"

Thanks