Apa
itu sih Bootsrap?, mungkin bagi yang sudah sering belajar di dunia pemrograman
web sudah sangat familiar dengan kata-kata tersebut, tetapi bagi yang baru
belajar mungkin sering bertanya tanya. Apa sih itu Bootsrap?
Ok
kali ini akan sedikit saya bahas tentang apa itu bootstrap. Bootstrap adalah
sebuah library Framework CSS yang di buat dan di rancang khusus untuk
pengembagan front-end website. Pada saat ini hampir semua web developer telah
menggunakan bootstrap untuk membuat tampilan-tampilan web menjadi lebih bagus,
mudah, dan sangat cepat.
Terus
bagaimana cara menggunakan bootstrap untuk diterapkan pada website yang akan
kita buat?
Langkah
pertama yang harus kita lakukan adalah dengan mendownload file bootstrap
terlebih dahulu disini, selanjutnya kita install dan terapkan deh di website
yang akan kita bangun atau bangun dengan cara exstrak file downloadan yang tadi
pada folder web yang dibuat oleh kalian.
Selanjutnya
adalah kita tinggal menambahkan class-class yang sudah mempunyai fungsi-fungsi
tersendiri.
Berikut
ini saya kasih contoh untuk penerapan membuat tombol dengan menggunakan
bootstrap.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Tombol dengan menggunakan Bootstrap</title>
<link rel="stylesheet" type="text/css"
href="css/bootstrap.css">
<script type="text/javascript"
src="js/jquery.js"></script>
<script type="text/javascript"
src="js/bootstrap.js"></script>
</head>
<body>
<h1>Membuat Tombol Menggunakan
Bootstrap</h1>
<button class="btn
btn-danger">Tombol Merah</button>
<button class="btn
btn-primary">Tombol Biru</button>
</body>
</html>
Ok
berikut adalah penjelasan dari scrip di atas.
<link
rel="stylesheet"
type="text/css"
href="css/bootstrap.css">
<script type="text/javascript"
src="js/jquery.js"></script>
<script type="text/javascript"
src="js/bootstrap.js"></script>
Perintah
di atas adalah perintah untuk menghubungkan file bootstrap di dengan file web
yang kita buat.
<button class="btn
btn-danger">Tombol Merah</button>
<button class="btn
btn-primary">Tombol Biru</button>
Sedangkan
perintah ini adalah untuk membuat tombol sesuai dengan keinginan yaitu dengan
menambahkan class-class yang sudah ada pada file bootstrap yang kita download
tadi.
Berikut
adalah berbagai macam class untuk tombol yang bisa dipergunakan.
- Btn-danger (untuk membuat button atau tombol berwarna merah)
- Btn-default (untuk membuat button atau tombol berwarna standart bootstrap)
- Btn-warning (untuk membuat button atau tombol berwarna kuning)
- Btn-primary (untuk membuat button atau tombol berwarna biru)
- Btn-info (untuk membuat button atau tombol berwarna biru langit)
- Btn-succes (untuk membuat button atau tombol berwarna hijau)
Ok. Sekian penjelasan dari Mamanssuparman.blogspot.com. kita sambung lain waktu dengan materi Bootstrap yang lain
