පරතරය

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

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

කෙටිකතා පන්ති සමඟ මූලද්‍රව්‍යයකට හෝ එහි පැතිවල උප කුලකයකට ප්‍රතිචාරාත්මක-හිතකාමී marginහෝ අගයන් පවරන්න. paddingතනි ගුණාංග, සියලු ගුණාංග සහ සිරස් සහ තිරස් ගුණාංග සඳහා සහාය ඇතුළත් වේ. .25remසිට දක්වා විහිදෙන පෙරනිමි Sass සිතියමකින් පන්ති ගොඩනගා ඇත 3rem.

අංකනය

xsසිට දක්වා සියලු කඩඉම් සඳහා අදාළ වන ස්පේසිං උපයෝගිතා ඒවායේ xlබිඳුම් ලක්ෂ්‍ය කෙටි කිරීමක් නොමැත. මක්නිසාද යත්, එම පන්ති සිට min-width: 0සහ ඉහළට අදාළ වන අතර, මාධ්‍ය විමසුමකින් බැඳී නොමැති බැවිනි. කෙසේ වෙතත්, ඉතිරි බිඳුම් ලක්ෂ්‍යවලට බිඳුම් ලක්ෂ්‍ය සංක්ෂිප්තයක් ඇතුළත් වේ.

පන්ති නම් කර ඇත්තේ , , , සහ {property}{sides}-{size}සඳහා xsසහ {property}{sides}-{breakpoint}-{size}සඳහා ආකෘතිය භාවිතා කරමිනි .smmdlgxl

දේපල එකක් නම්:

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>