Grid System Pada Bootstrap
Grid System Pada Bootstrap ini merupakan pengaturan ukuran yang di tampilkan pada monitor dan Grid System ini berfungsi untuk membuat pengaturan untuk lebar dari masing-masing komponen web sehingga kita dapat bebas mengatur Responsive halaman website yang kita buat dengan bootstrap. Bootstrap memiliki 12 grid yang nantinya kita akan dapat menggunakan class berikut ini untuk mengatur keresponsive an halaman website dengan mengaturnya menggunakan 12 grid bootstrap. Bootstrap memiliki beberapa class grid yang masing-masing nya memiliki kegunaannya . Mengenal Grid System Bootstrap :
- col-lg-* ini dugunakan untuk mengatur grid pada monitor komputer yang berukuran besar.
- col-md-* ini digunakan untuk mengatur grid pada layar monitor komputer yang berukuran sedang.
- col-sm-* ini digunakan untuk mengatur grid pada monitor yang berukuran tablet.
- col-xs-* ini digunakan untuk mengatur grid untuk ukuran handphone.
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Belajar bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.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 </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>
Di bawah ini adalah hasil dari script di atas
Jadi dapat di simpulkan Bootstrap membagi halaman website menjadi
12 grid dan kita bebas ingin menggunakan beberapa grid untuk menentukan
lebar sebuah emelent yang ingin kita buat. Ukuran col-md-1 adalah
ukuran yang paling kecil seperti yang dapat di lihat pada gambar di atas
tadi. Penggunaan col-md untuk mengatur ukuran lebar pada
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 di atas.
Dan ini contoh sederhananya jika kita misalnya memiliki dua bua kotak dan pada ukuran leptop biasa, kita ingin menampilkan kotak tersebut dengan bersampingan maka kita memberikan col-md-6 pada masing-masing kotak dan jika dibuka melalui smartphone misalnya kita ingin masing-masing kotak tersebut di tampilkan dengan lebar penuh maka kita bisa menambahkan lagi col-xs-12 pada masing-masing element kotak dan di bawah ini contohnya :
Dan ini contoh sederhananya jika kita misalnya memiliki dua bua kotak dan pada ukuran leptop biasa, kita ingin menampilkan kotak tersebut dengan bersampingan maka kita memberikan col-md-6 pada masing-masing kotak dan jika dibuka melalui smartphone misalnya kita ingin masing-masing kotak tersebut di tampilkan dengan lebar penuh maka kita bisa menambahkan lagi col-xs-12 pada masing-masing element kotak dan di bawah ini contohnya :
<!DOCTYPE html>
<html>
<head>
<title>Belajar bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.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</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>
Di bawah ini adalah hasil dari script di atas
Dan ketika kita beralih mode ke handphone hasilnya maka akan seperti di bawah ini
Di bawah ini adalah contoh untuk grid system yang lain
<!DOCTYPE html>
<html>
<head>
<title>Belajar bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.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</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>
Di bawah ini adalah hasil dari script di atas.
Referensi : malasngoding.com
Tidak ada komentar :
Posting Komentar