RWD (Responsive Web Design) dengan Grid System Bootsrtap Oleh: Jaf Al Azam RWD (Responsive Web Design) dengan Grid System Bootsrtap 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. Assalammualaikum Wr. Wb. 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: 1. 2. 3. 4. 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 <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="kolom"> <div class="kolom"> <div class="kolom"> <div class="kolom"> </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.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 <html> <head> <!-- Bootstrap CSS --> <link href="css/bootstrap.min.css" rel="stylesheet" > <link href="css/bootstrap-theme.css" rel="stylesheet"> </html> </head> <body> </body> <!-- Style CSS --> <link href="css/style.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-md-offset-3 col-md-6"> <div class="kolom"> 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 atau xs. kita bisa atur juga berapa ukuran offset yang kita inginkan dan berapa ukuran konten yang kita inginkan tinggal ganti angkanya, sesuai kebutuhan. CSS.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. Wassalammualaikum Wr. Wb. Tentang Penulis Jaf Al Azam Teknik Informatika Universitas Bengkulu,. melaju kencang menuju impian. ("technojaf")