Belajar Bootstrap Component

Belajar Bootstrap Component

00. Sebelum Belajar

Sebelum mulai belajar pastikan sudah memahami:

• HTML
• CSS
• Javascript
• Bootstrap Dasar, Form, dan Layout
  
  

01. Bootstrap JavaScript

• Banyak fitur Component di Bootstrap membutuhkan JavaScript sebagai interaksinya
• Oleh karena itu, salah satu yang wajib kita tambahkan ketika menggunakan Bootstrap Component, adalah Bootstrap JavaScript
• Saat kita download distribusi file Bootstrap, sudah terdapat file JavaScript yang bisa kita gunakan
• Namun jika misal kita menggunakan framework seperti VueJS, ReactJS atau Angular, kita bisa gunakan Bootstrap JavaScript yang kompatibel dengan framework tersebut
• https://getbootstrap.com/docs/5.3/getting-started/javascript/
  
  

02. Alert

• Memberi pesan balik ke pengguna untuk memberi pengumuman atau peringatan
• https://getbootstrap.com/docs/5.3/components/alerts/
  
  

03. Breadcrumb

• Menunjukkan lokasi halaman saat ini dalam hierarki navigasi
• https://getbootstrap.com/docs/5.3/components/breadcrumb/

04. Button

• Gunakan gaya tombol kustom Bootstrap untuk aksi dalam form, dialog, dan lainnya dengan dukungan untuk berbagai ukuran, status, dan lainnya.
• https://getbootstrap.com/docs/5.3/components/buttons/

05. Button Group

• Kelompokkan tombol bersama-sama pada satu baris atau susun dalam kolom vertikal.
• https://getbootstrap.com/docs/5.3/components/button-group/

06. Close Button

• Tombol tutup untuk menutup konten seperti modal dan peringatan.
• https://getbootstrap.com/docs/5.3/components/close-button/

07. Badge

• Membuat komponen lencana
• https://getbootstrap.com/docs/5.3/components/badge/

08. Card

• Kartu Bootstrap menyediakan wadah konten yang fleksibel dan dapat diperluas dengan berbagai varian dan opsi.
• https://getbootstrap.com/docs/5.3/components/card/

09. Carousel

• Komponen tayangan slide untuk beralih antar elemen, gambar atau slide teks
• https://getbootstrap.com/docs/5.3/components/carousel/

10. Collapse

• Alihkan visibilitas konten di halaman web
• https://getbootstrap.com/docs/5.3/components/collapse/

11. Accordion

• Membuat komponen yang bisa dilipat secara vertikal
• https://getbootstrap.com/docs/5.3/components/accordion/

12. List Group

• List Group merupakan komponen yang fleksibel dan canggih untuk menampilkan serangkaian konten.
• https://getbootstrap.com/docs/5.3/components/list-group/

13. Modal

• Menambahkan dialog ke situs untuk lightbox, notifikasi pengguna, atau konten yang sepenuhnya khusus.
• https://getbootstrap.com/docs/5.3/components/modal/

14. Navbar

• Header navigasi Bootstrap yang responsif, navbar. Termasuk dukungan untuk pencitraan merek, navigasi, dan banyak lagi, termasuk dukungan untuk plugin penciutan.
• https://getbootstrap.com/docs/5.3/components/navbar/

15. Nav dan Tab

• Menggunakan komponen navigasi
• https://getbootstrap.com/docs/5.3/components/navs-tabs/

16. Offcanvas

• Bangun bilah sisi tersembunyi ke dalam web untuk navigasi, keranjang belanja, dan banyak lagi
• https://getbootstrap.com/docs/5.3/components/offcanvas/

17. Pagination

• Menampilkan pagination untuk menunjukkan serangkaian konten terkait yang ada di beberapa halaman.
• https://getbootstrap.com/docs/5.3/components/pagination/

18. Placeholder

• Gunakan tempat penampung pemuatan untuk komponen atau halaman web untuk menunjukkan bahwa sesuatu mungkin masih dimuat.
• https://getbootstrap.com/docs/5.3/components/placeholders/

19. Progress

• Komponen untuk menampilkan penggunaan proses kemajuan
• https://getbootstrap.com/docs/5.3/components/progress/

20. Scrollspy

• Perbarui secara otomatis komponen navigasi atau grup daftar berdasarkan posisi gulir untuk menunjukkan tautan mana yang sedang aktif di viewport.
• https://getbootstrap.com/docs/5.3/components/scrollspy/

21. Spinner

• Tunjukkan status pemuatan suatu komponen atau halaman dengan spinner
• https://getbootstrap.com/docs/5.3/components/spinners/

22. Toast

• Kirim pemberitahuan ke pengunjung dengan toast, pesan peringatan yang ringan dan mudah disesuaikan.
• https://getbootstrap.com/docs/5.3/components/toasts/

 

23. Dropdown

• Cara untuk menampilkan daftar tautan dan lainnya
• https://getbootstrap.com/docs/5.3/components/dropdowns/

24. Popover

• Menambahkan popover, seperti yang ditemukan di iOS
• https://getbootstrap.com/docs/5.3/components/popovers/

25. Tooltip

• Menambahkan tooltip khusus ke halaman web
• https://getbootstrap.com/docs/5.3/components/tooltips/

26. Materi Selanjutnya

• Implementasi Bootstrap pada Website yang kita buat

Sumber: Youtube Programmer Zaman Now