Tutorial Bootstrap untuk Pemula – Grid Layout (bagian 2)

Tutorial Sebelumnya -> Cara Menggunakan Bootstrap untuk Pemula (Bagian 1)

Bootstrap merupakan CSS Framework yang paling banyak digunakan saat ini, css framework dari twitter ini sangat mudah digunakan dengan banyak sekali komponen yang tersedia dan siap pakai.

Pada tutorial Bootstrap untuk pemula sebelumnya sudah dijelaskan secara singkat penggunaan bootstrap, sekarang kita belajar bagaimana menggunakan Grid layout di Bootstrap. Dengan Grid Layout ini kita dengan mudah dan cepat dalam membuat layout website.

Memahami Konsep Grid Layout

Bootstrap menyediakan 12 grid yang biasa kita pakai, untuk menggunakannya kita tinggal tambahkan class pada div,
diatas saya menggunakan class container bertujuan untuk membatasi div col-md-1 ini yang biasa saya pakai. ada 12 class col-md-1 yang mana memang dalam 1 baris maksimal adalah 12 kolom.

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”jbmvme” default_tab=”result” user=”beb”]See the Pen <a href=’http://codepen.io/beb/pen/jbmvme/’>Grid Layout Bootstrap</a> by Belajar Web (<a href=’http://codepen.io/beb’>@beb</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

jika kita ingin membagi dalam 3 kolom maka kita tinggal membagi 12/3 = 4, jadi class yang harus kita pakai adalah col-md-4 3 buah, seperti kode berikut

<div class="row">
   <div class="col-md-4"> kolom 1</div>
   <div class="col-md-4"> kolom 2</div>
   <div class="col-md-4"> kolom 3</div>
</div>

tutorial bootstrap grid layout

Sebagai catatan, untuk menulis kode pada baris baru kita harus selalu menggunakan class=”row” agar grid tidak menumpuk.

Baca Juga:  Full Page Background Slideshow dengan JQuery

Offsetting the Grid Columns

maksud dari offsetting disini adalah menggeser grid ke sebelah kanan, asumsinya adalah bootstrap mempunyai 12 grid/kolom, kita ingin membuat layout 2 kolom dengan 1 kolom berisi 3 gird, kode htmlnya seperti ini

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”YyVOxZ” default_tab=”result” user=”beb”]See the Pen <a href=’http://codepen.io/beb/pen/YyVOxZ/’>Offset grid bootstrap</a> by Belajar Web (<a href=’http://codepen.io/beb’>@beb</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

jika kita perhatikan saya tambahkan class col-md-offset-3 maksudnya adalah saya menggunakan 3 kolom dan memajukan 3 kolom, jadi total yang terpakai untuk 1 layout kolom adalah 6 grid. perhatikan hasil output dari kode diatas

Nesting kolom Grid

Bootstrap juga memungkinkan untuk Nesting (bersarang), maksudnya adalah kita bisa menaruh baris baru (row) di dalam row, perhatikan contoh berikut:

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”GpmXyO” default_tab=”result” user=”beb”]See the Pen <a href=’http://codepen.io/beb/pen/GpmXyO/’>Nested Kolom Grid</a> by Belajar Web (<a href=’http://codepen.io/beb’>@beb</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Penjelasan kode diatas adalah pada baris warna merah didalamnya terdapat baris warna biru, ini adalah bersarang.

untuk lebih detail tentang grid layout ini bisa simak halaman http://getbootstrap.com/css/

Demikian tutorial bootstrap untuk pemula pembahasan grid layout, jika ada pertanyaan silakan.

Lanjut tutorial ke Bagian 3 -> Tutorial Bootstrap untuk Pemula – Fixed Layout (bagian 3)

Komentar

comments

zulsdesign

Seorang Web Designer, Web Developer, Wordpress Development dan independen Blogger. Spesialisasi Personal Branding. Selalu haus akan ilmu tentang perkembangan dunia Web Design, Social Media, Online Marketing. Kadang-kadang juga berprofesi sebagai konsultan Website dadakan :)

grain storage instagram türk takipçi satın al