கட்ட அமைப்பு

பன்னிரெண்டு நெடுவரிசை அமைப்பு, ஆறு இயல்புநிலை பதிலளிக்கக்கூடிய அடுக்குகள், சாஸ் மாறிகள் மற்றும் மிக்சின்கள் மற்றும் டஜன் கணக்கான முன் வரையறுக்கப்பட்ட வகுப்புகளுக்கு நன்றி, அனைத்து வடிவங்கள் மற்றும் அளவுகளின் தளவமைப்புகளை உருவாக்க எங்கள் சக்திவாய்ந்த மொபைல்-முதல் ஃப்ளெக்ஸ்பாக்ஸ் கட்டத்தைப் பயன்படுத்தவும்.

இந்தப் பக்கத்தில்

உதாரணமாக

பூட்ஸ்டார்ப்பின் கட்டம் அமைப்பானது உள்ளடக்கத்தை அமைப்பதற்கும் சீரமைப்பதற்கும் தொடர்ச்சியான கொள்கலன்கள், வரிசைகள் மற்றும் நெடுவரிசைகளைப் பயன்படுத்துகிறது. இது ஃப்ளெக்ஸ்பாக்ஸுடன் கட்டப்பட்டுள்ளது மற்றும் முழுமையாக பதிலளிக்கக்கூடியது. கீழே ஒரு எடுத்துக்காட்டு மற்றும் கட்டம் அமைப்பு எவ்வாறு ஒன்றாக வருகிறது என்பதற்கான ஆழமான விளக்கமாகும்.

ஃப்ளெக்ஸ்பாக்ஸுக்குப் புதியவரா அல்லது அறிமுகமில்லாதவரா? பின்னணி, சொற்கள், வழிகாட்டுதல்கள் மற்றும் குறியீடு துணுக்குகளுக்கான இந்த CSS ட்ரிக்ஸ் ஃப்ளெக்ஸ்பாக்ஸ் வழிகாட்டியைப் படிக்கவும் .

நெடுவரிசை

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

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

எப்படி இது செயல்படுகிறது

அதை உடைத்து, கட்டம் அமைப்பு எவ்வாறு ஒன்றிணைகிறது என்பது இங்கே:

எங்கள் கட்டம் ஆறு பதிலளிக்கக்கூடிய பிரேக் பாயின்ட்களை ஆதரிக்கிறது . பிரேக் பாயிண்ட்ஸ் மீடியா வினவல்களை அடிப்படையாகக் கொண்டது min-width, அதாவது அவை அந்த முறிவுப் புள்ளியையும் அதற்கு மேலே உள்ள அனைத்தையும் பாதிக்கிறது (எ.கா., , , , மற்றும் .col-sm-4க்கு பொருந்தும் ). ஒவ்வொரு பிரேக் பாயிண்டிலும் நீங்கள் கொள்கலன் மற்றும் நெடுவரிசை அளவு மற்றும் நடத்தை ஆகியவற்றைக் கட்டுப்படுத்தலாம்.smmdlgxlxxl
கொள்கலன்களை மையப்படுத்தி, உங்கள் உள்ளடக்கத்தை கிடைமட்டமாக திணிக்கவும். அனைத்து வியூபோர்ட்கள் மற்றும் சாதனங்கள் முழுவதும் .containerபதிலளிக்கக்கூடிய பிக்சல் அகலம் அல்லது திரவம் மற்றும் பிக்சல் அகலங்களின் கலவைக்கு பதிலளிக்கக்கூடிய கொள்கலன் (எ.கா., ) ஆகியவற்றைப் பயன்படுத்தவும்..container-fluidwidth: 100%.container-md
வரிசைகள் நெடுவரிசைகளுக்கான ரேப்பர்கள். ஒவ்வொரு நெடுவரிசையும் paddingஅவற்றுக்கிடையேயான இடைவெளியைக் கட்டுப்படுத்த கிடைமட்டமாக (ஒரு சாக்கடை என்று அழைக்கப்படுகிறது) உள்ளது. paddingஉங்கள் நெடுவரிசைகளில் உள்ள உள்ளடக்கம் பார்வைக்கு இடது பக்கமாக சீரமைக்கப்பட்டுள்ளதை உறுதிசெய்ய எதிர்மறை விளிம்புகளுடன் வரிசைகளில் இது எதிர்க்கப்படுகிறது . உங்கள் உள்ளடக்கத்தின் இடைவெளியை மாற்ற, நெடுவரிசையின் அளவு மற்றும் கால்வாய் வகுப்புகளை ஒரே சீராகப் பயன்படுத்த , வரிசைகள் மாற்றியமைக்கும் வகுப்புகளை ஆதரிக்கின்றன .
நெடுவரிசைகள் நம்பமுடியாத நெகிழ்வானவை. ஒரு வரிசைக்கு 12 டெம்ப்ளேட் நெடுவரிசைகள் உள்ளன, இது எத்தனை நெடுவரிசைகளையும் உள்ளடக்கிய வெவ்வேறு கூறுகளின் கலவையை உருவாக்க உங்களை அனுமதிக்கிறது. நெடுவரிசை வகுப்புகள் ஸ்பான் செய்ய வேண்டிய டெம்ப்ளேட் நெடுவரிசைகளின் எண்ணிக்கையைக் குறிப்பிடுகின்றன (எ.கா., col-4நான்கு இடைவெளிகள்). widthகள் சதவீதத்தில் அமைக்கப்பட்டுள்ளன, எனவே நீங்கள் எப்போதும் ஒரே மாதிரியான அளவைக் கொண்டிருப்பீர்கள்.
கட்டர்களும் பதிலளிக்கக்கூடியவை மற்றும் தனிப்பயனாக்கக்கூடியவை. எங்கள் விளிம்பு மற்றும் திணிப்பு இடைவெளி போன்ற அனைத்து அளவுகளிலும், அனைத்து பிரேக் பாயிண்ட்களிலும் கேட்டர் வகுப்புகள் கிடைக்கின்றன . கிடைமட்ட சாக்கடைகளை வகுப்புகள், செங்குத்து சாக்கடைகள் அல்லது வகுப்புகளுடன் கூடிய அனைத்து கால்வாய்களையும் மாற்றவும் . சாக்கடைகளை அகற்றவும் கிடைக்கிறது..gx-*.gy-*.g-*.g-0
சாஸ் மாறிகள், வரைபடங்கள் மற்றும் மிக்சின்கள் கட்டத்தை இயக்குகின்றன. பூட்ஸ்டார்ப்பில் முன் வரையறுக்கப்பட்ட கிரிட் வகுப்புகளைப் பயன்படுத்த விரும்பவில்லை எனில், எங்கள் கட்டத்தின் மூலமான சாஸைப் பயன்படுத்தி , அதிக சொற்பொருள் மார்க்அப் மூலம் உங்களுக்கான சொந்தத்தை உருவாக்கலாம். உங்களுக்காக இன்னும் அதிக நெகிழ்வுத்தன்மைக்காக இந்த Sass மாறிகளைப் பயன்படுத்த சில CSS தனிப்பயன் பண்புகளையும் நாங்கள் சேர்த்துள்ளோம்.

சில HTML உறுப்புகளை ஃப்ளெக்ஸ் கொள்கலன்களாகப் பயன்படுத்த இயலாமை போன்ற ஃப்ளெக்ஸ்பாக்ஸைச் சுற்றியுள்ள வரம்புகள் மற்றும் பிழைகள் குறித்து எச்சரிக்கையாக இருங்கள் .

கட்ட விருப்பங்கள்

பூட்ஸ்டார்ப்பின் கட்டம் அமைப்பு ஆறு இயல்புநிலை பிரேக் பாயிண்ட்கள் மற்றும் நீங்கள் தனிப்பயனாக்கும் எந்த பிரேக் பாயிண்டுகளிலும் மாற்றியமைக்க முடியும். ஆறு இயல்புநிலை கட்ட அடுக்குகள் பின்வருமாறு:

கூடுதல் சிறியது (xs)
சிறிய (sm)
நடுத்தர (md)
பெரிய (எல்ஜி)
கூடுதல் பெரியது (xl)
கூடுதல் பெரியது (xxl)

மேலே குறிப்பிட்டுள்ளபடி, இந்த முறிப்பு புள்ளிகள் ஒவ்வொன்றும் அதன் சொந்த கொள்கலன், தனித்துவமான வகுப்பு முன்னொட்டு மற்றும் மாற்றியமைப்பாளர்களைக் கொண்டுள்ளன. இந்த பிரேக் பாயிண்ட்களில் கட்டம் எப்படி மாறுகிறது என்பது இங்கே:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
கொள்கலன்`max-width`	எதுவுமில்லை (தானியங்கு)	540px	720px	960px	1140px	1320px
வகுப்பு முன்னொட்டு	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# நெடுவரிசைகள்	12
கால்வாய் அகலம்	1.5 rem (. இடது மற்றும் வலது 75 rem)
தனிப்பயன் சாக்கடைகள்	ஆம்
நெஸ்டபிள்	ஆம்
நெடுவரிசை வரிசைப்படுத்துதல்	ஆம்

தானியங்கு-தளவமைப்பு நெடுவரிசைகள்

போன்ற வெளிப்படையான எண்ணிடப்பட்ட வகுப்பு இல்லாமல் எளிதாக நெடுவரிசையை அளவிடுவதற்கு பிரேக்பாயிண்ட்-குறிப்பிட்ட நெடுவரிசை வகுப்புகளைப் பயன்படுத்தவும் .col-sm-6.

சம அகலம்

எடுத்துக்காட்டாக, ஒவ்வொரு சாதனம் மற்றும் காட்சிப் பகுதிக்கும் பொருந்தும் இரண்டு கட்ட தளவமைப்புகள் இங்கே xsஉள்ளன xxl. உங்களுக்குத் தேவைப்படும் ஒவ்வொரு பிரேக் பாயிண்டிற்கும் யூனிட்-குறைவான வகுப்புகளைச் சேர்க்கவும், ஒவ்வொரு நெடுவரிசையும் ஒரே அகலமாக இருக்கும்.

2 இல் 1

2 இல் 2

3 இல் 1

3 இல் 2

3 இல் 3

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

ஒரு நெடுவரிசை அகலத்தை அமைத்தல்

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

3 இல் 1

3 இல் 2 (அகலமானது)

3 இல் 3

3 இல் 1

3 இல் 2 (அகலமானது)

3 இல் 3

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

மாறக்கூடிய அகல உள்ளடக்கம்

col-{breakpoint}-autoஅவற்றின் உள்ளடக்கத்தின் இயல்பான அகலத்தின் அடிப்படையில் நெடுவரிசைகளை அளவிட வகுப்புகளைப் பயன்படுத்தவும் .

3 இல் 1

மாறக்கூடிய அகல உள்ளடக்கம்

3 இல் 3

3 இல் 1

மாறக்கூடிய அகல உள்ளடக்கம்

3 இல் 3

html

<div class="container text-center">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

பதிலளிக்கக்கூடிய வகுப்புகள்

பூட்ஸ்டார்ப்பின் கட்டம் சிக்கலான பதிலளிக்கக்கூடிய தளவமைப்புகளை உருவாக்குவதற்கு முன் வரையறுக்கப்பட்ட வகுப்புகளின் ஆறு அடுக்குகளை உள்ளடக்கியது. கூடுதல் சிறிய, சிறிய, நடுத்தர, பெரிய அல்லது கூடுதல் பெரிய சாதனங்களில் உங்கள் நெடுவரிசைகளின் அளவைத் தனிப்பயனாக்கவும்.

அனைத்து முறிவு புள்ளிகள்

சிறிய சாதனங்கள் முதல் பெரியது வரை ஒரே மாதிரியான கட்டங்களுக்கு, .colமற்றும் .col-*வகுப்புகளைப் பயன்படுத்தவும். உங்களுக்கு ஒரு குறிப்பிட்ட அளவிலான நெடுவரிசை தேவைப்படும்போது எண்ணிடப்பட்ட வகுப்பைக் குறிப்பிடவும்; இல்லையெனில், தயங்காமல் ஒட்டிக்கொள்ளுங்கள் .col.

col

கோல்-8

கோல்-4

html

<div class="container text-center">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

கிடைமட்டமாக அடுக்கி வைக்கப்பட்டுள்ளது

வகுப்புகளின் ஒரு தொகுப்பைப் பயன்படுத்தி .col-sm-*, நீங்கள் ஒரு அடிப்படை கட்ட அமைப்பை உருவாக்கலாம் sm.

col-sm-8

col-sm-4

col-sm

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

கலக்கவும்

உங்கள் நெடுவரிசைகள் சில கட்ட அடுக்குகளில் அடுக்கி வைக்க வேண்டாமா? தேவைக்கேற்ப ஒவ்வொரு அடுக்குக்கும் வெவ்வேறு வகுப்புகளின் கலவையைப் பயன்படுத்தவும். இவை அனைத்தும் எவ்வாறு செயல்படுகின்றன என்பதற்கான சிறந்த யோசனைக்கு கீழே உள்ள உதாரணத்தைப் பார்க்கவும்.

.col-md-8

.col-6 .col-md-4

.col-6

html

<div class="container text-center">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

வரிசை நெடுவரிசைகள்

.row-cols-*உங்கள் உள்ளடக்கத்தையும் தளவமைப்பையும் சிறப்பாக வழங்கும் நெடுவரிசைகளின் எண்ணிக்கையை விரைவாக அமைக்க, பதிலளிக்கக்கூடிய வகுப்புகளைப் பயன்படுத்தவும். சாதாரண .col-*வகுப்புகள் தனிப்பட்ட நெடுவரிசைகளுக்கு பொருந்தும் (எ.கா., ), வரிசை நெடுவரிசை வகுப்புகள் குறுக்குவழியாக .col-md-4பெற்றோரில் அமைக்கப்பட்டுள்ளன . நீங்கள் நெடுவரிசைகளுக்கு அவற்றின் இயல்பான அகலத்தை கொடுக்கலாம் .row..row-cols-auto

அடிப்படை கட்ட தளவமைப்புகளை விரைவாக உருவாக்க அல்லது உங்கள் கார்டு தளவமைப்புகளைக் கட்டுப்படுத்த, இந்த வரிசை நெடுவரிசை வகுப்புகளைப் பயன்படுத்தவும்.

நெடுவரிசை

html

<div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

நெடுவரிசை

html

<div class="container text-center">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

நெடுவரிசை

html

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

நெடுவரிசை

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

நெடுவரிசை

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

நெடுவரிசை

html

<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

நீங்கள் அதனுடன் உள்ள சாஸ் மிக்சினையும் பயன்படுத்தலாம் row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

கூடு கட்டுதல்

உங்கள் உள்ளடக்கத்தை இயல்புநிலை கட்டத்துடன் இணைக்க, ஏற்கனவே உள்ள நெடுவரிசையில் புதிய .rowமற்றும் நெடுவரிசைகளின் தொகுப்பைச் சேர்க்கவும் . உள்ளமைக்கப்பட்ட வரிசைகளில் 12 அல்லது அதற்கும் குறைவான நெடுவரிசைகள் சேர்க்கப்பட வேண்டும் (கிடைக்கும் 12 நெடுவரிசைகளையும் நீங்கள் பயன்படுத்த வேண்டிய அவசியமில்லை)..col-sm-*.col-sm-*

நிலை 1: .col-sm-3

நிலை 2: .col-8 .col-sm-6

நிலை 2: .col-4 .col-sm-6

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

சாஸ்

பூட்ஸ்டார்ப்பின் மூல சாஸ் கோப்புகளைப் பயன்படுத்தும் போது, தனிப்பயன், ��ொற்பொருள் மற்றும் பதிலளிக்கக்கூடிய பக்க தளவமைப்புகளை உருவாக்க, சாஸ் மாறிகள் மற்றும் மிக்ஸின்களைப் பயன்படுத்துவதற்கான விருப்பம் உங்களுக்கு உள்ளது. எங்கள் முன் வரையறுக்கப்பட்ட கிரிட் வகுப்புகள், வேகமாகப் பதிலளிக்கக்கூடிய தளவமைப்புகளுக்குப் பயன்படுத்தத் தயாராக இருக்கும் வகுப்புகளின் முழு தொகுப்பையும் வழங்க, இதே மாறிகள் மற்றும் மிக்சின்களைப் பயன்படுத்துகின்றன.

மாறிகள்

மாறிகள் மற்றும் வரைபடங்கள் நெடுவரிசைகளின் எண்ணிக்கை, கால்வாய் அகலம் மற்றும் மிதக்கும் நெடுவரிசைகளைத் தொடங்கும் ஊடக வினவல் புள்ளி ஆகியவற்றை தீர்மானிக்கிறது. மேலே ஆவணப்படுத்தப்பட்ட முன் வரையறுக்கப்பட்ட கட்ட வகுப்புகளையும், கீழே பட்டியலிடப்பட்டுள்ள தனிப்பயன் கலவைகளையும் உருவாக்க இவற்றைப் பயன்படுத்துகிறோம்.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

கலவைகள்

தனிப்பட்ட கட்ட நெடுவரிசைகளுக்கான சொற்பொருள் CSS ஐ உருவாக்க, கிரிட் மாறிகளுடன் இணைந்து மிக்சின்கள் பயன்படுத்தப்படுகின்றன.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

எடுத்துக்காட்டு பயன்பாடு

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

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

முக்கிய உள்ளடக்கம்

இரண்டாம் நிலை உள்ளடக்கம்

html

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

கட்டத்தைத் தனிப்பயனாக்குதல்

எங்கள் உள்ளமைக்கப்பட்ட கட்டம் Sass மாறிகள் மற்றும் வரைபடங்களைப் பயன்படுத்தி, முன் வரையறுக்கப்பட்ட கட்ட வகுப்புகளை முழுமையாகத் தனிப்பயனாக்க முடியும். அடுக்குகளின் எண்ணிக்கை, மீடியா வினவல் பரிமாணங்கள் மற்றும் கொள்கலன் அகலங்களை மாற்றவும் - பின்னர் மீண்டும் தொகுக்கவும்.

நெடுவரிசைகள் மற்றும் சாக்கடைகள்

கட்ட நெடுவரிசைகளின் எண்ணிக்கையை Sass மாறிகள் மூலம் மாற்றலாம். $grid-columnsஒவ்வொரு நெடுவரிசையின் அகலத்தையும் (சதவீதத்தில்) உருவாக்கப் பயன்படுகிறது, அதே நேரத்தில் $grid-gutter-widthநெடுவரிசை கால்வாய்களுக்கான அகலத்தை அமைக்கிறது. $grid-row-columnsநெடுவரிசைகளின் அதிகபட்ச எண்ணிக்கையை அமைக்க பயன்படுகிறது, .row-cols-*இந்த வரம்பிற்கு மேல் உள்ள எந்த எண்ணும் புறக்கணிக்கப்படும்.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

கட்ட அடுக்குகள்

நெடுவரிசைகளுக்கு அப்பால் நகரும், நீங்கள் கட்ட அடுக்குகளின் எண்ணிக்கையையும் தனிப்பயனாக்கலாம். நீங்கள் நான்கு கட்ட அடுக்குகளை மட்டுமே விரும்பினால், நீங்கள் $grid-breakpointsஇதைப் $container-max-widthsபுதுப்பிப்பீர்கள்:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass மாறிகள் அல்லது வரைபடங்களில் ஏதேனும் மாற்றங்களைச் செய்யும்போது, உங்கள் மாற்றங்களைச் சேமித்து மீண்டும் தொகுக்க வேண்டும். அவ்வாறு செய்வது, நெடுவரிசை அகலங்கள், ஆஃப்செட்கள் மற்றும் ஆர்டர் செய்வதற்கான புத்தம் புதிய முன் வரையறுக்கப்பட்ட கட்ட வகுப்புகளின் தொகுப்பை வெளியிடும். தனிப்பயன் முறிவுப் புள்ளிகளைப் பயன்படுத்த, பதிலளிக்கக்கூடிய தெரிவுநிலை பயன்பாடுகளும் புதுப்பிக்கப்படும். pxகட்ட மதிப்புகளை (இல்லை rem, em, அல்லது %) இல் அமைக்க உறுதிசெய்யவும் .