Tutorial Bootstrap: Memahami Grid Layout Baris row dan Kolom col pada bootstrap (bagian 2)

1607

Kali ini tutorial bootstrap singkat terkait Memahami Grid Layout Baris row dan Kolom col pada bootstrap, yang merupakan lanjutan dari tutorial singkat sebelumnya Tutorial bootstrap: Cara menggunakan bootstrap untuk pemula (bagian 1)

Bootstrap menyediakan komponen khusus untuk keperluan tata letak grid layout konten website. Dengan menggunakan komponen kolom row dan baris col yang disediakan oleh bootstrap ini, menjadikan tampilan halaman website akan tampak berbeda jika website tersebut diakses melalui perangkat device (desktop/PC/laptop, smartphone, tablet, dsb) dengan ukuran lebar layar width berbeda.

Contoh HTML dan tampilan pada browser jika website diakses melalui perangkat dengan ukuran lebar layar yang berbeda:

<div class=“row”> <div class=“col-sm-8”>Website Content (col-sm-8)</div> <div class=“col-sm-4”>Sidebar (col-sm-4)</div> </div>

Hasilnya akan tampak seperti pada gambar dibawah ini:

tampilan pada browser jika website diakses melalui perangkat dengan ukuran lebar layar yang berbeda

Gambar yang pertama, website diakases dengan menggunakan perangkat dengan lebar layar 1024 pixel sedangan pada gambar kedua tampilan website yang diakses perangkat device dengan ukuran lebar layar 768 pixel. Terlihat perbedaan dalam hal tampilan konten website bukan?ini kita kenal dengan istilah tampilan website responsive

Bootstrap membagi halaman website kedalam 12 kolom col-lg-12, col-md-12, col-sm-12 dan col-xs-12. Jadi, jika ingin membagi 2 bagian (bagian kiri dan bagian kanan) pada tampilan halaman website yang sedang kita buat, kita harus menambahkan col-lg-6, col-md-6, col-sm-6 atau col-xs-6 . Tampilan website akan terbagi 2 atau ditumpuk kebawah sesuai dengan perangkat yang kita gunakan dalam mengakses website tersebut. lg, md, sm dan xs adalah masing-masing untuk tampilan lebar layar large, medium, small dan extra small yang di definisikan sebagai berikut

  • lg (Large devices Desktops), untuk ukuran lebar layar >= 1200px
  • md (Medium devices Desktops), untuk ukuran lebar layar >= 992px
  • sm (Small devices Tablets), untuk ukuran lebar layar >= 768px
  • xs (Extra small devices), untuk ukuran lebar layar < 768px

Atau tampilan layout dapat pula merupakan kombinasi dari md dan xs atau sm dan xs dsb. Sebagai contoh, silahkan copas kode HTML dibawah ini dan lihat hasilnya pada browser anda.

TIPS: Untuk melihat tampilan dengan ukuran lebar layar berbeda pada browser firefox, silahkan tambahkan Add-ons extensions MobileView. Untuk melihat tampilan silahkan tekan CTRL + SHIFT + M pada keyboard anda.

<!DOCTYPE html> <html lang=“en”> <head> <title>Tutorial bootstrap: Memahami penggunaan kolom dan baris pada bootstrap (bagian 2)</title> <meta charset=“utf-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1”> <link href=“bootstrap/dist/css/bootstrap.min.css” rel=“stylesheet” type=“text/css”> </head> <body> <div class=“container”> <!–1 baris 12 kolom–> <div class=“row”> <div class=“col-md-1”>1</div> <div class=“col-md-1”>2</div> <div class=“col-md-1”>3</div> <div class=“col-md-1”>4</div> <div class=“col-md-1”>5</div> <div class=“col-md-1”>6</div> <div class=“col-md-1”>7</div> <div class=“col-md-1”>8</div> <div class=“col-md-1”>9</div> <div class=“col-md-1”>10</div> <div class=“col-md-1”>11</div> <div class=“col-md-1”>12</div> </div> <!–1 baris 3 kolom–> <div class=“row”> <div class=“col-xs-4”>1</div> <div class=“col-xs-4”>2</div> <div class=“col-xs-4”>3</div> </div> <!–1 baris 2 kolom–> <div class=“row”> <div class=“col-sm-6”>1</div> <div class=“col-sm-6”>2</div> </div> <!–1 baris 2 kolom yang bebeda–> <div class=“row”> <div class=“col-xs-3”>1</div> <div class=“col-xs-9”>2</div> </div> <!–contoh lain, sumber http://getbootstrap.com/css/ –> <!– Stack the columns on mobile by making one full-width and the other half-width –> <div class=“row”> <div class=“col-xs-12 col-md-8”>.col-xs-12 .col-md-8</div> <div class=“col-xs-6 col-md-4”>.col-xs-6 .col-md-4</div> </div> <!– Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop –> <div class=“row”> <div class=“col-xs-6 col-md-4”>.col-xs-6 .col-md-4</div> <div class=“col-xs-6 col-md-4”>.col-xs-6 .col-md-4</div> <div class=“col-xs-6 col-md-4”>.col-xs-6 .col-md-4</div> </div> <!– Columns are always 50% wide, on mobile and desktop –> <div class=“row”> <div class=“col-xs-6”>.col-xs-6</div> <div class=“col-xs-6”>.col-xs-6</div> </div> </div> <style type=“text/css”>  .row{margin:4px 0px;}  [class*=“col-“] {   padding:4px 8px;    background-color: #eee;    background-color: rgba(86,61,124,.15);    border: 1px solid #ddd;    border: 1px solid rgba(86,61,124,.2);  } </style> </body> </html>

 

Sekian dulu tutorial bootstrap singkat kali ini yaitu Tutorial Bootstrap: Memahami Grid Layout Baris row dan Kolom col pada bootstrap (bagian 2), jangan lupa nantikan tutorial atau artikel selanjutnya terkait Design, Programing atau HTML5 lainnya hanya di Magzimp.com : Belajar Blogging, Design, Programming dan lebih banyak lagi

  • sangat bermanfaat, saya lagi belajar blogging