Sarana Informasi Bidang Informatika.

Grid System Pada Bootstrap



Bootstrap ialah salah satunya frame-work css serta js yang dipakai untuk bikin penampilan web yang responsive dengan beragam ukuran resolusi piranti yang berlainan. Dengan memakai css serta js dari bootstrap, jadi anda bisa bikin penampilan standard web dari mulai form, label, navbar, serta ada banyak lagi di mana semuanya penampilan telah responsive dengan resolusi piranti anda.

Didalam frame-work Bootstrap ada system grid yang dipakai untuk mengatur penampilan sesuai sama ukuran monitor dari piranti yang dipakai dengan gampang serta cepat.

Pada artikel ini saya akan mengulas spesial tentang system grid pada Bootstrap yang sesuai dengan sejumlah masalah yang ada. Di awalnya artikel saya akan mengenalkan sejumlah class yang dipakai pada system grid diikutkan dengan ketentuan basic dari semasing class. Sesudah mengetahui class basic pada system grid, materi akan saya teruskan ke sejumlah contoh aplikasi system grid.

Pengenalan class untuk system grid Bootstrap 

Didalam system grid Bootstrap ada banyak class yang dipakai untuk mengatur penampilan sesuai sama masalah yang ada. Tersebut keterangan dari semasing class untuk system grid Bootstrap.

Class Containers 

Class containers ialah class terluar dari suatu bagian content, di mana class ini akan mengatur lebar content sesuai sama class yang dipakai. Didalam frame-work Bootstrap ada dua type containers yakni. container serta. container-fluid. Berikut keterangan dari semasing class containers yang ada.

Class Container 

Class container atau. container mempunyai ukuran fixed width atau lebar sesuai dengan ukuran yang sudah ditetapkan atau fix. Optimal lebar container untuk class ini yakni 1170px. Sejumlah ketentuan dari. container berdasar pada resolusi piranti yakni : (1) Untuk resolusi monitor semakin besar atau sama juga dengan 1200px mempunyai lebar container sebesar 1170px, (2) untuk resolusi monitor semakin besar atau sama juga dengan 992px mempunyai lebar container sebesar 970px, (3) untuk resolusi monitor semakin besar atau sama juga dengan 768px mempunyai lebar container sebesar 750px, serta (4) untuk resolusi monitor lebih kecil dari 768px mempunyai lebar container sesuai sama resolusi monitor (auto).
Aplikasi dari. container yakni seperti berikut :
<div class="container">
  ...
</div>

Class Container Fluid 

Class container fluid atau. container-fluid mempunyai ukuran lebar container penuhi lebar monitor (full width). Dengan memakai class ini jadi container yang anda bikin akan memenuli ukuran monitor dari semuanya piranti yang anda pakai.
Aplikasi dari. container-fluid yakni senagai tersebut :
<div class="container-fluid">
  ...
</div>

Class Row serta Columns 

Class ini dipakai untuk mengatur ukuran monitor dengan membagi tiap-tiap sisi content jadi 12 kolom. Class ini ialah class sebagai inti dari grid system dari Bootstrap. Mengenai ketentuan yang perlu untuk diketahui untuk grid system Bootstrap yakni seperti berikut :

  1. row mesti ditempatkan di antara. container atau. container-fluid untuk kesesuaian aligment serta padding. 
  2. Pakai. row untuk bikin group horizontal dari tiap-tiap kolom (. col-*-*). 
  3. Content mesti ditempatkan di antara kolom serta cuma kolom yang sangat mungkin untuk bikin anak dari. row. 
  4. Class grid yang sudah ditetapkan seperti. row serta. col-xs-* ada untuk percepat pembuatan grid layouts. 
  5. Class columns akan bikin batas pada kolom serta content dengan memakai padding. Pemakaian margin negatif pada. row akan bikin. row sejajar dengan kolom yang memiliki batas padding. 
  6. Grid columns dibikin dengan memastikan nomer dari 12 kolom yang ada. Mirip contoh : untuk bikin tiga kolom yang sama pada satu baris jadi mesti bikin tiga. col-xs-4. Langkah untuk memastikan nomer dari kolom yakni dengan membagi 12 kolom yang ada dengan jumlahnya kolom yang diharapkan. 
  7. Bila dalam. row mempunyai lebih dari 12 kolom maka dapat ditempatkan pada baris baru yang sebetulnya adalah satu kesatuan. 
  8. Class grid berlaku untuk piranti dengan resolusi semakin besar atau sama juga dengan ukuran breakpoint serta akan menerpa class grid yang ditargetkan pada piranti dengan resolusi yang lebih kecil. Memakai. col-md-* untuk bagian bukan sekedar punya pengaruh untuk ukuran medium tetapi akan punya pengaruh untuk ukuran monitor yang semakin besar bila. col-lg-* tidak direpresentasikan. 


Pembagian kolom dalam tiap-tiap baris bisa ditata sesuai sama ukuran monitor yang ditargetkan. Untuk tiap-tiap resolusi yang diputuskan bootstrap mempunyai class prefix yang dipakai menjadi pembagi baris di tiap-tiap resolusi piranti. Mengenai class prefix yang disebut yakni :

  • col-xs-* adalah class prefix yang dipakai untuk membagi baris pada ukuran kurang dari 768px atau ekstra small. 
  • col-sm-* adalah class prefix yang dipakai untuk membagi baris pada ukuran semakin besar atau sama juga dengan 768px atau small. 
  • col-md-* adalah class prefix yang dipakai untuk membagi baris pada ukuran semakin besar atau sama juga dengan 992px atau medium. 
  • col-lg-* adalah class prefix yang dipakai untuk membagi baris pada ukuran semakin besar atau sama juga dengan 1200px atau large. 

Aplikasi system grid Bootstrap 

Sesudah mengerti basic serta ketentuan dari aplikasi system grid pada Bootstrap, jadi setelah itu materi akan diteruskan di bagian implementasi system grid sesui dengan masalah yang ada.

Tersebut beberpa masalah dari aplikasi system grid dari yang simpel s/d yang lebih kompleks.

  • Masalah pertama yakni membagi baris jadi 3 kolom dengan ukuran kolom yang sama pada resolusi Masalah ini bisa dikerjakan dengan mengingat sejumlah ketentuan yang ada yakni. row mesti ada di antara. container atau. container-fluid, . row optimal berisi 12 kolom, apabila ingin membagi. row jadi ukuran yang sama jadi mesti membagi 12 kolom dengan jumlahnya kolom yang ingin dibikin. Sesuai sama masalah ini, jadi kita mesti membagi 12 kolom dengan 3 kolom hingga membuahkan nilai 4. Aplikasi untuk masalah ini yakni bikin. col-md-4 sejumlah 3 kali. Tersebut kode komplit untuk masalah ini. 

<div class="container">
  <div class="row">
    <div class="col-md-4">Kolom 1</div>
    <div class="col-md-4">Kolom 2</div>
    <div class="col-md-4">Kolom 3</div>
  </div>
</div>

  • Masalah ke dua yakni aplikasi pembagian kolom berdasar pada resolusi monitor, dalam masalah ini ada 6 kolom yang akan dibagi sesuai sama ukuran monitor. Pada ukuran besar akan dibagi jadi 6 sisi, pada ukuran medium akan dibagi jadi 3 sisi, pada ukuran kecil akan dibagi jadi 2 sisi, serta pada ukuran sangatlah kecil akan dibagi jadi 1 sisi. Penyelesaian masalah ini bisa dikerjakan dengan lakukan gabungan class prefix dari kolom. Tersebut bait kode penyelesaian untuk masalah ini. 

<div class="container">
  <div class="row">
    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Kolom 1</div>
    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Kolom 2</div>
    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Kolom 3</div>
    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Kolom 4</div>
    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Kolom 5</div>
    <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">Kolom 6</div>
  </div>
</div>

  • Masalah setelah itu yakni bikin anak class row, dalam masalah ini akan ada 2 kolom pada resolusi medium yang semasing kolom dibagi jadi tiga sisi yang lebih kecil. Tersebut bait kode untuk penyelesaian masalah ini. 

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div clas="row"
        <div class="col-md-4">Kolom 1 Anak Kolom 1</div>
        <div class="col-md-4">Kolom 1 Anak Kolom 2</div>
        <div class="col-md-4">Kolom 1 Anak Kolom 3</div>
      </div>
    </div>
    <div class="col-md-6">
      <div clas="row"
        <div class="col-md-4">Kolom 2 Anak Kolom 1</div>
        <div class="col-md-4">Kolom 2 Anak Kolom 2</div>
        <div class="col-md-4">Kolom 2 Anak Kolom 3</div>
      </div>
    </div>
  </div> 
</div>

Demikian artikel mengenai system grid pada Bootstrap, mudah-mudahan artikel ini bisa memudahkan serta menolong anda dalam pelajari system grid dari Bootstrap.

Baca juga : 5 hal yang harus diketahui tentang jaringan