Penggunaan Grid System Dalam Bootstrap

Oke pada kesempatan ini saya akan membahas sistem grid di dalam bootstrap, sistem grid digunakan untuk membuat layout halaman melalui serangkaian baris dan kolom yang ada pada body konten teman – teman. Di dalam framework terdapat aturan – aturan pemakaiannya, berikut adalah cara sistem grid Bootstrap bekerja:

Baris harus ditempatkan dalam .container (fixed-width) atau .container-cairan (full-width) untuk keselarasan dan padding.
Gunakan baris (row) untuk membuat grup horizontal kolom.
Konten harus ditempatkan dalam kolom,
kelas jaringan yang telah ditetapkan seperti .row dan .col-xs-4 yang tersedia untuk cepat membuat layout jaringan.
Kolom membuat talang (kesenjangan antara konten kolom) melalui padding. Padding yang disajikan di baris untuk kolom pertama dan terakhir melalui marjin negatif pada .rows.
kolom Grid dibuat dengan menentukan jumlah dua belas kolom yang tersedia. Misalnya, tiga kolom yang sama akan menggunakan tiga .col-xs-4.

Oke penjelasan di atas adalah cara kerja sistem grid Bootstrap, karena di dalam framework kita tidak bisa sebebas di dalam HTML dan CSS. kita harus mengikuti aturan yang telah di buat oleh framework tersebut.
Di bawah ini saya akan memberikan gambaran tentang bagaimana sistem grid Bootstrap bekerja terhadap layar tampilan. Ada beberapa aspek yang dapat kita lihat dari sistem grid Bootstrap yaitu Extra small devices(Phones ), Small devices Tablets , Medium devices Desktops, Large devices Desktops . Lihat bagaimana aspek dari Bootstrap sistem grid berkerja di beberapa perangkat;

Dari gambar di atas adalah contoh bagaimana sistem grid Bootstrap bekerja terhadap layar tampilan website kita, dan akan saya berikan contoh juga bagaimana cara pemakaian sistem grid bootstrap dalam pembuatan website.
Oke lihat contoh di bawah ini bagaimana cara pembuatannya;

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Jadi dari contoh di atas dapat di ambil kesimpulan bahwa sistem grid bootstrap tidak boleh lebih dari 12, mau di bentuk berapa kolom pun tampilan website kita, kita tetap harus menggunakan 12 grid tidak boleh lebih dari 12 grid. Oke itulah tadi pembahasan saya tentang Penggunaan Grid System Dalam Bootstrap semoga bermanfaat.

Penggunaan Grid System Dalam Bootstrap

Kategori