Source

កាត

កាតរបស់ 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>

រាយក្រុម

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

  • Cras justo odio
  • Dapibus ac facilisis ក្នុង
  • vestibulum នៅ eros
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
លក្ខណៈពិសេស
  • Cras justo odio
  • Dapibus ac facilisis ក្នុង
  • vestibulum នៅ eros
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

លិចផ្ទះបាយ

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

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

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

  • Cras justo odio
  • Dapibus ac facilisis ក្នុង
  • vestibulum នៅ eros
<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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</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>
សម្រង់

Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere បានលុបមុន។

នរណាម្នាក់ដែលល្បីល្បាញនៅក្នុង ចំណងជើងប្រភព
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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-right" 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" 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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-top" 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>

ចំណាំថាមាតិកាមិនគួរធំជាងកម្ពស់នៃរូបភាពទេ។ ប្រសិនបើខ្លឹមសារធំជាងរូបភាព ខ្លឹមសារនឹងត្រូវបានបង្ហាញនៅខាងក្រៅរូបភាព។

ផ្ដេក

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

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

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

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

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" 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-white 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-white 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 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>
ការ​បង្ហាញ​អត្ថន័យ​ទៅ​កាន់​បច្ចេកវិទ្យា​ជំនួយ

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

ព្រំដែន

ប្រើ ឧបករណ៍ប្រើប្រាស់ព្រំដែន ដើម្បីផ្លាស់ប្តូរគ្រាន់តែ 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 text-warning">
    <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 text-info">
    <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;ដើម្បីសម្រេចបានទំហំឯកសណ្ឋានរបស់ពួកគេ។

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>

សន្លឹកបៀ

ត្រូវការសំណុំសន្លឹកបៀដែលមានទទឹង និងកម្ពស់ស្មើគ្នា ដែលមិនភ្ជាប់គ្នាទៅវិញទៅមក? ប្រើសន្លឹកបៀ។

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

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

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

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

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

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

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

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

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

<div class="card-deck">
  <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>
      <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-deck">
  <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">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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>

ជួរឈរកាត

កាតអាចត្រូវបានរៀបចំចូលទៅក្នុង ជួរឈរដូច Masonry ដោយគ្រាន់តែ CSS ដោយរុំវានៅក្នុង .card-columns. កាតត្រូវបានបង្កើតឡើងជាមួយនឹង columnលក្ខណៈសម្បត្តិ CSS ជំនួសឱ្យ flexbox សម្រាប់ការតម្រឹមកាន់តែងាយស្រួល។ កាតត្រូវបានបញ្ជាពីកំពូលទៅបាត និងពីឆ្វេងទៅស្តាំ។

ព្រឺក្បាល! ចម្ងាយរបស់អ្នកជាមួយជួរកាតអាចប្រែប្រួល។ ដើម្បីបងា្ករកាតដែលបំបែកតាមជួរ យើងត្រូវតែកំណត់ពួកវាទៅ display: inline-blockព្រោះ column-break-inside: avoidមិនមែនជាដំណោះស្រាយការពារគ្រាប់កាំភ្លើងនៅឡើយទេ។

Placeholder Image cap
ចំណងជើងកាតដែលភ្ជាប់ទៅបន្ទាត់ថ្មី។

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere បានលុបមុន។

នរណាម្នាក់ដែលល្បីល្បាញនៅក្នុង ចំណងជើងប្រភព
Placeholder Image cap
ចំណងជើងកាត

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ត្រូវបានលុបចោល។

នរណាម្នាក់ដែលល្បីល្បាញនៅក្នុង ចំណងជើងប្រភព
ចំណងជើងកាត

កាតនេះមានចំណងជើងធម្មតា និងកថាខណ្ឌខ្លីនៃអត្ថបទខាងក្រោមវា។

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

Placeholder Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere បានលុបមុន។

នរណាម្នាក់ដែលល្បីល្បាញនៅក្នុង ចំណងជើងប្រភព
ចំណងជើងកាត

នេះគឺជាកាតមួយផ្សេងទៀតដែលមានចំណងជើង និងអត្ថបទគាំទ្រខាងក្រោម។ កាតនេះមានមាតិកាបន្ថែមមួយចំនួនដើម្បីធ្វើឱ្យវាខ្ពស់ជាងបន្តិច។

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

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</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 class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </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 bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</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>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

ជួរឈរកាតក៏អាចត្រូវបានពង្រីក និងប្ដូរតាមបំណងជាមួយនឹងលេខកូដបន្ថែមមួយចំនួនផងដែរ។ បង្ហាញខាងក្រោមគឺជាផ្នែកបន្ថែមនៃ .card-columnsថ្នាក់ដោយប្រើ CSS ដូចគ្នាដែលយើងប្រើ — CSS columns— ដើម្បីបង្កើតសំណុំនៃលំដាប់ឆ្លើយតបសម្រាប់ការផ្លាស់ប្តូរចំនួនជួរឈរ។

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}