Sourceកាត
កាតរបស់ Bootstrap ផ្តល់នូវធុងមាតិកាដែលអាចបត់បែនបាន និងអាចពង្រីកបានជាមួយនឹងជម្រើស និងជម្រើសជាច្រើន។
អំពី
កាត គឺជាធុងផ្ទុកមាតិកាដែលអាចបត់បែនបាន និងអាចពង្រីកបាន ។ វារួមបញ្ចូលជម្រើសសម្រាប់បឋមកថា និងបាតកថា មាតិកាចម្រុះពណ៌ផ្ទៃខាងក្រោយបរិបទ និងជម្រើសបង្ហាញដ៏មានឥទ្ធិពល។ ប្រសិនបើអ្នកស្គាល់ Bootstrap 3 នោះកាតជំនួសបន្ទះចាស់ អណ្តូង និងរូបភាពតូចៗរបស់យើង។ មុខងារស្រដៀងគ្នាទៅនឹងសមាសធាតុទាំងនោះមានជាថ្នាក់កែប្រែសម្រាប់កាត។
ឧទាហរណ៍
កាតត្រូវបានបង្កើតឡើងជាមួយនឹងការសម្គាល់ និងរចនាប័ទ្មតិចតួចតាមដែលអាចធ្វើទៅបាន ប៉ុន្តែនៅតែគ្រប់គ្រងដើម្បីផ្តល់នូវការគ្រប់គ្រង និងការប្ដូរតាមបំណងជាច្រើន។ បង្កើតឡើងដោយ flexbox ពួកគេផ្តល់នូវការតម្រឹមយ៉ាងងាយស្រួល និងលាយបញ្ចូលគ្នាយ៉ាងល្អជាមួយសមាសធាតុ Bootstrap ផ្សេងទៀត។ ពួកវាមិនមាន margin
តាមលំនាំដើមទេ ដូច្នេះសូមប្រើ ឧបករណ៍ប្រើប្រាស់គម្លាត តាមតម្រូវការ។
ខាងក្រោមនេះជាឧទាហរណ៍នៃកាតមូលដ្ឋានដែលមានខ្លឹមសារចម្រុះ និងទទឹងថេរ។ កាតមិនមានទទឹងថេរដើម្បីចាប់ផ្តើមទេ ដូច្នេះពួកវានឹងបំពេញទទឹងពេញលេញនៃធាតុមេរបស់វា។ នេះត្រូវបានប្ដូរតាមបំណងយ៉ាងងាយស្រួលជាមួយនឹង ជម្រើសទំហំ ផ្សេងៗរបស់យើង ។
ចំណងជើងកាត
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
ទៅកន្លែងណាមួយ។
ប្រភេទមាតិកា
កាតគាំទ្រមាតិកាជាច្រើន រួមទាំងរូបភាព អត្ថបទ បញ្ជីក្រុម តំណភ្ជាប់ និងច្រើនទៀត។ ខាងក្រោមនេះជាឧទាហរណ៍នៃអ្វីដែលបានគាំទ្រ។
រាងកាយ
ប្លុកអគារនៃកាតគឺ .card-body
. ប្រើវានៅពេលណាដែលអ្នកត្រូវការផ្នែកទ្រនាប់នៅក្នុងកាត។
នេះគឺជាអត្ថបទមួយចំនួននៅក្នុងតួកាត។
ចំណងជើង អត្ថបទ និងតំណ
ចំណងជើងកាតត្រូវបានប្រើដោយបន្ថែម .card-title
ទៅ <h*>
ស្លាក។ តាមរបៀបដូចគ្នា តំណភ្ជាប់ត្រូវបានបន្ថែម និងដាក់នៅជាប់គ្នាដោយបន្ថែម .card-link
ទៅ <a>
ស្លាក។
ចំណងជើងរងត្រូវបានប្រើដោយបន្ថែមសញ្ញាមួយ .card-subtitle
ទៅ <h*>
ស្លាក។ ប្រសិនបើ ធាតុ .card-title
និង .card-subtitle
វត្ថុត្រូវបានដាក់ក្នុង .card-body
ធាតុមួយ ចំណងជើងកាត និងចំណងជើងរងត្រូវបានតម្រឹមយ៉ាងស្អាត។
ចំណងជើងកាត
ចំណងជើងរងកាត
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
តំណភ្ជាប់កាត តំណភ្ជាប់
មួយទៀត
រូបភាព
.card-img-top
ដាក់រូបភាពមួយទៅកំពូលនៃកាត។ ជាមួយ .card-text
អត្ថបទអាចត្រូវបានបន្ថែមទៅកាត។ អត្ថបទនៅខាងក្នុង .card-text
ក៏អាចត្រូវបានកំណត់រចនាប័ទ្មជាមួយស្លាក HTML ស្តង់ដារផងដែរ។
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
រាយក្រុម
បង្កើតបញ្ជីមាតិកានៅក្នុងកាតដែលមានក្រុមបញ្ជីរ។
- Cras justo odio
- Dapibus ac facilisis ក្នុង
- vestibulum នៅ eros
- Cras justo odio
- Dapibus ac facilisis ក្នុង
- vestibulum នៅ eros
លិចផ្ទះបាយ
លាយ និងផ្គូផ្គងប្រភេទមាតិកាជាច្រើនដើម្បីបង្កើតកាតដែលអ្នកត្រូវការ ឬបោះអ្វីគ្រប់យ៉ាងនៅទីនោះ។ បង្ហាញខាងក្រោមគឺជារចនាប័ទ្មរូបភាព ប្លុក រចនាប័ទ្មអត្ថបទ និងក្រុមបញ្ជី - ទាំងអស់ត្រូវបានរុំដោយកាតទទឹងថេរ។
ចំណងជើងកាត
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
- Cras justo odio
- Dapibus ac facilisis ក្នុង
- vestibulum នៅ eros
បន្ថែមបឋមកថាស្រេចចិត្ត និង/ឬបាតកថាក្នុងកាត។
ការព្យាបាលចំណងជើងពិសេស
ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។
ទៅកន្លែងណាមួយ។
ក្បាលកាតអាចត្រូវបានកំណត់រចនាប័ទ្មដោយបន្ថែម .card-header
ទៅ <h*>
ធាតុ។
ការព្យាបាលចំណងជើងពិសេស
ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។
ទៅកន្លែងណាមួយ។
Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere បានលុបមុន។
ការព្យាបាលចំណងជើងពិសេស
ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។
ទៅកន្លែងណាមួយ។
ទំហំ
កាតសន្មត់ថាមិនជាក់លាក់ width
ដើម្បីចាប់ផ្តើមទេ ដូច្នេះពួកវានឹងធំទូលាយ 100% លុះត្រាតែមានចែងផ្សេងពីនេះ។ អ្នកអាចផ្លាស់ប្តូរវាបានតាមតម្រូវការដោយប្រើ CSS ផ្ទាល់ខ្លួន ថ្នាក់ក្រឡាចត្រង្គ ក្រឡាចត្រង្គ Sass mixins ឬឧបករណ៍ប្រើប្រាស់។
ដោយប្រើការសម្គាល់ក្រឡាចត្រង្គ
ដោយប្រើក្រឡាចត្រង្គ រុំសន្លឹកបៀជាជួរ និងជួរតាមតម្រូវការ។
ការព្យាបាលចំណងជើងពិសេស
ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។
ទៅកន្លែងណាមួយ។
ការព្យាបាលចំណងជើងពិសេស
ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។
ទៅកន្លែងណាមួយ។
ការប្រើប្រាស់ឧបករណ៍ប្រើប្រាស់
ប្រើ ឧបករណ៍ប្រើប្រាស់ទំហំដែលអាចប្រើបាន មួយក្តាប់តូចរបស់យើង ដើម្បីកំណត់ទទឹងកាតមួយយ៉ាងរហ័ស។
ចំណងជើងកាត
ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។
ប៊ូតុង
ចំណងជើងកាត
ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។
ប៊ូតុង
ការប្រើប្រាស់ CSS ផ្ទាល់ខ្លួន
ប្រើ CSS ផ្ទាល់ខ្លួននៅក្នុងសន្លឹករចនាប័ទ្មរបស់អ្នក ឬជារចនាប័ទ្មក្នុងបន្ទាត់ដើម្បីកំណត់ទទឹង។
ការព្យាបាលចំណងជើងពិសេស
ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។
ទៅកន្លែងណាមួយ។
ការតម្រឹមអត្ថបទ
អ្នកអាចផ្លាស់ប្តូរការតម្រឹមអត្ថបទនៃកាតណាមួយបានយ៉ាងឆាប់រហ័ស — នៅក្នុងផ្នែកទាំងមូល ឬផ្នែកជាក់លាក់របស់វា — ជាមួយនឹង ថ្នាក់តម្រឹមអត្ថបទ របស់យើង ។
ការព្យាបាលចំណងជើងពិសេស
ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។
ទៅកន្លែងណាមួយ។
ការព្យាបាលចំណងជើងពិសេស
ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។
ទៅកន្លែងណាមួយ។
ការព្យាបាលចំណងជើងពិសេស
ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។
ទៅកន្លែងណាមួយ។
ការរុករក
បន្ថែមការរុករកខ្លះទៅបឋមកថារបស់កាត (ឬប្លុក) ជាមួយនឹង សមាសធាតុ nav របស់ Bootstrap ។
ការព្យាបាលចំណងជើងពិសេស
ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។
ទៅកន្លែងណាមួយ។
ការព្យាបាលចំណងជើងពិសេស
ដោយមានការគាំទ្រអត្ថបទខាងក្រោមជាការដឹកនាំធម្មជាតិទៅមាតិកាបន្ថែម។
ទៅកន្លែងណាមួយ។
រូបភាព
កាតរួមបញ្ចូលជម្រើសមួយចំនួនសម្រាប់ធ្វើការជាមួយរូបភាព។ ជ្រើសរើសពីផ្នែកបន្ថែម "មួករូបភាព" នៅខាងចុងនៃកាត ការលាបលើរូបភាពជាមួយនឹងមាតិកាកាត ឬគ្រាន់តែបង្កប់រូបភាពនៅក្នុងកាត។
មួករូបភាព
ស្រដៀងទៅនឹងបឋមកថា និងបាតកថា កាតអាចរួមបញ្ចូល "មួករូបភាព" ផ្នែកខាងលើ និងខាងក្រោម — រូបភាពនៅផ្នែកខាងលើ ឬខាងក្រោមនៃកាត។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
ការលាបលើរូបភាព
ប្រែក្លាយរូបភាពទៅជាផ្ទៃខាងក្រោយកាត ហើយលាបលើអត្ថបទកាតរបស់អ្នក។ អាស្រ័យលើរូបភាព អ្នកអាច ឬមិនត្រូវការរចនាប័ទ្ម ឬឧបករណ៍ប្រើប្រាស់បន្ថែម។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
ចំណាំថាមាតិកាមិនគួរធំជាងកម្ពស់នៃរូបភាពទេ។ ប្រសិនបើខ្លឹមសារធំជាងរូបភាព ខ្លឹមសារនឹងត្រូវបានបង្ហាញនៅខាងក្រៅរូបភាព។
រចនាប័ទ្មកាត
កាតរួមមានជម្រើសផ្សេងៗសម្រាប់ប្ដូរផ្ទៃខាងក្រោយ ស៊ុម និងពណ៌របស់វា។
ផ្ទៃខាងក្រោយនិងពណ៌
ប្រើ ឧបករណ៍ប្រើប្រាស់អត្ថបទ និងផ្ទៃខាងក្រោយ ដើម្បីផ្លាស់ប្តូររូបរាងរបស់កាត។
ចំណងជើងកាតបឋម
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
ចំណងជើងប័ណ្ណបន្ទាប់បន្សំ
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
ចំណងជើងប័ណ្ណជោគជ័យ
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
ចំណងជើងប័ណ្ណគ្រោះថ្នាក់
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
ចំណងជើងប័ណ្ណព្រមាន
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
ចំណងជើងប័ណ្ណព័ត៌មាន
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
ចំណងជើងកាតពន្លឺ
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
ចំណងជើងកាតងងឹត
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
ការបង្ហាញអត្ថន័យទៅកាន់បច្ចេកវិទ្យាជំនួយ
ការប្រើពណ៌ដើម្បីបន្ថែមអត្ថន័យផ្តល់នូវការចង្អុលបង្ហាញដែលមើលឃើញតែប៉ុណ្ណោះ ដែលនឹងមិនត្រូវបានបញ្ជូនទៅកាន់អ្នកប្រើប្រាស់នៃបច្ចេកវិទ្យាជំនួយ ដូចជាកម្មវិធីអានអេក្រង់ជាដើម។ ត្រូវប្រាកដថាព័ត៌មានដែលតំណាងដោយពណ៌គឺច្បាស់ពីខ្លឹមសារខ្លួនវា (ឧ. អត្ថបទដែលមើលឃើញ) ឬត្រូវបានរួមបញ្ចូលតាមរយៈមធ្យោបាយជំនួស ដូចជាអត្ថបទបន្ថែមដែលលាក់ជាមួយ .sr-only
ថ្នាក់។
ព្រំដែន
ប្រើ ឧបករណ៍ប្រើប្រាស់ព្រំដែន ដើម្បីផ្លាស់ប្តូរគ្រាន់តែ border-color
កាត។ ចំណាំថាអ្នកអាចដាក់ .text-{color}
ថ្នាក់នៅលើមេ .card
ឬសំណុំរងនៃមាតិការបស់កាតដូចបានបង្ហាញខាងក្រោម។
ចំណងជើងកាតបឋម
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
ចំណងជើងប័ណ្ណបន្ទាប់បន្សំ
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
ចំណងជើងប័ណ្ណជោគជ័យ
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
ចំណងជើងប័ណ្ណគ្រោះថ្នាក់
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
ចំណងជើងប័ណ្ណព្រមាន
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
ចំណងជើងប័ណ្ណព័ត៌មាន
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
ចំណងជើងកាតពន្លឺ
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
ចំណងជើងកាតងងឹត
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
ឧបករណ៍ប្រើប្រាស់ Mixins
អ្នកក៏អាចផ្លាស់ប្តូរស៊ុមនៅលើបឋមកថា និងបាតកថាកាតតាមតម្រូវការ ហើយថែមទាំងលុបពួកវាចេញ background-color
ជាមួយ .bg-transparent
.
ចំណងជើងប័ណ្ណជោគជ័យ
អត្ថបទឧទាហរណ៍ខ្លីៗមួយចំនួនសម្រាប់បង្កើតនៅលើចំណងជើងកាត និងបង្កើតជាខ្លឹមសារភាគច្រើននៃកាត។
ប្លង់កាត
បន្ថែមពីលើការកំណត់រចនាប័ទ្មមាតិកានៅក្នុងកាត Bootstrap រួមបញ្ចូលជម្រើសមួយចំនួនសម្រាប់ការដាក់ចេញជាស៊េរីនៃកាត។ សម្រាប់ពេលនេះ ជម្រើសប្លង់ទាំងនេះមិនទាន់ឆ្លើយតបនៅឡើយ ។
ក្រុមកាត
ប្រើក្រុមកាតដើម្បីបង្ហាញកាតជាធាតុភ្ជាប់តែមួយដែលមានទទឹង និងកម្ពស់ស្មើគ្នា។ ក្រុមកាតប្រើ display: flex;
ដើម្បីសម្រេចបានទំហំឯកសណ្ឋានរបស់ពួកគេ។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
ចំណងជើងកាត
កាតនេះមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ កាតនេះមានខ្លឹមសារវែងជាងដំបូង ដើម្បីបង្ហាញសកម្មភាពកម្ពស់ស្មើគ្នានោះ។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
នៅពេលប្រើក្រុមកាតដែលមានបាតកថា មាតិការបស់ពួកគេនឹងតម្រង់ជួរដោយស្វ័យប្រវត្តិ។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
ចំណងជើងកាត
កាតនេះមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ កាតនេះមានខ្លឹមសារវែងជាងដំបូង ដើម្បីបង្ហាញសកម្មភាពកម្ពស់ស្មើគ្នានោះ។
សន្លឹកបៀ
ត្រូវការសំណុំសន្លឹកបៀដែលមានទទឹង និងកម្ពស់ស្មើគ្នា ដែលមិនភ្ជាប់គ្នាទៅវិញទៅមក? ប្រើសន្លឹកបៀ។
ចំណងជើងកាត
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
ចំណងជើងកាត
កាតនេះមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ កាតនេះមានខ្លឹមសារវែងជាងដំបូង ដើម្បីបង្ហាញសកម្មភាពកម្ពស់ស្មើគ្នានោះ។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
ដូចគ្នានឹងក្រុមកាតដែរ បាតកថាកាតនៅក្នុងតារាងនឹងតម្រង់ជួរដោយស្វ័យប្រវត្តិ។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
ចំណងជើងកាត
កាតនេះមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។
ចំណងជើងកាត
នេះគឺជាកាតធំជាងមុនដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ កាតនេះមានខ្លឹមសារវែងជាងដំបូង ដើម្បីបង្ហាញសកម្មភាពកម្ពស់ស្មើគ្នានោះ។
ជួរឈរកាត
កាតអាចត្រូវបានរៀបចំចូលទៅក្នុង ជួរឈរដូច Masonry ដោយគ្រាន់តែ CSS ដោយរុំវានៅក្នុង .card-columns
. កាតត្រូវបានបង្កើតឡើងជាមួយនឹង column
លក្ខណៈសម្បត្តិ CSS ជំនួសឱ្យ flexbox សម្រាប់ការតម្រឹមកាន់តែងាយស្រួល។ កាតត្រូវបានបញ្ជាពីកំពូលទៅបាត និងពីឆ្វេងទៅស្តាំ។
ព្រឺក្បាល! ចម្ងាយរបស់អ្នកជាមួយជួរកាតអាចប្រែប្រួល។ ដើម្បីបងា្ករកាតដែលបំបែកតាមជួរ យើងត្រូវតែកំណត់ពួកវាទៅ display: inline-block
ព្រោះ column-break-inside: avoid
មិនមែនជាដំណោះស្រាយការពារគ្រាប់កាំភ្លើងនៅឡើយទេ។
ចំណងជើងកាតដែលភ្ជាប់ទៅបន្ទាត់ថ្មី។
នេះជាកាតវែងជាងដែលមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។ ខ្លឹមសារនេះវែងបន្តិច។
Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere បានលុបមុន។
ចំណងជើងកាត
កាតនេះមានអត្ថបទគាំទ្រខាងក្រោមជាការនាំមុខធម្មជាតិទៅកាន់មាតិកាបន្ថែម។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ត្រូវបានលុបចោល។
ចំណងជើងកាត
កាតនេះមានចំណងជើងធម្មតា និងកថាខណ្ឌខ្លីនៃអត្ថបទខាងក្រោមវា។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere បានលុបមុន។
ចំណងជើងកាត
នេះគឺជាកាតមួយផ្សេងទៀតដែលមានចំណងជើង និងអត្ថបទគាំទ្រខាងក្រោម។ កាតនេះមានមាតិកាបន្ថែមមួយចំនួនដើម្បីធ្វើឱ្យវាខ្ពស់ជាងបន្តិច។
អាប់ដេតចុងក្រោយ 3 នាទីមុន។
ជួរឈរកាតក៏អាចត្រូវបានពង្រីក និងប្ដូរតាមបំណងជាមួយនឹងលេខកូដបន្ថែមមួយចំនួនផងដែរ។ បង្ហាញខាងក្រោមគឺជាផ្នែកបន្ថែមនៃ .card-columns
ថ្នាក់ដោយប្រើ CSS ដូចគ្នាដែលយើងប្រើ — CSS columns— ដើម្បីបង្កើតសំណុំនៃលំដាប់ឆ្លើយតបសម្រាប់ការផ្លាស់ប្តូរចំនួនជួរឈរ។