គម្លាត

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
ទទេ - សម្រាប់ថ្នាក់ដែលកំណត់ 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>

រឹមអវិជ្ជមាន

នៅក្នុង CSS marginលក្ខណសម្បត្តិអាចប្រើប្រាស់តម្លៃអវិជ្ជមាន ( paddingមិនអាច)។ គិតត្រឹម 4.2 យើងបានបន្ថែមឧបករណ៍ប្រើប្រាស់រឹមអវិជ្ជមានសម្រាប់រាល់ទំហំចំនួនគត់ដែលមិនមែនជាសូន្យដែលបានរាយខាងលើ (ឧទាហរណ៍ , 1, 2, 3, 4, 5)។ ឧបករណ៍ប្រើប្រាស់ទាំងនេះគឺល្អសម្រាប់កែតំរង់ជួរក្រឡាចត្រង្គតាមបំណងឆ្លងកាត់ចំណុចឈប់។

វាក្យសម្ព័ន្ធគឺស្ទើរតែដូចគ្នាទៅនឹងឧបករណ៍ប្រើប្រាស់លំនាំដើម រឹមវិជ្ជមាន ប៉ុន្តែជាមួយនឹងការបន្ថែម nមុនទំហំដែលបានស្នើ។ នេះជាឧទាហរណ៍ថ្នាក់ដែលផ្ទុយពី .mt-1៖

.mt-n1 {
  margin-top: -0.25rem !important;
}

នេះជាឧទាហរណ៍នៃការប្ដូរក្រឡាចត្រង្គ Bootstrap តាមបំណងនៅចំណុចសម្រាកមធ្យម ( md) និងខាងលើ។ យើងបានបង្កើន .colចន្លោះជាមួយ .px-md-5និងបន្ទាប់មកប្រឆាំងនឹងវាជាមួយនឹង .mx-md-n5មេ .row។

បន្ទះជួរឈរផ្ទាល់ខ្លួន

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>