Belajar Bootstrap 5 untuk pemula
Belajar bootstrap 5 untuk menjadi peng-koding web yang handal
Introduction
Hallo teman-teman semuanya, kembali lagi bersamaku Syafiq. Disini kita akan belajar tentang framework CSS yang sangat familiar dan famous sekali yaitu bootstraps, pada tutorial kali ini kita akan memakai bootstrap versi 5 atau versi yang terbarunya.
Cara menambahkan bootstrap ke project kita
Menambahkan bootstrap ke dalam project kita sangat mudah sekali. Ada dua cara untuk memasukkan bootstrap ke dalam project kita, namun disini hanya akan membahas tentang menambahkan bootstrap dari CDN.
- Buatlah sebuah folder dengan nama apapun yang kamu inginkan, disini aku pakai nama test_IDN.
- Bukalah folder tersebut di code editor kesayangan kamu, disini aku menggunakan atom lalu buatlah sebuah file HTML dengan nama index
- Bukalah browser kesayangan kalian lalu kunjungilah website ini
- Setelah lalu carilah section ini, bisa di scroll-scroll saja ke bawah untuk mencarinya
- Tinggal copy lalu paste kan ke dalam file HTML yang telah kita buat tadi
- Selamat Kamu sudah bisa menggunaka Bootstrap untuk project kamu
Cara membuat navbar di dalam Bootstraps
Untuk membuat sebuah navbar teman-teman bisa mengunjunginya di sini, sama seperti cara yang tadi ketika kita ingin membuat sebuah navba, si bootstrap sudah menyediakan componentnya jadi kalian tinggal copy lalu paste saja.
Perhatikan gambar di bawah ini
Cukup simple dan sederhana bukan menggunakan bootstrap ini ?
Typography
Nah karena bootstrap itu bersifat component serta sebagai framework juga pastinya ia memiliki class yang digunakan untuk men-styling text.
Di modul kali ini tidak akan di bahas semua namun hanya beberapa saja component saja, apa saja itu ? mari kita simak
Font-size
Component yang akan kita bahas pertama kali adalah component font-size, yaps sama seperti namanya yaitu untuk mengubah besar serta kecilnya sebuah text didalam HTML.
Jika teman-teman ingin menggunakan cukup tambahkan fs-1 sampai fs-6, semakin kecil angkanya maka akan semakin besar ukuran hurufnya namun semakin besar angkanya maka akan semakin kecil ukuran hurufnya.
Inline text
Untuk membuat inline text di bootstrap sangat sederhana dan mudah juga, tinggal kita tambahkan class di bawah ini ke dalam codingan HTML kita
Gambar di atas di ambil dari dokumentasi resmi nya bootstrap. Namun disini aku akan memberikan contoh sederhana saja.
Untuk component-component typography yang lainnya teman-teman bisa check di dokumentasi resminya saja ya, disini
Image Responsive
Selain typography di bootstrap juga mendukung fitur untuk membuat sebuah gambar menjadi responsive dan mengaturnya dengan mudah, perhatikan coba gambar di bawah ini
Di atas adalah cara sederhana dari penggunaan class image untuk lebih banyaknya silahkan pergi ke sini ya
Margin & padding di bootstrap
Untuk membuat margin dan padding di bootstrap juga sangat mudah, namun di bootstrap di batasi untuk penggunaan margin dan padding hanya mentok sampai number 5, jadi kita harus meng-styling ulang menggunakan css native ataupun menggunakan pre-processor seperti Sass, less dll.
Seperti yang tertulis di atas kita bisa menggunakan margin dan padding namun kita harus menyingkatnya. Contohnya seperti berikut
Penjelasan gambar di atas :
- ms artinya adalah margin-start yang memiliki property margin-left
- mt artinya adalah margin-top yang memiliki property margin-top
Color
By defautl bootstrap juga mendukung perubahan warna text menggunakan class nya bootstrap. Untuk listnya bisa di lihat di bawah ini
Dan untuk contoh project realnya bisa teman-teman lihat di bawah ini ya
Namun untuk lengkapnya teman-teman bisa check disini untuk ke dokumentasi resminya.
Mungkin untuk tutorial pengenalan dari bootstrap 5 ini cukup segini saja teman-teman, ini bukan versi lengkapnya namun ini hanya sebagai pengenalan saja untuk memberitahu bahwa menggunakan bootstrap dapat men-save waktu kita banyak sekali, untuk docs full nya bisa di check disini
Semoga bermanfaat dan sampai jumpa di next tutorial
