Home / Bootstrap / Tutorial Bootstrap Bagian 2: Penggunaan Grid System Bootstrap Untuk Mengatur Layout Halaman Website

Tutorial Bootstrap Bagian 2: Penggunaan Grid System Bootstrap Untuk Mengatur Layout Halaman Website

Pada tutorial sebelumnya Apa itu Bootstrap? Cara Penggunaan Framework CSS Bootstrap sudah dijelaskan kelebihan bootstrap, cara mendownload bootstrap, cara menyertakan jQuery, cara menggunakan dan juga cara menjalankan bootstrap. Tutorial kali ini akan kita lanjutkan dengan membahas cara Penggunaan Grid System Bootstrap Untuk Mengatur Layout Halaman Website.

Bootstrap menggunakan Grid System untuk menghasilkan halaman website yang responsif. Konsep design layout website menggunakan grid system bootstrap yaitu dengan cara membagi sebuah halaman website menjadi beberapa baris dan kolom. Jumlah kolom sebuah halaman website sudah ditentukan dengan maksimal 12 kolom(grid).

Penentuan jumlah maksimal grid yang sudah dibakukan inilah yang membuat website yang dibangun menggunakan bootstrap akan secara otomatis menyesuaikan dengan lebar ataupun resolusi layar dari perangkat yang mengakses.

Grid system pada bootstrap tidak jauh berbeda dengan design website menggunakan tabel pada HTML. Di HTML, dalam sebuah tabel <table> bisa terdapat beberapa baris <tr>, dan di dalam sebuah baris bisa dibagi menjadi beberapa kolom<td>. Begitu juga dengan bootstrap, bedanya di bootstrap menggunakan class <container>, <row> dan <col>.

Penerapannya, setiap membuat tabel di HTML maka kita terlebih dahulu memulai dengan tag <table>, di bootstrap di mulai dengan class <container>. Untuk membuat baris dalam sebuah tabel, dimulai dengan <tr>, di bootstrap dimulai dengan class <row> dan setiap membuat kolom di HTML menggunakan tag <td> sedangkan di bootstrap menggunakan class <col>.

Jadi ketika sudah memahami cara membuat tabel dengan bootstrap di HTML maka mendesign layout menggunakan grid system bootstrap juga akan semakin mudah.

Untuk lebih jelasnya berikut beberapa hal yang harus di pahami sebelum memulai mendesign layout website menggunakan grid system bootstrap:

  • Class baris <row> harus diletakaan dalam class <container>. Class container ada dua yaitu <container> dan <container-fluid>. Class <container> digunakan untuk membuat layout dengan lebar layar normal(fixed width) dan biasanya class ini digunakan untuk isi atau content website. Class <container-fluid> digunakan untuk membuat layout dengan lebar layar penuh(full-width). Class ini biasa digunakan untuk banner atas, navbar(opsional), header ataupun footer sebuah website.
  • Class <col> harus berada diantara class <row>. Jadi setiap kita ingin membuat sebuah kolom maka terlebih dahulu harus membuatkan baris. Class <col> ini sudah dibakukan maksimal 12 grid dan dapat di gunakan di empat jenis resolusi perangkat yang berbeda, yaitu xs, sm, md dan lg.
  • Content website di tempatkan dalam class <col> atau disebut dengan Grid.

Pengaturan Layout Website menggunakan Grid System Bootstrap dapat dilihat pada kode dan gambar dibawah. Class <row> dan <col> berada di dalam class <container> dan class <col> berada dalam class <row>.

<div class="container">
    <div class="row">
        <div class="col">
        </div>
    </div>
</div>

 

Seperti yang sudah saya sampaikan sebelumnya mengenai class col, bahwa bootstrap mendukung empat jenis media dan masing-masing jenis media sudah dibakukan menjadi 12 Grid. Ke-empat media tersebut adalah:

  • XS(Extra small), class yang digunakan untuk mendukung perangkat smartphone dengan lebar/resolusi perangkat dibawah 768 px. Penulisan classnya col-xs-xx*.
  • SM(Small), class yang digunakan untuk perangkat yang berupa tablet dengan lebar layar antara 768 px hingga 991px. Penulisan classnya col-sm-xx*
  • MD(Medium), class yang digunakan untuk perangkat Desktop dengan lebar layar 992 px hingga 1199 px. Penulisan classnya col-md-xx*
  • LG(Large), class yang digunakan untuk mendukung perangkat Desktop dengan lebar layar diatas 1200 px. Penulisan classnya col-lg-xx*
    xx* dalam class diatas maksutnya jumlah kolom, bernilai 1 sampai 12. contoh: .col-xs-12

Sebagai contoh penggunaan grid system bootstrap dalam merancang layout web silakan perhatikan gambar dibawah. Layout dibawah, terdapat lima baris. Pada baris pertama hanya terdapat satu kolom(full) menggunakan 12 grid, jadi class yang digunakan adalah col-md-12.

Pada baris kedua, halaman di bagi menjadi 12 grid, jadi menggunakan class col-md-1 sebanyak 12 kali. Selanjutnya pada baris ketiga, kolom dibagi 2/3 (8 grid) sebelah kiri dan 1/3 (4 grid) sebelah kanan, maka menggunakan class col-md-8 dan class col-md-4.

Jadi, ketika kita ingin membagi halaman menjadi dua bagian yang sama-sama menggunakan 6 grid(baris ke lima pada gambar) maka gunakan class col-md-6 dan col-md-6. Yang harus diperhatikan dalam mendesign layout adalah jumlah kolom/grid tidak lebih dari 12.

Berikut adalah contoh kode Layout Website menggunakan Grid System Bootstrap untuk membuat layout seperti gambar diatas:

<!DOCTYPE html>
<html>
  <head>
    <title>Layout dengan Grid system bootstrap</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .col-md-1,.col-md-12,.col-md-4,.col-md-8,.col-md-6{
            background: #dedede;
            color: #fff;
            padding: 30px 0 30px 0;
            text-align: center;
            border: 1px solid #fff;
        }    
    </style>
  </head>
  <body>
  <div class="container">
    <div class="row">
        <div class="col-md-12">.col-md-12</div>
    </div>
    <div class="row">
      <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>
    </div>
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <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>
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>
</div>
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Hasilnya ketika dijalankan menggunakan browser:

Tampilan Layout Website menggunakan Grid System Bootstrap akan tetap responsif dan langsung menyesuaikan dengan resolusi perangkat yang mengakses(smartphone, tablet atapun desktop), hasilnya ketika diakses dengan smartphone/tablet sebagai berikut:

Selanjutnya, seperti contoh diatas, jika kita ingin mendesign layout website dengan membagi tiga kolom pada sebuah halaman maka tinggal menggunakan class <div class=”col-md-4″> sebanyak tiga kali. Nah, bagaimana jika kita hanya ingin menggunakan kolom yang tengah saja, atau kolom kiri kanan tidak di gunakan. Contohnya seperti gambar:

Untuk melangkahi atau tidak menggunakan kolom pada bootstrap kita gunakan class offset. Contoh penggunaanya untuk membuat layout seperti gambar diatas adalah sebagai berikut:

<!DOCTYPE html>
<html>
<head><title>Layout dengan Grid System Bootstrap</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
    .col-md-3,.col-md-4,.col-md-6{
    background: #dedede;
    color: #fff;
    padding: 30px 0 30px 0;
    text-align: center;
    border: 1px solid #fff;
    }    
  </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <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>
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
            .col-md-4 col-md-offset-4
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
            .col-md-4 col-md-offset-4
            </div>
            <div class="col-md-4">
            .col-md-4 
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
            .col-md-4
            </div>
            <div class="col-md-4 col-md-offset-4">
            .col-md-4 col-md-offset-4
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
            .col-md-6 col-md-offset-3
            </div>
        </div>
    </div>
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
  • Untuk membuat layout baris yang pertama, dimulai dari baris kode 17 sampai 27. Halaman dibagi 3 kolom yang sama maka kita gunakan 4 grid dengan menggunakan  class col-md-4 sebanyak tiga kali.
  • Untuk membuat Layout baris yang kedua, dimulai dari baris kode 28 sampai 32. Class yang digunakan adalah col-md-4 col-md-offset-4 artinya menggunakan kolom sebanyak 4 grid dengan melangkahi/tidak menggunakan 4 grid yang pertama.
  • Untuk membuat layout baris yang ketiga, dimulai dari baris kode 33 sampai 40. Kolom pertama menggunakan class col-md-4 col-md-offset-4 fungsinya sama seperti untuk membuat layout pada baris sebelumnya, tetapi pada kolom kedua terdapat class col-md-4, sehingga hasil akhirnya adalah membagi halaman menjadi tiga kolom tetapi tidak menggunakan kolom yang pertama.
  • Baris selanjutnya pada layout, membagi halaman menjadi tiga kolom yang sama tetapi tidak menggunakan kolom yang kedua/ kolom yg ditengah, maka kita gunakan class col-md-4 pada kolom yang pertama dan class col-md-4 col-md-offset-4 pada kolom yang kedua.
  • Baris selanjutnya pada layout, menggunakan 6 grid dan menyisakan 3 grid pada kiri dan kanan halaman, maka class yang digunakan adalah col-md-6 col-md-offset-3

Hasil contoh Layout Website menggunakan Grid System Bootstrap diatas sebagai berikut:

Demikian tutorialnya mengenai Penggunaan Grid System Bootstrap Untuk Mengatur Layout Halaman Website. Selamat mencoba dan semoga bermanfaat.

Pada tutorial berikutnya Membuat Tabel dengan Bootstrap, kita akan membahas mengenai class-class bootstrap yang dapat di gunakan dalam sebuah tabel.

Comments

comments

About admin

admin

My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion and some humor.

Tutorial Lain

Tutorial Bootstrap Bagian 13: Membuat Jumbotron Dengan Bootstrap

Tutorial bootstrap kali ini membahas cara membuat jumbotron dengan bootstrap. Jumbotron umumnya ditempatkan pada halaman …

Leave a Reply

Your email address will not be published. Required fields are marked *