Belajar Bootstrap CSS Dasar

00. Sebelum Belajar

Sebelum belajar pastikan sudah memahami:

  • HTML
  • CSS
  • Javascript

01. Pengenalan Bootstrap

Sejarah Bootstrap
  • Bootstrap pertama kali dikembangkan di Twitter sebagai project internal bernama Twitter Blueprint, tujuannya untuk membuat CSS library agar tampilan frontend di internal Twitter konsisten
  • Twitter akhirnya merilis Twitter Blueprint sebagai project opensource tahun 2011 dengan nama Bootstrap
  • Saat ini Bootstrap sudah rilis versi 5, dan menjadi salah satu CSS framework terpopuler di Github
  • https://getbootstrap.com/
  • https://github.com/twbs/bootstrap

Kenapa Belajar Bootstrap?
  • Bootstrap didesain agar responsive dan bisa berjalan di semua browser modern
  • Bootstrap memiliki banyak sekali komponen, seperti navbar, dropdown, label, alert, dan lain-lain
  • Bootstrap bisa mudah dikembangkan dan disesuaikan sesuai dengan kebutuhan kita
  • Bootstrap tidak membutuhkan library lain, sehingga sangat optimal untuk kita gunakan
  • Banyak sekali template-template yang gratis dan berbayar dibuat menggunakan Bootstrap, sehingga sangat bermanfaat ketika kita mengerti Bootstrap

02. Dokumentasi Resmi
  • Cara belajar terbaik adalah dengan membaca dokumentasi resminya
  • Bootstrap memiliki dokumentasi yang baik, sehingga untuk belajar Bootstrap kita bisa baca dokumentasinya secara langsung
  • Pada kelas ini, kita akan gunakan dokumentasi resmi sebagai acuan untuk belajar Bootstrap
  • https://getbootstrap.com/ 

03. Menginstall Bootstrap

Menginstall Bootstrap
04. Membuat Project

Membuat Project
  • Buatlah folder dengan nama belajar-bootstrap-dasar
  • Download file Bootstrap dan extract ke dalam folder belajar-bootstrap-dasar dengan nama bootstrap

Struktur Folder Project


05. Hello World
  • Saat kita menggunakan Bootstrap, secara otomatis semua pengaturan default Bootstrap akan ditambahkan
  • https://getbootstrap.com/docs/5.3/getting-started/introduction/

 
 06. Reboot
  • Saat kita menambahkan Bootstrap ke halaman HTML, Bootstrap akan melakukan Reboot seluruh format CSS
  • Reboot digunakan agar halaman HTML konsisten di semua Web Browser
  • Sederhananya Reboot melakukan pengaturan ulang seluruh nilai default CSS sehingga tidak mengikuti pengaturan Web Browser, dengan begitu otomatis tampilan di semua Web Browser akan konsisten sama
  • Ada banyak sekali yang di Reboot oleh Bootstrap, kita bisa lihat di halaman berikut :
  • https://getbootstrap.com/docs/5.3/content/reboot/ 
  • Semua pengaturan Reboot bisa kita lihat di file bootstrap-reboot.css

07. Typography
  • Di Pengaturan Reboot, Bootstrap juga mengubah default Typography yang digunakan seperti font family dan font size nya
  • Detail dari Typography apa saja yang digunakan di Bootstrap, kita bisa lihat di halaman dokumentasinya :
  • https://getbootstrap.com/docs/5.3/content/typography/ 

08. Breakpoint
  • Breakpoint adalah ukuran lebar (width) yang mendefinisikan layout responsive di Bootstrap
  • Bootstrap memiliki beberapa ukuran breakpoint
  • Kedepannya, jika kita menggunakan nama class yang mengandung nama breakpoint, berarti kita bisa tahu bahwa class tersebut digunakan pada breakpoint yang ditentukan
  • https://getbootstrap.com/docs/5.3/layout/breakpoints/ 

09. Background
 
 10. Color
 
11. Text
 
12. Spacing
  • Bootstrap menyediakan banyak class untuk digunakan mengubah gaya margin dan juga padding
  • https://getbootstrap.com/docs/5.3/utilities/spacing/ 


13. Border


14. Sizing


15. Shadow


16. Color dan Background


17. Visibility


18. Opacity


19. Link


20. Display


21. Overflow


22. Position
Quick Position


23. Vertical Alignment


24. Z-Index


25. Interaction


26. Image


27. Figure


28. Object Fit


29. Table

30. Icon


31. Color Mode


32. Materi Selanjutnya
  • Bootstrap Layout
  • Bootstrap Form
  • Bootstrap Component
  • Bootstrap Customize

Sumber: Youtube Programmer Zaman Now