Responsive Web

• Saat ini berbagai macam media mulai dari HP, Tablet, laptop ukuran mini memiliki web browser yang dapat membuka halaman web, suatu web agar dapat dibuka oleh berbagai macam media dengan berbagai ukuran harus bersifat responsive. responsive adalah sistem pembagian halaman secara perkolom sehingga memungkinkan agar tampilan suatu web dapat tetap tampak bagus apabila ditampilkan di berbagai media (HP, tablet, Laptop atau komputer desktop).

Grid System

• Grid system adalah suatu sistem yang membagi tampilan layar menjadi 12 kolom
• bila ingin menggunakan sistem grid, pastikan menggunakan class container / container-fluid
• sebelum membagi kolom pastikan menggunakan class row
• secara default akan ada jarak antar kolom (padding)
• program web browser yang kita gunakan, dapat mengetahui ukuran layar yang digunakan saat ini dari perintah viewport yang kita letakkan pada bagian head

contoh 1: penggunaan sederhana yang membagi 2 area dengan besar kolom 8 dan 4

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

• pada contoh diatas digunakan class container, yang dilanjutkan proses pembagian kolom dengan class row
• kolom dibagi 2, yang pertama sebesar 8 kolom sedangkan yang kanan sebesar 4 kolom
• bila ditotal 8 + 4 nilainya adalah 12 kolom (sesuai dengan syarat bootstrap)

contoh 2: berbagai ukuran layar dengan setting grid yang berbeda

  <div class="container-fluid umum">
    <div class="row">
      <div class="col-xs-2 col-sm-5 col-md-6 col-lg-9">
        <div class="kiri">
          <p>kotak kiri</p>
        </div>
      </div>
      <div class="col-xs-10 col-sm-7 col-md-6 col-lg-3">
        <div class="kanan">
          <p>kotak kanan</p>
        </div>
      </div>
    </div>
  </div>

• pada contoh 2,bila layar web browser
  • termasuk ukuran lebar (LG) maka pembagian kolom kiri 9 dan kanan 3
  • bila ukuran medium (LG), maka kolom kiri dan kanan sama besar yaitu 6 kolom
  • bila ukuran small (SM), maka kolom kiri 5 dan kanan 7
  • bila ukuran extra small (XS), maka kolom kiri hanya 2 dan kanan 10
• untuk lebih detil batasan ukuran layar termasuk extra small atau small atau medium atau large maka berikut tabelnya

Contoh 3: Membuat kolom kosong

<div class=“row”>
    <div class=“col-sm-8“>
        kiri
     </div>
  <div class=“col-sm-3 col-sm-offset-1“>
        kanan
     </div>
</div>

• pada contoh diatas, kolom dibagi menjadi 2 saja yaitu kiri 8 kolom, seharusnya kanan 4 kolom, tetapi karena kita menginginkan jarak yang besar antara kiri dan kanan, maka kita tambahkan 1 kolom kosong sehingga kanan hanya 3 kolom
• untuk menambahkan kolom kosong gunakan perintah offset sebelum mengetik besar kolom
  • pada contoh diatas adalah col-sm-offset-1
  • artinya menambahkan 1 kolom kosong terlebih dahulu baru menambah 3 kolom berikutnya

Contoh 4: Multilevel Grid

<div class=“row”>
  <div class=“col-sm-2“>
    kiri
  </div>
  <div class=“col-sm-8“>
    tengah
        <div class=“row”>
        <div class=“col-sm-10“>
             artikel
        </div>
        <div class=“col-sm-2“>
             tombol
        </div>      
      </div>
  </div>
  <div class=“col-sm-2“>
    kanan
  </div>
</div>

• pada contoh ini pembagian pertama adalah kiri 2, tengah 8 dan kanan 2 kolom
• selanjutnya di dalam area tengah dituliskan lagi div class="row" yang artinya membagi lagi
  • pembuatan kolom kalau ditotal tetap harus 12,
  • sehingga dicontoh ini dibagi 10 kolom untuk artikel dan 2 kolom untuk tombol

Contoh 5: Merubah urutan kolom bila ukuran berubah

 <div class="row">
   <div class="col-xs-12 col-md-4 col-md-push-4">
     <div class="tengah">Tengah</div>
   </div>
   <div class="col-xs-6 col-md-4 col-md-pull-4">
     <div class="kiri">kiri</div>
   </div>
   <div class="col-xs-6 col-md-4">
     <div class="kanan">kanan</div>
    </div>
 </div>

• Bila layar menggunakan ukuran extra small atau small, maka kolom tengah akan tampak diatas
  • karena yang berlaku adalah ukuran XS
• Bila layar menggunakan ukuran medium atau large, maka kolom tengah akan tampak Di Tengah
  • Walapun penulisannya di kode html ditulis dulu, tapi karena perintah push dan pull menjadi di tengah
  • Pengertiannya
  • Push artinya menggeser ke kanan
  • Pull artinya menggeser ke kiri
  • sehingga bila ditulis col-md-4 col-md-push-4
  • artinya buat kolom sebesar 4, dan bila ukuran layar medium geser ke kanan 4 kolom
  • demikian pula col-md-4 col-md-pull-4
  • artinya buat kolom sebesar 4, dan bila ukuran layar medium tarik ke kiri sebesar 4 kolom
    

Praktek siswa

• Jalankan program bracket
  • Pilih menu File, Open folder, buka folder tempat anda bekerja
    • Pilih menu View, Horizontal split
    • Klik pada window bagian bawah
  • Pilih menu File, New
    • Tekan Ctrl + S dan simpan dengan nama demo-grid-siswa.css
    • Ketik kode css berikut:

.kiri, .tengah, .kanan {
  width: 100%;
  height: 300px;
  text-align: center;
  color: white;
  font-size: 20px;
  margin-top: 20px;
  padding-top: 20px;
}

.kiri {
  background-color: #53777A;
}

.kanan {
  background-color: #C02942;
}

.tengah {
  background-color: #542437;
}

• Pilih menu File, New
  • Tekan Ctrl +S dan simpan dengan nama demo-grid-siswa.html
  • Dengan menggunakan teknik emmet ketik kode html berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo grid siswa</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="demo-grid-siswa.css">
</head>
<body>

  ... Latihan siswa

  <script src="js/jquery-2.2.3.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

• cobalah membuat sistem grid seperti contoh gambar berikut: