Belajar Bootstrap Part 16 : Mengenal System Grid Bootstrap
MENGENAL SYSTEM GRID BOOTSTRAP
Grid System Merupakan pengaturan ukuran yang ditampilkan monitor. Grid System berfungsi untuk membuat pengukuran untuk lebar dari masing - masing komponen web sehingga kita dapat dengan bebas mengatur ke-responsivan dari website yang kita buat dengan Bootstrap. Bootstrap memiliki 12 sistem grid. Bootstrap memiliki beberapa class grid yang memiliki fungsinya masing - masing.
- col-lg-* : Digunakan untuk mengatur grid pada ukuran monitor yang besar
- col-md-* : Digunakan untuk mengatur gid pada ukurang monitor berukuran sedang
- col-sm-* : Digunakan untuk mengatur ukuran grid pada monitor tablet
- col-xs-* : Digunakan untuk mengatur ukuran grid pada monitor handphone / smartphone
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 16 : Mengenal Grid System Bootstrap </title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<style type="text/css">
div{
background: #2ea3f2;
text-align: center;
border: 1px solid #fff;
padding: 10px;
color: #fff;
}
</style>
</head>
<body>
<center><h1>Mengenal Grid System Bootstrap | <a href="http://www.script-kiddies.org/">Script Kiddies</a></h1></center>
<br/>
<div class="col-md-12">.col-md-12</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2">.col-md-2</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</body>
</html>
Montior Full |
Ketika layar saya kecilkan |
Jadi dapat disimpulkan Bootstrap membagi halaman website menjadi 12 grid. Dan dapat menggunakan beberapa grid untuk menentukan lebar sebuah element yang ingin kita buat. Ukuran col-md-1 adalah ukuran yang paling kecil seperti yang dapat dilihat pada gambar diatas. Penggunaan col-md untuk mengatur ukuran lebar pada ukuran monitor yang sedang, dan col-lg untuk ukuran monitor yang besar, begitu juga untuk col-xs dan col-sm seperti yang sudah dijelaskan pada penjelasan tentang class grid Bootstrap diatas.
Contoh sederhananya jika misalnya sobat memiliki dua buah kotak. Dan pada ukuran laptop biasa sobat ingin menampilkan kotak tersebut dengan bersampingan. Maka sobat bisa memberikan col-md-6 pada masing-masing kotak. Dan jika dibuka melalui smartphone misalnya sobat ingin masing-masing kotak tersebut menampilkan ditampilkan dengan lebar penuh maka sobat bisa menambahkan lagi col-xs-12 pada masing-masing element kotak. Contohnya
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 16 : Mengenal Grid System Bootstrap </title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<style type="text/css">
div{
background: #2ea3f2;
text-align: center;
border: 1px solid #fff;
padding: 10px;
color: #fff;
}
</style>
</head>
<body>
<center><h1>Mengenal Grid System Bootstrap | <a href="http://www.script-kiddies.org/">Script Kiddies</a></h1></center>
<br/>
<div class="col-md-6 col-xs-12">col-md-6 col-xs-12</div>
<div class="col-md-6 col-xs-12">col-md-6 col-xs-12</div>
</body>
</html>
Akan saya contohkan penggunaan grid system Bootstrap lainya disini saya contohkan membuat layout sederhana dengan Bootstrap
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 16 : Mengenal Grid System Bootstrap </title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<style type="text/css">
div{
background: #2ea3f2;
text-align: center;
border: 1px solid #fff;
padding: 10px;
color: #fff;
}
.konten{
height: 300px;
}
.sidebar{
height: 300px;
}
</style>
</head>
<body>
<center><h1>Mengenal Grid System Bootstrap | <a href="http://www.script-kiddies.org/">Script Kiddies</a></h1></center>
<br/>
<div class="col-md-12 col-xs-12">Ini header</div>
<div class="col-md-9 col-xs-12 konten">Ini konten</div>
<div class="col-md-3 col-xs-12 sidebar">Ini sidebar</div>
<div class="col-md-12 col-xs-12">Ini footer</div>
</body>
</html>
KESIMPULAN
Setelah membaca penjelasan dari mengenal grid system bootstrap dan melihat beberapa contoh diatas diharapkan sobat dapat mendapatkan pemahaman. Dan dengan adanya grid system Bootstrap kita dimudahkan untuk mengatur ukuran website dengan semua resolusi monitor. Jika ada yang ditanyakan silahkan berikan komentar, Sekian Terima Kasih
REFERENSI : Malas Ngoding
TUTORIAL BOOTSTRAP DASAR LAINYA :
- Bootstrap Part 1 : Mengenal Dan Cara Menggunakan Bootstrap
- Bootstrap Part 2 : Membuat Tabel Dengan Bootstrap
- Bootstrap Part 3 : Mengatur Tampilan Gambar Bootstrap
- Bootstrap Part 4 : Cara Membuat Tombol Dengan Bootstrap
- Bootstrap Part 5 : Membuat Jumbotron Dengan Bootstrap
- Bootstrap Part 6 : Membuat Pesan Alert Dengan Bootstrap
- Bootstrap Part 7 : Membuat Icon Bootstrap
- Bootstrap Part 8 : Membuat Pagination dan Breadcrumb Bootstrap
- Bootstrap Part 9 : Membuat List Dengan Bootstrap
- Bootstrap Part 10 : Membuat Panel Dengan Bootstrap
- Bootstrap Part 11 : Membuat Navigasi Tabs Dan Pils
- Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
- Bootstrap Part 13 : Membuat Form Dengan Bootstrap
- Bootstrap Part 14 : Membuat Carousel / Slideshow Dengan Bootstrap
- Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
- Bootstrap Part 16 : Mengenal Grid System Bootstrap
Wow Thanks Infonya gan
BalasHapusAduh ane gag paham bahas pemrograman gan. Tapi kalau dijelaskan dengan bahasa mungkin bisa hee
BalasHapusIni juga sudah dijelaskan dalam bahasa gan :D
Hapusnice info gan
BalasHapusWah nice sekali, walaupun rnggak terlalu paham pemrograman tapi setidaknya tahu dasarnya hehe
BalasHapusTetep semangat gan :)
HapusWah sipp nih, makasih bro, jadi tambah semangat belajar pemrograman :D
BalasHapusOKe gan sama - sama semoga bermanfaat ^_^
HapusJadi pengen coding
BalasHapusWah nice sekali, walaupun rnggak terlalu paham pemrograman tapi setidaknya tahu dasarnya hehe
BalasHapusterimakasih...informasi bagus buat belajar coding
BalasHapus