ឃ្លាំងគំរូ Bootstrap ពេញលេញ

🛠️ ឃ្លាំងគំរូ និងធាតុ Bootstrap ពេញលេញ (All-in-One Component Viewer)

ប្រមូលផ្ដុំ Style របស់ Bootstrap ស្ទើរតែទាំងអស់។ ចុច "📋 Copy Element" ដើម្បីចម្លងកូដយកទៅប្រើភ្លាមៗ!

Bootstrap 5.x Ultimate

🔘 គ្រាប់ប៊ូតុងគ្រប់ប្រភេទ (Buttons) 📝 ប្រអប់ទម្រង់បញ្ជូលទិន្នន័យ (Forms) 🔗 ប្រអប់អក្សរភ្ជាប់សញ្ញា (Input Groups) 🗂️ ស៊ុមព័ត៌មាន និង Layout (Cards) 📊 តារាងរបាយការណ៍ (Tables) 🏷️ ស្លាកស្ថានភាព (Badges & Alerts) 🔽 ផ្ទាំងបិទបើកលាក់ទិន្នន័យ (Accordion) 🪟 ផ្ទាំង Pop-up ដំណឹង (Modals)

🔘 គ្រាប់ប៊ូតុងគ្រប់ប្រភេទ (Buttons)

Live Preview (ពណ៌គ្រាប់ប៊ូតុង និងទម្រង់ Outline)៖

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-outline-success">Outline Success</button>
<button type="button" class="btn btn-danger btn-lg fw-bold">Large Button</button>

📝 ប្រអប់ទម្រង់បញ្ចូលទិន្នន័យ (Inputs, Selects, Checkbox, Radio)

Live Preview (គ្រប់ធាតុរបស់ Form)៖

ប្រអប់វាយអក្សរ (Text Input)

ប្រអប់ជ្រើសរើស (Select Dropdown)

ប្រអប់រើសកាលបរិច្ឆេទ (Date Input)

Checkbox & Radio

គ្រីសយក (Checkbox)

ជម្រើសទោល ១

ជម្រើសទោល ២

<input type="text" class="form-control form-control-lg" placeholder="បញ្ចូល...">
<select class="form-select form-select-lg"><option>ជ្រើសរើស</option></select>
<div class="form-check">
                    <input class="form-check-input" type="checkbox" id="chk">
                    <label class="form-check-label" for="chk">គ្រីស</label>
</div>

🔗 ប្រអប់អក្សរភ្ជាប់សញ្ញា (Input Groups - ពេញនិយមសម្រាប់តម្លៃលុយ $)

Live Preview (Input Groups)៖

$ .00

<div class="input-group mb-3">
                    <span class="input-group-text">$</span>
                    <input type="number" class="form-control" placeholder="0.00">
</div>

🗂️ ស៊ុមព័ត៌មាន និង Layout (Cards & Dashboard Boxes)

Live Preview (Cards សម្រាប់ធ្វើ Dashboard លេខសរុប)៖

ប្រាក់ចំណូលសរុប (Total Revenue)

$12,540.00

វិក្កយបត្ររួចរាល់ (Paid Orders)

1,240 វិក្កយបត្រ

<div class="card shadow-sm border-0 bg-white border-start border-success border-4">
                    <div class="card-body p-4">
                    <h6 class="text-success fw-bold m-0">ចំណងជើង</h6>
                    <h2 class="fw-bold text-dark mt-2">ទិន្នន័យ...</h2>
    </div>
</div>

📊 តារាងរបាយការណ៍ (Tables Layout)

Live Preview (តារាង Striped Hover មានតុល្យភាព)៖

ល.រ	ឈ្មោះក្រុមហ៊ុន	វិធីសាស្ត្របង់ប្រាក់	ទឹកប្រាក់សរុប
1	ក្រុមហ៊ុន ភីភី ធីវី	ABA Bank	$550.00
2	ក្រុមហ៊ុន កូកាកូឡា	សាច់ប្រាក់សុទ្ធ	$1,200.00

<table class="table table-striped table-hover border">
                    <thead class="table-dark">
                    <tr><th>ល.រ</th><th>ឈ្មោះ</th></tr>
    </thead>
                    <tbody>
                    <tr><td>1</td><td>ទិន្នន័យ</td></tr>
    </tbody>
</table>

🏷️ ស្លាកស្ថានភាព និងប្រអប់ដំណឹង (Badges & Alerts)

Live Preview (Badges និង Alerts ព្រមាន)៖

ជោគជ័យ (Success) បរាជ័យ (Danger) រង់ចាំ (Pending)

💾 ប្រព័ន្ធបានរក្សាទុកទិន្នន័យរបាយការណ៍របស់បងដោយជោគជ័យ!

<span class="badge bg-success fs-6 shadow-sm">ជោគជ័យ</span>
<div class="alert alert-success" role="alert">សារជូនដំណឹង...</div>

🔽 ផ្ទាំងបិទបើកលាក់ទិន្នន័យ (Accordion - ល្អសម្រាប់សំណួរ-ចម្លើយ ឬរបាយការណ៍បិទលាក់)

Live Preview (Accordion)៖

រាល់ទិន្នន័យរបាយការណ៍ទាំងអស់ ត្រូវបានអូសទាញផ្ទាល់ពី Odoo ERP តាមរយៈប្រព័ន្ធសុវត្ថិភាពខ្ពស់។

<div class="accordion" id="accId">
                    <div class="accordion-item">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#colId">ចំណងជើង</button>
                    <div id="colId" class="accordion-collapse collapse show">
                    <div class="accordion-body">មាតិកាព័ត៌មាន...</div>
        </div>
    </div>
</div>

🪟 ផ្ទាំង Pop-up ដំណឹងផ្ទៀងផ្ទាត់ (Modals Box)

Live Preview (ចុចប៊ូតុងដើម្បីបើកផ្ទាំង Pop-up តេស្តមើល)៖

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">បើក</button>
<div class="modal fade" id="myModal" tabindex="-1"><div class="modal-dialog"><div class="modal-content">
                    <div class="modal-header"><h5>ចំណងជើង</h5></div>
                    <div class="modal-body">មាតិកា...</div>
</div></div></div>