கொள்கலன்கள்

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

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

அவர்கள் எப்படி வேலை செய்கிறார்கள்

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

பூட்ஸ்ட்ராப் மூன்று வெவ்வேறு கொள்கலன்களுடன் வருகிறது:

.containermax-width, இது ஒவ்வொரு பதிலளிக்கும் முறிவு புள்ளியிலும் ஒரு அமைக்கிறது
.container-{breakpoint}, இது width: 100%குறிப்பிடப்பட்ட இடைவெளி வரை
.container-fluid, இது width: 100%அனைத்து முறிவு புள்ளிகளிலும் உள்ளது

ஒவ்வொரு கன்டெய்னரும் அசல் மற்றும் ஒவ்வொரு பிரேக் பாயின்ட் முழுவதும் எப்படி max-widthஒப்பிடுகிறது என்பதை கீழே உள்ள அட்டவணை விளக்குகிறது ..container.container-fluid

அவற்றை செயலில் பார்க்கவும் மற்றும் அவற்றை எங்கள் கிரிட் உதாரணத்தில் ஒப்பிடவும் .

	மிகச்சிறியது <576px	சிறிய ≥576px	நடுத்தர ≥768px	பெரியது ≥992px	X-பெரியது ≥1200px	XX-பெரியது ≥1400px
`.container`	100%	540px	720px	960px	1140px	1320px
`.container-sm`	100%	540px	720px	960px	1140px	1320px
`.container-md`	100%	100%	720px	960px	1140px	1320px
`.container-lg`	100%	100%	100%	960px	1140px	1320px
`.container-xl`	100%	100%	100%	100%	1140px	1320px
`.container-xxl`	100%	100%	100%	100%	100%	1320px
`.container-fluid`	100%	100%	100%	100%	100%	100%

இயல்புநிலை கொள்கலன்

எங்கள் இயல்புநிலை .containerகிளாஸ் ஒரு பதிலளிக்கக்கூடிய, நிலையான அகல கொள்கலன், அதாவது max-widthஒவ்வொரு பிரேக் பாயிண்டிலும் அதன் மாற்றங்கள்.

<div class="container">
  <!-- Content here -->
</div>

பதிலளிக்கக்கூடிய கொள்கலன்கள்

குறிப்பிட்ட பிரேக் பாயிண்டை அடையும் வரை 100% அகலமுள்ள வகுப்பைக் குறிப்பிட பதிலளிக்கக்கூடிய கொள்கலன்கள் உங்களை அனுமதிக்கின்றன, அதன் பிறகு max-widthஒவ்வொரு உயர் பிரேக் பாயிண்டுக்கும் s ஐப் பயன்படுத்துகிறோம். எடுத்துக்காட்டாக, பிரேக் பாயிண்ட் அடையும் .container-smவரை தொடங்குவதற்கு 100% அகலம் உள்ளது , அங்கு அது , , , மற்றும் .smmdlgxlxxl

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

திரவ கொள்கலன்கள்

ஒரு முழு அகல கொள்கலனுக்குப் பயன்படுத்தவும் .container-fluid, காட்சிப் பகுதியின் முழு அகலமும் பரவுகிறது.

<div class="container-fluid">
  ...
</div>

சாஸ்

மேலே காட்டப்பட்டுள்ளபடி, நீங்கள் விரும்பும் தளவமைப்புகளை உருவாக்குவதற்கு பூட்ஸ்டார்ப் முன் வரையறுக்கப்பட்ட கொள்கலன் வகுப்புகளின் வரிசையை உருவாக்குகிறது. சாஸ் வரைபடத்தை (இல் காணப்படும் _variables.scss) மாற்றுவதன் மூலம் இந்த முன் வரையறுக்கப்பட்ட கொள்கலன் வகுப்புகளை நீங்கள் தனிப்பயனாக்கலாம்:

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

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

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

எங்கள் Sass வரைபடங்கள் மற்றும் மாறிகளை எவ்வாறு மாற்றுவது என்பது பற்றிய கூடுதல் தகவல் மற்றும் எடுத்துக்காட்டுகளுக்கு , கிரிட் ஆவணத்தின் Sass பகுதியைப் பார்க்கவும் .