Setelah kita mengenal Bootstrap, maka selanjutnya kita akan mencoba untuk menggunakan Bootstrap. Pertama kita buka dahulu situs Bootstrap di http://www.getbootstrap.com, lalu klik link dokumentasi pada situs Bootstrap. Kita langsung dibawa ke halaman perkenalan Bootstrap. Kalau kita geser ke bawah, kita bisa menemukan Starter Template, yaitu HTML boilerplate untuk menggunakan Bootstrap. Kita tinggal copy source code ini. Cara copy-nya juga gampang ya. Kita cukup klik tombol di bagian kanan atas saja. Kemudian kita ke code editor kita, saya sudah menyediakan file baru dengan nama bootstrap.html. Kita tinggal paste. Dan kemudian kita buka pada browser. Dan kita pun sudah berhasil menggunakan Bootstrap. Gampang ya.

Ini adalah halaman pertama Bootstrap kita, yang isinya judul “Hello, World!”. Ini memang sudah menjadi standar, setiap kali kita belajar bahasa pemograman baru, tugas pertama kita adalah menampilkan tulisan Hello World di layar. Perhatikan judul disini sudah tidak memiliki margin baik di atas maupun di kirinya. Karena Bootstrap secara default sudah melakukan CSS Reset.

Perhatikan juga pada saat saya mengecilkan browser. Judul pada Bootstrap mengalami perubahan ukuran. Mengecil pada saat browser dikecilkan, dan membesar pada saat browser dibesarkan.

Sekarang kita lihat kembali ke boilerplate yang diberikan oleh Bootstrap. Kurang lebih sama dengan HTML boilerplate ya. Namun disini kita lihat ada meta viewport, ini adalah meta yang wajib, harus ada, untuk situs responsive. Dengan memberi nilai width=device-width berarti kita menyuruh browser untuk memanfaatkan seluruh lebar perangkat yang sedang digunakan. Dan dengan memberikan nilai initial-scale=1, artinya kita meminta browser untuk menampilkan konten kita dalam ukuran normal, jadi tidak diperbesar maupun diperkecil.

Dibawah meta viewport, kita menemukan link ke kode CSS Bootstrap. Pada saat video ini dibuat, Bootstrap yang default digunakan saat ini adalah versi 5.0.2. Tentunya versi ini akan selalu diupdate, jadi bila teman-teman mengakses Bootstrap saat ini mungkin versinya sudah berubah. Namun selagi nilai versi paling awalnya masih 5, tidak masalah ya. Karena biasanya cara menggunakan Bootstrap-nya masih tetap sama.

Perhatikan disini bahwa kita langsung menggunakan link menuju ke CDN atau Content Delivery Network, yang berada di cdn.jsdelivr.net. Hal ini memberikan banyak keuntungan untuk kita. Yang pertama adalah kita sudah tidak perlu mengunduh Bootstrap dan melakukan instalasi di komputer kita. Dan keuntungan berikutnya adalah kita tidak perlu menanggung biaya bandwith dari kode Bootstrap, karena bandwithnya ditanggung oleh CDN. Namun kekurangannya, pada saat kita melakukan pemograman menggunakan Bootstrap, maka komputer kita harus tetap terhubung ke internet.

Kode Bootstrap berikutnya berada di bagian paling bawah, tepatnya sebelum tag penutup Body. Disini Bootstrap membutuhkan link ke Javascript Bootstrap dan Popper. Kalau di Bootstrap versi sebelumnya, ada satu link lagi menuju ke Jquery, namun sejak versi 5 Bootstrap sudah tidak menggunakan Jquery lagi ya.

Nah, kalau kita lihat ke kode Boilerplate, disini kita disuruh memilih antara 2 opsi. Opsi pertama, yang secara default terpilih, adalah kita menggunakan script Bootstrap dan Popper yang sudah digabung menjadi satu file. Hal ini akan menghemat jumlah request ke CDN, karena yang tadinya harus request 2 file yang berbeda, sekarang cukup request satu file saja.

Sedangkan opsi kedua, kita menuliskan dua link kode Javascript. Yang pertama adalah khusus ke Popper. Dan kemudian link khusus ke Bootstrap. Opsi kedua ini digunakan apabila kita juga menggunakan script Popper di dalam kode yang kita tulis.

Berhubung biasanya kita hanya menggunakan Bootstrap saja, tidak menggunakan Popper-nya, maka kita hapus opsi kedua dari kode Bootstrap.

Nah, sekarang kita sudah bisa menggunakan fitur-fitur yang dijelaskan di dalam dokumentasi Bootstrap ini. Sebagai contoh, kita coba yang gampang terlebih dahulu. Misalkan kita pilih Component, lalu kita pilih Alert. Disini kita bisa menampilkan pesan peringatan pada halaman situs kita, dengan menggunakan warna tertentu. Sudah ada beberapa contoh ya. Misalkan pesan primary menggunakan warna biru, pesan secondary menggunakan warna abu-abu, pesan sukses menggunakan warna hijau, pesan danger menggunakan warna merah, dan selanjutnya.

Bagaimana cara membuat pesan peringatan seperti ini? Kita tinggal lihat source code dibawahnya. Apabila kita ingin membuat pesan primary, kita tinggal copy paste kode bagian primary. Sedangkan apabila kita ingin membuat pesan danger, kita tinggal copy paste kode bagian danger.

Selanjutnya kita bisa mencoba untuk membuat komponen yang lebih rumit, misalkan navbar. Kita lihat kembali dokumentasi Bootstrap dan kita pilih Navbar. Disini ada contoh Navbar ya. Kita copy, dan kemudian kita paste ke kode kita. Dan sekarang kita pun sudah mendapatkan sebuah navbar yang responsive. Pada saat kita kecilkan browser, navbar secara otomatis berubah menjadi hamburger icon, yang kalau kita klik akan menampilkan navigasi secara vertikal.

Jadi beginilah kurang lebih cara kita untuk menggunakan Bootstrap. Kita tinggal memilih fitur apa yang hendak kita gunakan dari dokumentasi Bootstrap. Dan kemudian kita lihat contoh cara penggunaannya dan kemudian kita bisa langsung copy paste kode dari dokumentasi tersebut. Jadi kita tinggal melakukan penyesuaian sesuai dengan kebutuhan kita. Sebagai contoh, misalkan apabila dropdown pada navigasi ini diklik, kita hendak mengganti kata action dan another action menjadi aksi dan aksi lainnya. Kita tinggal lihat kembali kode HTML kita, lalu kita ganti di bagian kontennya.

Dengan menggunakan Bootstrap, maka kita bisa dengan cepat membangun sebuah situs yang bersifat responsive. Ini adalah keunggulan utama Bootstrap ya. Makanya kalau kita lihat di halaman utama Bootstrap, maka kita bisa melihat kata-kata yang paling awal yang ditulis pada situsnya adalah “Build Fast”, “Quickly design”. Sebagai contoh bagian navigasi ini saja ya, yang tadinya kita harus menuliskan sendiri semua kode CSS dan Javascriptnya, mungkin butuh waktu beberapa hari kerja. Sekarang tinggal sekali copy-paste saja langsung kelar. Jadi kita bisa menghemat banyak waktu.

Pada playlist ini, kita akan belajar mengenai cara menggunakan fitur-fitur Bootstrap untuk membuat situs replika Laris Pos. Dimulai dari bagian paling atas, kita akan menggunakan komponen Navbar. Dimana pada bagian kirinya kita memperlihatkan logo brand. Sedangkan menu-menu navigasi berada di sebelah kanan. Pada saat browser diperkecil, nantinya menu akan berubah menjadi Hamburger Icon, yang apabila diklik akan menampilkan menu dengan posisi vertikal.

Selanjutnya kita akan menggunakan komponen yang pada Bootstrap versi 4 disebut dengan nama Jumbotron. Disini kita menampilkan konten yang paling penting dari situs kita dalam ukuran besar. Pada Bootstrap versi 5, komponen Jumbotron sudah dihilangkan, namun kita masih bisa membuat sendiri dengan mudah menggunakan Utilities.

Lalu pada bagian fitur, disini kita akan belajar lebih lanjut mengenai Bootstrap Grid System, sehingga kita bisa mengatur agar konten kita ditampilkan 3 fitur per baris pada saat browser berukuran besar, 2 fitur per baris pada saat browser berukuran sedang, dan 1 fitur per baris pada saat browser berukuran kecil.

Untuk bagian Testimoni, kita akan menggunakan komponen Carousel. Jadi pada tempat yang sama, kita bisa menampilkan beberapa testimoni, yang secara berkala akan otomatis bergeser. Pada bagian kiri dan kanan juga terdapat tombol sehingga kita bisa menggeser sendiri konten testimoni.

Kemudian untuk bagian Harga, disini kita menggunakan komponen Card. Disini terdapat 2 buah card. Yang dikiri dengan warna abu-abu. Sedangkan card di sebelah kanan sengaja kita beri highlight menggunakan warna primary, dengan tujuan agar pengunjung situs kita lebih memperhatikan paket yang platinum.

Dibagian bawah, kita akan belajar mengenai cara menggunakan Bootstrap Grid System untuk menampilkan tabel perbandingan antara paket Gold dan Platinum. Pada tabel ini, kita menambahkan warna latar belakang biru muda di setiap baris yang ganjil, sedangkan baris yang genap menggunakan warna latar belakang putih. Tujuannya agar kita bisa lebih mudah melihat data per barisnya. Kemudian apabila kita mengarahkan mouse ke atas tabel, maka data pada baris yang ditunjuk oleh mouse akan berubah menjadi warna biru.

Dan pada bagian terakhir, kita akan menggunakan fitur Form pada Bootstrap untuk membuat bagian Hubungi Kami. Disini ada perubahan pada Bootstrap versi 5 dibandingkan dengan versi sebelumnya, dimana pada saat kita memberikan fokus terhadap salah satu input, maka disekeliling input tersebut akan mengeluarkan shadow berwarna biru sehingga kelihatan lebih cantik ya. Begitu juga bisa kita lihat pada radio buttonnya.

Oke, sampai disini kita telah mempelajari apakah itu Bootstrap, bagaimana cara menggunakannya dan gambaran umum mengenai apa saja yang bisa kita buat menggunakan Bootstrap. Di video berikutnya kita akan membahas lebih dalam mengenai komponen pertama yang akan kita gunakan pada situs kita, yaitu bagian Navigasi.

Namun sebelum melanjutkan, saya ingin memberitahukan terlebih dahulu bagi teman-teman yang sedang mempelajari pemograman Front-End, bahwa materi Bootstrap ini bersifat opsional. Boleh dipelajari, dan boleh juga tidak. Jadi teman-teman hanya perlu melanjutkan video pada Playlist ini, apabila teman-teman memutuskan untuk menggunakan Bootstrap di dalam pemogramannya.

Di sisi lain, apabila teman-teman atau mungkin kantor tempat bekerjanya memutuskan untuk tidak menggunakan Bootstrap, maka teman-teman bisa langsung melanjutkan ke materi pelajaran front-end berikutnya, yaitu Javascript.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.