Di Posting Oleh : wandi
Kategori : css Pemprograman web
memahami layout pada bootstrap
layout merupakan hal yang sangat penting dalama pembuatan website, maka dari itu kita harus paham dulu agar bisa membuat layout yang responsif.coba temen-temen bayangkan kalau website/blog yang temen-teman kunjungi itu tidak responsif pasti langsung di closs atau cari alternatif lain yang lebih nyaman digunakan.dengan layout yang responsif akan membuat user betah berkunjung di website. layout yang respinsif adalah website yang kita buat bisa beradaptasi dengan device yang user gunakan.layout yang kita pelajari saat ini menggunakan framework, yaitu framework bootstrap.
layout yang paling dasar diboostrap adalah class container, container adalah pembungkus semua element.
class container terbagi menjadi dua:
1. container
2. container-fluid
Baca juga membuat segitiga dengan javascript
class container akan membuat layout berada di tegah-tegah atau hanya 80% saja dari browser.
cara mnggunakanya
<div class="container">
//content
</div>
class container-fluid akan membuat layout berada 100% ukuran browser atau full layar
cara menggunakannya
<div class="container-fluid">
//content
</div>
dalam satu halaman web bisa saja digunakan dua-duanya sesuai kebutuhan.
selanjutnya class row, class row sama seperti row/baris pada tabel pada umumnya.
class col sama seprti colum tabel pada umunya, row dan col selalu berdampingan penggunanya.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
</div>
perlu di perhatikan layout pada framework boostrap itu terbagi menjadi 12 collum
terdapat juga beberapa pilihan class grid
Small untuk ukuran layar ≥576px dengan nama classnya sm, class sm bisa diisi 1-12
<div class="row">
<div class="col-sm-12">
//content
</div>
</div>
Medium untuk ukuran layar ≥768px dengan nama class md, class md sama juga bisa diisi 1-12
<div class="row">
<div class="col-md-12">
//content
</div>
</div>
Large untuk ukuran layar ≥992px dengan nama class lg, class lg sama juga bisa diisi 1-12
<div class="row">
<div class="col-lg-12">
//content
</div>
</div>
Extra large untuk layar ≥1200px dengan nama class xl, class xl juga bisa diisi -12
<div class="row">
<div class="col-xl-12">
//content
</div>
</div>
class grid bisa di kombinasikan penggunaanya tergantung dari website target pengguna website temen-teman
<div class="row">
<div class="col-xl-12 col-md-8">content</div>
</div>
terdapat satu class keren yaitu class offset, class ini digunakan jika kamu ingin membuang beberapa collum sebelunya.
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4 offset-md-4">col-md-4 .offset-md-4</div>
</div>
silahkan lihat documentasinya klik disini
artikel ini hanya membahas pengenalnya saja
Mau liat atau download source code aplikasi premium bisa disini.
0 Komentar