Jika Anda tidak ingin menggunakan semua 12 kolom secara individual, Anda dapat mengelompokkan kolom sama untuk menciptakan kolom yang lebih luas: Show rentang 1rentang 1rentang 1rentang 1rentang 1rentang 1rentang 1rentang 1rentang 1rentang 1rentang 1rentang 1rentang 4rentang 4rentang 4rentang 4rentang 8rentang 6rentang 6rentang 12 Bootstrap's sistem grid responsif, dan kolom akan menata kembali tergantung pada ukuran layar: Pada layar besar mungkin terlihat lebih baik dengan konten terorganisir dalam tiga kolom, tetapi pada layar kecil akan lebih baik jika item konten yang ditumpuk di atas satu sama lain. Tip: Ingat bahwa kolom kotak harus menambahkan hingga dua belas untuk berturut-turut. Lebih dari itu, kolom akan menumpuk tidak peduli viewport . Grid KelasThe Bootstrap sistem grid memiliki empat kelas:
Kelas-kelas di atas dapat dikombinasikan untuk membuat layout yang lebih dinamis dan fleksibel. Tip: Setiap kelas sisik, jadi jika Anda ingin mengatur lebar yang sama untuk xs dan sm , Anda hanya perlu menentukan xs . Aturan Sistem GridBeberapa Bootstrap aturan sistem grid:
Struktur dasar dari Bootstrap GridBerikut ini adalah struktur dasar dari Bootstrap jaringan: <div class="container"> Jadi, untuk membuat tata letak yang Anda inginkan, menciptakan sebuah wadah ( Saat kita mulai belajar bootstrap sebagai pemula kita akan dihadapkan pada beberapa aturan membuat webdesain salah satunya adalah grid system, grid system adalah alat yang akan membantu kita untuk membuat layout web agar menjadi lebih rapi. Di dalam bootstrap, grid system dibagi dalam 12 kolom ( Belajar Grid System BootstrapSeperti yang telah dijelaskan di atas, grid system bootstrap dibagi dalam 12 kolom dan empat macam ukuruan. empat ukuran tersebut adalah :
dari grid diatas kita bisa mengkombinasikan agar kita bisa memperoleh layout web sesuai keinginan kita. misalkan : 1 <div class="col-md-3 col-xs-3 col-sm-3 col-lg-3">...</div> akan membuat tiga kolom apapun ukuran layarnya. sedangkan 1 <div class="col-md-3">...</div> akan membuat tiga kolom saat berada di layar monitor seperti laptop tapi menjadi satu kolom saat berada dilayar smartphone. Selain empat macam ukuran di atas di dalam bootstrap terdapat dua macam class lain yang berguna dalam membuat layout web yaitu
container membantu kita membuat layout website kita berada di tengah-tengah browser seperti gambar dibawah ini Tanpa containerdengan container
dan berikut cara membuat layout web dengan container dan tanpa container Dengan container 1 2 3 4 5 <div class="continer"> <div class="row"> <div class="col-md-12">...</div> </div> </div> Tanpa container 1 2 3 4 5 <div class="col-md-12"> <div class="row"> <div class="col-md-12">...</div> </div> </div>
cara yang BENAR 1 2 3 4 5 6 7 8 9 10 11 12 <div class="col-md-3"> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-md-3">...</div> <div class="col-md-9">...</div> </div> </div>
<div class="col-md-6">...</div> </div> </div> Cara yang SALAH 1 2 3 4 5 6 7 <div class="col-md-3"> <div class="col-md-6"> <div class="col-md-3"></div> <div class="col-md-9"></div> </div> <div class="col-md-6"></div> </div> Apabila kita menggunakan cara yang SALAH layout web yang kita buat akan rusak terutama saat dibuka di mobile dan layout yang seharusnya responsive justru akan kacau dan ancur. Membuat Layout Web dengan BootstrapAgar lebih mengena kita akan mencoba membuat langsung layout website dengan bootstrap. kita akan membuat sebuah desain website yang sederhana saja seperti header, navigasi, content, sidebar dan footer.
Pertama bayangkan lebar layar kita dibagi ke dalam 12 kolom, jika sudah kita akan membanginya header 12 kolom lalu di bawahnya ada navigasi sebanyak 12 kolom kemudian body 12 kolom, di dalam body kita bagi lagi 9 kolom untuk konten dan 3 kolom untuk sidebar, dibawah body adalah footer dengan 12 kolom. bagaimana bingung ? coba lihat gambar berikut. kemudian kita bagi sesuai keterangan di atas tadi sehingga jadi seperti berikut.
jadi kalau kita kodekan maka layout web di atas akan seperti ini 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <div class="col-md-12"> <div class="row"> <header class="col-md-12"> code header di sini </header> </div> <!-- end header -->
<div class="row"> <div class="col-md-12"> code navigasi di sini </div> </div> <!-- end navigasi -->
<div class="row"> <div class="wrapper"> <div class="col-md-9"> <article> code content di sini </article> </div> <!-- end posting area -->
<div class="col-md-3"> <aside> code widget / sidebar di sini </aside> </div> <!-- end sidebar --> </div> </div> <!-- end wrapper -->
<div class="row"> <div class="col-md-12"> <footer class="footer"> code footer di sini </footer> </div> </div> <!-- end footer --> </div> Sekian artikel belajar bootstrap dalam mengenal system grid bootstrap 3. selain mempermudah kita dalam membagi ruang grid pada bootstrap juga membantu dalam mengatur layout web yang responsive, kuncinya adalah pada penggunaan ke empat macam col, penggunaan container dan row yang benar. Berapa jumlah sistem grid dalam bootstrap?Bootstrap menggunakan 12 kolom grid serta menerapkan mobile-first design concept. Maksud dari mobile-first adalah sistem grid Bootstrap di desain dengan tampilan web versi mobile sebagai patokan utama, baru kemudian berangkat ke versi desktop (layar besar).
Berapakah column kah maksimal jumlah grid pada bootstrap?Class ini digunakan untuk mengatur ukuran layar dengan membagi setiap bagian konten menjadi 12 kolom.
Apa itu sistem grid pada 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.
Col MD untuk apa?col-md-xxx adalah class yang digunakan untuk mengatur grid layout pada layar monitor berukuran sedang. col-lg-xxx adalah class yang digunakan untuk mengatur grid layout pada layar desktop atau lebih besar.
|