Membuat layout dengan sistem grid bootstrap – Layout merupakan bagian penting dalam mendesain tampilan sebuah web. Ibarat membangun rumah layout adalah kerangka dari rancangan rumah yang ingin dibuat. Dengan menggunakan layout kita dapat mengatur rencana tampilan web dengan rapi dan terstruktur. Bootstrap mempunyai fasilitas untuk membuat layout dengan mudah. Layout yang dibuatpun support pada responsive desain. Dengan menggunakan sistem grid pada bootstrap kita dapat membuat layout yang responsive dengan cukup mudah untuk diterapkan pada website kita.

Rekomendasi Bacaan untuk anda:

• Pengenalan Bootstrap
• Cara menggunakan / implementasi bootstrap pada website

Memahami Sistem Grid pada Bootstrap

Didalam bootstrap terdapat 12 grid untuk keseluruhan halaman. Kita dapat membuat 12 kolom untuk mengisi keseluruhan halaman. Namun bila kita hanya ingin membuat beberapa kolom saja, tentu saja itu bisa dilakukan dengan kolom yang lebih luas pada halaman web tersebut.

Dari gambar ilustrasi diatas saya coba menggambarkan bagaimana struktur layout menggunakan grid bootstrap. Apabila kita ingin membuat kolom dengan span1 maka untuk mengisi seluruh halaman web perlu membuat 12 kolom. Begitu juga bila membuat span kolom 2 maka perlu kita membuat 6 kolom. Begitu juga seterusnya.

Pada umumnya sebuah web mempunyai struktur Header, silebar, konten dan footer oleh karena itu berdasarkan struktur tersebut kita dapat membuat seperti contoh gambar dibawah, nantinya akan kita coba belajar membuat layout seperti ini

Mengenal Class Grid pada Bootstrap

Didalam bootstrap terbagi beberapa class untuk membuat layout menggunakan sistem grid

Mengenal Class Container pada Bootstrap

Bootstrap mempunyai class container, class ini digunakan untuk menampung setiap elemen grid yang kita buat menggunakan bootstrap. Terdapat dua jenis class container

1. Class Container
   Merupakan class container default untuk menampung atau bisa saya bilang membungkus grid sistem.
2. Class Container-fluid
   Merupakan class container yang kedua, dengan container fluid setiap grid akan dibungkus, dan diisi penuh untuk seluruh layar.

Apa perbedaan kedua class container diatas ?

Perbedaan mendasar dari class container dengan class container fluid adalah pada penyajian layout container terdapat jarak kurang lebih masing-masing 20% dari sisi kanan maupun kiri layar monitor komputer kita.

Sedangkan untuk Container fluid, kita tau arti kata fuild dalam bahasa indonesia adalah cair dengan demikian bisa kita artikan dengan container fluid akan mengisi semua ruang (karena bersifat cair) yang ada pada elemen layout halaman web kita.

Contoh Class Container

 

  




  
Halaman Web sederhana menggunakan Container
  
Untuk melihat efek dapat mengecilkan ukuran layar browser, layout akan otomatis mengikuti ukuran layar



 

Pada contoh diatas perhatikan pada syntax

saya menggunakan container default. Seperti yang sudah saya jelaskan dengan menggunakan container ini maka akan ada space ruang kosong pada sisi kiri dan kanan layar, Lebih jelasnya dapat dilihat pada hasil output dibawah ini:

Contoh Class Container Fluid

 

  




  
Halaman Web sederhana menggunakan Container
  
Untuk melihat efek dapat mengecilkan ukuran layar browser, layout akan otomatis mengikuti ukuran layar



 

Perhatikan contoh syntax diatas pada bagian

saya menggunakan container fluid (cair) dan lihat hasilnya pada gambar dibawah setiap elemen akan diisi sehingga tidak ada ruang kosong yang tidak digunakan.

Belajar membuat layout sederhana dengan sistem grid dan container

Setelah kita belajar teori-teori diatas selanjutnya saya akan contohkan bagaimana membuat layout sederhana dengan sistem grid dan container. Contoh layout yang akan kita buat adalah seperti pada gambar diatas layout sederhana yang terdiri dari header, silebar, konten dan footer dengan implementasi sitem grid dan container. Pada contoh ini saya menggunakan container default bukan container fluid.

 

  




	

		

		 
Judul Halaman
		
	
	

		

		
Silebar
		
Link 1
		
Link 2
		
Link 3
		
Link 4
		
		

			
Konten
			
Konten website dapat diisi pada bagian ini
		
	
	

		

		
Footer
		
		
	



 

Dari contoh diatas kita dapat melihat saya menggunakan class container kemudian saya juga menggunakan class row (

), oh ya class ini digunakan untuk membuat baris pada halaman html kita. pada baris pertama saya membuat sebuah grid dengan span 12 artinya bahwa memakai semua kolom pada sistem grid di bootstrap. Sehingga akan penuh pada kontainnernya. Pada baris kedua saya membagi grid kedalam 2 kolom. Kolom yang pertama saya set 3 grid dan kolom kedua 9 grid, sehingga terpenuhlah 12 grid. Terakhir untuk footer saya membuat 1 kolom menggunakan semua grid (12). Sehingga dari syntax diatas dapat terlihat layout sederhananya seperti pada gambar berikut

Kesimpulan

Dengan membuat layout dengan sistem grid dan container pada bootstrap akan dengan mudah kita buat dan gunakan sesuai dengan kebutuhan desain layout yang ingin kita gunakan. Sistem grid akan membuat pemetaan pada layout website dengan maksimal grid 12. saya tidak menyarankan ketika temen-temen membuat layout dengan grid kurang atau bahkan lebih dari 12 grid. Pastikan setiap baris nilai gridnya harus 12, agar layout yang kita buat sesuai dan tidak berantakan. Dengan kontainer juga kita bisa membuat istilah saya bisa katakan fondasi untuk layout yang ingin kita buat. Demikian pembahasan Kelas Programmer kali ini silahkan komentar anda bisa diisi pada kolom dibawah ini.

Ada berapakah jumlah grid system pada bootstrap?

Grid system pada bootstrap memiliki 5 class yang memiliki fungsi masing – masing, antara lain : .col – : (digunakan untuk device yang sangat kecil dengan ukuran lebar layar kurang dari 576 pixel)

Apa itu sistem grid di bootstrap?

Apa itu Sistem Grid di Bootstrap? Sistem Grid adalah sistem yang digunakan Bootstrap untuk mengatur tata letak (layout). Sistem ini terdiri dari 12 kolom dan 6 breakpoint. Satu kolom penuh panjangnya adalah 12.

Apa itu class Row?

Class row berfungsi untuk mengubah sifat dari div di dalamnya yang semula akan ditampilkan secara block, akan dapat ditampilkan secara inline. Maka dari itu div di dalamnya dapat dipaparkan secara horizontal. Class col berfungsi untuk mengubah div tersebut menjadi responsif terhadap lebar viewport.

Apa itu container dalam bootstrap?

Pengertian Container di Bootstrap. Di dalam container inilah tempat seluruh komponen Bootstrap berada. Tag yang sering dipakai untuk container adalah tag

karena bersifat generik dan tidak memiliki efek tambahan apapun. Tag

juga termasuk block level element sehingga cocok untuk membagi struktur halaman.

Đọc tiếp