Belajar (Grid System) Bootstrap
Berikut ini adalah class-class untuk sistem grid pada bootstrap :
<div class="col-sm-1"></div> akan menghasilkan panjang 1 span
<div class="col-sm-2"></div> akan menghasilkan panjang 2 span
<div class="col-sm-3"></div> akan menghasilkan panjang 3 span
<div class="col-sm-4"></div> akan menghasilkan panjang 4 span
<div class="col-sm-5"></div> akan menghasilkan panjang 5 span
<div class="col-sm-6"></div> akan menghasilkan panjang 6 span
<div class="col-sm-7"></div> akan menghasilkan panjang 7 span
<div class="col-sm-8"></div> akan menghasilkan panjang 8 span
<div class="col-sm-9"></div> akan menghasilkan panjang 9 span
<div class="col-sm-10"></div> akan menghasilkan panjang 10 span
<div class="col-sm-11"></div> akan menghasilkan panjang 11 span
<div class="col-sm-12"></div> akan menghasilkan panjang 12 span
Untuk 1 row jumah maksimal adalah 12 span, misalnya kita menggunakan class col-sm-12 maka hasilnya adalah menghasilkan panjang maksimal,
Grid Class
xs : diguakan untuk device hp
sm : digunakan untuk device tablet
md : digunakan untuk desktop
lg : digunakan untuk desktop
jadi class : col-sm-1, jika sm nya kita ganti dengan md akan menjadi class : col-md-1
Contoh Coding System Grid pada Bootstrap
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <link rel="stylesheet" href="css/bootstrap.min.css"> | |
| <script type="text/javascript" src="js/bootstrap.min.js"></script> | |
| </head> | |
| <body> | |
| <br/> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-sm-4"> | |
| <input type="text" class="form-control" placeholder="input dalam col-sm-4" /> | |
| </div> | |
| <div class="col-sm-4"> | |
| <input type="text" class="form-control" placeholder="input dalam col-sm-4"/> | |
| </div> | |
| <div class="col-sm-4"> | |
| <input type="text" class="form-control" placeholder="input dalam col-sm-4"/> | |
| </div> | |
| </div> | |
| <br/> | |
| <div class="row"> | |
| <div class="col-sm-6"> | |
| <input type="text" class="form-control" placeholder="input dalam col-sm-6"> | |
| </div> | |
| <div class="col-sm-6"> | |
| <input type="text" class="form-control" placeholder="input dalam col-sm-6"> | |
| </div> | |
| </div> | |
| <br/> | |
| <div class="row"> | |
| <div class="col-sm-10"> | |
| <input type="text" class="form-control" placeholder="input dalam col-sm-10"> | |
| </div> | |
| <div class="col-sm-2"> | |
| <input type="text" class="form-control" placeholder="input dalam col-sm-2"> | |
| </div> | |
| </div> | |
| <br/> | |
| <div class="row"> | |
| <div class="col-sm-5"> | |
| <input type="text" class="form-control" placeholder="input dalam col-sm-5"> | |
| </div> | |
| <div class="col-sm-7"> | |
| <input type="text" class="form-control" placeholder="input dalam col-sm-7"> | |
| </div> | |
| </div> | |
| <br/> | |
| <div class="row"> | |
| <div class="col-sm-3"> | |
| <input type="text" class="form-control" placeholder="input dalam col-sm-3"> | |
| </div> | |
| <div class="col-sm-3"> | |
| <input type="text" class="form-control" placeholder="input dalam col-sm-3"> | |
| </div> | |
| <div class="col-sm-3"> | |
| <input type="text" class="form-control" placeholder="input dalam col-sm-3"> | |
| </div> | |
| <div class="col-sm-3"> | |
| <input type="text" class="form-control" placeholder="input dalam col-sm-3"> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Coding/script di atas jika kita jalankan pada browser akan menghasilkan tampilan seperti ini :
Dari gambar di atas, bisa kita ketahui jumlah maksimal span untuk setiap row adalah 12,
Pada baris pertama gambar di atas, class yang digunakan adalah col-sm-4 sebanyak 3 buah sehingga menghasilkan jumlah 12 span, begitu juga untuk row-row selanjutnya.
Gimana mudah lagi kan :) , Semoga bisa kita ingat class-class yang kita gunakan dalam posting grid system pada bootstrap.
No comments:
Post a Comment