Tampilkan postingan dengan label Bootstrap. Tampilkan semua postingan
Tampilkan postingan dengan label Bootstrap. Tampilkan semua postingan

5/30/2015

Cara Menggunakan Framework Bootstrap

Cara Menggunakan Framework Bootstrap - Framework CSS yang cukup responsive salah satunya yaitu Framework Twitter Bootstrap.

Cara Menggunakan Framework Bootstrap

Pertama-tama langsung Download Bootstrap New Version pada Official Website.

Cara Menggunakan Framework Bootstrap

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 :

Cara Menggunakan Framework Bootstrap

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.

Cara Menggunakan Framework Bootstrap

Silahkan lakukan editing pada layout yang diinginkan, setelah itu download Source Code Layout.

Cara Menggunakan Framework Bootstrap

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.

Cara Menggunakan Framework Bootstrap

Setelah itu Copy lalu Paste Source Code yang didapatkan dari LayotuIt!, tempatkan diantara body untuk layout yang kita lakukan editing.

Cara Menggunakan Framework Bootstrap

Untuk lebih mudah pemahaman, kita lakukan Copy All saja dan tempatkan pada index.html yang kita buat tadi.

Cara Menggunakan Framework Bootstrap

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.