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

Silahkan perhatikan script berikut ini untuk memahami grid system 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;
        }
    </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 :