Apa Itu Bootstrap?
Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.Bootstrap Itu Untuk Apa?
Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.Bagaimana Belajar Bootstrap untuk pemula?
Untuk memulai belajar Bootstrap, kita harus mempersiapkan bahan dan tools pendukung untuk melengkapi kegiatan belajar tersebut. Baiklah langsung saja.- Kita Harus memiliki file distribusi Bootstrap
2. Download jQuery Library Untuk Bekerja Offline
Untuk bisa mengaplikasikan bootstrap component seperti modal dialog, navigation bar dan lainnya yang membutuhkan boostrap JS, Bootstrap JS juga membutuhkan jQuery library agar bisa berjalan normal. Bootstrap tidak menyertakan jQuery di dalam file download-nya untuk itu, kita harus mendownloadnya secara terpisah. Hal ini dilakukan agar kita bisa bekerja dan menggunakannya secara offline (tanpa koneksi internet). Silahkan download jQuery library dengan menuju situs resmi jQuery Download, pilih jQuery 1.xkemudian, download dengan mengklik link Download the compressed, production jQuery 1.12.0
3. Kita harus memiliki code editor
Code editor penting sekali untuk memanipulasi file yang akan kita kembangkan khususnya file HTML, CSS dan Javascript sebagaimana file tersebut terdapat pada bootstrap. Anda juga bisa menggunakan Code Editor dari kami yang dibuat untuk tes atau uji coba kode. Jangan pernah menggunakan Word processor (Microsoft Word, dll) ataupun notepad untuk memanipulasi file-file tersebut. Karena aplikasi tersebut tidak cocok dan terdapat banyak kekurangan yang akan membingungkan kita sendiri nantinya.
Ada banyak sekali code editor yang tersebar di internet yang dapat kita gunakan baik yang gratis maupun yang berbayar. Sebagai pemula, mungkin kita bisa memulai dengan menggunakan Notepad++. Aplikasi ini gratis dan banyak digunakan oleh developer. Download aplikasi Notepad++
Nah.. Sekarang Saatnya Memulai Menggunakan Bootstrap..
Setelah semua dipersiapkan saatnya memulai untuk belajar bootstrap. Baik, ikuti tahap-tahapnya berikut ini:
- Buatlah folder baru, beri nama misalkan “coba_bootstrap”.
- Copy folder css, fonts dan js yang ada pada Bootstrap yang telah kita download tadi, ke dalam folder baru tersebut (coba_bootstrap)
- Copy dan Gabungkan file jquery-1.12.0.min.js yang telah kita download kedalam folder js punya bootstrap tadi, hal ini dilakukan untuk mempermudah proses pembelajaran.
- Buat file baru dengan notepadd++ 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 “coba_bootstrap” yang telah dibuat diatas. Berikut kodenya:
<!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>Bootstrap 3.3.6 Starter Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Theme - Jika dikehendaki gunakan thema-nya - hapus komentarnya-->
<!-- <link href="css/bootstrap-theme.css" rel="stylesheet"> -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ===================
AWAL CONTENT - Konten berikut hanya untuk uji coba, Silahkan hapus untuk memulai baru.
======================== -->
<div class="container">
<h1>Apa Kabar Dunia?</h1>
<!-- Small modal -->
<button class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm">Klik Aku</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... salam kenal dari <strong>Anggit</strong>. Jika dialog ini muncul dan Anda bisa baca tulisan ini berarti Bootstrap berhasil di load dan terintegrasi dengan baik. Selamat Belajar
</div>
</div>
</div>
</div>
</div>
<!-- ===================
AKHIR CONTENT - dari sini kebawah jangan dihapus!
======================== -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</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>Bootstrap 3.3.6 Starter Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Theme - Jika dikehendaki gunakan thema-nya - hapus komentarnya-->
<!-- <link href="css/bootstrap-theme.css" rel="stylesheet"> -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ===================
AWAL CONTENT - Konten berikut hanya untuk uji coba, Silahkan hapus untuk memulai baru.
======================== -->
<div class="container">
<h1>Apa Kabar Dunia?</h1>
<!-- Small modal -->
<button class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-sm">Klik Aku</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... salam kenal dari <strong>Anggit</strong>. Jika dialog ini muncul dan Anda bisa baca tulisan ini berarti Bootstrap berhasil di load dan terintegrasi dengan baik. Selamat Belajar
</div>
</div>
</div>
</div>
</div>
<!-- ===================
AKHIR CONTENT - dari sini kebawah jangan dihapus!
======================== -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Saatnya untuk Uji Coba
Buka file html yang telah dibuat dengan code snippet diatas, buka dengan browser terbaru misalkan Google Chrome atau FirefoxKita coba lagi apakah bootstrap.js berhasil di load dengan cara mengklik tombol
tersebut. Apabila muncul dialog box, maka bootstrap.js berhasil di load dan siap digunakan sebagai template. Gunakan template ini untuk setiap materi pembelajaran bootstrap dan hapuslah AWAL CONTENT sampai AKHIR CONTENT untuk memulai file baru kosong tanpa konten.
Yak.. Sekian tutorial sederhananya, semoga bermanfaat :)
Tidak ada komentar:
Posting Komentar