❖ 1. ស្គាល់ដំបូងអំពី Bootstrap

1.1 Bootstrap គឺជាអ្វី រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Bootstrap ជា CSS Framework ដ៏ពេញនិយមបំផុត បង្កើតដោយក្រុមការងារ Twitter ក្នុងឆ្នាំ 2011 ដោយផ្តល់ Component និង Utility Class រួចរាល់ (ប៊ូតុង, ទម្រង់, Grid) ដើម្បីស្ថាបនាគេហទំព័រ Responsive យ៉ាងឆាប់រហ័ស ដោយមិនចាំបាច់សរសេរ CSS ថ្មីពីដើម។

1.2 របៀបបញ្ចូល Bootstrap ទៅគេហទំព័រ រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

វិធី	ការប្រើប្រាស់
CDN	ដាក់ Link ចូល <head> ដោយផ្ទាល់ ងាយស្រួលបំផុតសម្រាប់អ្នកចាប់ផ្ដើម
npm	`npm install bootstrap` ស័ក្តិសមសម្រាប់ Project ដែលប្រើ Build Tool

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  ...
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

គន្លឹះ៖ CSS ត្រូវដាក់ក្នុង <head> ដើម្បីអោយរចនាប័ទ្មផ្ទុកមុនគេ ចំណែក JS ត្រូវដាក់មុន </body> ដើម្បីមិនធ្វើឲ្យទំព័រយឺត។

❖ 2. Grid System (ប្រព័ន្ធចែកជួរឈរ)

2.1 Container, Row & Column រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Grid របស់ Bootstrap ចែកទំហំផ្ដេកជា 12 ជួរឈរ (columns) ដែល Element នីមួយៗអាចកាន់កាប់ចំនួនជួរឈរប៉ុន្មានក៏បាន រហូតដល់ពេញ 12។

Class	តួនាទី
.container	ប្រអប់មេ កំណត់ទទឹងអតិបរមា និងតម្រឹមកណ្ដាល
.row	ជួរដេកមួយ ផ្ទុក Column ខាងក្នុង
.col	ជួរឈរ ចែកទំហំស្មើគ្នាដោយស្វ័យប្រវត្តិ
.col-4	ជួរឈរកាន់កាប់ 4/12 នៃទទឹង (33%)

<div class="container">
  <div class="row">
    <div class="col-4">ជួរឈរទី១</div>
    <div class="col-4">ជួរឈរទី២</div>
    <div class="col-4">ជួរឈរទី៣</div>
  </div>
</div>

2.2 Responsive Breakpoints រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Prefix	ទំហំអេក្រង់អប្បបរមា	ប្រភេទឧបករណ៍
(គ្មាន)	<576px	ទូរស័ព្ទ
sm	≥576px	ទូរស័ព្ទផ្ដេក
md	≥768px	Tablet
lg	≥992px	Desktop
xl	≥1200px	Desktop ធំ

<div class="row">
  <div class="col-12 col-md-6 col-lg-4">ខ្លឹមសារ</div>
</div>
<!-- ពេញមួយជួរនៅទូរស័ព្ទ, ពាក់កណ្ដាលនៅ Tablet, មួយភាគបីនៅ Desktop -->

❖ 3. Typography & Colors

3.1 Text Utilities រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Class	ន័យ
.text-center / .text-start / .text-end	តម្រឹមអត្ថបទ
.fw-bold / .fw-light	កម្រាស់អក្សរ (Font Weight)
.fs-1 ដល់ .fs-6	ទំហំអក្សរ (1=ធំបំផុត)
.text-uppercase / .text-lowercase	ប្តូរទ្រង់ទ្រាយអក្សរ

3.2 Color Classes រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Bootstrap មាន Theme Color ស្តង់ដារ 8 ពណ៌ ដែលអាចប្រើទាំងជា Text Color និង Background Color៖

ឈ្មោះ	អត្ថន័យ
primary	ពណ៌ចម្បង (ខៀវ)
success	ជោគជ័យ (បៃតង)
danger	គ្រោះថ្នាក់/កំហុស (ក្រហម)
warning	ប្រុងប្រយ័ត្ន (លឿង)

<p class="text-primary">អត្ថបទពណ៌ខៀវ</p>
<div class="bg-success text-white p-2">សារជោគជ័យ</div>

❖ 4. Spacing & Display Utilities

4.1 Margin & Padding Utilities រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Syntax ទូទៅ៖ {property}{sides}-{size} ឧ. m=margin, p=padding; t=top, b=bottom, x=left+right, y=top+bottom; size ពី 0 ដល់ 5។

ឧទាហរណ៍	ន័យ
.mt-3	margin-top កម្រិត 3
.px-4	padding ខាងឆ្វេង+ស្ដាំ កម្រិត 4
.mb-0	margin-bottom សូន្យ (លុប margin ចេញ)
.m-auto	margin ស្វ័យប្រវត្តិ (ជួយតម្រឹមកណ្ដាល)

4.2 Display & Flexbox Utilities រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Class	ន័យ
.d-none / .d-block	លាក់ / បង្ហាញ Element
.d-flex	ប្តូរ Element ទៅជា Flex Container
.justify-content-center	តម្រឹមកណ្ដាលតាមអ័ក្សសំខាន់ (ដូច CSS justify-content)
.align-items-center	តម្រឹមកណ្ដាលតាមអ័ក្សឆ្លង

<div class="d-flex justify-content-between align-items-center p-3">
  <span>ខាងឆ្វេង</span>
  <span>ខាងស្ដាំ</span>
</div>

❖ 5. Buttons & Forms

5.1 Buttons រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

<button class="btn btn-primary">ចុចទីនេះ</button>
<button class="btn btn-outline-danger">លុប</button>
<button class="btn btn-success btn-lg">រក្សាទុក</button>
<button class="btn btn-secondary btn-sm">ចេញ</button>

គន្លឹះ៖ btn-outline-* ផ្ដល់ប៊ូតុងគ្រាន់តែមានស៊ុម (មិនចាក់ពណ៌ពេញ) ល្អសម្រាប់សកម្មភាពទីពីររង។

5.2 Form Controls រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

<form>
  <div class="mb-3">
    <label class="form-label">អ៊ីមែល</label>
    <input type="email" class="form-control" placeholder="name@example.com">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input">
    <label class="form-check-label">ចងចាំខ្ញុំ</label>
  </div>
  <button type="submit" class="btn btn-primary">ចូល</button>
</form>

5.3 Form Validation Styles រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

<input class="form-control is-valid" value="សុខា">
<div class="valid-feedback">ត្រឹមត្រូវ!</div>

<input class="form-control is-invalid">
<div class="invalid-feedback">សូមបំពេញឲ្យបានត្រឹមត្រូវ។</div>

❖ 6. Navbar & Navigation

6.1 Navbar មូលដ្ឋាន រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ReanCode</a>
    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navMenu">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navMenu">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#">ទំព័រដើម</a></li>
        <li class="nav-item"><a class="nav-link" href="#">អំពីយើង</a></li>
      </ul>
    </div>
  </div>
</nav>

ចំណាំ៖ navbar-expand-lg មានន័យថា Navbar នឹងបត់ជា Hamburger Menu នៅពេលអេក្រង់តូចជាង lg (992px) ហើយបង្ហាញពេញលើ Desktop។

6.2 Breadcrumb & Pagination រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">ទំព័រដើម</a></li>
    <li class="breadcrumb-item active">សៀវភៅ</li>
  </ol>
</nav>

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

❖ 7. Cards & Alerts

7.1 Card Component រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

<div class="card" style="width: 18rem;">
  <img src="book.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">C Programming Khmer</h5>
    <p class="card-text">រៀនភាសា C ជាភាសាខ្មែរ។</p>
    <a href="#" class="btn btn-primary">ចូលអាន</a>
  </div>
</div>

7.2 Alerts & Badges រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

<div class="alert alert-success">ជោគជ័យ! ទិន្នន័យត្រូវបានរក្សាទុក។</div>
<div class="alert alert-danger">មានកំហុសកើតឡើង!</div>

<span class="badge bg-primary">ថ្មី</span>
<span class="badge bg-danger">5</span>

7.3 Modal (Popup) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  បើក Popup
</button>

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">ចំណងជើង</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">ខ្លឹមសារ Popup នៅទីនេះ។</div>
    </div>
  </div>
</div>

សំខាន់! Component ដូចជា Modal, Dropdown, Carousel ត្រូវការ Bootstrap JS (bootstrap.bundle.min.js) ដើម្បីដំណើរការ។ CSS ម្នាក់ឯងមិនគ្រប់គ្រាន់ទេ។

❖ 8. JavaScript Components

8.1 Dropdown & Collapse រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Component ទាំងនេះដំណើរការតាមរយៈ data-bs-* attribute ដោយមិនចាំបាច់សរសេរ JavaScript ដោយផ្ទាល់ដៃទាល់តែសោះ។

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
    ជម្រើស
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">កែប្រែ</a></li>
    <li><a class="dropdown-item" href="#">លុប</a></li>
  </ul>
</div>

<button data-bs-toggle="collapse" data-bs-target="#details">បង្ហាញលម្អិត</button>
<div class="collapse" id="details">ខ្លឹមសារបន្ថែម...</div>

8.2 Carousel (រូបភាពជិះជុំ) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active"><img src="slide1.jpg" class="d-block w-100"></div>
    <div class="carousel-item"><img src="slide2.jpg" class="d-block w-100"></div>
  </div>
  <button class="carousel-control-prev" data-bs-target="#myCarousel" data-bs-slide="prev"></button>
  <button class="carousel-control-next" data-bs-target="#myCarousel" data-bs-slide="next"></button>
</div>

8.3 Toast (សារជូនដំណឹងតូច) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

<div class="toast" role="alert">
  <div class="toast-header">
    <strong class="me-auto">ជូនដំណឹង</strong>
    <button class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">បានរក្សាទុកដោយជោគជ័យ!</div>
</div>

❖ 9. គម្រោងអនុវត្ត (ស្ថាបនាកាតសៀវភៅ)

9.1 ការរៀបចំគម្រោង រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

តោះផ្សំចំណុចដែលបានរៀនទាំងអស់ (Grid, Card, Button, Badge, Utilities) ធ្វើជាទំព័រតូចមួយ ដោយបង្ហាញកាតសៀវភៅ 3 ក្នុងមួយជួរ ដែលបត់ជា 1 ជួរនៅលើទូរស័ព្ទ។

9.2 កូដពេញលេញ រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

<div class="container py-5">
  <h2 class="text-center fw-bold mb-4">សៀវភៅរបស់យើង</h2>
  <div class="row g-4">
    <div class="col-12 col-md-4">
      <div class="card h-100 shadow-sm">
        <div class="card-body">
          <span class="badge bg-primary mb-2">ភាសាកម្មវិធី</span>
          <h5 class="card-title">C Programming Khmer</h5>
          <p class="card-text text-muted">រៀនមូលដ្ឋានគ្រឹះកម្មវិធី។</p>
          <a href="#" class="btn btn-outline-primary btn-sm">ចូលអាន</a>
        </div>
      </div>
    </div>
    <!-- ធ្វើម្តងទៀតសម្រាប់កាតផ្សេងទៀត... -->
  </div>
</div>

លំហាត់អនុវត្ត

ស្ថាបនា Navbar ដែលបត់ជា Hamburger Menu នៅលើទូរស័ព្ទ (មេរៀនទី៦)។
បន្ថែម Modal ដែលបង្ហាញពេលចុចប៊ូតុង "មើលបន្ថែម" លើកាតនីមួយៗ (មេរៀនទី៧)។
ប្រើ Grid System ស្ថាបនា Layout 2 ជួរឈរ (Sidebar 4 ជួរ + Main Content 8 ជួរ)។
ប្រើ Alert ជូនដំណឹងពេលអ្នកប្រើប្រាស់ចុចប៊ូតុង "រក្សាទុក" ដោយជោគជ័យ។