INSTALASI TWITTER BOOTSTRAP
Langkah 1 :
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).
Langkah 2 :
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.
Langkah 3 :
- 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
bootstrap.min.css
bootstrap-responsive.css
bootstrap-responsive.min.css
- img
glyphicons-halflings.png
glyphicons-halflings-white.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. Berikut nya kita mulai untuk coding
awal. Silahkan ketikan coding berikut ini di file index.html untuk
permulaan.
[sourcecode
language=”c”]
<!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>
[/sourcecode]
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.
IMPLEMENTASI TWITTER BOOTSTRAP
Setelah langkah di atas selesai, maka tahap instalasi
/ pengaturan struktur folder dan file, serta pemanggilan file kedalam file
index.html telah selesai. Silahkan anda coba modifikasi atau buat
code-code yang ada pada Dokumentasi dari Twitter Bootstrap. Ketikan
Coding anda di bagian yang ada tulisan CODING HERE.
Sebagai contoh awal, silahkan Copy Paste Code berikut
,dan lihat hasil nya..
About the Author
0 komentar: