Membuat Layout Responsive dengan Bootstrap

supiyan sauri 7:39 PG Tiada ulasan
Assalamu'alaikum Wr. Wb. Selamat pagi para pengunjung blog ku, kali ini saya akan mencoba membuat layout responsive dengan grid sistem, biar website yang dibuat bisa menyesuaikan platformnya, kita akan bermain dengan grid yang menyesuaikan diri untuk ukuran layar yang berbeda-beda. Tampilan layout yang akan kita buat kira-kira seperti ini :

Sebelumnya, sebagai sedikit gambaran, Bootstrap membagi lebar layar monitor menjadi 4 jenis :
  • Extra Small (-xs-) : < 768px
  • Small (-sm-) : 768px - 991px
  • Medium (-md-) : 992px - 1199px
  • Large (-lg-) : > 1200px
Sehingga, dalam contoh ini, saya hanya akan bermain di lebar monitor Extra Small (-xs-) dan Small (-sm-). Kolom small (-sm-) itu kan batasnya cuma sampai 991px, terus untuk layar lebih lebar lagi ntar gimana? Ga masalah. Bootstrap itu pinter kok. Ntar yang layar lebih lebar bisa mengatur diri sendiri dengan tetap rapi. KECUALI, kalau kita pengen buat grid khusus untuk layar lebar. Ntar pas dicoba-coba ngerti sendiri kok maksudnya. Wacwac..,,
Yuk kita ke HTML dulu seperti biasa kita bikin layout yang dibagi jadi 4 bagian : Header, Slideshow, Content, dan Footer. Masing-masing layout diberikan class .container didalamnya :
Pertama-tama, di bagian header kita akan mengisi 2 bagian. yaitu judul website disebelah kiri, dan navigasi di sebelah kanan untuk layar lebar (>=768px). Akan tetapi,, untuk layar kecil akan kita atur supaya judul dan navigasi menjadi item yang menumpuk kebawah.
Sebelum lebih lanjut, kita harus tau dulu kalau Bootstrap menyediakan jumlah grid dalam 1 baris sebanyak 12 grid. Kalau begitu, ketika kita ingin membagi 1 baris menjadi 2 bagian (judul dan navigasi), kita harus membagi 12 grid tersebut untuk 2 objek tersebut. pembagiannya sih terserah, boleh 4 grid judul + 8 grid navigasi, boleh 5 grid judul + 7 grid navigasi, atau 6 grid judul + 6 grid navigasi nggak masalah, asalkan jumlah 1 baris tersebut PAS 12 GRID :
Kasih CSS, biar lebih rapih gan :
CSS hanya kita pakai untuk nambah-nambahin sedikit background, warna, atau font sesuai keinginan kita saja. tampilannya sudah seperti ini nih :
Bagian slideshow kita lewatin aja, karena kita tidak fokus bikin slideshow. kasih aja background sama height biar keliatan berisi(beautifull) :
Sekarang, di dalam layer content ada 2 jenis baris. ada yang 2 kolom, ada yang 1 kolom. caranya tetep sama :
Sudah terbagi 2 kolom bukan, misalkan kita ingin untuk komputer dengan layar paling lebar (>=1200px) pembagian gridnya bukan 6 - 6 seperti contoh diatas, tapi grid 8 - 4. Gimana caranya? Caranya simpel, cukup tambahin class baru yang sudah ada tadi. Aturan penamaan gridnya juga sama, seperti ini :
Anggaplah kode lebar yang ingin kita pakai adalah untuk layar large (-lg-), maka kodenya akan menjadi seperti ini :
Berikut tampilan hasil akhir dengan grid :

Semoga ini dapat bermanfaat untuk kita semua, mohon maaf kalau masih kurang dapat dipahami, silahkan komentar di bawah sesuai dengan kaidah sar'i, dan ane akhiri dengan mengetik Wassalamu'alaikum Wr. Wb.

Source jagocoding.com ---> mas Christian Rosandhy

Hari ini Harus Lebih Baik Dari-Pada Hari Kemarin (Don't Read).

Tiada ulasan :

Catat Ulasan

Langgan: Catat Ulasan ( Atom )

Subscribe