ਕੰਟੇਨਰ

ਉਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ

ਕੰਟੇਨਰ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਸਭ ਤੋਂ ਬੁਨਿਆਦੀ ਖਾਕਾ ਤੱਤ ਹਨ ਅਤੇ ਸਾਡੇ ਡਿਫੌਲਟ ਗਰਿੱਡ ਸਿਸਟਮ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਲੋੜੀਂਦੇ ਹਨ । ਕੰਟੇਨਰਾਂ ਦੀ ਵਰਤੋਂ ਉਹਨਾਂ ਦੇ ਅੰਦਰ ਸਮੱਗਰੀ ਨੂੰ ਰੱਖਣ, ਪੈਡ ਕਰਨ ਅਤੇ (ਕਈ ਵਾਰ) ਕੇਂਦਰਿਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਜਦੋਂ ਕਿ ਕੰਟੇਨਰਾਂ ਨੂੰ ਨੇਸਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਜ਼ਿਆਦਾਤਰ ਲੇਆਉਟਸ ਨੂੰ ਨੇਸਟਡ ਕੰਟੇਨਰ ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ ਹੈ।

ਬੂਟਸਟਰੈਪ ਤਿੰਨ ਵੱਖ-ਵੱਖ ਕੰਟੇਨਰਾਂ ਨਾਲ ਆਉਂਦਾ ਹੈ:

• .containermax-width, ਜੋ ਹਰੇਕ ਜਵਾਬਦੇਹ ਬ੍ਰੇਕਪੁਆਇੰਟ 'ਤੇ ਸੈੱਟ ਕਰਦਾ ਹੈ
• .container-fluid, ਜੋ ਕਿ width: 100%ਸਾਰੇ ਬ੍ਰੇਕਪੁਆਇੰਟ 'ਤੇ ਹੈ
• .container-{breakpoint}, ਜੋ 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>

ਸੱਸ

ਜਿਵੇਂ ਕਿ ਉੱਪਰ ਦਿਖਾਇਆ ਗਿਆ ਹੈ, ਬੂਟਸਟਰੈਪ ਪੂਰਵ-ਪ੍ਰਭਾਸ਼ਿਤ ਕੰਟੇਨਰ ਕਲਾਸਾਂ ਦੀ ਇੱਕ ਲੜੀ ਤਿਆਰ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਹਾਡੀ ਇੱਛਾ ਅਨੁਸਾਰ ਲੇਆਉਟ ਬਣਾਉਣ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕੀਤੀ ਜਾ ਸਕੇ। ਤੁਸੀਂ ਇਹਨਾਂ ਪੂਰਵ ਪਰਿਭਾਸ਼ਿਤ ਕੰਟੇਨਰ ਕਲਾਸਾਂ ਨੂੰ ਸਾਸ ਮੈਪ (ਵਿੱਚ ਪਾਇਆ) ਨੂੰ ਸੋਧ ਕੇ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ _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 ਭਾਗ ਨੂੰ ਵੇਖੋ ।