Pada malam ini saya akan membahas Tutorial Bootstrap membuat Grid clearing, 4 Kolom sama besar. Untuk anda yang baru membaca tutorial ini diharapkan untuk mengikuti Tutorial sebelumnya agar dapat mempersiapkan beberapa Tools dan bahan-bahan untuk dapat mengikuti Tutorial ini.
Berikut Daftar tutorial sebelumnya untuk anda yang belum mengikuti Tutorial Sebelumnya :
Tutorial Bootstrap : Cara menggunakan Grid Bootstrap Twitter #1 (Persiapan)
Tutorial Bootstrap : Cara menggunakan Grid 3 Kolom yang berbeda
Oke, langsung saja buka aplikasi Adobe Dreamweaver atau text editor lainnya yang anda miliki di Pc /Laptop anda.
Buat file grid3.html dengan cara File > New > Html
Kemudian masukkan source code dibawah ini :
This file contains 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> | |
| <meta charset="utf-8"> | |
| <title>Grid Clearing Pada Bootstrap Twitter</title> | |
| <link href="css/grid.css" rel="stylesheet" type="text/css"> | |
| <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="page-header"> | |
| <h1>Contoh Grid Clearing Pada Bootstrap Twitter</h1> | |
| <p class="lead">Layout dasar untuk membuat Grid dengan Bootstrap Twitter</p> | |
| </div> | |
| <h3>Membuat Kolom yang jelas dan pasti</h3> | |
| <p>Memperjelas float secara spesifik dengan melakukan breakpoints agar dapat dikategorikan atau dibungkus</p> | |
| <div class="row"> | |
| <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> | |
| <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> | |
| <div class="clearfix visible-xs"></div> | |
| <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> | |
| <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> | |
| </div> | |
| </div> | |
| <script src="js/bootstrap.min.js"></script> | |
| </body> | |
| </html> |
Buka browser anda, ketik alamat localhost/latihan/grid3.html pada Address Bar browser anda.
Jika tidak terjadi error maka hasilnya akan terlihat seperti ini.
Untuk lebih jelasnya anda bisa lihat video tutorial yang telah saya buat dibawah ini.
Sekian dari saya
Semoga Bermanfaat
Jangan Lupa like comment and Subscribe blog dan channel youtube saya ya :D
Contact Me
Google + : https://plus.google.com/u/0/+esaprasetio
Twitter : http://twitter.com/aphriell_art
IG : @aphriel_art
Pinterest : https://id.pinterest.com/esaprasetio/
Blog :
aprilartwork.blogspot.com for my artwork
aphriellart.blogspot.com for some tutorial
Email : aphriellart@gmail.com
