Membuat Desain Adaptive Menggunakan Sistem Grid Bootstrap 3

Desain Adaptive adalah kemampuan suatu website atau tampilan website yang dapat beradaptasi dengan ukuran layar apapun. Desain Adaptive ini sebenarnya sama dengan Desain Responsive, tetapi di sini yang membedakannya adalah Desain Adaptive mampu menyesuaikan ukuran layar, namun dalam hal ini Adaptive lebih luas cakupannya, bukan hanya bisa menyesuaikan lebar website dan elemen-elemennya, namun dengan konsep Adaptive, tampilan website dapat menjadi berbeda sama sekali antara tampilan di komputer dan di device mobile begitupun fungsinya.

Nah pada artikel kali ini kita akan membahas bagaimana caranya membuat sebuah Desain Adaptive menggunakan Sistem Grid Bootstrap 3. Seperti yang kalian ketahui di dalam sebuah situs pasti terdapat struktur-struktur bagiannya seperti Header, Footer, Content, Sidebar :

- Header : Header selalu ada di bagian atas yang isinya Logo, Menu Utama, dan informasi tambahan seperti Kontak, Search, Pilihan Bahasa, dll.

- Footer : Footer adalah bagian yang berada di bagian paling bawah dalam sebuah situs yang berisi Menu Tambahan, Kontak, Ikon Sosial, Hak Cipta, dll.

- Content : Content biasanya berada di bawah Header, bagian utama dari content bervariasi tergantung pada subjek websitenya, jika website itu adalah sebuah blog maka isinya beberapa kontent posting, dll. Jika isinya adalah sebuah toko online maka akan ada produk-produk barangnya, kategori, dll.

- Sidebar : Biasanya bagian sidebar ini tidak selalu ada di dalam sebuah situs, Sidebar biasanya berada di sebelah kanan atau kiri pada situs yang berisi beberapa Widget dll.

Nah sekarang saya akan menjelaskan fitur Sistem Grid yang ada pada Bootstrap 3. Misalkan kita ingin membuat 4 kolom dengan menggunakan Grid, maka kita bisa menggunakan 3 class .col-md-4 pada setiap tag div. seperti contoh berikut.

Pada contoh di atas kalian bisa lihat, untuk membuat sebuah struktur website menggunakan Sistem Grid yang ada di Bootstrap 3 kita bisa menggunakan 3 class utama yaitu, .container, .row, .col-*.

- .container :  Di gunakan untuk membungkus seluruh block atau isi yang ada di website, atau untuk menentapkan lebar website utamanya.

- .row : Row atau bisa di sebut juga baris, di gunakan untuk membuat block wrapper pada kolom dan memiliki jarak padding.

- .col-* : Sedangkan .col-* adalah Kolom block.

Berikut penjelasaan cara menggunakan Sistem Grid yang ada pada Bootstrap 3 :

- .row (baris) harus di tempatkan di dalam .container (fixed-width) atau .container-fluid (full-width).

- Gunakan .row (baris) untuk membuat group kolom horizontal.

- Isi content harus di letakan di dalam kolom .col-*.

- Class standart Grid seperti .row dan .col-xs-4 di gunakan untuk membuat tata letak Grid dengan cepat.

- Setiap kolom (.col-*) memiliki jarak padding, dan .row memiliki jarak margin dengan nilai negatif.

- Kolom Grid berpatokan pada jumlah maksimum kolom yaitu 12 kolom, jadi misalkan kalian ingin membuat 3 kolom, kalian bisa menggunakan class .col-md-4 seperti contoh di atas.

- Jika di dalam .row (baris) berisi lebih dari 12 kolom, maka kolom berikutnya akan pindah ke baris baru.

Berikut adalah Table yang menunjukan nama-nama class untuk kolom Grid pada Bootstrap.

Di sini saya akan berikan contoh struktur layout website penjualan online yang menggunakan Sistem Grid Bootstrap. Tetapi sebelumnya kalian perlu mendownload Bootstrap nya terlebih dahulu dan jika kalian hanya ingin menggunakan Sistem Grid nya saja yang ada pada Bootstrap, kalian bisa pergi ke menu Customize yang ada pada Bootstrap, kemudian kalian bisa menguncek semua list nya kecuali Sistem Grid nya, seperti gambar di bawah ini. Kemudian kalian bisa mendownloadnya dengan mengklik tombol download yang berada di bagian bawah.

Dalam tata letak situs penjualan online ini saya hanya mempersiapkan keragkanya saja tanpa isi dan di dalamnya akan terdapat beberapa bagian-bagian seperti :

- Bagian header terdapat logo dan beberapa kontent.

- Bagian Sidebar.

- Bagian Footer, akan di bagi menjadi 2 bagian, bagian atas dan bagian bawah, di mana di bagian atas akan terdapat 4 kolom dari menu utama dan di bagian bawah akan terdapat hak cipta dan icon social.

- Dan untuk content nya akan terdapat 8 kolom produk.

Berikut contoh kode struktur atau kerangka Sistem Grid untuk situs penjualan online nya.

Pada contoh di atas saya menambahkan class .well atau warna abu-abu hanya untuk memperjelas teman-teman saja. Kalian bisa lihat tata letak pada situs online di atas, 3 class yang di gunakan untuk bagian Produk adalah.col-sm-6, .col-md-4, .col-lg-3.

- .col-lg-3 di gunakan agar tata letak produk sejajar kesamping 4 berturut-turut, ketika layar lebarnya lebih dari 1200px.

- .col-md-4 di gunakan agar tata letak produk sejajar kesamping 3 berturut-turut, ketika layar lebarnya lebih dari 992px.

- .col-sm-6 di gunakan agar tata letak produk sejajar kesamping 2 berturut-turut, ketika layar lebarnya lebih dari 768px.

Pada contoh di atas saya menggabungkan beberapa class pada setiap kolom agar setiap lebar kolom dapat menyesuaikan resolusi layar yang berbeda-beda.

Kesimpulannya, membuat suatu kerangka website menggunakan Sistem Grid Bootstrap sangatlah sederhana dan mudah. Dengan menggunakan Sistem Grid Bootstrap memungkinkan kita membuat desain web yang Adaptive dan Responsive yang dapat menyesuaikan di berbagai ukuran layar apapun.

Demo | Download Script

30 Januari 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat