Berikut adalah tutorial cara menggunakan Bootstrap untuk pemula. Bagi anda yang belum tahu, Bootstrap adalah sebuah front-end framework, atau framework untuk tampilan suatu website (yang biasanya terdiri dari HTML CSS dan JS) yang mudah digunakan, responsif dan sangat populer.
Bootstrap bisa di-install menggunakan package manager seperti composer, NuGet dan lainnya. Bootstrap juga bisa dipanggil atau digunakan secara langsung dengan Bootstrap CDN dan Bootstrap tentu bisa digunakan secara offline dengan melakukan download file-file Bootstrap.
Untuk mendownload Bootstrap versi terbaru (v4 alpha), buka link https://v4-alpha.getbootstrap.com/getting-started/download/ , kemudian klik tombol Download Bootstrap pada bagian Bootstrap CSS and JS.
Setelah proses download selesai, buat folder baru di htdocs anda (jika menggunakan xampp,lampp) dan pindahkan file zip bootstrap tersebut ke folder baru, misalnya kita buat folder dengan nama blog seperti berikut :
Extract file zip bootstrap-4.0.0-alpha.6-dist.zip , kemudian rename folder hasil extract dengan nama "template" (nama folder nantinya bisa bebas sesuai keinginan kita, tapi ditutorial ini kita menggunakan nama template saja ya)
di dalam folder template, akan terdapat sub folder bernama css dan js, sampai disini kita sudah berhasil menginstall bootstrap di komputer lokal kita.
Cara Menggunakan
Pertama, buat file html baru bernama coba.html sebagai berikut (pastikan file coba.html berada satu folder dengan folder template atau di folder blog:
Ketik kode standar HTML terlebih dahulu :
<html>
<head>
<title>Belajar Bootstrap</title>
</head>
<body>
<h1>Ini Judul</h1>
Ini adalah teks
<input type="text" name="text1" value=""/><hr>
<input type="button" name="tombol1" value="Submit"/>
</body>
</html>
<html>
<head>
<title>Belajar Bootstrap</title>
</head>
<body>
<h1>Ini Judul</h1>
Ini adalah teks
<input type="text" name="text1" value=""/><hr>
<input type="button" name="tombol1" value="Submit"/>
</body>
</html>
Maka tampilannya adalah sebagai berikut :
Kita include atau masukkan file CSS dan Javascript Bootstrap yang sudah kita download dan extract tadi, tambahkan 1 baris kode berikut pada tag <head>
<link href="template/css/bootstrap.min.css" rel="stylesheet">
dan 1 baris kode sebelum tag </html>
<script src="template/js/bootstrap.min.js"></script>
Maka hasilnya adalah :
Sudah ada perubahan? yap, tapi belum maksimal karena kita belum memanggil class-class pada Bootstrap. Sekarang coba tambahkan elemen atau tag <div> pada coba.html dengan class container , class form-control pada textbox dan class btn btn-primary pada tombol atau button.
<html>
<head>
<title>Belajar Bootstrap</title>
<link href="template/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Ini Judul</h1>
Ini adalah teks
<input type="text" name="text1" class="form-control" value=""/><hr>
<input type="button" name="tombol1" class="btn btn-primary" value="Submit"/>
</div>
</body>
<script src="template/js/bootstrap.min.js"></script>
</html>
Tampilannya sebagai berikut :
Bagaimana? tampilannya sudah lebih menarik dan modern kan? :) . Setelah ini, masih banyak yang bisa dipakai dan dipelajari dalam Bootstrap, anda bisa mempelajarinya direferensi yang saya sertakan.
Catatan : nantinya anda harus mendownload file jquery dan font bootstrap yang disediakan. Mungkin akan saya bahas diartikel selanjutnya ;)
Semoga Bermanfaat
.jpg)
0 komentar:
Posting Komentar