Belajar Bootstrap Untuk Pemula. Apa itu Bootstrap?

Untuk Apa itu bootstrap?

Bootstrap merupakan framework untuk membangun desain web secara responsif dan cepat. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Sehingga, user akan mendapatkan pengalaman yang lebih baik dalam berselancar tanpa mempertimbangkan perangkat apa yang harus digunakan.

Sejatinya, apabila kita menggunakan bootstrap, kita tinggal menggunakan nama class (untuk css) dan library (javascript) yang sudah ditentukkan oleh bootstrap tanpa perlu menulis kode dari 0 (awal) sehingga, bisa menghemat waktu dalam pengembangan website untuk urusan UI (User Interface). Bootstrap memiliki tampilan yang indah dan dapat di customisasi.

Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis, tentunya harus didukung dengan teknologi lain dalam pengembangannya.

Bagaimana Belajar Bootstrap untuk pemula?

Untuk memulai belajar Bootstrap, Anda harus mempersiapkan bahan dan tools pendukung untuk melengkapi kegiatan belajar tersebut. Baiklah, langsung saja kita mulai dengan mengikuti langkah-langkah yang akan dijabarkan dibawah ini.

Persiapan (Step-by-Step):

Persiapan disini, dimaksudkan untuk mendownload file distribusi bootstrap dan library lain yang dibutuhkan dalam pembelajaran agar nantinya kita bisa belajar secara offline (tanpa perlu terhubung ke internet).

1. Anda Harus memiliki file distribusi Bootstrap

   Download Bootstrap 4 (v4.2.1)

   Jika link download tersebut tidak tersedia, kunjungi situs resminya di getbootstrap.com kemudian pilih link atau klik tombol Download Bootstrap.

   Untuk menggunakan bootstrap, terlebih dahulu Anda harus mendownload resource file atau file distribusi yang disediakan oleh bootstrap di situs resminya getbootstrap.com. Tombol link diatas merupakan link download resmi dari bootstrap berisi file css dan javascript siap pakai untuk dikembangkan dalam sebuah website.

   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. Download jQuery Library Untuk Bekerja Offline

   Download jQuery (v3.3.1)
   Setelah halaman terbuka, klik kanan jendela browser, kemudian pilih save as... simpan pada folder download.

   Jika link download tersebut tidak tersedia, kunjungi situs resminya di jquery.com kemudian pilih link Download the compressed, production jQuery 3.3.1.

   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).

3. Anda harus memiliki code editor.

   Download Notepad++ (x64) atau Download Notepad++ (x86)

   Jika ingin versi 64 bit atau jika link download tersebut tidak tersedia, kunjungi situs resminya di notepad-plus-plus.org kemudian pilih link atau klik Download yang ada di panel kiri halaman paling bawah.

   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 Bootstrap Play dari kami yang dibuat untuk tes atau uji coba kode, baik Bootstrap, HTML, CSS dan Javascript langsung dalam satu editor. 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.

   Penulis sebenarnya merekomendasikan Visual Studio Code, code editor canggih, open source dari microsoft yang lebih powerful.

Memulai...

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

1. Buat Folder Baru

   Buatlah folder baru, beri nama "Belajar_Bootstrap".

2. Copy seluruh file Bootstrap ke dalam Folder Baru Tersebut

   Copy folder css, dan js yang ada pada Bootstrap yang telah kita download tadi, ke dalam folder baru tersebut (Belajar_Bootstrap)

3. Copy file jQuery ke dalam folder js

   Copy dan Gabungkan file jquery-3.3.1.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 di notepadd++ (atau code editor kesayangan Anda) kemudian copy code snippet yang saya sediakan dibawah ini, kemudian save dan berilah nama: index.html dan simpanlah file tersebut ke folder "Belajar_Bootstrap" yang telah dibuat diatas. Berikut kodenya:

<!doctype html>
<html lang="id">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" >

    <title>Bootstrap 4.1.3 Starter Template - by apacara.com</title>
  </head>
  <body>

    <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Selamat! Anda Berhasil Setup Bootstrap 4" data-content="Jika popup ini terlihat, Anda berhasil setup dan Siap Belajar Bootstrap">Klik Aku</button>


    <!-- jQuery dulu, kemudian Popper.js, kemudian Bootstrap.js -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- bootstrap.bundle.min.js sudah include Popper.js -->
    <script src="js/bootstrap.bundle.min.js" ></script>

    <script>
    // Script tambahan disini
    $(function () {

      // contoh
      $('[data-toggle="popover"]').popover();
    })
    </script>
  </body>
</html>

Struktur File dan Folder:

Setelah Anda melakukan langkah-langkah yang telah dijabarkan di atas, maka file dan folder seharusnya mengikuti struktur sebagai berikut:

Belajar_Bootstrap/
├── index.html
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   └── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   └── bootstrap-reboot.min.css.map
├── js/
│   ├── bootstrap.bundle.js
│   ├── bootstrap.bundle.js.map
│   ├── bootstrap.bundle.min.js
│   └── bootstrap.bundle.min.js.map
│   └── bootstrap.js
│   └── bootstrap.js.map
│   └── bootstrap.min.js
│   └── bootstrap.min.js.map
│   └── jquery-3.3.1.min.js

Jika sudah benar, maka kita akan mulai mencoba dan belajar bootstrap pada step berikutnya.

Saatnya untuk Uji Coba:

Buka file "index.html" yang telah dibuat dengan code snippet diatas, buka dengan browser terbaru misalkan Google Chrome atau Firefox jangan gunakan internet explorer. Jika file Bootstrap.css berhasil di-load, maka tombol button akan memiliki style ala bootstrap seperti pada demo ini: Klik Aku

Kita coba lagi apakah jquery, bootstrap, dan popper javascript library berhasil di load dengan cara mengklik tombol "Klik Aku" tersebut. Apabila muncul dialog box sama seperti demo di atas, maka dengan demikian Anda telah BERHASIL di tahap akhir dan template tersebut siap digunakan sebagai template dasar untuk Bootstrap 4. Gunakan template ini untuk setiap materi pembelajaran bootstrap dan setiap ingin memulai project baru sehingga kita tidak perlu mengulang dari awal.

Langkah Selanjutnya Apa?

Langkah selanjutnya mungkin Anda harus sering-sering mengunjungi situs resmi bootstrap di getbootstrap.com dan mempelajari dokumentasi yang telah disediakan. disini, kami sediakan tutorial bootstrap berbahasa Indonesia secara bertahap. Nantikan Artikel menarik lainnya mengenai Bootstrap.

Bermain dengan Bootstrap

Untuk belajar, mencoba kode dan bermain dengan bootstrap, klik tombol dibawah ini:

Bootstrap 3 Play

Bootstrap 4 Play