Basic Bootstrap
author: HasthoRahtomo markdown: Ifarra
Bootstrap adalah salah satu CSS framework yang dapat digunakan saat ini. Bootstrap dapat digunakan secara gratis dengan atau tanpa dengan melakukan pengistalan. Bootstrap berisi berbagai macam kode yang siap digunakan. Kode yang disediakan oleh bootstrap juga sudah bersifat “responsive” sehingga kita tidak perlu mengaturnya kembali.
Berikut adalah bagaimana men-setting bootstrap agar dapat digunakan pada project kita.
-
Buka website resmi bootstrap melalui <https://getbootstrap.com/docs/5.3/getting-started/introduction/>
-
Copy kode pada baris berikut:
-
Bootstrap sudah terpasang dan siap digunakan.
Perlu diingat penggunaan bootstrap tanpa melakukan pengistalan menggunakan internet, pastikan perangkat sudah terhubung kedalam internet sebelum menggunakan bootstrap.
Penggunaan Bootstrap
Setelah Bootstrap sudah terpasang, langkah selanjutnya adalah menggunakan kode-kode yang ada didalam bootstrap. Berikut adalah caranya:
Kita dapat mencari kode apa yang kita ingin kan pada search bar, kita juga dapat mencari nya secara manual pada bagian kiri website.
Sebagai Contoh, kita akan menggunakan slider dari Bootstrap.
-
Ketik “slider” pada search bar, kemudian klik pada menu paling atas.
-
Pilih slider yang diinginkan, Bootstrap menyediakan berbagai macam slider yang dapat digunakan. Seperti slider manual, slider auto, dll. Sebagai contoh, kita akan memilih slider manual.
-
Copy kode yang berada dibawah slider yang kita inginkan. Copy kode tadi kedalam file project kita. Pastikan kode tersebut berada didalam
<body> -
Run dan lihat hasilnya.
Contoh 2, kita akan menggunakan Cards dari Bootstrap
-
Ketik “cards” pada search bar kemudian klik ENTER.
-
Pilih model card, terdapat beragam variasi desain yang dapat digunakan.
-
Copy code yang berada dibawah desain yang diinginkan.
-
Masukan kode yang sudah di copy tadi kedalam project.
-
Perhatikan hasilnya
Penggunaan Bootstrap
Walaupun kita hanya meng-copy kode dari bootstrap, kita tetap dapat mengatur element yang telah di copy tersebut, seperti mengubah warna, background, dll.
Mengubah warna background
-
Ketik “background color” pada search bar atau masuk kedalam link berikut <https://getbootstrap.com/docs/5.3/utilities/background/#background-color>
-
pilih warna yang diinginkan, lalu copy text yang terdapat pada warna.
-
Paste kode yang telah di copy sebelumnya pada bagian “Class” element. dan hapus titik (.) pada awal kode
-
Perhatikan output yang keluar
Untuk mengubah warna text sebenarnya sama. Secara general, cara mengubah style dari element dari bootstrap adalah mencari apa yang ingin diubah
-
copy kode yang diinginkan
-
letakan kode yang telah dicopy pada bagian “class” dengan titik (.) yang sudah dihapus.