SYSTEM GRID BOOTSTRAP 3 TEKNOLOGI WEB

Grid System Grid System adalah alat yang akan membantu kita untuk membuat layout web agar menjadi lebih rapi. Di dalam bootstrap, grid system dibagi dalam 12 kolom (col-*) dimana dalam tiap barisnya (.row) yang diset dalam empat model xs (extra small), md (medium), sm (small), lg (large) sesuai lebar dari layar monitor Membantu kita dalam membuat layout web yang rapi, grid system bootstrap juga membantu membuat layout web yang responsive.

Ukuran Grid System Bootstrap col-xs-* ini digunakan pada ukuran kurang dari 768px atau seukuran mobile. col-sm-* ini digunakan pada ukuran lebih dari atau sama dengan 768px atau seukuran tablet. col-md-* ini digunakan pada ukuran lebih dari atau sama dengan 992px atau selebar monitor. col-lg-* ini lebih dari atau sama dengan 1200px atau monitor besar.

Contoh : Membuat tiga kolom apapun ukuran layarnya <div class="col-md-3 col-xs-3 col-sm-3 col-lg-3">...</div> Membuat tiga kolom saat berada di layar monitor seperti laptop tapi menjadi satu kolom saat berada dilayar smartphone. <div class="col-md-3">...</div>

Class Layout Web KONTAINER <div class="continer"> <div class="row"> <div class="col-md-12">...</div> </div> TANPA KONTAINER <div class="col-md-12"> <div class="row"> <div class="col-md-12">...</div> </div>

Row membantu untuk membuat baris baru dalam membuat layout. Selain untuk membuat baris baru layout biasa digunakan ketika hendak menambahkan grid di dalam grid <div class="col-md-3"> <div class="row"> <div class="col-md-6"> <div class="col-md-3">...</div> <div class="col-md-9">...</div> </div> <div class="col-md-6">...</div>

STUDI KASUS Desain website yang sederhana yang meliputu header, navigasi, content, sidebar dan footer. Lebar layar dibagi ke dalam 12 kolom. Header 12 kolom Di bawahnya ada navigasi sebanyak 12 kolom Body 12 kolom Di dalam body bagi lagi 9 kolom untuk konten 3 kolom untuk sidebar Dibawah body adalah footer dengan 12 kolom

SEBELUM MEMBUAT LAYOUT

HEADER <div class="col-md-12"> <div class="row"> <header class="col-md-12"> <!-- SCRIPT HEADER --> </header> </div> <!– akhir header -->

Navigasi <div class="row"> <div class="col-md-12"> <!– script navigasi --> </div> <!– akhir navigasi -->

Konten & Sidebar <div class="row"> <div class="wrapper"> <div class="col-md-9"> <article> <!-- script konten -- > </article> </div> <!– akhir script konten -- > <div class="col-md-3"> <aside> <!-- script sidebar-- > </aside> <!– akhir sidebar -->

Footer <div class="row"> <div class="col-md-12"> <footer class="footer"> <!– script footer --> </footer> </div> <!– akhir footer -->