BERITA PROGRAMMING Dasar-dasar Layout pada Framework Bootstrap

Dasar-dasar Layout pada Framework Bootstrap

Oleh Agnes Caroline | Kamis, 20 Januari 2022

Dasar-dasar Layout pada Framework Bootstrap

Artikel ini menjelaskan tentang hal mendasar mengenai layout pada framework bootstrap

Yuk, ikuti program inovatif MAGANG ONLINE untuk berbagai bidang seperti animasi, coding, 3D, illustrasi, musik dan bisnis hanya di GAMELAB.ID!

Ciptakan lingkungan belajar yang lebih MENYENANGKAN dengan GAME-BASED LEARNING!

Daftar Isi Artikel

Bootstrap merupakan salah satu framework yang sering dipakai dalam mendesain website. Bootstrap memiliki banyak dokumentasi dan dikembangkan seiring waktu agar dapat menyesuaikan tampilan website yang diinginkan.

Salah satu bagian pada bootstrap yang akan dijelaskan adalah layout. Layout menjadi dasar dari penampilan website. Dalam artikel ini akan dibahas beberapa hal yang sering dijumpai dalam membuat layout dengan bootstrap.

Breakpoints

Bootstrap didesain untuk mendukung tampilan yang responsif. Maka dari itu, dibutuhkan breakpoint sebagai acuan untuk menyesuaikan tampilan dalam berbagai ukuran viewport. Misalkan pada ukuran desktop, content dipaparkan secara horizontal ke kanan, sedangkan pada ukuran mobile phone, content dipaparkan secara vertical ke bawah.

Dalam bootstrap terdapat beberapa breakpoint, yaitu:

  • sm
  • md
  • lg
  • xl
  • xxl

Breakpoint akan berkaitan dengan elemen lainnya, seperti container, grid, dan-lain-lain.

Container

Container adalah elemen paling dasar dalam layout bootstrap. Terdapat 3 macam container dalam bootstrap, yaitu:

Default Container

Class container memiliki sifat yang responsive dan fixed-width, yang berarti lebarnya akan berubah pada setiap breakpoint.

<div class="container">

    <!-- Content here -->

</div>

Fluid Container

Class container-fluid memiliki lebar yang sama dengan viewport

<div class="container-fluid">

    <!-- Content here -->

</div>

Responsive Container

Responsive container, diurutkan dari breakpoint terkecil, terdiri dari:

  • .container-sm
  • .container-md
  • .container-lg
  • .container-xl
  • .container-xxl

Misalkan container-lg akan memiliki lebar 100% hingga lebar viewport mencapai titik breakpoint lg.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Grid

Grid biasanya digunakan bersama dengan container. Contoh kodenya sebagai berikut:

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

Class row berfungsi untuk mengubah sifat dari div di dalamnya yang semula akan ditampilkan secara block, akan dapat ditampilkan secara inline. Maka dari itu div di dalamnya dapat dipaparkan secara horizontal.

Class col berfungsi untuk mengubah div tersebut menjadi responsif terhadap lebar viewport. Di dalam contoh terdapat tiga div dengan class col di dalam class row, maka dari itu lebar setiap col adalah lebar row dibagi tiga (jumlah div dengan class col) secara merata.

Bootstrap juga menyediakan cara mengatur lebar div tanpa dipengaruhi jumlah div.col dalam class row. Contohnya sebagai berikut:

<div class="container">
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

Grid system membagi lebar halaman menjadi 12 bagian. Sehingga apabila menggunakan class col-8, maka lebarnya akan menjadi 8/12 atau 2/3 dari lebar halaman.

Contoh lainnya jika menggunakan col-4, maka lebarnya akan menjadi 4/12 atau 1/3 dari lebar halaman. Jika suatu barisan sudah penuh (memenuhi 12 kolom grid), maka div selanjutnya akan diletakkan di baris berikutnya.

Grid system juga dapat menetapkan ada berapa item di setiap barisnya, seperti di bawah ini:

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Class row-cols-3 menetapkan bahwa setiap barisnya akan terdapat 3 item dan akan memiliki lebar yang sama. Apa bila item terdapat lebih dari 3, maka akan dilanjutkan di baris selanjutnya.

Kedua metode tersebut dapat digabungkan dengan breakpoints.

<div class="container">

  <div class="row row-cols-lg-4 row-cols-md-2">
    Section 1
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>

  <div class="row">
    Section 2
    <div class="col-lg-6 col-md-12">Column</div>
    <div class="col-lg-6 col-md-12">Column</div>
    <div class="col-lg-6 col-md-12">Column</div>
    <div class="col-lg-6 col-md-12">Column</div>
  </div>

</div>

Pada section 1, suatu baris akan memiliki 4 item per baris ketika mencapai atau lebih besar daripada breakpoint lg, sedangkan apabila mencapai atau lebih kecil daripada breakpoint md, maka setiap barisnya akan memiliki 2 item.

Pada section 2, div tersebut akan memiliki lebar sebesar 6/12 halaman ketika mencapai atau lebih besar daripada breakpoint lg, sedangkan apabila mencapai atau lebih kecil daripada breakpoint md maka lebar div tersebut akan memiliki lebar sebesar 12/12 halaman (selebar halaman).

Baca Juga : Hal Pertama yang Harus Kamu Ketahui Sebelum Menjadi Web-Frontend Development

Gutters

Gutter berfungsi untuk memberikan jarak antar item di dalamnya. Contohnya sebagai berikut:

<div class="container">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

Penggunaan gutter sama seperti padding dan margin. Terdapat g-1 hingga g-5 di mana g-1 memberi jarak terkecil dan g-5 terbesar. Selain itu terdapat gx jika hanya untuk jarak di kiri dan kanan, dan gy jika hanya untuk jarak di atas dan bawah. Gutter juga dapat diasosiasikan dengan breakpoints seperti g-lg-5.

Demikian pembahasan artikel ini mengenai layout pada framework bootstrap. Semoga artikel ini dapat membantu. Jika kamu ingin belajar lebih dalam mengenai framework bootstrap, kamu bisa gabung kelas online Belajar Bootstrap CSS Framework.


Referensi : 

https://getbootstrap.com/

Technology vector created by vectorjuice - www.freepik.com


Agnes Caroline

Agnes Caroline

Kamis, 20 Januari 2022

ARTIKEL TERKAIT

Magang lebih mudah dan bisa dilakukan dari mana saja dengan Program Magang Online Gamelab. Magang Bersertifikat, plus Pelatihan!

DAFTAR MAGANG

ARTIKEL POPULER

KATEGORI