Grid System
ប្រព័ន្ធក្រឡាចត្រង្គរបស់ Bootstrap (Grid System)
Grid System គឺជាស្នូលកណ្តាល (core) និងជាផ្នែកសំខាន់បំផុតនៃ Bootstrap ដែលជួយឲ្យអ្នករៀបចំ layout របស់គេហទំព័របានងាយស្រួលនិង responsive។ វាប្រើប្រព័ន្ធ 12 columns (12 ជួរឈរ) ដែលអ្នកអាចបែងចែកតាមចំណង់ចំណូលចិត្ត។
🎯 ហេតុអ្វីត្រូវមាន Grid System?
ប្រៀបដូចជាការសង់ផ្ទះ ដែលយើងត្រូវមានបង្គោល និងគ្រឹះផ្ទះមុនសិនទើបអាចសង់ជញ្ជាំងនិងដំបូលបាន។ Grid System ក៏ដូចគ្នាដែរ - វាជាគ្រឹះដែលយើងប្រើសម្រាប់រៀបចំទីតាំងនៃធាតុផ្សេងៗនៅលើគេហទំព័រ។
📐 គោលការណ៍មូលដ្ឋាននៃ Grid System:
| ផ្នែក | តួនាទី | Class | ពិពណ៌នា |
|---|---|---|---|
| 📦 Container | ប្រអប់ធំដាក់គ្រប់យ៉ាង | .container ឬ .container-fluid |
ជាឪពុកដែលផ្ទុកគ្រប់យ៉ាង |
| ➡️ Row | ជួរដេក (horizontal) | .row |
ដាក់ columns នៅក្នុងនេះ |
| ⬇️ Column | ជួរឈរ (vertical) | .col-* |
ផ្ទុកមាតិកាជាក់ស្តែង |
🔢 ហេតុអ្វីជា 12 Columns?
Bootstrap ជ្រើសរើសលេខ 12 ព្រោះវាអាចបែងចែកបានច្រើនមុខ:
- ✅ 12 ÷ 1 = 12 (1 column ពេញទំហំ)
- ✅ 12 ÷ 2 = 6 (2 columns ស្មើគ្នា)
- ✅ 12 ÷ 3 = 4 (3 columns ស្មើគ្នា)
- ✅ 12 ÷ 4 = 3 (4 columns ស្មើគ្នា)
- ✅ 12 ÷ 6 = 2 (6 columns ស្មើគ្នា)
- ✅ 12 ÷ 12 = 1 (12 columns តូចៗ)
ដូច្នេះលេខ 12 ផ្តល់ភាព flexible ខ្ពស់ក្នុងការបែងចែក layout។
📏 រចនាសម្ព័ន្ធដូចម្តេច?
Container (ប្រអប់ធំ - ទទឹងកំណត់)
└── Row (ជួរដេក)
├── Column 1 (ជួរឈរ ទី 1)
├── Column 2 (ជួរឈរ ទី 2)
└── Column 3 (ជួរឈរ ទី 3)🎨 ឧទាហរណ៍នៃការបែងចែក 12 columns:
| Layout | Columns | Class | ប្រើសម្រាប់ |
|---|---|---|---|
| 1 ជួរពេញ | 12 | .col-12 |
Header, Footer, Banner |
| 2 ជួរស្មើគ្នា | 6 + 6 | .col-6 (x2) |
Content + Sidebar |
| 3 ជួរស្មើគ្នា | 4 + 4 + 4 | .col-4 (x3) |
Features, Cards |
| 4 ជួរស្មើគ្នា | 3 + 3 + 3 + 3 | .col-3 (x4) |
Gallery, Products |
| Content + Sidebar | 8 + 4 | .col-8 + .col-4 |
Blog layout |
| Sidebar + Content | 3 + 9 | .col-3 + .col-9 |
Dashboard |
📦 Container Types - ប្រភេទប្រអប់ផ្សេងៗ
Bootstrap មាន Container ចំនួន 3 ប្រភេទ ដែលមានអាកប្បកិរិយាខុសៗគ្នា:
🔍 ការប្រៀបធៀបលម្អិត:
| Container | ទទឹង | Breakpoints | ប្រើពេលណា |
|---|---|---|---|
.container |
កំណត់តាមអេក្រង់ | ខុសៗគ្នាតាមទំហំ | គេហទំព័រធម្មតា (ទទឹងមិនពេញអេក្រង់) |
.container-fluid |
100% ពេញអេក្រង់ | 100% គ្រប់ទំហំ | គេហទំព័រចង់បានទទឹងពេញ |
.container-{breakpoint} |
100% រហូតដល់ breakpoint | ពេញរហូតដល់ទំហំកំណត់ | ចង់បានការគ្រប់គ្រងច្បាស់លាស់ |
📊 ទទឹងរបស់ .container តាមទំហំអេក្រង់:
| Breakpoint | ទំហំអេក្រង់ | ទទឹង Container | ឧទាហរណ៍ឧបករណ៍ |
|---|---|---|---|
| Extra small (xs) | < 576px | 100% | ទូរស័ព្ទតូច (iPhone SE) |
| Small (sm) | ≥ 576px | 540px | ទូរស័ព្ទ (iPhone, Android) |
| Medium (md) | ≥ 768px | 720px | Tablet (iPad Mini) |
| Large (lg) | ≥ 992px | 960px | Tablet ធំ (iPad Pro) |
| Extra large (xl) | ≥ 1200px | 1140px | Laptop, Desktop តូច |
| Extra extra large (xxl) | ≥ 1400px | 1320px | Desktop ធំ, TV |
🎯 ជ្រើសរើស Container ដូចម្តេច?
ប្រើ .container ពេល:
- ✅ ចង់បានម៉ាស៊ីនទទេពីរខាង (margins)
- ✅ មាតិកាមិនគួរលូតពេកនៅអេក្រង់ធំ
- ✅ រចនាគេហទំព័រស្តង់ដា (Blog, Corporate site)
ប្រើ .container-fluid ពេល:
- ✅ ចង់បានទទឹងពេញ 100%
- ✅ គេហទំព័រមានរូបភាពផ្ទៃខាងក្រោយ (background)
- ✅ Admin dashboard, Image gallery
ប្រើ .container-{breakpoint} ពេល:
- ✅ ចង់គ្រប់គ្រងច្បាស់លាស់នៅទំហំណាមួយ
- ✅ ចង់បាន fluid រហូតដល់ទំហំជាក់លាក់
📏 Column Sizes - ទំហំជួរឈរ
Column ក្នុង Bootstrap អាចមានទំហំចាប់ពី 1 ដល់ 12។ អ្នកអាចបែងចែកតាមចំណង់ចំណូលចិត្ត។
🎨 របៀបគណនា Column:
ច្បាប់មូលដ្ឋាន: ផលបូកនៃ columns ក្នុង 1 row ត្រូវតែ ≤ 12
| Layout ចង់បាន | គណនា | Class | សមមូល % |
|---|---|---|---|
| 1 column ពេញ | 12 | .col-12 |
100% |
| 2 columns ស្មើ | 12 ÷ 2 = 6 | .col-6 |
50% ម្នាក់មួយ |
| 3 columns ស្មើ | 12 ÷ 3 = 4 | .col-4 |
33.33% ម្នាក់មួយ |
| 4 columns ស្មើ | 12 ÷ 4 = 3 | .col-3 |
25% ម្នាក់មួយ |
| Sidebar + Content | 3 + 9 = 12 | .col-3 + .col-9 |
25% + 75% |
| Content + Sidebar | 8 + 4 = 12 | .col-8 + .col-4 |
66.67% + 33.33% |
⚠️ អ្វីកើតឡើងបើលើស 12?
បើផលបូកលើស 12, columns បន្ថែមនឹងចុះជួរថ្មី (wrap to new line):
<div class="row">
<div class="col-8">Column 1 (8)</div>
<div class="col-6">Column 2 (6)</div> <!-- ចុះជួរថ្មី -->
</div>
🔄 Auto-width Columns:
ប្រើ .col ដោយមិនបានលេខ = Bootstrap បែងចែកស្មើៗគ្នាដោយស្វ័យប្រវត្តិ
<div class="row">
<div class="col">Auto 1</div>
<div class="col">Auto 2</div>
<div class="col">Auto 3</div>
</div>
📱 Responsive Breakpoints - ចំណុចផ្លាស់ប្តូរតាមទំហំ
នេះគឺជាចំណុចដ៏មានអានុភាពបំផុតនៃ Bootstrap Grid! អ្នកអាចកំណត់ឲ្យ columns មានទំហំខុសៗគ្នាតាមទំហំអេក្រង់។
🎯 Breakpoint Classes:
| Breakpoint | Class Prefix | ទំហំ | ឧបករណ៍ | ឧទាហរណ៍ |
|---|---|---|---|---|
| Extra small | (none) | < 576px | ទូរស័ព្ទតូច | .col-6 |
| Small | sm |
≥ 576px | ទូរស័ព្ទ | .col-sm-6 |
| Medium | md |
≥ 768px | Tablet | .col-md-6 |
| Large | lg |
≥ 992px | Laptop | .col-lg-6 |
| Extra large | xl |
≥ 1200px | Desktop | .col-xl-6 |
| Extra extra large | xxl |
≥ 1400px | Desktop ធំ | .col-xxl-6 |
🎨 ឧទាហរណ៍ការប្រើប្រាស់:
<div class="col-12 col-md-6 col-lg-4">
Responsive Column
</div>ន័យថា:
- 📱 នៅទូរស័ព្ទ (xs):
col-12= 100% ទទឹង (ពេញមួយជួរ) - 📱 នៅទូរស័ព្ទ/Tablet (md):
col-md-6= 50% ទទឹង (២ ក្នុងមួយជួរ) - 💻 នៅ Laptop+ (lg):
col-lg-4= 33.33% ទទឹង (៣ ក្នុងមួយជួរ)
📐 Mobile-First Approach:
Bootstrap ប្រើ Mobile-First ន័យថា classes ដំណើរការពីអេក្រង់តូចឡើងធំ:
| Class | ដំណើរការលើ | ពន្យល់ |
|---|---|---|
.col-6 |
គ្រប់ទំហំ | ចាប់ពី xs រហូតដល់ xxl |
.col-sm-6 |
≥ 576px | ចាប់ពី sm រហូតដល់ xxl |
.col-md-6 |
≥ 768px | ចាប់ពី md រហូតដល់ xxl |
.col-lg-6 |
≥ 992px | ចាប់ពី lg រហូតដល់ xxl |
🎁 Nested Columns - Columns ក្នុង Columns
អ្នកអាចដាក់ row និង columns ថ្មីទៅក្នុង column ដែលមានស្រេចហើយ។ ការធ្វើបែបនេះហៅថា "nesting"។
📦 រចនាសម្ព័ន្ធ:
Container
└── Row 1
└── Column 1
└── Row 2 (Nested)
├── Column 2.1
├── Column 2.2
└── Column 2.3🎯 ពេលណាត្រូវប្រើ Nested Columns?
- ✅ ចង់បែងចែក column ធំជាផ្នែកតូចៗ
- ✅ Layout ស្មុកស្មាញ (Dashboard, Complex forms)
- ✅ Card ដែលមាន layout ខាងក្នុង
- ✅ Gallery ជាមួយផ្នែកក្នុងផ្សេងៗ
⚠️ ចំណាំសំខាន់:
- Nested row មាន 12 columns ថ្មីរបស់ខ្លួនវា
- Nested columns គិតទាក់ទងនឹង parent column, មិនមែន outer container
- ជៀសវាងការ nest ជ្រៅពេក (ជាង 2-3 levels) ព្រោះអាចធ្វើឲ្យស្មុកស្មាញ
📐 Gutters (Spacing) - ចន្លោះរវាង Columns
Gutter គឺជាចន្លោះទំនេរ (spacing/padding) រវាង columns។ Bootstrap 5 ផ្តល់ការគ្រប់គ្រង gutters ដ៏ល្អណាស់។
🎯 ប្រភេទ Gutter Classes:
| Class | ប៉ះពាល់ | ឧទាហរណ៍ | ប្រើពេលណា |
|---|---|---|---|
.g-* |
ទាំងផ្ដេក និងឈរ | .g-3 |
ចង់ចន្លោះស្មើគ្នាទាំងពីរទិស |
.gx-* |
តែផ្ដេក (horizontal) | .gx-4 |
ចង់ចន្លោះឆ្វេង-ស្តាំប៉ុណ្ណោះ |
.gy-* |
តែឈរ (vertical) | .gy-5 |
ចង់ចន្លោះលើ-ក្រោមប៉ុណ្ណោះ |
.g-0 |
លុបចន្លោះ | .g-0 |
មិនចង់បានចន្លោះ |
📏 ទំហំ Gutter (0-5):
| Class | Spacing | rem | px (approx) |
|---|---|---|---|
.g-0 |
គ្មាន | 0 | 0px |
.g-1 |
តូចបំផុត | 0.25rem | ~4px |
.g-2 |
តូច | 0.5rem | ~8px |
.g-3 |
ធម្មតា (default) | 1rem | ~16px |
.g-4 |
ធំ | 1.5rem | ~24px |
.g-5 |
ធំបំផុត | 3rem | ~48px |
🎨 ឧទាហរណ៍ប្រើប្រាស់:
<!-- គ្មានចន្លោះ -->
<div class="row g-0">...</div>
<!-- ចន្លោះតូច -->
<div class="row g-2">...</div>
<!-- ចន្លោះធម្មតា -->
<div class="row g-3">...</div>
<!-- ចន្លោះឆ្វេង-ស្តាំប៉ុណ្ណោះ -->
<div class="row gx-4">...</div>
<!-- ចន្លោះលើ-ក្រោមប៉ុណ្ណោះ -->
<div class="row gy-5">...</div>