រំលងទៅមាតិកាសំខាន់ រំលងទៅការរុករកឯកសារ
in English

កាត

កាតរបស់ Bootstrap ផ្តល់នូវធុងមាតិកាដែលអាចបត់បែនបាន និងអាចពង្រីកបានជាមួយនឹងជម្រើស និងជម្រើសជាច្រើន។

អំពី

កាត គឺជាធុងផ្ទុកមាតិកាដែលអាចបត់បែនបាន និងអាចពង្រីកបាន វារួមបញ្ចូលជម្រើសសម្រាប់បឋមកថា និងបាតកថា មាតិកាចម្រុះពណ៌ផ្ទៃខាងក្រោយបរិបទ និងជម្រើសបង្ហាញដ៏មានឥទ្ធិពល។ ប្រសិនបើអ្នកស្គាល់ Bootstrap 3 នោះកាតជំនួសបន្ទះចាស់ អណ្តូង និងរូបភាពតូចៗរបស់យើង។ មុខងារស្រដៀងគ្នាទៅនឹងសមាសធាតុទាំងនោះមានជាថ្នាក់កែប្រែសម្រាប់កាត។

ឧទាហរណ៍

កាតត្រូវបានបង្កើតឡើងជាមួយនឹងការសម្គាល់ និងរចនាប័ទ្មតិចតួចតាមដែលអាចធ្វើទៅបាន ប៉ុន្តែនៅតែគ្រប់គ្រងដើម្បីផ្តល់នូវការគ្រប់គ្រង និងការប្ដូរតាមបំណងជាច្រើន។ បង្កើតឡើងដោយ flexbox ពួកគេផ្តល់នូវការតម្រឹមយ៉ាងងាយស្រួល និងលាយបញ្ចូលគ្នាយ៉ាងល្អជាមួយសមាសធាតុ Bootstrap ផ្សេងទៀត។ ពួកវាមិនមាន marginតាមលំនាំដើមទេ ដូច្នេះសូមប្រើ ឧបករណ៍ប្រើប្រាស់គម្លាត តាមតម្រូវការ។

ខាងក្រោមនេះជាឧទាហរណ៍នៃកាតមូលដ្ឋានដែលមានខ្លឹមសារចម្រុះ និងទទឹងថេរ។ កាតមិនមានទទឹងថេរដើម្បីចាប់ផ្តើមទេ ដូច្នេះពួកវានឹងបំពេញទទឹងពេញលេញនៃធាតុមេរបស់វា។ នេះត្រូវបានប្ដូរតាមបំណងយ៉ាងងាយស្រួលជាមួយនឹង ជម្រើសទំហំ ផ្សេងៗរបស់យើង ។

Placeholder Image cap
ចំណងជើងកាត

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

ទៅកន្លែងណាមួយ។
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ប្រភេទមាតិកា

កាតគាំទ្រមាតិកាជាច្រើន រួមទាំងរូបភាព អត្ថបទ បញ្ជីក្រុម តំណភ្ជាប់ និងច្រើនទៀត។ ខាងក្រោមនេះជាឧទាហរណ៍នៃអ្វីដែលបានគាំទ្រ។

រាងកាយ

ប្លុកអគារនៃកាតគឺ .card-body. ប្រើវានៅពេលណាដែលអ្នកត្រូវការផ្នែកទ្រនាប់នៅក្នុងកាត។

នេះគឺជាអត្ថបទមួយចំនួននៅក្នុងតួកាត។
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

ចំណងជើងកាតត្រូវបានប្រើដោយបន្ថែម .card-titleទៅ <h*>ស្លាក។ តាមរបៀបដូចគ្នា តំណភ្ជាប់ត្រូវបានបន្ថែម និងដាក់នៅជាប់គ្នាដោយបន្ថែម .card-linkទៅ <a>ស្លាក។

ចំណង​ជើង​រង​ត្រូវ​បាន​ប្រើ​ដោយ​បន្ថែម​សញ្ញា​មួយ .card-subtitle​ទៅ <h*>​ស្លាក។ ប្រសិនបើ ធាតុ .card-titleនិង .card-subtitleវត្ថុត្រូវបានដាក់ក្នុង .card-bodyធាតុមួយ ចំណងជើងកាត និងចំណងជើងរងត្រូវបានតម្រឹមយ៉ាងស្អាត។

ចំណងជើងកាត
ចំណងជើងរងកាត

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

តំណភ្ជាប់កាត តំណភ្ជាប់ មួយទៀត
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

រូបភាព

.card-img-topដាក់រូបភាពមួយទៅកំពូលនៃកាត។ ជាមួយ .card-textអត្ថបទអាចត្រូវបានបន្ថែមទៅកាត។ អត្ថបទនៅខាងក្នុង .card-textក៏អាចត្រូវបានកំណត់រចនាប័ទ្មជាមួយស្លាក HTML ស្តង់ដារផងដែរ។

Placeholder Image cap

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

រាយក្រុម

បង្កើតបញ្ជីមាតិកានៅក្នុងកាតដែលមានក្រុមបញ្ជីរ។

  • ធាតុមួយ។
  • ធាតុទីពីរ
  • ធាតុទីបី
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
លក្ខណៈពិសេស
  • ធាតុមួយ។
  • ធាតុទីពីរ
  • ធាតុទីបី
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • ធាតុមួយ។
  • ធាតុទីពីរ
  • ធាតុទីបី
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

លិចផ្ទះបាយ

លាយ និងផ្គូផ្គងប្រភេទមាតិកាជាច្រើនដើម្បីបង្កើតកាតដែលអ្នកត្រូវការ ឬបោះអ្វីគ្រប់យ៉ាងនៅទីនោះ។ បង្ហាញខាងក្រោមគឺជារចនាប័ទ្មរូបភាព ប្លុក រចនាប័ទ្មអត្ថបទ និងក្រុមបញ្ជី - ទាំងអស់ត្រូវបានរុំដោយកាតទទឹងថេរ។

Placeholder Image cap
ចំណងជើងកាត

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

  • ធាតុមួយ។
  • ធាតុទីពីរ
  • ធាតុទីបី
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

បន្ថែមបឋមកថាស្រេចចិត្ត និង/ឬបាតកថាក្នុងកាត។

លក្ខណៈពិសេស
ការព្យាបាលចំណងជើងពិសេស

ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។

ទៅកន្លែងណាមួយ។
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ក្បាលកាតអាចត្រូវបានកំណត់រចនាប័ទ្មដោយបន្ថែម .card-headerទៅ <h*>ធាតុ។

លក្ខណៈពិសេស
ការព្យាបាលចំណងជើងពិសេស

ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។

ទៅកន្លែងណាមួយ។
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
សម្រង់

សម្រង់​សម្រង់​ល្បី​មួយ​ដែល​មាន​នៅ​ក្នុង​ធាតុ​សម្រង់​ប្លុក។

នរណាម្នាក់ដែលល្បីល្បាញនៅក្នុង ចំណងជើងប្រភព
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
លក្ខណៈពិសេស
ការព្យាបាលចំណងជើងពិសេស

ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។

ទៅកន្លែងណាមួយ។
<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

ទំហំ

កាតសន្មត់ថាមិនជាក់លាក់ widthដើម្បីចាប់ផ្តើមទេ ដូច្នេះពួកវានឹងធំទូលាយ 100% លុះត្រាតែមានចែងផ្សេងពីនេះ។ អ្នកអាចផ្លាស់ប្តូរវាបានតាមតម្រូវការដោយប្រើ CSS ផ្ទាល់ខ្លួន ថ្នាក់ក្រឡាចត្រង្គ ក្រឡាចត្រង្គ Sass mixins ឬឧបករណ៍ប្រើប្រាស់។

ដោយប្រើការសម្គាល់ក្រឡាចត្រង្គ

ដោយប្រើក្រឡាចត្រង្គ រុំសន្លឹកបៀជាជួរ និងជួរតាមតម្រូវការ។

ការព្យាបាលចំណងជើងពិសេស

ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។

ទៅកន្លែងណាមួយ។
ការព្យាបាលចំណងជើងពិសេស

ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។

ទៅកន្លែងណាមួយ។
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

ការប្រើប្រាស់ឧបករណ៍ប្រើប្រាស់

ប្រើ ឧបករណ៍ប្រើប្រាស់ទំហំដែលមានស្រាប់ របស់យើងមួយចំនួន ដើម្បីកំណត់ទទឹងរបស់កាតយ៉ាងរហ័ស។

ចំណងជើងកាត

ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។

ប៊ូតុង
ចំណងជើងកាត

ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។

ប៊ូតុង
<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

ការប្រើប្រាស់ CSS ផ្ទាល់ខ្លួន

ប្រើ CSS ផ្ទាល់ខ្លួននៅក្នុងសន្លឹករចនាប័ទ្មរបស់អ្នក ឬជារចនាប័ទ្មក្នុងបន្ទាត់ដើម្បីកំណត់ទទឹង។

ការព្��ាបាលចំណងជើងពិសេស

ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។

ទៅកន្លែងណាមួយ។
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ការតម្រឹមអត្ថបទ

អ្នកអាចផ្លាស់ប្តូរការតម្រឹមអត្ថបទនៃកាតណាមួយបានយ៉ាងឆាប់រហ័ស — នៅក្នុងផ្នែកទាំងមូល ឬផ្នែកជាក់លាក់របស់វា — ជាមួយនឹង ថ្នាក់តម្រឹមអត្ថបទ របស់យើង ។

ការព្យាបាលចំណងជើងពិសេស

ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។

ទៅកន្លែងណាមួយ។
ការព្យាបាលចំណងជើងពិសេស

ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។

ទៅកន្លែងណាមួយ។
ការព្យាបាលចំណងជើងពិសេស

ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។

ទៅកន្លែងណាមួយ។
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

បន្ថែមការរុករកខ្លះទៅបឋមកថារបស់កាត (ឬប្លុក) ជាមួយនឹង សមាសធាតុ nav របស់ Bootstrap ។

ការព្យាបាលចំណងជើងពិសេស

ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។

ទៅកន្លែងណាមួយ។
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
ការព្យាបាលចំណងជើងពិសេស

ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។

ទៅកន្លែងណាមួយ។
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

រូបភាព

កាតរួមបញ្ចូលជម្រើសមួយចំនួនសម្រាប់ធ្វើការជាមួយរូបភាព។ ជ្រើសរើសពីផ្នែកបន្ថែម "មួករូបភាព" នៅខាងចុងនៃកាត ការលាបលើរូបភាពជាមួយនឹងមាតិកាកាត ឬគ្រាន់តែបង្កប់រូបភាពនៅក្នុងកាត។

មួករូបភាព

ស្រដៀងទៅនឹងបឋមកថា និងបាតកថា កាតអាចរួមបញ្ចូល "មួករូបភាព" ផ្នែកខាងលើ និងខាងក្រោម — រូបភាពនៅផ្នែកខាងលើ ឬខាងក្រោមនៃកាត។

Placeholder Image cap
ចំណងជើងកាត

នេះ​គឺ​ជា​កាត​ធំ​ជាង​មុន​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។

អាប់ដេតចុងក្រោយ 3 នាទីមុន។

ចំណងជើងកាត

នេះ​គឺ​ជា​កាត​ធំ​ជាង​មុន​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។

អាប់ដេតចុងក្រោយ 3 នាទីមុន។

Placeholder Image cap
<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

ការលាបលើរូបភាព

ប្រែក្លាយរូបភាពទៅជាផ្ទៃខាងក្រោយកាត ហើយលាបលើអត្ថបទកាតរបស់អ្នក។ អាស្រ័យលើរូបភាព អ្នកអាច ឬមិនត្រូវការរចនាប័ទ្ម ឬឧបករណ៍ប្រើប្រាស់បន្ថែម។

Placeholder Card image
ចំណងជើងកាត

នេះ​គឺ​ជា​កាត​ធំ​ជាង​មុន​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។

អាប់ដេតចុងក្រោយ 3 នាទីមុន។

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>
ចំណាំថាមាតិកាមិនគួរធំជាងកម្ពស់នៃរូបភាពទេ។ ប្រសិនបើខ្លឹមសារធំជាងរូបភាព ខ្លឹមសារនឹងត្រូវបានបង្ហាញនៅខាងក្រៅរូបភាព។

ផ្ដេក

ដោយប្រើការរួមបញ្ចូលគ្នានៃថ្នាក់ក្រឡាចត្រង្គ និងឧបករណ៍ប្រើប្រាស់ កាតអាចត្រូវបានបង្កើតជាផ្ដេកតាមរបៀបដែលងាយស្រួលប្រើ និងឆ្លើយតបទៅនឹងឧបករណ៍ចល័ត។ ក្នុងឧទាហរណ៍ខាងក្រោម យើងដកក្រឡាចត្រង្គចេញជាមួយ .g-0និងប្រើ .col-md-*ថ្នាក់ដើម្បីធ្វើឱ្យកាតផ្ដេកនៅ mdចំណុចឈប់។ ប្រហែលជាត្រូវការការកែតម្រូវបន្ថែម អាស្រ័យលើខ្លឹមសារកាតរបស់អ្នក។

Placeholder Image
ចំណងជើងកាត

នេះ​គឺ​ជា​កាត​ធំ​ជាង​មុន​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។

អាប់ដេតចុងក្រោយ 3 នាទីមុន។

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

រចនាប័ទ្មកាត

កាតរួមមានជម្រើសផ្សេងៗសម្រាប់ប្ដូរផ្ទៃខាងក្រោយ ស៊ុម និងពណ៌របស់វា។

ផ្ទៃខាងក្រោយនិងពណ៌

ប្រើ ពណ៌អត្ថបទ និង ឧបករណ៍ប្រើប្រាស់ផ្ទៃខាងក្រោយ ដើម្បីផ្លាស់ប្តូររូបរាងរបស់កាត។

បឋមកថា
ចំណងជើងកាតបឋម

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

បឋមកថា
ចំណងជើងប័ណ្ណបន្ទាប់បន្សំ

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

បឋមកថា
ចំណងជើងប័ណ្ណជោគជ័យ

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

បឋមកថា
ចំណងជើងប័ណ្ណគ្រោះថ្នាក់

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

បឋមកថា
ចំណងជើងប័ណ្ណព្រមាន

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

បឋមកថា
ចំណងជើងប័ណ្ណព័ត៌មាន

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

បឋមកថា
ចំណងជើងកាតពន្លឺ

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

បឋមកថា
ចំណងជើងកាតងងឹត

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
ការ​បង្ហាញ​អត្ថន័យ​ទៅ​កាន់​បច្ចេកវិទ្យា​ជំនួយ

ការប្រើពណ៌ដើម្បីបន្ថែមអត្ថន័យផ្តល់នូវការចង្អុលបង្ហាញដែលមើលឃើញតែប៉ុណ្ណោះ ដែលនឹងមិនត្រូវបានបញ្ជូនទៅកាន់អ្នកប្រើប្រាស់នៃបច្ចេកវិទ្យាជំនួយ ដូចជាកម្មវិធីអានអេក្រង់ជាដើម។ ត្រូវប្រាកដថាព័ត៌មានដែលតំណាងដោយពណ៌គឺច្បាស់ពីខ្លឹមសារខ្លួនវា (ឧ. អត្ថបទដែលមើលឃើញ) ឬត្រូវបានរួមបញ្ចូលតាមរយៈមធ្យោបាយជំនួស ដូចជាអត្ថបទបន្ថែមដែលលាក់ជាមួយ .visually-hiddenថ្នាក់។

ព្រំដែន

ប្រើ ឧបករណ៍ប្រើប្រាស់ព្រំដែន ដើម្បីផ្លាស់ប្តូរគ្រាន់តែ border-colorកាត។ ចំណាំថាអ្នកអាចដាក់ .text-{color}ថ្នាក់នៅលើមេ .cardឬសំណុំរងនៃមាតិការបស់កាតដូចបានបង្ហាញខាងក្រោម។

បឋមកថា
ចំណងជើងកាតបឋម

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

បឋមកថា
ចំណងជើងប័ណ្ណបន្ទាប់បន្សំ

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

បឋមកថា
ចំណងជើងប័ណ្ណជោគជ័យ

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

បឋមកថា
ចំណងជើងប័ណ្ណគ្រោះថ្នាក់

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

បឋមកថា
ចំណងជើងប័ណ្ណព្រមាន

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

បឋមកថា
ចំណងជើងប័ណ្ណព័ត៌មាន

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

បឋមកថា
ចំណងជើងកាតពន្លឺ

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

បឋមកថា
ចំណងជើងកាតងងឹត

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

ឧបករណ៍ប្រើប្រាស់ Mixins

អ្នកក៏អាចផ្លាស់ប្តូរស៊ុមនៅលើបឋមកថា និងបាតកថាកាតតាមតម្រូវការ ហើយថែមទាំងលុបពួកវាចេញ background-colorជាមួយ .bg-transparent.

បឋមកថា
ចំណងជើងប័ណ្ណជោគជ័យ

អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

ប្លង់កាត

បន្ថែមពីលើការកំណត់រចនាប័ទ្មមាតិកានៅក្នុងសន្លឹកបៀ Bootstrap រួមបញ្ចូលជម្រើសមួយចំនួនសម្រាប់ការដាក់ចេញស៊េរីកាត។ សម្រាប់ពេលនេះ ជម្រើសប្លង់ទាំងនេះមិនទាន់ឆ្លើយតបនៅឡើយ

ក្រុមកាត

ប្រើក្រុមកាតដើម្បីបង្ហាញកាតជាធាតុភ្ជាប់តែមួយដែលមានទទឹង និងកម្ពស់ស្មើគ្នា។ ក្រុមកាតចាប់ផ្តើមបិទជាជង់ ហើយប្រើ display: flex;ដើម្បីភ្ជាប់ជាមួយនឹងវិមាត្រឯកសណ្ឋាន���ាប់ផ្តើមពី smចំណុចឈប់។

Placeholder Image cap
ចំណងជើងកាត

នេះ​គឺ​ជា​កាត​ធំ​ជាង​មុន​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។

អាប់ដេតចុងក្រោយ 3 នាទីមុន។

Placeholder Image cap
ចំណងជើងកាត

កាតនេះមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។

អាប់ដេតចុងក្រោយ 3 នាទីមុន។

Placeholder Image cap
ចំណងជើងកាត

នេះ​គឺ​ជា​កាត​ធំ​ជាង​មុន​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។ កាតនេះមានខ្លឹមសារវែងជាងដំបូង ដើម្បីបង្ហាញសកម្មភាពកម្ពស់ស្មើគ្នានោះ។

អាប់ដេតចុងក្រោយ 3 នាទីមុន។

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

នៅពេលប្រើក្រុមកាតដែលមានបាតកថា មាតិការបស់ពួកគេនឹងតម្រង់ជួរដោយស្វ័យប្រវត្តិ។

Placeholder Image cap
ចំណងជើងកាត

នេះ​គឺ​ជា​កាត​ធំ​ជាង​មុន​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។

Placeholder Image cap
ចំណងជើងកាត

កាតនេះមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។

Placeholder Image cap
ចំណងជើងកាត

នេះ​គឺ​ជា​កាត​ធំ​ជាង​មុន​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។ កាតនេះមានខ្លឹមសារវែងជាងដំបូង ដើម្បីបង្ហាញសកម្មភាពកម្ពស់ស្មើគ្នានោះ។

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

កាតក្រឡាចត្រង្គ

ប្រើប្រព័ន្ធក្រឡាចត្រង្គ Bootstrap និង .row-colsថ្នាក់ របស់វា ដើម្បីគ្រប់គ្រងចំនួនជួរឈរក្រឡាចត្រង្គ (រុំជុំវិញកាតរបស់អ្នក) ដែលអ្នកបង្ហាញក្នុងមួយជួរ។ ជាឧទាហរណ៍ នៅទីនេះកំពុង .row-cols-1ដាក់សន្លឹកបៀនៅលើជួរឈរមួយ ហើយ .row-cols-md-2បំបែកសន្លឹកបៀចំនួនបួនទៅជាទទឹងស្មើគ្នានៅទូទាំងជួរជាច្រើន ចាប់ពីចំណុចបំបែកមធ្យមឡើងទៅ។

Placeholder Image cap
ចំណងជើងកាត

នេះ​ជា​កាត​វែង​ជាង​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។

Placeholder Image cap
ចំណងជើងកាត

នេះ​ជា​កាត​វែង​ជាង​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។

Placeholder Image cap
ចំណងជើងកាត

នេះ​ជា​កាត​វែង​ជាង​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។

Placeholder Image cap
ចំណងជើងកាត

នេះ​ជា​កាត​វែង​ជាង​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

ប្តូរវាទៅ នោះ .row-cols-3អ្នកនឹងឃើញសន្លឹកបៀទីបួន។

Placeholder Image cap
ចំណងជើងកាត

នេះ​ជា​កាត​វែង​ជាង​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។

Placeholder Image cap
ចំណងជើងកាត

នេះ​ជា​កាត​វែង​ជាង​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។

Placeholder Image cap
ចំណងជើងកាត

នេះ​ជា​កាត​វែង​ជាង​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។

Placeholder Image cap
ចំណងជើងកាត

នេះ​ជា​កាត​វែង​ជាង​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

នៅពេលដែលអ្នកត្រូវការកម្ពស់ស្មើគ្នា បន្ថែម .h-100ទៅសន្លឹកបៀ។ ប្រសិនបើអ្នកចង់បានកម្ពស់ស្មើគ្នាតាមលំនាំដើម អ្នកអាចកំណត់ $card-height: 100%ក្នុង Sass ។

Placeholder Image cap
ចំណងជើងកាត

នេះ​ជា​កាត​វែង​ជាង​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។

Placeholder Image cap
ចំណងជើងកាត

នេះគឺជាកាតខ្លី។

Placeholder Image cap
ចំណងជើងកាត

នេះ​ជា​កាត​វែង​ជាង​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។

Placeholder Image cap
ចំណងជើងកាត

នេះ​ជា​កាត​វែង​ជាង​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

ដូចទៅនឹងក្រុមកាតដែរ បាតកថាកាតនឹងតម្រង់ជួរដោយស្វ័យប្រវត្តិ។

Placeholder Image cap
ចំណងជើងកាត

នេះ​គឺ​ជា​កាត​ធំ​ជាង​មុន​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។

Placeholder Image cap
ចំណងជើងកាត

កាតនេះមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។

Placeholder Image cap
ចំណងជើងកាត

នេះ​គឺ​ជា​កាត​ធំ​ជាង​មុន​ដែល​មាន​អត្ថបទ​គាំទ្រ​ខាង​ក្រោម​ជា​ការ​នាំ​មុខ​ធម្មជាតិ​ទៅ​កាន់​មាតិកា​បន្ថែម។ កាតនេះមានខ្លឹមសារវែងជាងដំបូង ដើម្បីបង្ហាញសកម្មភាពកម្ពស់ស្មើគ្នានោះ។

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

កំរាលឥដ្ឋ

នៅក្នុង v4យើងបានប្រើបច្ចេកទេសសម្រាប់តែ CSS ដើម្បីធ្វើត្រាប់តាមឥរិយាបថរបស់ Masonry - like columns ប៉ុន្តែបច្ចេកទេសនេះបានមកជាមួយនឹង ផលប៉ះពាល់ មិនល្អជាច្រើន ។ ប្រសិនបើអ្នកចង់មានប្លង់ប្រភេទ v5នេះ អ្នកគ្រាន់តែអាចប្រើកម្មវិធីជំនួយ Masonry ។ Masonry មិនត្រូវបានរាប់បញ្ចូលក្នុង Bootstrap ទេ ប៉ុន្តែយើងបានបង្កើត គំរូសាកល្បង ដើម្បីជួយអ្នកក្នុងការចាប់ផ្តើម។

សាស

អថេរ

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 rgba($black, .125);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;