ទំព័រដំបូង
គឺជាទំព័រដាច់ដោយឡែកមួយដែលមានភាពខុសប្លែកពីគេហទំព័រដទៃទៀតរួមទាំងទំព័រដើមដែលបម្រើដល់គោលបំណងឬសកម្មភាពជាក់លាក់។
ឧទាហរណ៍
<div style="background-color: white">
<!-- Main Nav component -->
<nav class="cgds navbar flex-column navbar-expand-lg">
<header class="container d-flex flex-nowrap p-0">
<div
class="w-100 d-flex align-items-center justify-content-between px-4 px-md-5 py-4 py-sm-6 py-md-3 py-lg-4">
<a class="navbar-brand d-flex justify-content-start" href="#">
<img src="/assets/uncompressed_images/rachana.svg" alt="Home" height="80">
</a>
</div>
<div class="d-flex align-items-center me-5">
<nav class="social d-flex me-3">
<ul id="menu-social-menu" class="d-flex">
<li class="nav-icon-social">
<a class="nav-link" aria-current="page" href="">
<i class="bi bi-github" target="_blank" style="line-height: 1;"></i>
</a>
</li>
</ul>
</nav>
<div class="d-flex flag-icon text-center me-2">
<a role="button" class="cgds btn" href=""><img
src="/assets/uncompressed_images/cambodia-flag-icon.svg" width="32px" height="24px" alt="Home">
</a>
</div>
<nav class="social d-lg-block me-1">
<ul id="menu-social-menu" class="d-flex">
<li class="nav-icon-social">
<span class="cgds-line"></span>
</li>
</ul>
</nav>
<ul class="navbar-nav">
<li class="nav-item align-self-center">
<a class="cgds btn-gt" aria-current="page" href="">ចូលគណនី</a>
</li>
</ul>
<div class="mobile-toggle d-flex align-items-center d-lg-none">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavExample1" aria-controls="navbarNavExample1" aria-expanded="false"
aria-label="Toggle navigation">
<i class="bi bi-list"></i>
</button>
</div>
</div>
</header>
<div class="px-4 px-md-5">
<div class="collapse navbar-collapse px-4 px-md-5" id="navbarNavExample1">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">ទំព័រដើម</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="">បញ្ជាប់</a>
</li>
<li class="nav-item cgds dropdown">
<a class="nav-link cgds dropdown-toggle" href="" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
ទម្លាក់ចុះ <i class="bi bi-chevron-down"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="">សកម្មភាព</a></li>
<li><a class="dropdown-item" href="">សកម្មភាពមួយទៀត</a></li>
<li><a class="dropdown-item" href="">អ្វីមួយ</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="">បញ្ជាប់ដាច់ដោយឡែក</a></li>
</ul>
</li>
<li class="nav-item cgds dropdown has-megamenu">
<a class="nav-link cgds dropdown-toggle" href="#" id="megamenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
បណ្តុំបញ្ជី<i class="bi bi-chevron-down"></i>
</a>
<div class="dropdown-menu megamenu p-3" aria-labelledby="megamenu">
<div class="d-flex justify-content-start">
<div>
<b>សហការបង្កើតដំណោះស្រាយឌីជីថលប្រកបដោយភាពច្នៃប្រឌិតជាមួយរដ្ឋាភិបាល</b>
<p>ស្វែងរកព្រឹត្តិការណ៍ ប្លុក បច្ចេកវិទ្យាប្រភពបើកចំហ និងឱកាសសហការផ្សេងទៀត។</p>
</div>
<div>
<a class="dropdown-item" href="">លក្ខណៈពិសេស</a>
<a class="dropdown-item" href="">លក្ខណៈពិសេស</a>
<a class="dropdown-item" href="">លក្ខណៈពិសេស</a>
</div>
<div>
<a class="dropdown-item" href="#">លក្ខណៈពិសេស</a>
<a class="dropdown-item" href="#">លក្ខណៈពិសេស</a>
<a class="dropdown-item" href="#">លក្ខណៈពិសេស</a>
</div>
<div>
<a class="dropdown-item" href="#">លក្ខណៈពិសេស</a>
<a class="dropdown-item" href="#">លក្ខណៈពិសេស</a>
<a class="dropdown-item" href="#">លក្ខណៈពិសេស</a>
</div>
</div>
</div>
</li>
</ul>
<div class="search-bar d-flex align-items-center ms-auto">
<form class="w-100" action="">
<div class="search-wrapper d-flex ps-2">
<input type="text">
<button>
<i class="bi bi-search" target="_blank"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</nav>
<!-- Content section -->
<section class="m-8">
<h4>ដាក់មាតិការបស់អ្នកនៅទីនេះ</h4>
</section>
<!-- Footer component -->
<footer class="cgds footer">
<section class="footer-top">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="widget flex-column">
<div class="logo">
<img src="/assets/uncompressed_images/rachana.svg" style="width: 170px"
alt="dgc logo">
</div>
<div class="social-icon">
<ul>
<li>
<a href="">
<img src="/assets/uncompressed_images/icon/Facebook.svg" alt="facebook-icon">
</a>
</li>
<li>
<a href="">
<img src="/assets/uncompressed_images/icon/YouTube.svg" alt="youtube-icon">
</a>
</li>
<li>
<a href="">
<img src="/assets/uncompressed_images/icon/Telegram.svg" alt="telegram-icon">
</a>
</li>
<li>
<a href="">
<img src="/assets/uncompressed_images/icon/Tiktok.svg" alt="tiktok-icon">
</a>
</li>
<li>
<a href="">
<img src="/assets/uncompressed_images/icon/Linkin.svg" alt="linkin-icon">
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="title">
ជួរទី១
</div>
<ul class="links">
<li><a href="">អំពីយើង</a></li>
<li><a href="">អក្សរនេះសម្រាប់មើលតេស្ត</a></li>
<li><a href="">តេស្ត</a></li>
<li><a href="">តេស្ត</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="title">
ជួរទី២
</div>
<ul class="links">
<li><a href="">អំពីយើង</a></li>
<li><a href="">អក្សរនេះសម្រាប់មើលតេស្ត</a></li>
<li><a href="">តេស្ត</a></li>
<li><a href="">តេស្ត</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="title">
ជួរទី៣
</div>
<ul class="links">
<li><a href="">អំពីយើង</a></li>
<li><a href="">អក្សរនេះសម្រាប់មើលតេស្ត</a></li>
<li><a href="">តេស្ត</a></li>
<li><a href="">តេស្ត</a></li>
</ul>
</div>
</div>
</div>
</section>
<section class="footer-bottom">
<div class="container-fluid">
<div class="row footer-copyrights">
<div class="col">
<div class="d-flex justify-content-lg-start text-start">
DGC © 2023 ~ រក្សាសិទ្ធិដោយគណៈកម្មាធិការរដ្ឋាភិបាលឌីជីថល
</div>
</div>
<div class="col">
<dev class="d-flex justify-content-lg-end text-end">
<ul>
<li><a href="" target="_blank"
rel="noopener noreferrer">រាយការណ៍ពីភាពខ្វះខាត</a></li>
<li><a href="">ឯកជនភាព</a></li>
<li><a href="">លក្ខខណ្ឌនៃប្រើប្រាស់</a></li>
</ul>
</dev>
</div>
</div>
</div>
</section>
</footer>
</div>