Bootstrap merupkakan Framework CSS yang sedang Booming tahun 2015 ini, karena kemudahan penggunaannya dan yang secara otomatis telah mendukung RWD atau di kenal dengan Responsive Web Design. Grid System merupakan teknik pembuatan Layout, pada framework CSS Bootstrap Grid di bagi 12.
Grid Option
Grid System Bootstrap dapat bekerja berbagai device yang terbagi 4 device yaitu:
- Extra Small (col-xs) : Smarthphone < 768px
- Small (col-sm) : Tablet >= 768px
- Medium (col-md) : Desktop >= 992px
- Large (col-lg) : Large Desktop > =1200px
Container
Dalam membuat layout kita menggunakan .container atau menggunakan.container-fluid. perbedaan container dengan container fluid adalah jika menggunakan container-fluid penggunaannya pada saat full-width atau layar penuh.
berikut perbedaan menggunakan container dan container-fluid
RWD (Responsive Web Design): Phone, Tablet, Desktop
seperti yang sudah di jelaskan sebelumnya untuk Phone menggunakan .col-xs, Tablet menggunakan .col-sm dan Desktop menggunakan .col-md . berikut contoh membuat RWD dengan display 4 kolom pada desktop ,yang secara otomatis 2 kolom pada tablet dan 1 kolom pada phone.
HTML
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
| <html> <head> <!-- Bootstrap CSS --> <link href="css/bootstrap.min.css" rel="stylesheet" > <link href="css/bootstrap-theme.css" rel="stylesheet"> <!-- Style CSS --> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="container">> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="kolom"></div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="kolom"></div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="kolom"></div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="kolom"></div> </div> </div> </div> </body></html |
Grid pada Bootsrap ada 12, maka untuk membuat 4 kolom pada desktop kita gunakan col-md-3 (3+3+3+3), untuk membuat 2 kolom pada tablet kita gunakan col-sm-6 (6+6), sedangkan untuk membuat 1 kolom pada phone kita gunakan col-xs-12 (12).
CSS
1
2
3
4
5
6
| .kolom{ width: 100%; height: 300px; background-color: #939393; margin-bottom: 10px;} |
css ini memberi warna pada kolom agar mudah di lihat dan juga lebarnya agar terlihat lebih jelas
Desktop
Tablet Phone
Offsetting columns
kita dapat membuat kolom yang tersembunyi atu di sebut juga offset columns, ini berguna ketika ingin membuat posisi kolom di tengah. . offset membuat otomatis margin pada konten. ini sangat berguna ketika kita ingin membuat ruang yang kosong.
contoh membuat suatu konten di tengah
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <html> <head> <!-- Bootstrap CSS --> <link href="css/bootstrap.min.css" rel="stylesheet" > <link href="css/bootstrap-theme.css" rel="stylesheet"> <!-- Style CSS --> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-offset-3 col-md-6"> <div class="kolom"></div> </div> </div> </div> </body></html> |
offset-3 berarti memberikan margin left sebanyak 3 grid, dan contentnya sepanjang 6 grid. yang membuat content berada di posisi tengah. Karena secara otomatis margin kanannya juga 3 grid. ketika kita tulis col-md-offset maka ini hanya akan di jalankan pada layar desktop, jika ingin membuat di multi device kita tinggal ganti md nya dengan ukuran device yang di inginkan seperti sm atauxs. kita bisa atur juga berapa ukuran offset yang kita inginkan dan berapa ukuran konten yang kita inginkan tinggal ganti angkanya, sesuai kebutuhan.
CSS
1
2
3
4
5
6
| .kolom{ width: 100%; height: 300px; background-color: #939393; margin-bottom: 10px;} |
css ini memberi warna pada kolom agar mudah di lihat dan juga lebarnya agar terlihat lebih jelas
ketika di jalankan
terimakasih telah melihat tutorial dari saya, nantikan tutorial bootstrap selanjutnya dari saya.
Tidak ada komentar:
Posting Komentar