មេរៀន Bootstrap ភាសាខ្មែរ

01

Bootstrap គឺជាអ្វី?

មូលដ្ឋាន

Bootstrap គឺជា CSS Framework ដ៏ពេញនិយមបំផុតមួយនៅលើពិភពលោក។ វាត្រូវបានបង្កើតដោយ Twitter ក្នុងឆ្នាំ 2011 ហើយឥឡូវនេះស្ថិតលើ Version 5 ។

Bootstrap ផ្តល់ជូននូវ CSS Classes, Components, និង JavaScript Plugins ដែលត្រូវបានបង្កើតរួចហើយ ដើម្បីឱ្យអ្នក អភិវឌ្ឍន៍ Website បានលឿន និងស្អាត ។

ហេតុអ្វីត្រូវប្រើ Bootstrap?

✓ Responsive Design ស្វ័យប្រវត្តិ · ✓ Components ច្រើន · ✓ Community ធំ · ✓ Documentation ល្អ · ✓ ប្រើប្រាស់ងាយ

02

រៀបចំ Bootstrap (Setup)

ចាប់ផ្តើម

មានវិធី 2 ក្នុងការប្រើ Bootstrap:

វិធី 1: CDN (ងាយបំផុតសម្រាប់អ្នកចាប់ផ្តើម)

គ្រាន់តែ Copy Link ដាក់ក្នុង HTML ។ មិនចាំបាច់ Download អ្វីទេ !

HTML · Template ចាប់ផ្តើម

<!-- Template Bootstrap 5 ចាប់ផ្តើម -->
<!DOCTYPE html>
<html lang="km">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ទំព័រ Bootstrap</title>
  
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        rel="stylesheet">
</head>
<body>

  <!-- Content របស់អ្នកនៅទីនេះ -->
  <h1 class="text-center mt-5">សួស្តី Bootstrap!</h1>

  <!-- Bootstrap 5 JS (ដាក់នៅខាងក្រោម body) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

សំខាន់!

meta viewport ត្រូវតែដាក់ — វាធ្វើឱ្យ Responsive Design ដំណើរការបានត្រឹមត្រូវ ។

03

Containers

Layout

Container គឺជា wrapper សំខាន់ក្នុង Bootstrap ។ វាកំណត់ width និង centering នៃ content ។

Class	ការប្រើប្រាស់	Max Width
`.container`	Fixed width (responsive breakpoints)	1320px
`.container-fluid`	Full width ជានិច្ច	100%
`.container-sm/md/lg/xl/xxl`	Full width រហូតដល់ breakpoint	ចំណុះ

HTML

<!-- Container ធម្មតា -->
<div class="container">
  <p>Content ខ្ញុំស្ថិតនៅក្នុង container</p>
</div>

<!-- Container Full Width -->
<div class="container-fluid">
  <p>ខ្ញុំ Full Width ជានិច្ច</p>
</div>

04

Grid System

Layout

Bootstrap Grid ប្រើ 12 Columns ។ អ្នកអាចបែងចែកទំព័ររបស់អ្នកបាន 12 ផ្នែក ។

Grid Demo — ក្នុង Browser

col-12 (Full Width)

col-6

col-4

col-3

HTML · Grid System

<div class="container">
  <div class="row">
  
    <!-- 2 Columns ស្មើគ្នា -->
    <div class="col-6">ជួរទី 1</div>
    <div class="col-6">ជួរទី 2</div>

    <!-- 3 Columns ស្មើគ្នា -->
    <div class="col-4">ទី 1</div>
    <div class="col-4">ទី 2</div>
    <div class="col-4">ទី 3</div>

    <!-- Responsive: Mobile=Full, Desktop=Half -->
    <div class="col-12 col-md-6">Responsive</div>
    <div class="col-12 col-md-6">Responsive</div>
    
  </div>
</div>

Class Prefix	Breakpoint	Screen Width
`col-`	xs (Mobile)	< 576px
`col-sm-`	sm	≥ 576px
`col-md-`	md (Tablet)	≥ 768px
`col-lg-`	lg (Desktop)	≥ 992px
`col-xl-`	xl	≥ 1200px
`col-xxl-`	xxl	≥ 1400px

05

Typography

Text

HTML · Typography Classes

<!-- Headings -->
<h1 class="display-1">Display 1 - ធំខ្លាំង</h1>
<h2 class="display-4">Display 4</h2>

<!-- Text Alignment -->
<p class="text-start">ឈ្មោះខាងឆ្វេង</p>
<p class="text-center">ពាក្យកណ្តាល</p>
<p class="text-end">ខាងស្តាំ</p>

<!-- Text Colors -->
<p class="text-primary">ពណ៌ Primary (ខៀវ)</p>
<p class="text-danger">ពណ៌ Danger (ក្រហម)</p>
<p class="text-success">ពណ៌ Success (បៃតង)</p>
<p class="text-muted">ពណ៌ Muted (ប្រផ្សឹត)</p>

<!-- Font Weight -->
<p class="fw-bold">Bold - ស្រាំង</p>
<p class="fw-light">Light - ស្រាល</p>
<p class="fst-italic">Italic - ទ្រេត</p>

06

Colors & Spacing Utilities

Utilities

Bootstrap មាន Utility Classes សម្រាប់ Margin, Padding, Colors, Display ជាដើម ។

Bootstrap Colors

primary secondary success danger warning info light dark

HTML · Spacing & Colors

<!-- Spacing: m=margin, p=padding -->
<!-- t=top, b=bottom, s=start, e=end, x=left+right, y=top+bottom -->
<!-- 0=0, 1=4px, 2=8px, 3=16px, 4=24px, 5=48px -->

<div class="mt-3">Margin Top 16px</div>
<div class="mb-5">Margin Bottom 48px</div>
<div class="px-4 py-2">Padding X=24px, Y=8px</div>
<div class="p-3 mx-auto">Padding 16px, Center Horizontal</div>

<!-- Background Colors -->
<div class="bg-primary text-white p-3">Blue Background</div>
<div class="bg-success text-white p-3">Green Background</div>
<div class="bg-warning text-dark p-3">Yellow Background</div>

07

Buttons

Components

ឧទាហរណ៍ Buttons

HTML · Buttons

<!-- Button ធម្មតា -->
<button class="btn btn-primary">ចុចខ្ញុំ</button>
<button class="btn btn-danger">លុប</button>
<button class="btn btn-success">រក្សាទុក</button>

<!-- Outline Buttons -->
<button class="btn btn-outline-primary">Outline</button>

<!-- Sizes -->
<button class="btn btn-primary btn-lg">ធំ</button>
<button class="btn btn-primary btn-sm">តូច</button>

<!-- Full Width Button -->
<button class="btn btn-primary w-100">Full Width</button>

<!-- Disabled Button -->
<button class="btn btn-secondary" disabled>Disabled</button>

08

Cards

Components

Card គឺជា component ដ៏ useful ក្នុង Bootstrap — ប្រើសម្រាប់ Products, Articles, Profiles ជាដើម ។

Card Demo

🎓 មេរៀន Bootstrap

Bootstrap ជា CSS Framework ដ៏ពេញនិយម ។

អានបន្ថែម

Card Header

Card Title

Card with header and footer ។

Card Footer

HTML · Cards

<!-- Card ធម្មតា -->
<div class="card">
  <img src="photo.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">ចំណងជើង Card</h5>
    <p class="card-text">នេះជា description ។</p>
    <a href="#" class="btn btn-primary">ចុចនៅទីនេះ</a>
  </div>
</div>

<!-- Card ជាមួយ Header Footer -->
<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Content</div>
  <div class="card-footer">Footer</div>
</div>

09

Navbar

Navigation

Navbar គឺជា navigation bar ដែល Responsive ស្វ័យប្រវត្តិ ។ Mobile នឹងបង្ហាញ Hamburger Button ។

HTML · Responsive Navbar

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container">

    <!-- Logo / Brand -->
    <a class="navbar-brand" href="#">🎓 វេបសាយ</a>

    <!-- Hamburger Button (Mobile) -->
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navMenu">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Nav Links -->
    <div class="collapse navbar-collapse" id="navMenu">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">ទំព័រដើម</a>
        </li>
        <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>

10

Forms

Components

Form Demo

HTML · Forms

<form>
  <!-- Text Input -->
  <div class="mb-3">
    <label class="form-label">ឈ្មោះ</label>
    <input type="text" class="form-control" placeholder="បញ្ចូលឈ្មោះ">
  </div>

  <!-- Email Input -->
  <div class="mb-3">
    <label class="form-label">Email</label>
    <input type="email" class="form-control">
  </div>

  <!-- Textarea -->
  <div class="mb-3">
    <label class="form-label">សារ</label>
    <textarea class="form-control" rows="3"></textarea>
  </div>

  <!-- Select -->
  <div class="mb-3">
    <select class="form-select">
      <option>ជ្រើសរើស</option>
    </select>
  </div>

  <!-- Checkbox -->
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="cb1">
    <label class="form-check-label" for="cb1">ចុចយល់ព្រម</label>
  </div>

  <button type="submit" class="btn btn-primary">ផ្ញើ</button>
</form>

11

Modals (Popup)

JavaScript

Modal Demo

HTML · Modal

<!-- Button ដើម្បីបើក Modal -->
<button class="btn btn-primary"
        data-bs-toggle="modal"
        data-bs-target="#myModal">
  បើក Modal
</button>

<!-- Modal HTML -->
<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">
        <p>Content Modal នៅទីនេះ ។</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">បិទ</button>
        <button class="btn btn-primary">យល់ព្រម</button>
      </div>
    </div>
  </div>
</div>

12

Alerts & Badges

Components

Alerts Demo

✅ ជោគជ័យ! ការដំណើរការបានល្អ ។

❌ Error! មានបញ្ហាកើតឡើង ។

⚠️ ព្រមាន! សូមពិនិត្យម្ដងទៀត ។

ℹ️ ព័ត៌មាន! នេះជា alert ។

Primary 3 ថ្មី 99+ ហ្ស៊ីស

HTML · Alerts & Badges

<!-- Alerts -->
<div class="alert alert-success">ជោគជ័យ!</div>
<div class="alert alert-danger">Error!</div>
<div class="alert alert-warning">ព្រមាន!</div>

<!-- Alert ដែលបិទបានដោយ X -->
<div class="alert alert-info alert-dismissible fade show">
  ព័ត៌មានសំខាន់!
  <button class="btn-close" data-bs-dismiss="alert"></button>
</div>

<!-- Badges -->
<span class="badge bg-primary">ថ្មី</span>
<span class="badge bg-danger rounded-pill">99+</span>

13

Tables

Components

Table Demo

#	ឈ្មោះ	មុខតំណែង	ស្ថានភាព
1	សំបូរ	Developer	Active
2	ចន្ទ្រា	Designer	Pending
3	វណ្ណ	Manager	Inactive

HTML · Tables

<!-- Table Responsive (Mobile-friendly) -->
<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead class="table-dark">
      <tr>
        <th>#</th>
        <th>ឈ្មោះ</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>សំបូរ</td>
        <td>sambor@gmail.com</td>
      </tr>
    </tbody>
  </table>
</div>

14

Flexbox Utilities

កម្រឹតខ្ពស់

Bootstrap ផ្ដល់ Flexbox Utility Classes ដើម្បី Control Layout ដោយងាយ ។

HTML · Flexbox Utils

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

<!-- Flex Classes -->
<!-- justify-content: start | end | center | between | around | evenly -->
<!-- align-items: start | end | center | baseline | stretch -->
<!-- flex-wrap: wrap | nowrap | wrap-reverse -->

<div class="d-flex flex-wrap gap-3">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Stack Vertical on Mobile, Horizontal on Desktop -->
<div class="d-flex flex-column flex-md-row gap-2">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-secondary">Button 2</button>
</div>

15

Responsive Design

Mobile First

Mobile First Philosophy

Bootstrap ប្រើ Mobile First — ដែលមានន័យថា Design Mobile មុន រួចហើយ Scale ឡើងទៅ Desktop ។

HTML · Responsive Patterns

<!-- ===== Responsive Grid ===== -->
<div class="row g-3">
  <!-- Mobile: Full | Tablet: Half | Desktop: 1/3 -->
  <div class="col-12 col-md-6 col-lg-4">Card 1</div>
  <div class="col-12 col-md-6 col-lg-4">Card 2</div>
  <div class="col-12 col-md-12 col-lg-4">Card 3</div>
</div>

<!-- ===== Show/Hide ===== -->
<p class="d-block d-md-none">🔴 Mobile ប៉ុណ្ណោះ</p>
<p class="d-none d-md-block">🟢 Desktop ប៉ុណ្ណោះ</p>

<!-- ===== Responsive Font Size ===== -->
<h1 class="fs-1 fs-md-4">Responsive Text</h1>

<!-- ===== Responsive Spacing ===== -->
<div class="p-2 p-md-4 p-lg-5">
  Padding ផ្លាស់ប្ដូរតាម Device
</div>

16

Carousel (Slideshow)

JavaScript

Carousel Demo

Slide 1

ចំណងជើង Slide ទីមួយ

Slide 2

ចំណងជើង Slide ទីពីរ

Slide 3

ចំណងជើង Slide ទីបី

HTML · 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" alt="slide 1">
    </div>
    <div class="carousel-item">
      <img src="slide2.jpg" class="d-block w-100" alt="slide 2">
    </div>
  </div>
  <!-- Previous Button -->
  <button class="carousel-control-prev"
          data-bs-target="#myCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <!-- Next Button -->
  <button class="carousel-control-next"
          data-bs-target="#myCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

17

Custom CSS + Bootstrap

កម្រឹតខ្ពស់

អ្នកអាចបន្ថែម CSS ផ្ទាល់ខ្លួន ដើម្បី Override Bootstrap styles ។

HTML + CSS · Customization

<head>
  <!-- Bootstrap CSS ដំបូង -->
  <link href="bootstrap.min.css" rel="stylesheet">
  <!-- Custom CSS ក្រោយ (override Bootstrap) -->
  <style>
    /* Custom Button Color */
    .btn-kh {
      background-color: #b22222;
      color: white;
      border-radius: 50px;
      padding: 10px 30px;
      font-weight: bold;
    }
    .btn-kh:hover {
      background-color: #8b0000;
      color: white;
    }

    /* Custom Card */
    .card-custom {
      border: none;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      border-radius: 16px;
      transition: transform 0.3s;
    }
    .card-custom:hover {
      transform: translateY(-5px);
    }

    /* CSS Variables override */
    :root {
      --bs-primary: #b22222; /* ប្ដូរពណ៌ primary */
      --bs-border-radius: 12px;
    }
  </style>
</head>

18

🌟 Project លំហាត់ — Landing Page

ជាក់ស្ដែង

ឥឡូវនេះអ្នកបានរៀនគ្រប់ Component ហើយ — សូមបង្កើត Landing Page ពេញ !

Project: Website ក្រុមហ៊ុន

បង្កើត Landing Page ដែលមាន Navbar, Hero Section, Cards ផ្សព្វផ្សាយ, Form ទំនាក់ទំនង, និង Footer ។

HTML · Landing Page Project

<!DOCTYPE html>
<html lang="km">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ក្រុមហ៊ុន KH Tech</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .hero-section {
      background: linear-gradient(135deg, #1a237e, #283593);
      color: white; padding: 100px 0;
    }
    .service-card:hover {
      transform: translateY(-8px);
      transition: 0.3s; box-shadow: 0 15px 30px rgba(0,0,0,.1);
    }
  </style>
</head>
<body>

<!-- ===== NAVBAR ===== -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
  <div class="container">
    <a class="navbar-brand fw-bold" href="#">🚀 KH Tech</a>
    <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav">
      <ul class="navbar-nav ms-auto gap-2">
        <li class="nav-item"><a class="nav-link" href="#services">សេវាកម្ម</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">ទំនាក់ទំនង</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- ===== HERO ===== -->
<section class="hero-section text-center">
  <div class="container">
    <h1 class="display-4 fw-bold">សុស្វាគម KH Tech</h1>
    <p class="lead mb-4">ដំណោះស្រាយ IT ល្អបំផុតក្នុងកម្ពុជា</p>
    <a href="#contact" class="btn btn-warning btn-lg px-5">ទំនាក់ទំនងឥឡូវ</a>
  </div>
</section>

<!-- ===== SERVICES ===== -->
<section id="services" class="py-5">
  <div class="container">
    <h2 class="text-center mb-4">សេវាកម្មរបស់យើង</h2>
    <div class="row g-4">
      <div class="col-12 col-md-4">
        <div class="card service-card text-center p-4">
          <div class="fs-1 mb-3">💻</div>
          <h5>Web Development</h5>
          <p class="text-muted">បង្កើត Website ស្អាត Responsive</p>
        </div>
      </div>
      <!-- ...cards ផ្សេងៗ -->
    </div>
  </div>
</section>

<!-- ===== FOOTER ===== -->
<footer class="bg-dark text-white text-center py-4">
  <p class="mb-0">© 2025 KH Tech ។ រក្សាសិទ្ធគ្រប់យ៉ាង ។</p>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

🎉 អបអរសាទរ! អ្នកបានបញ្ចប់មេរៀន Bootstrap ហើយ!

ឥឡូវ សូម Practice ជារៀងរាល់ថ្ងៃ — ចំណេះដឹង Bootstrap នឹងក្លាយជា Skill ដ៏ មានតម្លៃសម្រាប់ Career Web Developer !

🎓 Bootstrap ភាសាខ្មែរ

រៀន Bootstrap ពីដំបូង
រហូតដល់ប្រើប្រាស់ជាក់ស្តែង

Bootstrap គឺជាអ្វី?

រៀបចំ Bootstrap (Setup)

Containers

Grid System

Typography

Colors & Spacing Utilities

Buttons

Cards

🎓 មេរៀន Bootstrap

Card Title

Navbar

Forms

Modals (Popup)

Alerts & Badges

Tables

Flexbox Utilities

Responsive Design

Carousel (Slideshow)

Slide 1

Slide 2

Slide 3

Custom CSS + Bootstrap

🌟 Project លំហាត់ — Landing Page

🎓 Bootstrap ភាសាខ្មែរ

រៀន Bootstrap ពីដំបូងរហូតដល់ប្រើប្រាស់ជាក់ស្តែង

Bootstrap គឺជាអ្វី?

រៀបចំ Bootstrap (Setup)

Containers

Grid System

Typography

Colors & Spacing Utilities

Buttons

Cards

🎓 មេរៀន Bootstrap

Card Title

Navbar

Forms

Modals (Popup)

🎉 Modal Title

Alerts & Badges

Tables

Flexbox Utilities

Responsive Design

Carousel (Slideshow)

Slide 1

Slide 2

Slide 3

Custom CSS + Bootstrap

🌟 Project លំហាត់ — Landing Page

រៀន Bootstrap ពីដំបូង
រហូតដល់ប្រើប្រាស់ជាក់ស្តែង