Cara Menggunakan Framework Bootstrap - Framework CSS yang cukup responsive salah satunya yaitu Framework Twitter Bootstrap.
Pertama-tama langsung Download Bootstrap New Version pada Official Website.
Download original file yang tanpa dokumentasi (recommended).
Setelah itu Download JQuery, Copy All, buat file dengan Notepad++ lalu beri nama "jquery.min.js".
Setelah selesai di download > Ectract file > buat folder di HTDOCTS > Folder dengan nama "Bootstrap" > Copy Paste isi Extract file "css", 'fonts", "js" ke dalam Folder "Bootstrap".
Notes : Jangan lupa memasukan file "jquery.min.js" ke dalam folder "js".
Hasilnya akan seperti ini :
Setelah itu buat index.html di dalam Folder Bootstrap, langkah selanjutnya kita akan memanfaatkan Framework Bootstrap.
Kunjugi Official Website LayoutIt!, setelah itu pilih Start Now with Bootrsrap 3.
Silahkan lakukan editing pada layout yang diinginkan, setelah itu download Source Code Layout.
Sebelumnya dalam index.html yang sudah kita buat, isinkan code berikut untuk memanggil CSS Boostrap.
<html> <head> <title>Bootstrap</title> <link href="css/bootstrap.min.css" rel="stylesheet"></link> </head> <body> <!-- Disini tempat Layout Bootstrap --> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Selanjutnya kembali ke LayoutIt!, bila tidak ingin login klik Continue non logged.
Setelah itu Copy lalu Paste Source Code yang didapatkan dari LayotuIt!, tempatkan diantara body untuk layout yang kita lakukan editing.
Untuk lebih mudah pemahaman, kita lakukan Copy All saja dan tempatkan pada index.html yang kita buat tadi.
Setelah itu save dan akses di localhost/Bootstrap.
Notes : JQuery merupakan library yang harus terdapat dalam CSS Bootstrap untuk melakukan suatu eksekusi tertentu.
Sekian tutotial Cara Menggunakan Framework Bootstrap, semoga bermanfaat.
Mantab gan, ijin coba pada blog saya www.jembersantri.com dan http://musicmp3.filemonas.com ya..hehe thanks ilmunya
BalasHapusoke silahkan gan malik,, nanti ane kunjungin blognya moga bermanfaat artikel tentang bootstrapnya :)
HapusLg belajar nih
BalasHapusMksih tutornya
oke smngt belajarnya :)
HapusGimana kalau misalnya membangun index.php sendiri trus cara menentukan class nya gimana gan ya ?
BalasHapuscara buat index sendiri ya tinggal buat baru gan, untuk tau class-class nya baca dokumentasi bootstrap nya,.
Hapus