குழிகள்
பூட்ஸ்டார்ப் கிரிட் அமைப்பில் உள்ள உள்ளடக்கத்தை சீரமைக்க மற்றும் பதிலளிக்கக்கூடிய வகையில் உங்கள் நெடுவரிசைகளுக்கு இடையே உள்ள பேடிங்தான் gutters ஆகும்.
அவர்கள் எப்படி வேலை செய்கிறார்கள்
-
கிடைமட்டத்தால் உருவாக்கப்பட்ட நெடுவரிசை உள்ளடக்கத்திற்கு இடையே உள்ள இடைவெளிகளே கட்டர்ஸ் ஆகும்
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,
);