കണ്ടെയ്നറുകൾ

അവർ എങ്ങനെ പ്രവർത്തിക്കുന്നു

ബൂട്ട്‌സ്‌ട്രാപ്പിലെ ഏറ്റവും അടിസ്ഥാന ലേഔട്ട് ഘടകമാണ് കണ്ടെയ്‌നറുകൾ, ഞങ്ങളുടെ ഡിഫോൾട്ട് ഗ്രിഡ് സിസ്റ്റം ഉപയോഗിക്കുമ്പോൾ അവ ആവശ്യമാണ് . അവയ്ക്കുള്ളിലെ ഉള്ളടക്കം ഉൾക്കൊള്ളാനും പാഡ് ചെയ്യാനും (ചിലപ്പോൾ) കേന്ദ്രീകരിക്കാനും കണ്ടെയ്‌നറുകൾ ഉപയോഗിക്കുന്നു. കണ്ടെയ്‌നറുകൾ നെസ്റ്റുചെയ്യാൻ കഴിയുമെങ്കിലും , മിക്ക ലേഔട്ടുകളിലും നെസ്റ്റഡ് കണ്ടെയ്‌നർ ആവശ്യമില്ല.

ബൂട്ട്‌സ്‌ട്രാപ്പ് മൂന്ന് വ്യത്യസ്ത കണ്ടെയ്‌നറുകളുമായി വരുന്നു:

• .container, max-widthഓരോ റെസ്‌പോൺസീവ് ബ്രേക്ക്‌പോയിന്റിലും ഇത് സജ്ജീകരിക്കുന്നു
• .container-{breakpoint}, ഇത് width: 100%നിർദ്ദിഷ്ട ബ്രേക്ക്‌പോയിന്റ് വരെയാണ്
• .container-fluid, അത് width: 100%എല്ലാ ബ്രേക്ക്‌പോയിന്റുകളിലും ആണ്

ഓരോ കണ്ടെയ്‌നറും max-widthഒറിജിനലുമായി താരതമ്യപ്പെടുത്തുന്നത് എങ്ങനെയെന്ന് ചുവടെയുള്ള പട്ടിക വ്യക്തമാക്കുന്നു ..container.container-fluid

അവ പ്രവർത്തനക്ഷമമായി കാണുകയും ഞങ്ങളുടെ ഗ്രിഡ് ഉദാഹരണത്തിൽ താരതമ്യം ചെയ്യുകയും ചെയ്യുക .

സ്ഥിരസ്ഥിതി കണ്ടെയ്നർ

ഞങ്ങളുടെ ഡിഫോൾട്ട് .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 വിഭാഗം പരിശോധിക്കുക .