BOOTSTRAP

BENGKEL INTERNET
RAHARDHITA WIDYATRA SUDIBYO, S.ST., MT., PH.D
PENS 2020
TUJUAN

 Sifat responsive bootstrap

 File-file bootstrap
 Konsep grid bootstrap
 Layout form dalam bootstrap
BOOTSTRAP

 Bootstrap adalah framework CSS untuk membuat tampilan web. Bootstrap

menyediakan class dan komponen yang siap dipakai, sehingga tidak perlu
menulis kode CSS dari nol.
 Bootstrap awalnya dikembangkan oleh developer Twitter, lalu dibuat open
source agar semua orang dapat berkontribusi di dalamnya.
 Contoh fungsi menggunakan Bootstrap adalah halaman website yang responsive
terhadap layar device.
 Bila ukuran layar device lebih kecil maka halaman website akan menyesuaikan,
begitu pula terhadap ukuran layar yang lebih besar.
CARA MENGGUNAKAN BOOTSTRAP
1. MEMBUAT FOLDER BOOTSTRAP

 Download bootstrap melalui website

https://getbootstrap.com/docs/3.3/getting-started/
CARA MENGGUNAKAN BOOTSTRAP
2. DOWNLOAD FILE JQUERY

 Download jqeury melalui website https://jquery.com/download/

 Download dan simpan pada folder js
 MENGGUNAKAN BOOTSTRAP

Baris ke-6 mengatur agar lebar laman web mengikuti lebar layar perangkat
Baris ke-12 menggunakan kelas kontainer dalam bootstrap agar semua elemen ‘terbungkus’ mengumpul di satu wadah.
GRID BOOTSTRAP

 Pada dasarnya grid bootstrap adalah tentang bagaimana bootstrap membagi-

bagi suatu laman web sehingga proses layout menjadi mudah dan sistematis.
 Bootstrap membagi laman web menjadi 12 grid (daerah vertikal laman web).
Setiap grid dapat digabungkan untuk membuat grid yang lebih besar
KELAS GRID BOOTSTRAP

Bootstrap memiliki 4 buah kelas grid

1. xs : grid untuk layout di layar ponsel
2. sm : grid untuk layout di layar tablet
3. md : grid untuk layout di layar dekstop
4. lg : grid untuk layout di layar dekstop besar
FORM BOOTSTRAP

 Form vertical
 Form horizontal
 Form inline
LATIHAN
1. BOOTSTRAP SEDERHANA
LATIHAN
2. FORM VERTICAL
LATIHAN
3. FORM INLINE
LATIHAN
3. FORM INLINE
LATIHAN
4. FORM HORIZONTAL
TUGAS

 Download bootstrap source code melalui website

https://getbootstrap.com/docs/3.3/getting-started/
TUGAS

 Extract, kemudian buka folder /docs/examples

 Pilih minimal 9 macam contoh,
 Kemudian modifikasi salah satu kata di dalam
source code menjadi NRP kalian
 Contoh :