Components
Bootstrap Interactive Components
ស្វែងយល់អំពី components ផ្សេងទៀតដែលត្រូវការ JavaScript សម្រាប់ការធ្វើអន្តរកម្ម។ Bootstrap 5 រួមបញ្ចូល components ជាច្រើនដែលជួយបង្កើត user interface ទំនើប។
📦 Interactive Components Overview
| Component | Purpose | Use Cases | Requires JS? |
|---|---|---|---|
| Dropdown | Toggleable menu | Navigation menus, user actions | ✅ Yes |
| Tabs | Organize content into sections | Product details, profiles, dashboards | ✅ Yes |
| Carousel | Image/content slider | Hero sections, image galleries, testimonials | ✅ Yes |
| Accordion | Collapsible content panels | FAQs, documentation, mobile menus | ✅ Yes |
| Offcanvas | Sidebar/drawer that slides in | Mobile navigation, filters, shopping cart | ✅ Yes |
| Spinners | Loading indicators | Loading states, processing actions | ❌ No |
🔽 Dropdown Component
| Feature | Class | Description |
|---|---|---|
| Dropdown Container | .dropdown |
Wrapper for entire dropdown |
| Dropdown Button | .dropdown-toggle |
Button that triggers dropdown |
| Dropdown Menu | .dropdown-menu |
The menu container (hidden by default) |
| Dropdown Item | .dropdown-item |
Individual menu items |
| Dropdown Divider | .dropdown-divider |
Separator between items |
| Dropdown Header | .dropdown-header |
Section headers in menu |
| Active Item | .active |
Highlighted current item |
| Disabled Item | .disabled |
Non-clickable grayed-out item |
📑 Tabs & Pills Navigation
| Type | Class | Visual Style | Best For |
|---|---|---|---|
| Tabs | .nav-tabs |
Traditional tabs with borders | Desktop layouts, formal interfaces |
| Pills | .nav-pills |
Rounded button-like tabs | Modern designs, mobile interfaces |
| Tab Content | .tab-content |
Container for all tab panels | Wraps all content sections |
| Tab Pane | .tab-pane |
Individual content section | Each tab's content |
| Fade Effect | .fade |
Smooth transition animation | Better user experience |
| Active State | .show .active |
Visible tab/pane | Current displayed content |
Carousel & Accordion
Carousel សម្រាប់បង្ហាញរូបភាព ឬ ខ្លឹមសារជា slideshow, Accordion សម្រាប់បត់-ពន្លាខ្លឹមសារ។
🎠 Carousel Structure
| Component | Class | Purpose |
|---|---|---|
| Carousel Container | .carousel .slide |
Main wrapper with slide animation |
| Indicators | .carousel-indicators |
Dots showing current slide |
| Inner Container | .carousel-inner |
Wrapper for all slides |
| Carousel Item | .carousel-item |
Individual slide (add .active to first) |
| Caption | .carousel-caption |
Text overlay on slide |
| Controls (Prev/Next) | .carousel-control-prev/next |
Arrow navigation buttons |
📋 Accordion Structure
| Component | Class | Function |
|---|---|---|
| Accordion Container | .accordion |
Wrapper for all accordion items |
| Accordion Item | .accordion-item |
Individual collapsible section |
| Accordion Header | .accordion-header |
Contains the toggle button |
| Accordion Button | .accordion-button |
Clickable header (auto includes arrow) |
| Collapse Wrapper | .accordion-collapse |
Collapsible content wrapper |
| Accordion Body | .accordion-body |
Actual content inside |
| Collapse State | .collapse .show |
Controls visibility (add .show to open by default) |
Offcanvas & Spinners
Offcanvas បង្កើត sidebar ដែល slide ចូល, Spinners សម្រាប់បង្ហាញ loading state។
📱 Offcanvas Component
| Feature | Class | Description |
|---|---|---|
| Offcanvas Container | .offcanvas |
Main wrapper for sidebar |
| Start (Left) | .offcanvas-start |
Slides in from left side |
| End (Right) | .offcanvas-end |
Slides in from right side |
| Top | .offcanvas-top |
Slides down from top |
| Bottom | .offcanvas-bottom |
Slides up from bottom |
| Offcanvas Header | .offcanvas-header |
Top section with title and close button |
| Offcanvas Body | .offcanvas-body |
Main content area |
⏳ Spinner Types
| Spinner Type | Class | Visual | Use Case |
|---|---|---|---|
| Border Spinner | .spinner-border |
Rotating circle border | General loading, most common |
| Growing Spinner | .spinner-grow |
Pulsing circle | Alternative style, softer look |
| Small Spinner | .spinner-border-sm |
Smaller border spinner | Buttons, inline loading |
| Colored Spinner | text-primary text-success etc. |
Colored using text utilities | Match brand colors |
| Button Spinner | Spinner inside <button> |
Loading button state | Form submissions, async actions |
✅ Component Best Practices
| ✅ DO | ❌ DON'T |
|---|---|
| Use accordions for FAQs and long content | Put critical info only in accordion (might be missed) |
| Use carousels for hero sections with 3-5 slides | Auto-rotate carousels with important content |
| Include carousel controls and indicators | Make carousels that can't be manually controlled |
| Use offcanvas for mobile navigation | Use offcanvas on desktop when navbar would work |
| Show spinners during async operations | Forget to hide spinners when done loading |
| Use tabs to organize related content | Use too many tabs (keep to 5-7 max) |