គម្លាត

Bootstrap រួមបញ្ចូលជួរដ៏ធំទូលាយនៃរឹមឆ្លើយតបខ្លីៗ និងថ្នាក់ឧបករណ៍ប្រើប្រាស់ទ្រនាប់ ដើម្បីកែប្រែរូបរាងរបស់ធាតុ។

របៀបដែលវាដំណើរការ

កំណត់តម្លៃដែលងាយស្រួលឆ្លើយតប marginឬ paddingតម្លៃទៅធាតុ ឬផ្នែករងនៃផ្នែករបស់វាជាមួយនឹងថ្នាក់ខ្លីៗ។ រួមបញ្ចូលការគាំទ្រសម្រាប់លក្ខណៈសម្បត្តិបុគ្គល លក្ខណៈសម្បត្តិទាំងអស់ និងលក្ខណៈសម្បត្តិបញ្ឈរ និងផ្ដេក។ .25remថ្នាក់ត្រូវបានបង្កើត ឡើង ពីផែនទី Sass លំនាំដើមចាប់ពី 3rem.

កំណត់ចំណាំ

ឧបករណ៍ប្រើប្រាស់គម្លាតដែលអនុវត្តចំពោះចំណុចឈប់ទាំងអស់ ពី xsដល់ទៅ xlមិនមានអក្សរកាត់ចំណុចឈប់នៅក្នុងពួកវាទេ។ នេះគឺដោយសារតែថ្នាក់ទាំងនោះត្រូវបានអនុវត្តពី min-width: 0ឡើងលើ ហើយដូច្នេះមិនត្រូវបានចងភ្ជាប់ដោយសំណួរប្រព័ន្ធផ្សព្វផ្សាយទេ។ ទោះជាយ៉ាងណាក៏ដោយ ចំណុចឈប់សម្រាកដែលនៅសល់ រួមបញ្ចូលអក្សរកាត់ចំណុចឈប់។

ថ្នាក់ត្រូវបានដាក់ឈ្មោះដោយប្រើទម្រង់ {property}{sides}-{size}សម្រាប់ xsនិង {property}{sides}-{breakpoint}-{size}សម្រាប់ sm, md, lgនិង xl.

កន្លែង ដែលទ្រព្យសម្បត្តិ គឺជាផ្នែកមួយនៃ៖

• m- សម្រាប់ថ្នាក់ដែលបានកំណត់margin
• p- សម្រាប់ថ្នាក់ដែលបានកំណត់padding

កន្លែង ដែលភាគី គឺជាផ្នែកមួយនៃ:

• t- សម្រាប់ថ្នាក់ដែលកំណត់ margin-topឬpadding-top
• b- សម្រាប់ថ្នាក់ដែលកំណត់ margin-bottomឬpadding-bottom
• l- សម្រាប់ថ្នាក់ដែលកំណត់ margin-leftឬpadding-left
• r- សម្រាប់ថ្នាក់ដែលកំណត់ margin-rightឬpadding-right
• x- សម្រាប់ថ្នាក់ដែលកំណត់ទាំងពីរ *-leftនិង*-right
• y- សម្រាប់ថ្នាក់ដែលកំណត់ទាំងពីរ *-topនិង*-bottom
• blank - សម្រាប់ថ្នាក់ដែលកំណត់ a marginឬ paddingនៅលើជ្រុងទាំង 4 នៃធាតុ

ទំហំ គឺ មួយក្នុងចំនោម៖

• 0- សម្រាប់ថ្នាក់ដែលលុបបំបាត់ marginឬ paddingដោយការកំណត់វាទៅ0
• 1- (តាមលំនាំដើម) សម្រាប់ថ្នាក់ដែលកំណត់ marginឬ paddingទៅ$spacer * .25
• 2- (តាមលំនាំដើម) សម្រាប់ថ្នាក់ដែលកំណត់ marginឬ paddingទៅ$spacer * .5
• 3- (តាមលំនាំដើម) សម្រាប់ថ្នាក់ដែលកំណត់ marginឬ paddingទៅ$spacer
• 4- (តាមលំនាំដើម) សម្រាប់ថ្នាក់ដែលកំណត់ marginឬ paddingទៅ$spacer * 1.5
• 5- (តាមលំនាំដើម) សម្រាប់ថ្នាក់ដែលកំណត់ marginឬ paddingទៅ$spacer * 3
• auto- សម្រាប់ថ្នាក់ដែលកំណត់ marginទៅស្វ័យប្រវត្តិ

(អ្នកអាចបន្ថែមទំហំបន្ថែមទៀតដោយបន្ថែមធាតុទៅ $spacersអថេរផែនទី Sass ។ )

ឧទាហរណ៍

នេះគឺជាឧទាហរណ៍តំណាងមួយចំនួននៃថ្នាក់ទាំងនេះ៖

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

ផ្ចិតផ្តេក

លើសពីនេះ Bootstrap ក៏រួមបញ្ចូល .mx-autoថ្នាក់មួយសម្រាប់ដាក់កណ្តាលផ្តេក មាតិកាកម្រិតប្លុកទទឹងថេរ — នោះគឺមាតិកាដែលមាន display: blockនិង widthសំណុំ — ដោយកំណត់រឹមផ្ដេកទៅ auto.

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>