កាត
កាតរបស់ Bootstrap ផ្តល់នូវធុងមាតិកាដែលអាចបត់បែនបាន និងអាចពង្រីកបានជាមួយនឹងជម្រើស និងជម្រើសជាច្រើន។
អំពី
កាត គឺជាធុងផ្ទុកមាតិកាដែលអាចបត់បែនបាន និងអាចពង្រីកបាន ។ វារួមបញ្ចូលជម្រើសសម្រាប់បឋមកថា និងបាតកថា មាតិកាចម្រុះពណ៌ផ្ទៃខាងក្រោយបរិបទ និងជម្រើសបង្ហាញដ៏មានឥទ្ធិពល។ ប្រសិនបើអ្នកស្គាល់ Bootstrap 3 នោះកាតជំនួសបន្ទះចាស់ អណ្តូង និងរូបភាពតូចៗរបស់យើង។ មុខងារស្រដៀងគ្នាទៅនឹងសមាសធាតុទាំងនោះមានជាថ្នាក់កែប្រែសម្រាប់កាត។
ឧទាហរណ៍
កាតត្រូវបានបង្កើតឡើងជាមួយនឹងការសម្គាល់ និងរចនាប័ទ្មតិចតួចតាមដែលអាចធ្វើទៅបាន ប៉ុន្តែនៅតែគ្រប់គ្រងដើម្បីផ្តល់នូវការគ្រប់គ្រង និងការប្ដូរតាមបំណងជាច្រើន។ បង្កើតឡើងដោយ flexbox ពួកគេផ្តល់នូវការតម្រឹមយ៉ាងងាយស្រួល និងលាយបញ្ចូលគ្នាយ៉ាងល្អជាមួយសមាសធាតុ Bootstrap ផ្សេងទៀត។ ពួកវាមិនមាន margin
តាមលំនាំដើមទេ ដូច្នេះសូមប្រើ ឧបករណ៍ប្រើប្រាស់គម្លាត តាមតម្រូវការ។
ខាងក្រោមនេះជាឧទាហរណ៍នៃកាតមូលដ្ឋានដែលមានខ្លឹមសារចម្រុះ និងទទឹងថេរ។ កាតមិនមានទទឹងថេរដើម្បីចាប់ផ្តើមទេ ដូច្នេះពួកវានឹងបំពេញទទឹងពេញលេញនៃធាតុមេរបស់វា។ នេះត្រូវបានប្ដូរតាមបំណងយ៉ាងងាយស្រួលជាមួយនឹង ជម្រើសទំហំ ផ្សេងៗរបស់យើង ។
ចំណងជើងកាត
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
ទៅកន្លែងណាមួយ។<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 ស្តង់ដារផងដែរ។
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
<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>
លិចផ្ទះបាយ
លាយ និងផ្គូផ្គងប្រភេទមាតិកាជាច្រើនដើម្បីបង្កើតកាតដែលអ្នកត្រូវការ ឬបោះអ្វីគ្រប់យ៉ាងនៅទីនោះ។ បង្ហាញខាងក្រោមគឺជារចនាប័ទ្មរូបភាព ប្លុក រចនាប័ទ្មអត្ថបទ និងក្រុមបញ្ជី - ទាំងអស់ត្រូវបានរុំដោយកាតទទឹងថេរ។
ចំណងជើងកាត
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
- ធាតុមួយ។
- ធាតុទីពីរ
- ធាតុទីបី
<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-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">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>
រូបភាព
កាតរួមបញ្ចូលជម្រើសមួយចំនួនសម្រាប់ធ្វើការជាមួយរូបភាព។ ជ្រើសរើសពីផ្នែកបន្ថែម "មួករូបភាព" នៅខាងចុងនៃកាត ការលាបលើរូបភាពជាមួយនឹងមាតិកាកាត ឬគ្រាន់តែបង្កប់រូបភាពនៅក្នុងកាត។
មួករូបភាព
ស្រដៀងទៅនឹងបឋមកថា និងបាតកថា កាតអាចរួមបញ្ចូល "មួករូបភាព" ផ្នែកខាងលើ និងខាងក្រោម — រូបភាពនៅផ្នែកខាងលើ ឬខាងក្រោមនៃកាត។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
<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>
ការលាបលើរូបភាព
ប្រែក្លាយរូបភាពទៅជាផ្ទៃខាងក្រោយកាត ហើយលាបលើអត្ថបទកាតរបស់អ្នក។ អាស្រ័យលើរូបភាព អ្នកអាច ឬមិនត្រូវការរចនាប័ទ្ម ឬឧបករណ៍ប្រើប្រាស់បន្ថែម។
<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
ចំណុចឈប់។ ប្រហែលជាត្រូវការការកែតម្រូវបន្ថែម អាស្រ័យលើខ្លឹមសារកាតរបស់អ្នក។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." 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;
ដើម្បីភ្ជាប់ជាមួយនឹងវិមាត្រឯកសណ្ឋានចាប់ផ្តើមពី sm
ចំណុចឈប់។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
ចំណងជើងកាត
កាតនេះមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ កាតនេះមានខ្លឹមសារវែងជាងដំបូង ដើម្បីបង្ហាញសកម្មភាពកម្ពស់ស្មើគ្នានោះ។
អាប់ដេតចុងក្រោយ 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>
នៅពេលប្រើក្រុមកាតដែលមានបាតកថា មាតិការបស់ពួកគេនឹងតម្រង់ជួរដោយស្វ័យប្រវត្តិ។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
ចំណងជើងកាត
កាតនេះមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ កាតនេះមានខ្លឹមសារវែងជាងដំបូង ដើម្បីបង្ហាញសកម្មភាពកម្ពស់ស្មើគ្នានោះ។
<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>
សន្លឹកបៀ
ត្រូវការសំណុំសន្លឹកបៀដែលមានទទឹង និងកម្ពស់ស្មើគ្នា ដែលមិនភ្ជាប់គ្នាទៅវិញទៅមក? ប្រើសន្លឹកបៀ។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
ចំណងជើងកាត
កាតនេះមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ កាតនេះមានខ្លឹមសារវែងជាងដំបូង ដើម្បីបង្ហាញសកម្មភាពកម្ពស់ស្មើគ្នានោះ។
អាប់ដេតចុងក្រោយ 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>
ដូចគ្នានឹងក្រុមកាតដែរ បាតកថាកាតនៅក្នុងតារាងនឹងតម្រង់ជួរដោយស្វ័យប្រវត្តិ។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
ចំណងជើងកាត
កាតនេះមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ កាតនេះមានខ្លឹមសារវែងជាងដំបូង ដើម្បីបង្ហាញសកម្មភាពកម្ពស់ស្មើគ្នានោះ។
<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
បំបែកសន្លឹកបៀចំនួនបួនទៅជាទទឹងស្មើគ្នានៅទូទាំងជួរជាច្រើន ចាប់ពីចំណុចបំបែកមធ្យមឡើងទៅ។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
<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
អ្នកនឹងឃើញសន្លឹកបៀទីបួន។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
<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 ។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
ចំណងជើងកាត
នេះគឺជាកាតខ្លី។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
<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
មិនមែនជាដំណោះស្រាយការពារគ្រាប់កាំភ្លើងនៅឡើយទេ។
ចំណងជើងកាតដែលភ្ជាប់ទៅបន្ទាត់ថ្មី។
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
សម្រង់ដែលមានឈ្មោះល្បីមាននៅក្នុងធាតុសម្រង់ប្លុក។
ចំណងជើងកាត
កាតនេះមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
សម្រង់ដែលមានឈ្មោះល្បីមាននៅក្នុងធាតុសម្រង់ប្លុក។
ចំណងជើងកាត
កាតនេះមានចំណងជើងធម្មតា និងកថាខណ្ឌខ្លីនៃអត្ថបទខាងក្រោមវា។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
សម្រង់ដែលមានឈ្មោះល្បីមាននៅក្នុងធាតុសម្រង់ប្លុក។
ចំណងជើងកាត
នេះគឺជាកាតមួយផ្សេងទៀតដែលមានចំណងជើង និងអត្ថបទគាំទ្រខាងក្រោម។ កាតនេះមានមាតិកាបន្ថែមមួយចំនួនដើម្បីធ្វើឱ្យវាខ្ពស់ជាងបន្តិច។
អាប់ដេតចុងក្រោយ 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>A well-known quote, contained in a blockquote element.</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>A well-known quote, contained in a blockquote element.</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" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</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;
}
}