Belajar Bootstrap: Tutorial Bootstrap 5 untuk Pemula (Bagian 1)

Mungkin kamu sering mendengar kata Bootstrap. Apa itu Bootstrap? Bagaimana pengaplikasiannya? apa saja yang perlu dipelajari? dan mungkin seabrek pertanyaan lainnya.

Pengertian Bootstrap

Bootstrap adalah kerangka kerja (framework) CSS yang terbuka dan bebas. Dalam istilah kerennya Free and Open Source. Artinya semua orang bisa menggunakan dan semua orag bisa melakukan sumbangsih pemikiran tentang Bootstrap ini.

Apakah perlu keahlian khusus untum menggunakan Bootstrap?

Hanya dengan pemahaman CSS dan HTML, kamu sudah bisa menggunakan Bootstrap. Hanya pengalaman yang saya rasakan agak susah menghapal class, karena sangat banyak yang perlu dipahami. Tetapi lama-kelamaan pasti hapal. Santai saja...

Sejarah Bootstrap

Saya hanya akan jelaskan secara singkat saja, karena sudah banyak web yang menjelaskannya. Tutosrial ini Insya Allah akan berlanjut beberapa sesi ke depan.

Bootstrap awalnya Bernama Twitter Blueprint, yang didirikan oleh Mark Otto dan Jacob Thornton pada pertengahan tahun 2010. Tanggal 11 Agustus 2011 berubahlah menjadi Bootstrap dan projeknya open source.

Bootstrap 2

Pada 31 Januari 2012, Bootstrap 2 dirilis, yang menambahkan sistem layout dua belas kolom grid yang responsif, dukungan built-in untuk Glyphicons, beberapa komponen baru, serta perubahan dari beberapa komponen yang sudah ada.

Bootstrap 3

Pada 19 Agustus 2013, Bootstrap 3 dirilis, yang didesain ulang komponennya untuk menggunakan desain flat, dan pendekatan mobile-first.

Bootsrap 4

Bootstrap 4 mulai dikembangakan 29 Oktober 2014, dan versi stabilnya diliris 18 Januari 2018. Banyak perubahan pada versi 4 ini diantaranya

• Menghapus font Glyphicon
• Mengubah pixel menjadi em
• Penulisan ulang hampir semua komponen,plugin jQuery dan dokumentasi
• Dan masih banyak lainnya

Bootstrap 5

Banyak perubahan pada versi 5 ini diantaranya

• Menghapus jQuery dan diganti dengan vanilla JavaScript. (JavaScript murni, sehingga lebih ringan)
• Menulis ulang komponen grid untuk mendukung fitur kolom yang ditempatkan di luar baris dan gutter (ruang antar kolom) yang responsif.
• Migrasi dokumentasi dari Jekyll ke Hugo.
• Menghapus dukungan peramban web IE10.
• Memindahkan QUnit ke Jasmine.

Pada saat artikel ini ditulis, sudah sampai pada versi 5.3 dan Tutorial yang akan saya buat tentang Bootstrap 5.3 ini

Persiapan Belajar Bootstrap

Untuk tutorial pemula, Hanya satu saja yang diperlukan yaitu Teks Editor. Kita gunakan yang mudah dulu saja yaitu Notepad++, bagi yang belum punya silahkan Download Notepad++ dan Install.

Pendukung lainnya tentunya kalian sudah install yaitu browser atau peramban. Saya kira sudah tidak perlu dijelaskan lagi tentang peramban ini, bisa Chrome, Firefox, Opera, dsb. Fungsi peramban adalah untuk menampilkan hasil kerja kita.

Menggunakan Bootstrap

Ada 3 cara untuk menggunakan Bootstrap ini yaitu

1. Menggunakan CDN (Content Delivery Network);
   Untuk penggunaan CDN ini kita cukup menyimpan link CSS dan JS. Tapi kekurangannya harus terhubung ke internet
2. Mendownload Asset;
   Cara kedua adalah mendownload CSS dan JS, otomatis ketika kita edit file tidak usah terhubung ke internet, karena cukup sekali ketika mendownload file. Namun bagi pemula, agak bingung file mana yang harus disertakan.
3. Download Dengan package-manager
   Cara ini lebih ke tingkat lanjut. Makanya untuk lebih mudah saya akan gunakan No. 1 saja

Selanjutnya...

Untuk pembelajaran selanjutnya, silahkan persiapkan Notepad++ dan koneksi internet, karena saya akan menggunakan cara no. 1 yang paling mudah

Tutorial Selanjutnya adalah : Memulai Bootstrap - Tutorial Bootstrap 5 (Bagian 2)