കണ്ടെയ്നറുകൾ
തന്നിരിക്കുന്ന ഉപകരണത്തിലോ വ്യൂപോർട്ടിലോ നിങ്ങളുടെ ഉള്ളടക്കം ഉൾക്കൊള്ളുകയും പാഡ് ചെയ്യുകയും വിന്യസിക്കുകയും ചെയ്യുന്ന ബൂട്ട്സ്ട്രാപ്പിന്റെ അടിസ്ഥാന നിർമാണ ബ്ലോക്കാണ് കണ്ടെയ്നറുകൾ.
അവർ എങ്ങനെ പ്രവർത്തിക്കുന്നു
ബൂട്ട്സ്ട്രാപ്പിലെ ഏറ്റവും അടിസ്ഥാന ലേഔട്ട് ഘടകമാണ് കണ്ടെയ്നറുകൾ, ഞങ്ങളുടെ ഡിഫോൾട്ട് ഗ്രിഡ് സിസ്റ്റം ഉപയോഗിക്കുമ്പോൾ അവ ആവശ്യമാണ് . അവയ്ക്കുള്ളിലെ ഉള്ളടക്കം ഉൾക്കൊള്ളാനും പാഡ് ചെയ്യാനും (ചിലപ്പോൾ) കേന്ദ്രീകരിക്കാനും കണ്ടെയ്നറുകൾ ഉപയോഗിക്കുന്നു. കണ്ടെയ്നറുകൾ നെസ്റ്റുചെയ്യാൻ കഴിയുമെങ്കിലും , മിക്ക ലേഔട്ടുകൾക്കും ഒരു നെസ്റ്റഡ് കണ്ടെയ്നർ ആവശ്യമില്ല.
ബൂട്ട്സ്ട്രാപ്പ് മൂന്ന് വ്യത്യസ്ത കണ്ടെയ്നറുകളുമായി വരുന്നു:
.container
max-width
, ഇത് ഓരോ റെസ്പോൺസീവ് ബ്രേക്ക്പോയിന്റിലും ഒരു സെറ്റ് ചെയ്യുന്നു.container-fluid
, അത്width: 100%
എല്ലാ ബ്രേക്ക്പോയിന്റുകളിലും ആണ്.container-{breakpoint}
, ഇത്width: 100%
നിർദ്ദിഷ്ട ബ്രേക്ക്പോയിന്റ് വരെയാണ്
ഓരോ കണ്ടെയ്നറും max-width
ഒറിജിനലുമായി താരതമ്യപ്പെടുത്തുന്നത് എങ്ങനെയെന്ന് ചുവടെയുള്ള പട്ടിക വ്യക്തമാക്കുന്നു ..container
.container-fluid
അവ പ്രവർത്തനക്ഷമമായി കാണുകയും ഞങ്ങളുടെ ഗ്രിഡ് ഉദാഹരണത്തിൽ താരതമ്യം ചെയ്യുകയും ചെയ്യുക .
അധിക ചെറുത് <576px |
ചെറുത് ≥576px |
ഇടത്തരം ≥768px |
വലുത് ≥992px |
X-Large ≥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>
സാസ്
മുകളിൽ കാണിച്ചിരിക്കുന്നതുപോലെ, നിങ്ങൾ ആഗ്രഹിക്കുന്ന ലേഔട്ടുകൾ നിർമ്മിക്കാൻ സഹായിക്കുന്നതിന് ബൂട്ട്സ്ട്രാപ്പ് മുൻകൂട്ടി നിശ്ചയിച്ചിട്ടുള്ള കണ്ടെയ്നർ ക്ലാസുകളുടെ ഒരു പരമ്പര സൃഷ്ടിക്കുന്നു. ഈ മുൻനിർവ്വചിച്ച കണ്ടെയ്നർ ക്ലാസുകളെ ശക്തിപ്പെടുത്തുന്ന Sass മാപ്പ് (ഇതിൽ കാണപ്പെടുന്നു _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 വിഭാഗം പരിശോധിക്കുക .