Lebak Cyber Tips dan Trik Komputer
Grid Sistem Pada Bootstrap
lebakcyber.net – Grid system pada bootstrap. Masih berlanjut pada pembahasan mengenai materi belajar bootstrap, dan pada kesempatan kali ini kita akan coba untuk mempelajari mengenai apa itu Grid System yang ada di Bootstrap
Grid System di bootstrap adalah fitur yang dapat digunakan untuk mengatur ukuran yang nantinya akan ditampilkan pada monitor, selain itu juga grid system dapat digunakan untuk melakukan pengaturan lebar pada masing-masing komponen website yang dibuat dengan menggunakan bootstrap.
Pada bootstrap sendiri terdapat 12 grid yang bisa digunakan yang nantinya bisa dipakai dengan menggunakan class yang akan kita bahas dibawah ini untuk mengatur responsive pada suatau halaman website yang kita atur menggunakan 12 grid yang ada di bootstrap tersebut. Berikut ini adalah beberapa class grid yang ada pada bootstrap sesuai dengan kegunaannya masing-masing.
- col-lg-* = class ini bisa dipakai untuk mengatur grid untuk layar monitor yang meiliki ukuran besar.
- col-md-* -= class ini bisa dipakai untuk mengatur grid untuk layar monitor yang memiliki ukuran sedang.
- col-sm-* = class ini bisa dipakai untuk mengatur grid untuk ukuran layar sebesar tablet.
- col-xs-* = class ini bisa dipakai untuk mengatur grid untuk ukuran layar smartphone.
Agar lebih mudah untuk di mengerti mengenai grid system, silahkan buat sebuah file index.html lalu masukan perintah dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Grid System di Bootstrap - lebakcyber.net</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
div{
border: 1px solid #fff;
padding: 10px;
color: #fff;
background: #69DDD7;
text-align: center;
}
</style>
</head>
<body>
<center><h1>Contoh Grid System di Bootstrap</h1></center>
<br/>
<div class="col-md-1">grid col-md-1</div>
<div class="col-md-1">grid col-md-1</div>
<div class="col-md-1">grid col-md-1</div>
<div class="col-md-1">grid col-md-1</div>
<div class="col-md-1">grid col-md-1</div>
<div class="col-md-1">grid col-md-1</div>
<div class="col-md-1">grid col-md-1</div>
<div class="col-md-1">grid col-md-1</div>
<div class="col-md-1">grid col-md-1</div>
<div class="col-md-1">grid col-md-1</div>
<div class="col-md-1">grid col-md-1</div>
<div class="col-md-1">grid col-md-1</div>
<div class="col-md-2">grid col-md-2</div>
<div class="col-md-2">grid col-md-2</div>
<div class="col-md-2">grid col-md-2</div>
<div class="col-md-2">grid col-md-2</div>
<div class="col-md-2">grid col-md-2</div>
<div class="col-md-2">grid col-md-2</div>
<div class="col-md-3">grid col-md-3</div>
<div class="col-md-3">grid col-md-3</div>
<div class="col-md-3">grid col-md-3</div>
<div class="col-md-3">grid col-md-3</div>
<div class="col-md-4">grid col-md-4</div>
<div class="col-md-4">grid col-md-4</div>
<div class="col-md-4">grid col-md-4</div>
<div class="col-md-6">grid col-md-6</div>
<div class="col-md-6">grid col-md-6</div>
<div class="col-md-12">grid col-md-12</div>
</body>
</html>
Nanti hasilnya akan seperti pada gambar dibawah ini :
Berdasarkan contoh diatas kita bisa memahami kalau pada bootstrap membagi sebuah halaman web menjadi 12 grid serta kita juga dapat secara bebas untuk menggunakan berapa grid yang diinginkan untuk mengatur lebar pada sebuah element yang ingin kita buat pada halaman web.
Untuk class col-md-1 merupakan ukuran yang paling kecil seperti yang bisa dilihat pada contoh diatas, dilanjutkan dengan col-md-2, col-md-3, col-md-4 sampai dengan col-md-6 yang bisa kita gunakan pada masing-masing element yang kita buat.
Sekarang kita akan mencoba mendesain sebuah halaman web dengan menggunakan grid system pada bootstrap. Silahkan buat sebuah file index.html baru lalu masukan perintah seperti dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Grid System di Bootstrap - lebakcyber.net</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
div{
border: 1px solid #fff;
padding: 10px;
color: #fff;
background: #69DDD7;
text-align: center;
}
.grid-konten{
height: 450px;
}
.grid-sidebar{
height: 450px;
}
</style>
</head>
<body>
<center><h2>Contoh Grid System di Bootstrap - lebakcyber.net</h2></center>
<br/>
<div class="col-md-12 col-xs-12">Grid untuk header</div>
<div class="col-md-9 col-xs-12 grid-konten">Grid untuk konten</div>
<div class="col-md-3 col-xs-12 grid-sidebar">Grid untuk sidebar</div>
<div class="col-md-12 col-xs-12">Grid untuk footer</div>
</body>
</html>
Nanti hasilnya seperti gambar dibawah ini :
Oke jadi itulah pembahasan kita mengenai grid system yang bisa kita gunakan menggunakan bootstrap, semoga tutorial sederhana ini dapat bermanfaat dan sampai bertemu lagi di tutorial belajar bootstrap selanjutnya.
