កាត
កាតរបស់ 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-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>
រូបភាព
កាតរួមបញ្ចូលជម្រើសមួយចំនួនសម្រាប់ធ្វើការជាមួយរូបភាព។ ជ្រើសរើសពីផ្នែកបន្ថែម "មួករូបភាព" នៅខាងចុងនៃកាត ការលាបលើរូបភាពជាមួយនឹងមាតិកាកាត ឬគ្រាន់តែបង្កប់រូបភាពនៅក្នុងកាត។
មួករូបភាព
ស្រដៀងទៅនឹងបឋមកថា និងបាតកថា កាតអាចរួមបញ្ចូល "មួករូបភាព" ផ្នែកខាងលើ និងខាងក្រោម — រូបភាពនៅផ្នែកខាងលើ ឬខាងក្រោមនៃកាត។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
អាប់ដេតចុងក្រោយ 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>
ផ្ដេក
ដោយប្រើការរួមបញ្ចូលគ្នានៃថ្នាក់ក្រឡាចត្រង្គ និងឧបករណ៍ប្រើប្រាស់ កាតអាចត្រូវបានបង្កើតជាផ្ដេកតាមរបៀបដែលងាយស្រួលប្រើ និងឆ្លើយតបទៅនឹងឧបករណ៍ចល័ត។ ក្នុងឧទាហរណ៍ខាងក្រោម យើងដកក្រឡាចត្រង្គចេញជាមួយ .g-0
និងប្រើ .col-md-*
ថ្នាក់ដើម្បីធ្វើឱ្យកាតផ្ដេកនៅ md
ចំណុចឈប់។ ប្រហែលជាត្រូវការការកែតម្រូវបន្ថែម អាស្រ័យលើខ្លឹមសារកាតរបស់អ្នក។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
អាប់ដេតចុងក្រោយ 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
ចំណុចឈប់។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
អាប់ដេតចុងក្រោយ 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>
កាតក្រឡាចត្រង្គ
ប្រើប្រព័ន្ធក្រឡាចត្រង្គ Bootstrap និង .row-cols
ថ្នាក់ របស់វា ដើម្បីគ្រប់គ្រងចំនួនជួរឈរក្រឡាចត្រង្គ (រុំជុំវិញកាតរបស់អ្នក) ដែលអ្នកបង្ហាញក្នុងមួយជួរ។ ជាឧទាហរណ៍ នៅទីនេះកំពុង .row-cols-1
ដាក់សន្លឹកបៀនៅលើជួរឈរមួយ ហើយ .row-cols-md-2
បំបែកសន្លឹកបៀចំនួនបួនទៅជាទទឹងស្មើគ្នានៅទូទាំងជួរជាច្រើន ចាប់ពីចំណុចបំបែកមធ្យមឡើងទៅ។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
<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
អ្នកនឹងឃើញសន្លឹកបៀទីបួន។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
<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 ។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
ចំណងជើងកាត
នេះគឺជាកាតខ្លី។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
<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>
ដូចទៅនឹងក្រុមកាតដែរ បាតកថាកាតនឹងតម្រង់ជួរដោយស្វ័យប្រវត្តិ។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
ចំណងជើងកាត
កាតនេះមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ កាតនេះមានខ្លឹមសារវែងជាងដំបូង ដើម្បីបង្ហាញសកម្មភាពកម្ពស់ស្មើគ្នានោះ។
<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;