Bandar Bola – Perencanaan tampilan antar muka pada sebuah situs web biasanya dimulai dengan skema atau layout dari masing-masing halaman web yang akan kita buat. Pertimbangan layout selain berdasarkan konten web yang ingin ditampilkan juga berdasarkan media yang digunakan oleh pengunjung web yang akan memiliki akses terhadap informasi yang ingin kita tampilkan.

Tulisan ini merupakan bagian dari kelompok tulisan mengenai pemanfaatan Twitter Bootstrap pada perancangan tampilan antar muka situs web yang dapat dilihat melalui Tag : Twitter Bootstrap atau Page : Panduan Twitter Bootstrap

Layout Grid Twitter Bootstrap
Layout menggunakan sistem Grid di Twitter Bootstrap

Twitter Bootstrap menyediakan sistematika grid yang bersifat fluid dan memiliki sifat responsive dengan pendekatan mobilefirst memanfaatkan 12 kolom yang secara skalatis akan menyesuaikan dengan viewport dari media yang digunakan untuk mengakses.

Desain Responsif dan Akses Mobile

Desain responsif adalah pendekatan desain yang bertujuan untuk membuat halaman web dapat dilihat dengan baik pada berbagai kondisi lebar media yang dipergunakan. Untuk memberikan kemampuan responsif pada sebuah halaman HTML harus diperhatikan hal-hal sebagai berikut;

  • Sistem Grid yang cair (fluid), sifat fluid akan memungkinkan grid menyesuaikan lebarnya dengan lebar viewport, dengan demikian lebar dari grid ditentukan dalam persentasi dan tidak lagi dalam satuan yang fix seperti pixel ataupun point.
  • Lebar media non-teks seperti gambar juga harus dinyatakan dalam satuan relatif terhadap lebar viewport.
  • Query terhadap Media atau Media Query  yang memungkinkan seperangkat aturan CSS diperlakukan terhadap kondisi viewport tertentu, dengan demikian dapat dibuat beberapa kelompok aturan CSS yang masing-masing melayani lebar viewport tertentu.

Kebutuhan akan desain yang bersifat responsif ini menjadi cukup vital mengingat pengakses web dari media non desktop seperti smartphone jumlahnya meningkat dengan sangat pesat, dengan demikian desain juga harus mampu melayani beragam lebar layar smartphone .

Konsep Sistem Grid Twitter Bootstrap

Kemampuan layout melalui sistem grid Twitter Bootstrap merupakan salah satu fitur utama yang sudah ada dari awal, dengan demikian pengembangannya sudah cukup matang dan mempertimbangkan banyak aspek sesuai dengan kebutuhan konten internet. Berikut adalah beberapa konsep sistematika grid di Twitter Bootstrap yang dapat dipahami untuk mempermudah pemahaman secara keseluruhan;

  • 12 Kolom (col), Grid memanfaatkan sistem 12 kolom, satu baris yang lebarnya akan berisi tampilan dari web kita secara garis besar dibagi ke dalam 12 kolom yaitu Kolom 1 sampai dengan kolom 12.
  • Kolom berada di dalam Baris (row), otomatis secara konsep tabular 12 kolom tersebut sebaiknya di dalam sebuah baris, pehamanan ini nantinya akan diterapkan didalam penulisan layout yang ingin kita buat dalam HTML. Row digunakan untuk pengelompokan secara horizontal atau mendatar.
  • Baris berada di dalam Container (container), baris baris yang kita tentukan nantikan akan berada di dalam sebuah wadah yang menjadi batas terluar dari antar muka yang kita buat, wadah ini disebut sebagai container, satu halaman dapat terdiri atas satu atau lebih container dan sebuah container bisa berada di dalam container lainnya (nested).
  • Nested Grid, sebuah penerapan grid yang lengkap tidak harus berdiri sendiri melainkan dapat berada di dalam sistem grid lainnya, hal ini dikenal dengan istilah nested grid.

Ketiga konsep di atas diterjemahkan ke dalam Twitter Bootstrap dalam format class CSS yang dapat kita gunakan di dalam halaman HTML kita, berikut adalah skema layout dari konsep tersebut di atas pada penerapan di situs yang memanfaatkan Twitter Bootstrap.

Grid Row Col Container Bandar303.co
Sketsa konsep penerapan container baris (row) dan kolom (col) di situs http://bandar303.co/

Gambar diatas untuk membantu pemahaman terhadap konsep Grid yang sedang kita bicarakan tanpa akurasi ketepatan secara teknis, gambar diambil dari situs web yang online dan operasional menggunakan framework yang sama, dapat dilihat tampilan keseluruhannya di situs Bandar Bola dan Agen Sabung Ayam Terbaik tersebut.

Beberapa bagian di warnai penuh sebagai penggambaran, warna dari text disamakan dengan warna batas dari container, row dan col yang membentuk sebuah halaman HTML secara lengkap.

Sistem Grid sebagai class CSS di halaman HTML

Twitter Bootstrap menyertakan seperangkat class CSS yang langsung dapat kita gunakan untuk membangun layout yang kita inginkan. Dengan demikian penerjemahan sistematika grid tersebut ke dalam HTML adalah kurang lebih sebagai berikut.

Link File HTML

https://github.com/webslicesauthor/Repository/blob/master/twitter-bootstrap/konsep-sistem-grid.html

Pastikan bahwa kita sudah memanggil file CSS, jQuery dan Javascript Twitter Bootstrap apabila ingin menggunakan class tersebut.

class container adalah container, class row adalah baris dan class col-xs-12 adalah kolom, kita akan mempelajari lebih lanjut apa yang dimaksud dengan xs dan apa yang maksud dengan 12 pada col-xs-12 pada penjelasan mengenai kolom lebih lanjut.

Container

Container berfungsi sebagai wrapper dari keseluruhan grid yang ingin kita tampilkan dalam sebuah halaman HTML. Menjadi rumah bagi semua sistem grid di dalam satu halaman, secara teoritis tidak diperbolehkan membuat container di dalam container, namun secara teknis hal tersebut dapat dilakukan.

Pada Twitter Bootstrap terdapat dua class container yang sudah didefinisikan yaitu;

  • Container dengan lebar yang fixed atau fixed-width container yang juga memiliki sifat responsif, class container ini adalah container.
  • Container dengan lebar memenuhi viewport atau full-width container yang juga memiliki sifat responsif, class container ini adalah container-fluid.

Yang dimaksud dengan viewport adalah lebar dari media yang digunakan untuk mengakses dalam satuan pixel. Ilustrasi dari kedua jenis container tersebut dapat dilihat pada gambar berikut.

container fixed width
Container fixed-width
container full width fluid
Container full widh (fluid)

Ilustrasi di atas adalah gambaran konsep, tidak persis secara teknis, halaman yang digunakan diambil dari basic template yang disediakan oleh Twitter Bootstrap. Lebar dari container-fluid dan container keduanya mengikuti lebar viewport, kemampuan menyesuaikan lebar terhadap viewport yang digunakan oleh pengunjung halaman web ini yang disebut dengan responsive.

Row

Row atau baris digunakan untuk mengelompokkan kolom (col) secara mendatar atau horizontal, row harus ditempatkan di dalam sebuah container agar memiliki alignment dan padding yang sesuai dengan tujuan dari framework. Fungsi dari row dalam Twitter Bootstrap cukup sederhana, dapat diperhatikan di ilustrasi gambar bersamaan dengan ilustrasi kolom.

class yang disediakan oleh Twitter Bootstrap untuk mendefinisikan row adalah row.

Col

Konten dari halaman web yang ingin kita tampilkan menggunakan framework harus berada di dalam definisi kolom. Kolom atau dalam class CSS akan menggunakan nama col didefinisikan persis setelah row didefinisikan di halaman HTML kita. Class col yang sudah didefinisikan oleh Twitter Bootstrap dinyatakan dalam format seperti col-xs-4 yang kurang lebih memiliki pemahaman berikut;

  • col : merupakan definisi kolom
  • xs : merupakan kelompok lebat viewport yang dilayani oleh class tersebut
  • 4 : merupakan jumlah kolom secara horizontal yang diwakili oleh class tersebut, merujuk prinsip dasar bahwa satu layar dibagi menjadi 12 kolom

Berdasarkan penjabaran diatas juga harus diperhatikan hal berikut;

  • Pengelompokkan lebar viewport yang digunakan oleh framework
  • Pemahaman terhadap 12 kolom dalam satu layar

Untuk memudahkan silahkan diperhatikan ilustrasi berikut;

row col medium
row dan col di layar medium (md)

Contoh gambar di atas menampilkan empat buah row yang masing-masing mengelompokkan kolom secara berbeda, definisi col di gambar tersebut adalah untuk viewport medium (md). Berikut adalah penjabaran untuk masing-masing row;

  • row 1 terdiri dari 12 buah col yang masing-masing mewakili lebar satu col
  • row 2 terdiri dari 2 buah colcol di-sebelah kiri mewakili lebar dari 8 col dan yang di kanan mewakili lebar dari 4 col perhatikan bahwa total lebar col yang diwakili adalah 12 (jumlah kiri dan kanan)
  • dan seterusnya dapat dipelajari lebih lanjut

Twitter Bootstrap mengelompokkan viewport ke dalam 4 kelompok sebagai berikut;

  • viewport extra small (xs) yang dilayani oleh class col-xs-* (contoh: col-xs-4) untuk kelompok viewport yang memiliki lebar lebih kecil dari 768px
  • viewport small (sm) yang dilayani oleh class col-sm-* (contoh: col-sm-2) untuk kelompok viewport yang memiliki lebar lebih besar dan sama dengan 768px  sampai dengan kelompok berikutnya
  • viewport medium (md) yang dilayani oleh class col-md-* (contoh: col-md-6) untuk kelompok viewport yang memiliki lebar lebih besar dan sama dengan 992px  sampai dengan kelompok berikutnya
  • viewport large (lg) yang dilayani oleh class col-lg-* (contoh: col-lg-8) untuk kelompok viewport yang memiliki lebar lebih besar dan sama dengan 1200px

Twitter Bootstrap menggunaan media queries untuk membuat beberapa kelompok aturan CSS yang masing-masing melayani viewport tertentu.

Menerapkan sistem Responsive Grid ke dalam halaman HTML kita

Apabila pengertian dasar dari sistem Grid yang dimungkinkan melaui framework ini sudah anda dapatkan, termasuk pengertian terhadap elemen didalamnya, maka kita sudah bisa mulai mencoba untuk menerapkan ke dalam proses desain kita. Sebagai contoh kasus misalkan kita ingin membuat sebuah halaman HTML dengan konsep layout seperti yang digunakan sebagai contoh di url berikut;

http://getbootstrap.com/examples/jumbotron-narrow/

Ilustrasi dari halaman HTML yang ingin kita buat apabila dilihat dari kelompok viewport yang paling lebar (lg) adalah berikut;

layout fixed container twitter bootstrap
Layout HTML dengan fixed width container menggunakan Twitter Bootstrap

Kita akan bersama-sama membuat halaman dengan konsep grid seperti di gambar atas, meski tidak terlalu detail kepada text, button atau elemen navigation bar seperti yang terlihat di gambar atas karena kita berada pada tahap memahami konsep responsive design yang dimiliki oleh sistem Grid Twitter Bootsrap.

Keterangan Layout :

  • Container memiliki fixed-width, kita akan menggunakan container dan akan mematok lebar maksimal dari kontainer tersebut menggunakan custom CSS, kita akan menggunakan lebar maksimal 768px
  • Terdapat tiga macam row yang memiliki kombinasi col berbeda yaitu;
    • row 1 header yang terdiri dari  dua col yaitu satu col dengan lebar 9 col di kiri kiri dan  satu col dengan lebar 3 col di sebelah kanan kanan
    • row 2  slider dan row 6  footer yang terdiri dari 1 col dengan lebar 12 col
    • row 3, 4 dan 5  yang terdiri dari dua col yaitu satu col di sebelah kiri yang memiliki lebar 6 col atau separuh dari total, dan satu di sebelah kanan yang memiliki lebar dari total 6 col
  • Jarak antar row untuk sementara dapat diabaikan
  • Hasil dari responsive design atau layout yang ingin disajikan pada kondisi viewport yang lain akan kita bahas sambil menuliskan kode HTML dari grid di atas

Langkah pertama : Persiapkan kerangka HTML anda dan panggil semua file yang dibutuhkan

Berikut adalah file-file yang akan kita panggil ke-dalam halaman ini;

  • File CSS bootstrap (di dalam head)
  • File custom CSS milik kita (di dalam head)
  • File jQuery (sebelum body ditutup)
  • File Javascript bootstrap (sebelum body ditutup)

Juga dalam kerangka awal kita akan berpacu kepada;

  • HTML yang kita buat adalah HTML5 (!doctype HTML)
  • Membuat title dari halaman (tag title di dalam head)
  • Memiliki definisi viewport (meta viewport di dalam head)
  • Memiliki definisi charset (meta charset di dalam head)

File HTML sampai dengan saat ini

https://github.com/webslicesauthor/Repository/blob/master/twitter-bootstrap/01-membuat-kerangka.html

Langkah keduaDefinisikan container dan row di dalam halaman HTML tersebut

Class ena yang kita gunakan adalah container dan untuk melakukan modifikasi tambahan, dalam hal ini kita akan memberikan lebar maksimal 768px maka kita akan menambahkan class custom yang kita buat di dalam custom.css, class tersebut akan kita namakan custom-container-fixed.

 

 

<p style="text-align: justify;">Perhatikan bahwa class tambahan dapat kita berikan ke dalam satu div, pada satu buah definisi class di div tersebut. Di file custom.css kita berarti kita menambahkan sebuah class sebagai berikut;</p>
```css
/* File custom.css */
.custom-container-fixed {
max-width : 768px;
}

Kemudian kita akan menambahkan enam buah row di dalam container tersebut yang masing-masing akan kita berikan comment berupa nama row sesuai dengan ilustrasi layout di atas.

<div class="container custom-container-fixed">

<!-- definisi row untuk header -->
<div class="row"></div>
<!-- definisi row untuk slider -->
<div class="row"></div>
<!-- dan seterusnya sampai row ke-enam -->