Bootsrap adalah sebuah packed frontend toolkit atau dalam bahasa mudahnya adalah sebuah kumpulan UI kit yang powerful karena ketika kalian menggunakan bootsrap kalian bisa melakukan pengembangan desain website dengan cepat bahkan dengan beberapa menit saja kalian sudah bisa membuat 1 page website, begitulah kata bootstrap dalam dokumentasinya.
Bagaimana implementasi bootstrap dalam pengembangan sebuah website? Pada dasarnya bootsrap adalah sebuah kumpulan UI kit yang berisi HTML, CSS dan JS yang sudah disesuaikan sehingga dimungkinkan kita untuk melakukan pembangunan dengan cepat tanpa melakukan penyesuaian layout secara manual, sehingga penggunaan bootsrap ini bisa digunakan dalam pemrograman web menggunakan bahasa apa saja, permisalan kita menggunakan bahasa pemrograman PHP dengan framework Laravel kita akan bisa mengimplementasikan bootsrap didalamnya, tidak hanya laravel bootsrap juga bisa di implementasikan dalam banyak bahasa yang lainnya.
Bootstrap menggunakan "class" pada HTML sebagai trigger untuk menaruh style dari komponen tersebut sehingga kalian ketika menggunakan bootsrap sangat jarang sekali untuk menyentuh CSS bahkan mengedit CSS tersebut, oleh karena itu kemampuan yang disediakan bootrap ini disebut olehnya powerful dan menurut saya dengan kemampuan tersebut menjadikan bootsrap ini ramah untuk pemula bagi orang yang baru terjun dalam pengembangan website.
Bagaimana Cara Menggunakan Bootsrap
Ada banyak cara ketika ingin menggunakan bootsrap, salah satunya yang sangat mudah adalah menggunakan CDN atau langsung melakukan import paket bootsrap hanya dengan link pada <head>, berikut cara menggunakan bootsrap :
- Buka Code Editor kalian (Rekomendasi : Gunakan Visual Studio Code)
- Buat Folder "Belajar Bootsrap"
- Buat File dengan nama apapun dan berakhiran .html (Bootsrap.html)
- Selanjutnya kalian hanya perlu paste rangkaian kode berikut ini pada file .html kalian :
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> </head> <body> <h1>Hello, Bootsrap</h1> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> </body> </html>
Selanjutnya setelah melakukan paste kode tersebut, file .hml kalian sudah melakukan import semua paket yang tersedia pada bootsrap, untuk tahap berikutnya adalah terserah kalian ingin menempelkan apapun selama basis kode import diatas tidak dihapus, pada contoh berikut semisal kalian ingin menambahkan button kalian hanya perlu mencari pada kolom pencarian bootsrap dengan keyword Button seperti pada gambar
Selanjutnya klik form search atau bisa menggunakan CRTL + K dan tulis button.
Kemudian kalian pilih example dan kalian akan disuguhkan dengan tampilan beberapa macam button yang sudah disediakan oleh bootsrap dan bebas bisa kalian pakai:
Kalian hanya perlu melakukan copy kode yang sudah disediakan oleh bootsrap pada kolom code dibawah display button yang tersedia sebagai contoh kita akan ambil button yang berwarna merah maka kita ambil button dengan tambahan class danger .
!! Perlu diingat !!
Pada bootsrap kalian nantinya akan sering menemukan beberapa kombinasi warna pada semua element seperti pada kasus di button diatas, yang perlu diingat adalah sebagau berikut :
Primary = Biru
Secondary = Slate/ Abu-abu
Success = Hijau
Danger = Merah
Warning = Kuning
Info = Biru Muda
Light = Putih
Dark = Hitam
Kembali ke kasus tadi kita akan mengambil button berwarna merah maka kita akan mengambil kode berikut ini:
<button type="button" class="btn btn-danger">Contoh Button</button>
Pada kasus selanjutnya kita ingin menaruh button dibawah kata Hello, Bootsrap, maka baris kode akan menjadi seperti berikut ini :
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> </head> <body> <h1>Hello, Bootsrap</h1> <button type="button" class="btn btn-danger">Contoh Button</button> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> </body> </html>
Begitulah seterusnya penggunaan bootsrap, tahapan kalian hanya perlu mencari element apa yang anda inginkan kemudian copy kode yang sudah disediakan bootsrap dan kalian sekarang sudah bisa menggunakan bootsrap, bagi kalian yang membaca tulisan ini dan berkeinginan untuk belajar maka cobalah semua element & layout seperti (Navbar, Grid, Alerts, Badge, dll ) yang ada di dokumentasi bootsrap dan bisa kalian akses disini : Dokumentasi 5.3
Bootsrap selalu mengupdate versinya sehingga kalian jika ingin menjadikan bootsrap sebagai ui kit utama maka kalian perlu mengikuti perkembangannya untuk tidak ketinggalan ada fitur atau penyesuaian pada versi yang baru, jika kalian ingin melihat update bisa kalian akses disini : Blog
Kesimpulan
Bootsrap adalah sebuah UI kit yang berbasis class untuk pemanggilan paket style milik bootsrap, pada saat menggunakan bootsrap kita hanya perlu untuk merangkai basis kode untuk menjadi suatu halaman web yang sempurna, itu semua sudah disediakan bootsrap dan bebas kalian gunakan dengan gratis.
Terimakasih kalian sudah membaca tulisan ini, semoga bermanfaat. Silahkan tambahkan diskusi pada kolom komentar dan ingin, diskusi yang sopan ya. Sampai bertemu pada tulisan selanjutnya