ផ្ទាំង

 
<ul class="cgds nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab"
            aria-controls="home" aria-selected="true">ទំព័រដើម</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab"
            aria-controls="profile" aria-selected="false">ប្រវត្តិរូប</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab"
            aria-controls="contact" aria-selected="false">លេខទាក់ទង</button>
  </li>
</ul>
<div class="cgds tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    នេះគ្រាន់តែជាអក្សរឧទាហរណ៍សម្រាប់ដាក់បំពេញចន្លោះទទេរឱ្យទំព័រនេះមើលទៅឃើញស្អាតតែប៉ុំណ្ណោះ។</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    នេះគ្រាន់តែជាអក្សរឧទាហរណ៍សម្រាប់ដាក់បំពេញចន្លោះទទេរឱ្យទំព័រនេះមើលទៅឃើញស្អាតតែប៉ុំណ្ណោះ។</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
    នេះគ្រាន់តែជាអក្សរឧទាហរណ៍សម្រាប់ដាក់បំពេញចន្លោះទទេរឱ្យទំព័រនេះមើលទៅឃើញស្អាតតែប៉ុំណ្ណោះ។</div>
</div>

        

 
<!-- Add variant="tabs-basic-toggle" -->
<ul class="cgds nav nav-tabs" id="myTab" role="tablist" variant="tabs-basic-toggle">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home1" type="button" role="tab"
            aria-controls="home" aria-selected="true"><i class="bi bi-house left"></i>ទំព័រដើម</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile1" type="button" role="tab"
            aria-controls="profile" aria-selected="false">
      ប្រវត្តិរូប
      <span class="cgds badge bg-light text-dark right">99</span>
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact1" type="button" role="tab"
            aria-controls="contact" aria-selected="false">លេខទាក់ទង<i class="bi bi-telephone right"></i></button>
  </li>
</ul>
<div class="cgds tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home1" role="tabpanel" aria-labelledby="home-tab">
    <p>នេះគ្រាន់តែជាអក្សរឧទាហរណ៍សម្រាប់ដាក់បំពេញចន្លោះទទេរឱ្យទំព័រនេះមើលទៅឃើញស្អាតតែប៉ុំណ្ណោះ។</p>
  </div>
  <div class="tab-pane fade" id="profile1" role="tabpanel" aria-labelledby="profile-tab">
    <table class="table">
      <caption>ប្រវត្តិរូប</caption>
      <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">គោត្តនាម</th>
        <th scope="col">នាម</th>
        <th scope="col">បញ្ជាប់</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <th scope="row">1</th>
        <td>ចន្ទ</td>
        <td>សុមន្ថា</td>
        <td>@smt</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>សុខ</td>
        <td>មាលតី</td>
        <td>@md</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td colspan="2">កូនបក្សីតូច</td>
        <td>@swift</td>
      </tr>
      </tbody>
    </table>
  </div>
  <div class="tab-pane fade" id="contact1" role="tabpanel" aria-labelledby="contact-tab">
    នេះគ្រាន់តែជាអក្សរឧទាហរណ៍សម្រាប់ដាក់បំពេញចន្លោះទទេរឱ្យទំព័រនេះមើលទៅឃើញស្អាតតែប៉ុំណ្ណោះ។</div>
</div>

        

 
<!-- Add variant="tabs-info-toggle" -->
<ul class="cgds nav nav-tabs" id="myTab" role="tablist" variant="tabs-info-toggle">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab2" data-bs-toggle="tab" data-bs-target="#home2" type="button" role="tab"
            aria-controls="home" aria-selected="true">
      <!-- Add has-icon for label if icon is included -->
      <div class="tabs-info-label has-icon">
        <i class="bi bi-house"></i>
        ទំព័រដើម
      </div>
      <div class="tabs-info-count">99</div>
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab2" data-bs-toggle="tab" data-bs-target="#profile2" type="button" role="tab"
            aria-controls="profile" aria-selected="true">
      <div class="tabs-info-label">
        ប្រវត្តិរូប
      </div>
      <div class="tabs-info-count">99</div>
    </button>
  </li>
</ul>
<div class="cgds tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home2" role="tabpanel" aria-labelledby="home-tab">
    <p>នេះគ្រាន់តែជាអក្សរឧទាហរណ៍សម្រាប់ដាក់បំពេញចន្លោះទទេរឱ្យទំព័រនេះមើលទៅឃើញស្អាតតែប៉ុំណ្ណោះ។</p>
  </div>
  <div class="tab-pane fade" id="profile2" role="tabpanel" aria-labelledby="profile-tab">
    <table class="table">
      <caption>ប្រវត្តិរូប</caption>
      <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">គោត្តនាម</th>
        <th scope="col">នាម</th>
        <th scope="col">បញ្ជាប់</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <th scope="row">1</th>
        <td>សុមន្ថា</td>
        <td>ចន្ទ</td>
        <td>@smt</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>សុខ</td>
        <td>មាលតី</td>
        <td>@md</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td colspan="2">កូនបក្សីតូច</td>
        <td>@swift</td>
      </tr>
      </tbody>
    </table>
  </div>
</div>