පරතරය

මූලද්‍රව්‍යයක පෙනුම වෙනස් කිරීම සඳහා බූට්ස්ට්‍රැප්හි පුළුල් පරාසයක කෙටිකතා ප්‍රතිචාරාත්මක ආන්තිකය සහ පෑඩින් උපයෝගිතා පන්ති ඇතුළත් වේ.

එය ක්රියා කරන ආකාරය

කෙටිකතා පන්ති සමඟ මූලද්‍රව්‍යයකට හෝ එහි පැතිවල උප කුලකයකට ප්‍රතිචාරාත්මක-හිතකාමී 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
• හිස් - මූලද්‍රව්‍යයේ පැති 4ක් marginහෝ සකසන පන්ති සඳහාpadding

ප්‍රමාණය මේවායින් එකක් වන තැන :

• 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සහ කට්ටලයක් - .widthauto

<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;
}

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>