Langkah 1 Instalasi Bootstrap
- Download file Bootstrap yang ada Disini.
- Hasil download berupa file .Zip yang berisikan folder CSS, JS & IMG.
- Isi folder CSS : bootstrap.css , bootstrap.min.css, bootstrap-responsive.css & bootstrap-responsive.min.css
- Isi folder JS : bootstrap.js & bootstrap.min.js
- Isi folder IMG : glyphicons-halflings.png & glyphicons-halflings-white.png
- Selanjutnya Download juga jQuery.js / jQuery.min.js , ini WAJIB ADA karena function Javascript yang ada di Twitter Bootsrap diambil dari jQuery. Silahkan Download Disini (Direkomendasikan untuk download versi yang terbaru).
- Buat sebuah folder dengan nama Belajar_Bootstrap di derektori mana saja / lebih bagus lagi kalau di buat di derektori local webserver yang anda gunakan seperti Apache , XAMPP & WAMPP.
- Copy kan folder hasil download dari Twitter Bootstrap (Folder : JS,CSS,IMG) kedalam folde Belajar_Bootstrap.
- Berikutnya copy kan hasil dowload jquery.js kedalam Folder JS
- Lalu, Buat file HTML dengan nama index.html, Letakan / simpan di dalam folder Belajar_Bootstrap.
- Jika sudah selesai, Struktur foldernya kurang lebih akan seperti ini :
Belajar_Bootstrap
css
bootstrap.css
bootstrap.min.css
bootstrap-responsive.css
bootstrap-responsive.min.css
img
glyphicons-halflings.png
glyphicons-halflings-white.png
js
bootstrap.js
bootstrap.min.js
jquery.js
index.html
Keterangan : Yang di Bold (Cetak Tebal) itu = Folder
Sekarang instalasi / pengaturan struktur file dan folder sudah selesai.
Sekarang instalasi / pengaturan struktur file dan folder sudah selesai. Berikut nya kita mulai untuk coding awal.
Silahkan ketikan coding berikut ini di file index.html untuk permulaan.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootstrap</title>
<!--Load CSS-->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
<style type="text/css"><!--Dibutukan bila anda menggunakan navbar fixed top-->
body {
padding-top:60px;
padding-bottom: 40px;
}
</style>
<!--Load jQuery-->
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<!--CODING HERE-->
<!--Load Bootstrap JS ( Diletakan dibawah merupakan rekomendasi,agar proses load page lebih cepat )-->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
Coding diatas fungsinya : memanggil file-file yang dibutuhkan. Jika ada 2 file dengan nama sama dan akhirannya berbeda, contoh: dengan akhiran ---.js atau ---.min.js , panggil / load salah satu aja.
(Belajar Bootstrap)
EmoticonEmoticon