- Buat Folder Baru Buatlah folder baru, beri nama misalkan "Belajar_Bootstrap". Baca : Membuat Folder untuk website localhost
- Copy Seluruh file Bootstrap ke dalam Folder Baru Tersebut Copy folder css, fonts dan js yang ada pada Bootstrap yang telah kita download tadi, ke dalam folder baru tersebut (Belajar_Bootstrap). Dan sekarang hapus semua file di folder css dan sisakan file bootstrap.min.css karena kita hanya memerlukan satu file saja. Sekarang semua hapus file di js dan sisakan bootstrap.min.js.
- Copy file jQuery ke dalam folder js Copy dan Gabungkan file jquery-2.1.4.min.js yang telah kita download kedalam folder js punya bootstrap tadi, hal ini dilakukan untuk mempermudah proses pembelajaran.
- Buat file html Buat file baru dengan sublime text editor kemudian copy code snippet yang saya sediakan dibawah ini, kemudian save dan berilah nama seperti: index.html atau default.html dan simpanlah file tersebut ke folder
<!DOCTYPE html>
<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>Belajar bootstrap - study-newbie.blogspot.com</title> <!-- memanggil bootstrap.min.css kedalam index.html -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container"> <!-- Fungsi kontainer adalah menyesuaikan sisi kiri dan kanan -->
<h1>Apa Kabar Dunia?</h1>
<button class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm">Klik Aku</button> <!-- Membuat tombol untuk memanggil class modal -->
<!-- Class modal yang akan di panggil button -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
</div>
<div class="modal-body"> Hai sobat <strong>Study-Newbie.blogspot.com</strong>. Jika dialog ini muncul maka javascript anda berjalan. jika tidak muncul coba perbaiki integrasi pemanggilan script di java script </div>
</div>
</div>
</div>
</div>
<!-- Memanggil java script -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
(Belajar Bootstrap)
EmoticonEmoticon