HASANONTA - 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://HasanOnta.ga/">HasanOnta</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>
Output :
Tampilan di layar iphone 6 plus :
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.hasanonta.ga/">HasanOnta</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>
Output :
pada iphone 6 plus :
pada samsung galaxy s5
pada pc
Selanjutnya akan saya contohkan bagaimana membuat layout static dengan system grid :
<!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.hasanonta.ga/">HasanOnta</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>
Output :
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Tidak ada komentar:
Posting Komentar