Bootstrap adalah sebuah framework css yang dapat
digunakan untuk mempermudah membangun tampilan web. Bootstrap pertama
kali di kembangkan pada pertangahan 2010 di Twitter oleh
Mark Otto dan
Jacob Thornton. Saat ini Bootstrap dikembangkan secara
open source dengan lisensi MIT. Kita bisa memantau perkembangan proyek Bootstrap melalui web resminya di
getbootstrap.com dan Githubnya di
https://github.com/twbs/bootstrap.
Jujur saja, saya sendiri sangat terbantu oleh Bootstrap. Banyak
sekali tampilan web yang telah saya buat dengan bantuan Bootstrap,
bahkan web CodePolitan yang ini pun kami kembangkan tamplatenya dengan
Bootstrap. Bootstrap sangat memanjakan kita dalam membuat tampilan web
dan membuat kerja menjadi lebih cepat. Bagaimana tidak, kita tidak lagi
harus memulai semuanya dari nol ketika membuat tampilan web. Bootstrap
telah menyediakan banyak sekali class CSS dan plugin JavaScript yang
bisa langsung kita pakai untuk membantu mempermudah kita membuat halaman
web. Karena kemudahaan penggunaan, banyaknya komponen dan kelengkapan
dokumentasinya, saat ini Bootstrap menjadi salah satu front-end
framework yang paling banyak digunakan di dunia.
Saat tulisan ini dibuat sebenernya udah ada
Bootstrap 4,
namun masih versi Alpha. So, kita pakai saja dulu Bootstrap 3-nya yang
udah stabil untuk memulai belajar sambil menunggu Bootstrap 4 versi
stabilnya keluar.
Sebelum kita akan mulai bagaimana cara menggunakan Bootstrap dalam
membuat halaman web, kita perlu tahu dulu bagaimana cara Bootstrap itu
bekerja. Sehingga nanti kita bisa mengoptimalkan manfaatnya buat
pembuatan web kita. Jadi pada dasarnya Bootstrap merupakan sebuah
kumpulan class CSS dan plugin JavaScript yang sudah siap pakai. Biasanya
kan ketika kita membuat sebuah tampilan web kita akan membuat file HTML
yang di dalamnya berisi berbagai macam TAG HTML.
Misalnya saja ketika kita ingin membuat sebuah tombol berwarna merah seperti berikut:
Maka yang biasa kita lakukan adalah membuat sebuah TAG HTML yaitu TAG BUTTON kemudian memberikan CLASS, contohnya
tombol-merah, seperti berikut:
|
|
<button type="button" class="tombol-merah">CONTOH TOMBOL</button>
|
Selanjutnya kita harus membuat file CSS untuk mengatur bagaimana
penampilan dari dari CLASS atau ID button yang telah kita buat tadi.
Misalnya seperti berikut:
|
|
.tombol-merah {
background: #c0392b;
color: #ffffff;
border: 1px solid #c0392b;
padding: 20px 30px;
}
|
Nah, dengan Bootstrap kita tidak lagi akan memulainya dari nol. Tidak
lagi harus menulis semua kode CSS, terutama yang standar, karena itu
sudah dilakukan oleh Bootstrap. Kita hanya perlu menuliskan kode CSS
yang kita butuhkan saja yang tidak disediakan oleh Bootstrap. Umpamanya
kita ingin membuat sebuah tombol, maka kita bisa melihat bahwa Bootstrap
telah menyediakan 6 jenis tombol yang bisa kita gunakan.
Kalau kita ingin membuat tombol merah, kita cukup memberikan class
btn dan
btn-danger
pada TAG BUTTON yang ingin kita buat merah, maka simsalabim langsung
berubah jadi merah dengan indah, bahkan tanpa kita turun tangan untuk
menulis kode CSS-nya.
|
|
<button type="button" class="btn btn-primary">CONTOH TOMBOL</button>
|
Hasilnya seperti berikut:
Nggak kalah gaul dan ketche kan tombolnya? Hehehe… :D
Wah tombolnya kecil banget, saya pengen tombolnya agak besar
Yasudah tambahkan class
btn-lg pada tombol tersebut,
maka akan langsung berubah jadi besar tombolnya. Karena Bootstrap punya
4 jenis ukuran untuk tombol, tinggal yang mana yang kita gunakan,
tergantung kebutuhan.
|
|
<button type="button" class="btn btn-primary btn-lg">CONTOH TOMBOL</button>
|
Hasilnya:
Oke, intinya seperti itu. Jadi si Bootstrap itu sudah menyediakan
banyak sekali class yang bisa kita gunakan, mulai dari tombol, form,
tabel, grid, nav, list, dan lain sebagainya.
Tapi bagaimana jika dari tombol yang disediakan Bootstrap tidak ada yang saya inginkan, atau saya ingin memodifnya?
Nah disitulah baru kita menulis kode CSS tambahan kita. Karena
sejatinya Bootstrap hanyalah sebuah framework yang memungkinkan untuk
mempermudah kerja kita, namun pasti ada saja sesuatu yang tidak akan ada
pada Bootstrap yang kita butuhkan. Tapi paling tidak kerjaan kita pasti
menjadi lebih cepat dan terbantu.
Oke, saya paham. Jadi sekarang bagaimana caranya saya bisa memulai menggunakan Bootstrap?
Baik, untuk bisa menggunakan Bootstrap berikut ini langkah-langkahnya:
1. Download File Bootstrap
Untuk memulainya, pertama-tama kita harus mendownload file Bootstrap terlebih di
http://getbootstrap.com/getting-started/.
Kemudian klik tombol
Download Bootstrap yang paling
kiri. FYI, di situ kan ada beberapa jenis file Bootstrap yang bisa
didownload, untuk sementara abaikan saja dulu. Dua tombol sisanya itu
merupakan pembahasan yang terpisah :D
Setelah selesai mendownload maka kita akan mendapatkan sebuah file zip dengan nama
bootstrap-3.3.6-dist.zip.
2. Ekstrak File Bootstrap
Selanjutnya ekstraklah file Bootstrap yang telah didownload tadi (
bootstrap-3.3.6-dist.zip) kemudian simpan di sebuah folder tertentu. Akan muncul sebuah folder dengan nama
bootstrap-3.3.6-dist dan di dalamnya ada beberapa folder lagi yaitu
css,
js dan
fonts.
Jika file Bootstrap yang kamu download sama versinya dengan saat
tulisan ini dibuat, maka kurang lebih seperti berikut isi file
bootstrap-3.3.6-dist.zip yang telah diekstrak tadi.
bootstrap-3.3.6-dist/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
3. Buatlah Sebuah File
Selanjutnya, buatlah sebuah file sebagai bahan percobaan. Misalnya dengan nama
index.html, simpan file tersebut di dalam folder
bootstrap-3.3.6-dist tadi, kemudian tuliskan kode berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<p><button class="btn btn-primary btn-lg">SAMPLE BUTTON</button></p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
|
Kode di atas merupakan format standar Bootstrap. Yang perlu diperhatikan adalah:
1. Pastikan link stylesheet Bootstrap mengarah pada path yang tepat
dimana file CSS Bootstrap berada, relative terhadap file html yang
memanggilnya.
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
Karena kebetulan file
index.html yang kita buat berada di dalam folder
bootstrap-3.3.6-dist dan di dalamnya langsung bersisi file Bootstrap, maka kita tulis
css/bootstrap.min.css.
2. Pastikan juga script JavaScript Bootstrap mengarah pada path yang
tepat dimana file JavaScript Bootstrap berada, relative terhadap file
html yang memanggilnya.
|
|
<script src="js/bootstrap.min.js"></script>
|
Karena pada contoh kita, file
index.html yang kita buat di dalam folder
bootstrap-3.3.6-dist dan di dalamnya sudah ada file Bootstrap, maka path-nya bisa kita tulis
js/bootstrap.min.js.
Jika nanti kamu membuat file index.html nya tidak seperti path yang
kita buat di atas nggak usah masalah, tinggal disesuaikan saja path-nya.
3. Pastikan JQuery terpanggil
Bootstrap membutuhkan JQuery agar berjalan dengan sempurna. Karena
JavaScript-nya Bootstrap tidak akan bekerja jika tidak ada JQuery. So,
pastikan JavaScript-nya terpanggil dengan baik. Sebagai contoh di atas,
kita panggil JQuery langsung dari
library-nya Google:
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
Sebenernya kamu bisa juga sih memanggil JQuery-nya
offline (karena mungkin aplikasi kamu tidak harus online) yaitu dengan download file JQuery-nya terlebih dahulu, itu bebas-bebas saja.
Oke, jika semuanya sudah aman, coba silahkan buka file
index.html
yang tadi dibuat dengan menggunakan browser. Jika tampilannya sudah
seperti berikut, maka itu artinya kamu telah berhasil menginstall
Bootstrap pada halaman web yang kamu buat.
Oke demikianlah tutorial cara penggunaan Bootstrap kali ini. Semoga
bermanfaat dan dapat membantu buat temen-temen Coders yang mau belajar
menggunakan Bootstrap.
