BOOTSTRAP

Pengertian Bootstrap

Bootstrap adalah front-end framework yang yang mengedapankan tampilan untuk

mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah
pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap
pakai dan mudah untuk dikembangkan, Platform ini hanya menggunakan sedikit coding
CSS dan JavaScript namun tetap bisa membuat website yang powerfull mengikuti
perkembangan browser. Website yang menggunakan bootstrap akan menjadi website
yang fleksibel, nyaman dan tentu saja cepat.

KEUNTUNGAN MENGGUNAKAN BOOTSTRAP

 Waktu pembuatan yang lebih cepat Karena elemen-elemen yang biasa ada
dalam sebuah website pada umumnya sudah dibuatkan class-nya oleh
Bootstrap.
 Template yang menggunakan Bootstrap lebih rapi,
kebiasaan masing-masing developer membuat coding pasti berbeda-beda.
Namun pada dasarnya, karena bootstrap sudah terstruktur, untuk modifikasi
class dan penambahan class memang sebaiknya mempertahankan kerapihan
code yang sudah ada lebih dulu.
 Template yang menggunakan Bootstrap lebih ringan.
Untuk developer yang efisien, mungkin akan mengatakan saya salah. Karena,
tidak mungkin semua class CSS dalam Bootstrap yang akan dipakai, Benar.
Tetapi juga seperti halnya pengguna WordPress yang belum tentu memerlukan
seluruh fitur WordPress, tapi tetap menggunakannya dengan alasan fitur itu
berguna dan ada jika suatu saat dibutuhkan. Begitulah juga kira-kira saya
menganggap bootstrap lebih ‘ringan’.
 Responsive dan tidak responsive.
dengan sedikit modifikasi template, kita bisa memilih antara mengaktifkan sifat
‘responsive’ dan tidak ‘responsive’.
 Banyak template bootstrap gratis dan contoh untuk belajar

KELEBIHAN BOOTSTRAP
 Tidak perlu menuliskan baris kode CSS, HTML dan JavaScript yang terlalu panjang.
 Tinggal mengatur CSS yang di butuhkan saja.
 Terdapat banyak varian style pada bootstrap.
 Ada banyak pilihan button, navigation, carousel dll.
 Otomatis Responsive, Tidak perlu mengatur.
 CSS dan JavaScript yang ringan

KEKURANGAN
 Membuat jadi kurang kreatif karena terpaku dengan coding yang dikembangkan
oleh developer.

CARA MENGGUNAKAN

Download terlebih dahulu file bootstrap yang ada di website resminya, setelah semua
file sudah di download. Maka di dalam folder yang sudah di download tadi akan ada
bebrapa folder antara lain, css, font, js.

Didalam folder

Css - terdapat file bootstrap, bootstrap.css.map, bootstrap.min, bootstrap-theme,

bootstrap-theme.css.map, bootstrap-theme.min.

 css/bootstrap.css berisi style dasar (reset, layout, typography, button) bawaan

bootstrap.
 css/bootstrap-responsive.css berisi setting responsive desain. Kita bisa
memakainya bersama bootstrap.css untuk membuat style bootstrap menjadi
responsive.
 css/bootstrap-min.css dan
 css/bootstrap-responsive-min.css versi compressed dari bootstrap.css dan
bootstrap-responsive.css

Font - beberapa jenis font yang dibutuhkan sesuai projek.

Js – bootstrap, bootstrap.min, bootstrap.min

 js/bootstrap.js dan
 js/bootstrap-min.js adalah javascript untuk mengaktifkan berbagai fitur
bawaan bootstrap.

Kegunaan Bootstrap merupakan framework untuk membangun desain web secara

responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran
layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device.
Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri.
Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender
oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi
sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.

Kita juda dapat membuat custom css sendiri, sesuai keinginan dan kebutuhan.

Buat file index.html

Dan buat file css baru contoh saja dengan nama custom.css
File custom.css yang sudah dibuat tadi selanjutnya di panggil

<link href="css/custom.css" rel="stylesheet"> yang di ketik di file index.html, file

custom.css diperlukan untuk mengedit halaman yang dibutuhkan. jika sudah selesai
membuat file custom.css dan index.html selanjutnya bisa dilanjutkan untuk membuat
halaman website yang lain.

Contoh design website menggunakan bootstrap.

(Handphone, smartphone dll.)