Membuat Layout dengan Grid Bootstrap

Bootstrap adalah salah satu css framework yang sangat populer saat ini. Banyak sekali css framework yang terdapat di internet tetapi bootstrap masih menjadi pilihan utama web designer untuk membuat template websitenya. Bootstap memiliki banyak kelebihan di bandingkan dengan css framework lainya. Diantaranya mudah digunakan, lengkap, banyak library dan responsive.

Berbicara masalah responsive template, bootstrap memiliki sebuah library vital yang menjadikan bootstrap menjadi responsive, yaitu grid system. Bagi yang belum paham tentang responsive template yaitu dimana template akan otomatis menyesuaikan tampilannya di berbagai macam resolusi atau device. Sehingga template terlihat rapi dan nyaman dilihat walupun di buka dengan resolusi kecil atau besar, baik itu di mobile, desktop atau gadget.

Untuk melihat dan tes apakah website yang kita buat sudah responsive, Anda dapat mengunjungi Cara Menguji / Tes Responsive Web di Chrome di artikel web design saya sebelumnya.

Langsung saja, sebelum memulai membuat template responsive dengan grid system yang perlu Anda siapkan adalah css framework bootstrap. Silahkan download di sini http://getboostrap.com

Didalam paket boostrap terdapat folder css, fonts, js (di folder dist) itulah core css framework yang akan kita gunakan. Selanjutnya siapkan file .html yang akan kita coding. Yang harus Anda includekan dalam template adalah sebagai berikut:

Setelah itu desain perencanaan template yang akan kita buat, seperti di bawah ini:

Layout Template Grid System Bootstrap

Konsep dasar dari grid system adalah sebagai berikut:

1. Untuk membuat sebuah limit page / wrap / wrapper kita memerlukan class container
2. Setiap baris terdiri dari 12 grid atau kolom yang dapat kita bagi-bagi
3. Setiap akan pindah baris kita memerlukan class row (optional)
4. Didalam grid system (kolom) kita dapat menambahkan grid lagi (kolom) di dalamnya sesuai kebutuhan
5. Untuk membuat kolom terdapat empat class berbeda di bagi berdasarkan resolusi

• col-xs-value         = Extra small devices Phones (<768px)
• col-sm-value        = Small devices Tablets (≥768px)
• col-md-value        = Medium devicesDesktops (≥992px)
• col-lg-value          = Large devices Desktops (≥1200px)

Oke langsung praktek untuk membuat sebuah wrapper kita membutuhkan class container

<div class=”container”></div>

Selanjutnya untuk membuat grid logo (12), kita memerlukan class row karena logo menggunakan satu baris. Taruh kode di dalam class container

<div class="row">
<div class="col-md-12 col-sm-12"> <!-- 12 kolom pada resolusi medium dan small -->
LOGO
</div>
</div>

Kemudian untuk membuat menu main nav (12) sama seperti membuat logo

<div class="row">
<div class="col-md-12 col-sm-12"> <!-- 12 kolom pada resolusi medium dan small -->
MAIN NAV
</div>
</div>

Kemudian untuk membuat konten dan sidebar, kita akan membagi row dalam dua kolom. Untuk konten 8 kolom dan untuk sidebar 4 kolom. Maka kodenya

<div class="row">
<div class="col-md-8 col-sm-8"> <!-- 8 kolom pada resolusi medium dan small -->
CONTENT
</div>
        <div class="col-md-4 col-sm-4"> <!-- 8 kolom pada resolusi medium dan small -->
SIDEBAR
</div>
</div>

Untuk membuat slider di dalam div CONTENT kita dapat menentukan lagi berapa kolom yang akan dibutuhkan. Disini kita menggunakan 12 kolom. Masukkan kode di dalam CONTENT

<div class="row">
<div class="col-md-12 col-sm-12"> <!-- 12 kolom pada resolusi medium dan small -->
SLIDER
</div>
</div>

Mungkin sampai sini Anda sudah paham tentang konsep membuat template dengan grid system bootstrap. Selanjutnya Anda dapat meneruskanya sesuai dengan keinginan Anda :) . Selamat mencoba

Like this article? Share Please:

FacebookGoogle+