Mengenal Framework CSS Bootstrap untuk Pemula

bootstrap gb1

Apa itu Framework ?

Framework diterjemahkan memiliki arti "kerangka kerja", dalam hal pemrograman framework adalah kerangka kerja yang sudah disiapkan dan disusun sedemikan rupa, sehingga penggunanya tidak perlu menuliskan baris kode secara berulang-ulang dari awal. Di halaman ini kita membahas framework CSS, artinya sebagai pengguna sobat tidak perlu menuliskan kode CSS dari awal untuk desain web, cukup memanggil class nya saja dan css dapat diimplementasikan ke dalam website sobat. Cara ini sangat mudah terlebih jika sobat tidak terlalu menguasai CSS.

Apa itu Bootstrap ?

Bootstrap adalah salah satu framework css yang sangat populer, terkenal dengan fitur responsifnya, dimana dengan framework bootstrap, website sobat bisa dengan mudah menjadi responsif (Mengikuti ukuran perangkat saat mengakses website sobat).

Nama lengkap framework Bootstrap adalah Twitter Bootstrap tapi secara umum dikenal Bootstrap. Ada nama twitter karena memang Bootstrap dibuat oleh Twitter dan saat ini juga digunakan dan diimplementasikan di website twitter, dan pembuatnya adalah Mark Otto dan Jacob Thornton.

Komponen Bootstrap

CSS
Komponen ini berisi pengaturan elemen CSS secara global yang dapat dengan mudah diimplementasikan di website sobat, diantaranya meliputi:
  • Sistem Grid: Dalam mendesain website pastinya sobat harus mengatur layout atau tataletak dari website sobat, mau dibuat ada sidebarnya atau full halaman, dll. Pengaturan layout ini sangat mudah dengan sistem grid yang ditawarkan oleh Bootstrap. Pada Bootstrap , satu halaman itu dibagi ke dalam 12 kolom, jadi misal kan sobat ingin membagi website sobat menjadi 2 kolom dimana yang satu adalah sidebar dan yang satu adalah konten maka bisa saja sobat mengaturnya menjadi col-md-3 dan col-md-9 (dimana total 3+9 = 12 kolom). Cara implementasinya akan dibahas terpisah.
  • Tipografi: Komponen untuk pengaturan font seperti h1 , h2, h3, ,p, dll .
  • Tabel: Dengan Boostrap sobat dengan mudah mendesain tabel yang menarik dan kaya akan fitur, seperti contoh warna selang-seling pada isi tabel atau hover sistem saat mouse diarahkan pada isi tabel.
  • Form: Dengan mudah sobat bisa mengatur style dari masing-masing elemen form, seperti button, input, label, select, dll.
  • Button: Dengan pilihan warna button (tombol) yang tersedia, mempercantik tampilan website sobat.
  • Images: Bootstrap memungkin kan sobat untuk mengatur style gambar/image, dengan beragam pilihan bingkai (frame).
Javascript
Tak kalah hebatnya, bootstrap pun menyediakan komponen javascript yang dapat sobat tambahkan ke dalam website sobat, sama halnya dengan JQuery, komponen javascript di Bootstrap sangat mudah untuk dipanggil.


Cara mendapatkan Bootstrap

Bootstrap dapat sobat dapatkan dengan gratis di https://getbootstrap.com/ . Setelah sobat download maka filenya sobat masukkan ke dalam folder yang sama dengan website sobat dan kemudian dipanggil dengan cara:

<link href="asset/bootstrap/bootstrap.css" rel="stylesheet" ></link >

Atau sobat bisa langsung memanggil file CDN Bootstrap, yang artinya file bootstrap disimpan di directory boostrap dan sobat cukup panggil filenya secara online, contoh dibawah ini:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" ></link >

Subscribe to receive free email updates:

0 Response to "Mengenal Framework CSS Bootstrap untuk Pemula"

Post a Comment