முக்கிய உள்ளடக்கத்திற்கு செல்க டாக்ஸ் வழிசெலுத்தலுக்குச் செல்லவும்
in English

குழிகள்

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

நடைமுறையில், அது எப்படி இருக்கிறது என்பது இங்கே. மற்ற அனைத்து முன் வரையறுக்கப்பட்ட கட்ட வகுப்புகளுடன் (நெடுவரிசை அகலங்கள், பதிலளிக்கக்கூடிய அடுக்குகள், மறுவரிசைப்படுத்தல்கள் மற்றும் பல உட்பட) இதை நீங்கள் தொடர்ந்து பயன்படுத்தலாம் என்பதை நினைவில் கொள்ளவும்.

.col-sm-6 .col-md-8
.col-6 .col-md-4
<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,
);