ගටර්ස්
බූට්ස්ට්රැප් ග්රිඩ් පද්ධතියේ ප්රතිචාරාත්මක ඉඩක් සහ අන්තර්ගතය පෙළගස්වා ගැනීමට භාවිත කරන, ඔබේ තීරු අතර ඇති පිරවුම ගටර්ස් වේ.
ඔවුන් වැඩ කරන ආකාරය
-
ගටර යනු තිරස් මඟින් නිර්මාණය කරන ලද තීරු අන්තර්ගතය අතර හිඩැස් වේ
padding
. අපි එක් එක් තීරුව මත සකසන්නෙමු, සහ අන්තර්ගතය පෙළගැස්වීමට එක් එක් පේළියේ ආරම්භයේ සහ අවසානයේ එය හිලව් කිරීමට සෘණ භාවිතාpadding-right
කරන්නෙමු .padding-left
margin
-
ගටර්
1.5rem
(24px
) පළලින් ආරම්භ වේ. මෙමගින් අපගේ ජාලකය පෑඩින් සහ මාජින් ස්පේසර් පරිමාණයට ගැලපීමට ඉඩ සලසයි. -
ගටර ප්රතිචාරාත්මකව සකස් කළ හැක. තිරස් කානු, සිරස් කානු, සහ සියලුම කානු වෙනස් කිරීමට කඩඉම්-විශේෂිත කාණු පන්ති භාවිතා කරන්න.
තිරස් කාණු
.gx-*
තිරස් කාණු පළල පාලනය කිරීමට පන්ති භාවිතා කළ හැක. ගැළපෙන පෑඩින් උපයෝගිතා භාවිතයෙන්, අනවශ්ය පිටාර ගැලීම වැළැක්වීම සඳහා විශාල කානු ද භාවිතා කරන්නේ නම්, හෝ මාපියන් සකස් කිරීමට අවශ්ය විය හැකිය .container
. .container-fluid
උදාහරණයක් ලෙස, පහත උදාහරණයේ අපි පිරවුම වැඩි කර ඇත .px-4
:
<div class="container px-4">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
විකල්ප විසඳුමක් වන්නේ පන්තිය .row
සමඟ එතුම එකතු කිරීමයි:.overflow-hidden
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
සිරස් කාණු
.gy-*
සිරස් කාණු පළල පාලනය කිරීමට පන්ති භාවිතා කළ හැක. .row
තිරස් කාණු මෙන්, සිරස් කාණු මගින් පිටුවක කෙළවරට පහළින් පිටාර ගැලීමක් ඇති කළ හැකිය . මෙය සිදු වුවහොත්, ඔබ පන්තිය .row
සමඟ එතුම එක් කරන්න:.overflow-hidden
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
තිරස් සහ සිරස් කාණු
.g-*
තිරස් කානු පළල පාලනය කිරීමට පන්ති භාවිතා කළ හැක, පහත උදාහරණය සඳහා අපි කුඩා ගටර් පළලක් භාවිතා කරමු, එබැවින් .overflow-hidden
දවටන පන්තිය එක් කිරීමට අවශ්ය නොවනු ඇත.
<div class="container">
<div class="row g-2">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
පේළි තීරු කාණු
පේළි තීරුවලට ගටර් පන්ති ද එක් කළ හැක . පහත උදාහරණයේ දී, අපි ප්රතිචාරාත්මක පේළි තීරු සහ ප්රතිචාරාත්මක ගටර් පන්ති භාවිතා කරමු.
<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
</div>
</div>
කාණු නැත
අපගේ පූර්ව නිර්වචනය කළ ජාල පන්තිවල තීරු අතර ඇති කාණු ඉවත් කළ හැක .g-0
. මෙය සියලුම ක්ෂණික ළමා තීරු margin
වලින් සෘණ .row
සහ තිරස් ඉවත් කරයි.padding
කෙළවරේ සිට කෙළවරට නිර්මාණයක් අවශ්යද? මාපියන් අතහරින්න .container
හෝ .container-fluid
.
ප්රායෝගිකව, එය පෙනෙන ආකාරය මෙන්න. (තීරු පළල, ප්රතිචාරාත්මක ස්ථර, නැවත ඇණවුම් සහ තවත් දේ ඇතුළුව) අනෙකුත් සියලුම පෙරනිමි ජාල පන්ති සමඟින් ඔබට මෙය දිගටම භාවිතා කළ හැකි බව සලකන්න.
<div class="row g-0">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
කාණු වෙනස් කරන්න
$gutters
සාස් සිතියමෙන් උරුම වූ සාස් සිතියමෙන් පන්ති ගොඩනගා ඇත $spacers
.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);