Belajar Bootstrap - Cara menggunakan bootstrap

Bagaimana belajar bootstrap untuk pemula ?

Pertanyaan itu mungkin agak umum ditanyakan oleh seseorang yang baru mengenal bootstrap. Tapi beda halnya dengan yang sudah mengerti cara kerja dari bootstrap itu sendiri. Kesan pertama seseorang yang baru mendengar bootstrap akan muncul pertanyaan. Apa itu bootstrap ? Apakah bootstrap itu ? dan pertanyaan terkonyol yang mungkin akan sedikit mengocok perut adalah bisakah bootstrap itu dimakan ?
Sama halnya dengan saya waktu mendengar bootstrap dari dosen saya. Saat saya membuat website tugas dari dosen yang lain yang memakai flash. Katanya dosen saya sekarang jamannya bootstrap dan html5 bukan flash seperti begitu membuat website saat loading beratnya bukan main.
Dan sekarang saya tau apa sebenarnya bootstrap.
Sebenarnya, Bootstrap adalah css yang sudah jadi dan di kembangkan oleh twitter. kita hanya memakai style yang disediakan oleh bootstrap itu sendiri dan kita bisa mengedit bootstrap itu sendiri dengan style yang kita mau tanpa merubah nama classnya, bisa juga merubah file classnya tapi harus kerja keras untuk merubah semuanya dan anda harus paham betul dengan fungsi scriptnya :).

Apa hubungan bootstrap dan HTML5 ?

Sekarang saya mengutip mungkin akan menjawab dari pertanyaan diatas. Dan saya coba translate dengan bantuan translate.google.com.

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. Kemudian karena atributnya, kemudahan dan fleksibilitas dalam merancang itu telah diterima sebagai kerangka utama untuk merancang dalam HTML 5 dan antarmuka pengembangan web lainnya.
 
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 menggunakan bootstrap untuk pemula ?

Untuk memulai menggunakan bootstrap, Anda harus mempersiapkan bahan dan tools pendukung untuk melengkapi kegiatan belajar tersebut.

Persiapan:

1. File distribusi Bootstrap 

Untuk menggunakan bootstrap, terlebih dahulu Anda harus mendownload resource file atau file distribusi yang disediakan oleh bootstrap di situs resminya getbootstrap.com. Link disediakan adalah versi 3.3.5 jika ingin melihat update bootstrap silahkan buka situs getbootstrap.com. Pada halaman tersebut, terdapat tombol Download Bootstrap, langsung saja! klik tombol tersebut. Kemudian pilih lagi dibagian Source Code dan pilih tombol Download source code.

Setelah didownload, kemudian extract menggunakan program seperti 7zip (Gratis) atau winRAR (shareware). Sebetulnya, Anda juga bisa membuka file tersebut dengan aplikasi bawaan windows dengan cara membuka file tersebut, kemudian copy seluruh file dan paste-kan ke folder lain.

2. File jQuery Library

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 2.x kemudian, download dengan mengklik link Download the compressed, production jQuery 2.1.4

 3. 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 Sublime Text editor yang sudah saya tes atau uji coba. 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 Sublime Text Editor. Aplikasi ini gratis dan banyak digunakan oleh developer. Download aplikasi Sublime Text Editor

4. Xampp 

Software ini untuk kita yang ingin belajar membuat website secara offline di komputer sendiri. Baca juga : Membuat website localhost dengan Xampp

Memulai Proyek

Setelah semua dipersiapkan saatnya memulai untuk belajar bootstrap. Baik, ikuti tahap-tahapnya berikut ini:

1. Buat Folder Baru Buatlah folder baru, beri nama misalkan "Belajar_Bootstrap". Baca : Membuat Folder untuk website localhost
2. 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.
3. 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.
   
4. 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 "Belajar_Bootstrap" yang telah dibuat diatas. Baca : Pembahasan tentang index.html
    

Kode HTML index

<!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>

Setelah itu silahkan anda coba sendiri fungsi dari script di atas menggunakan bootstrap cs. Untuk mengetahui lebih lanjut tentang bootstrap anda bisa langsung membaca doc di website aslinya. Bootstrap document. Selamat Belajar :)


Sumber:  Belajar Bootstrap Untuk Pemula - dul.web.id