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:
<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">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<p><button class="btn btn-primary btn-lg">SAMPLE BUTTON</button></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<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.
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.
Jika semuanya sudah aman, 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.
Comments
Post a Comment