கொள்கலன்கள்
கன்டெய்னர்கள் என்பது பூட்ஸ்டார்ப்பின் அடிப்படை கட்டுமானத் தொகுதியாகும், அவை கொடுக்கப்பட்ட சாதனம் அல்லது காட்சிப் போர்ட்டில் உங்கள் உள்ளடக்கத்தைக் கொண்டிருக்கும், பேட் செய்து, சீரமைக்கலாம்.
அவர்கள் எப்படி வேலை செய்கிறார்கள்
கொள்கலன்கள் பூட்ஸ்டார்ப்பில் மிகவும் அடிப்படையான தளவமைப்பு உறுப்பு மற்றும் எங்கள் இயல்புநிலை கட்ட அமைப்பைப் பயன்படுத்தும் போது தேவைப்படும் . கன்டெய்னர்கள் அவற்றிற்குள் உள்ள உள்ளடக்கத்தை, பேட் மற்றும் (சில நேரங்களில்) மையப்படுத்த பயன்படுத்தப்படுகின்றன. கொள்கலன்களை உள்ளமைக்க முடியும் என்றாலும் , பெரும்பாலான தளவமைப்புகளுக்கு உள்ளமைக்கப்பட்ட கொள்கலன் தேவையில்லை.
பூட்ஸ்ட்ராப் மூன்று வெவ்வேறு கொள்கலன்களுடன் வருகிறது:
.container
max-width
, இது ஒவ்வொரு பதிலளிக்கும் முறிவு புள்ளியிலும் ஒரு அமைக்கிறது.container-fluid
, இதுwidth: 100%
அனைத்து முறிவு புள்ளிகளிலும் உள்ளது.container-{breakpoint}
, இது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% அகலம் உள்ளது , அங்கு அது , , , மற்றும் .sm
md
lg
xl
xxl
<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();
}