Step by step belajar Bootstrap dengan mudah

Bootstrap Grid System

Bootstrap grid system memungkinkan kita untuk menggunakan maximal 12 kolom dalam design halaman website. Jika kita mengingikan untuk menggunakan kolom kurang dari 12` maka kita bisa mengelompokkannya untuk membuat kolom dengan ukuran yang lebih lebar.

Bootstrap grid system adalah design yang responsive` dan kolom akan di susun sesuai dengan ukuran dari layar komputer kita. Pada ukuran layar yang lebar` mungkin akan terlihat lebih bagus jika tampilan website kita menggunakan tiga kolom` akan tetapi pada ukuran layar kecil tentunya akan lebih bagus jika tampilan web disusun dari atas ke bawah dalam 1 kolom.

 

Catatan Penting : Kolom grid hanya bisa di isi dengan maximal 12 kolom dalam 1 baris.

Bootstrap

Class dalam Grid System

Bootstrap grid system memiliki 4 kelas` antara lain

  1. xs ( Untuk layar handphone )
  2. sm ( Untuk layar tablet )
  3. md ( Untuk ukuran desktop )
  4. lg ( Untuk desktop yang lebar )

Masing - masing kelas diatas dapat dikombinasikan untuk membuat layout yang lebih dinamis dan flexible.

Aturan Dalam Gris System

Beberapa aturan dalam grid system Bootstrap antara lain :

  1. Baris harus ditempatkan didalam sebuah kelas .container (lebar tetap) atau .container-fluid (ukuran full) untuk perataan dan jarak yang lebih baik.
  2. Gunakan kelas row untuk membuat group kolom secara horizontal
  3. Content harus diletakkan di dalam kolom` dan hanya kolom yang dianggap parent dari sebuah baris atau row
  4. Kelas yang sudah ditetapkan seperti .row dan .col-sm-4 dapat digunakan untuk membuat grid layout dengan cepat
  5. Kolom memiliki jarak antara tepi dari kolom dan konten dengan padding
  6. Jumlah maximal kolom dalam dalam satu baris adalah 12. Misal jika kita menggunakan 3 kolom` maka kita bisa menggunakan .col-sm-4 sebanyak 3

Struktur Dasar dalam Bootstrap Grid

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

Grid Option

Tabel berikut menunjukkan bagaimana Grid system Bootstrap dapat bekerja pada beberapa perangkat:

  Extra small devices
Phones (<768px)
Small devices
Tablets (>=768px)
Medium devices
Desktops (>=992px)
Large devices
Desktops (>=1200px)
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Number of columns 12 12 12 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column)
Nestable Yes Yes Yes Yes
Offsets Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes

Download script php direktori - opendir


Komentar pembaca

adimohon di bantu untuk tutorial live chatposting pada :2016-10-11 14:06:59
         
     
         
 
         
   
         
   
 

Tulis komentar