in English

ਸਟੈਕ

ਸ਼ਾਰਟਹੈਂਡ ਸਹਾਇਕ ਜੋ ਕੰਪੋਨੈਂਟ ਲੇਆਉਟ ਨੂੰ ਪਹਿਲਾਂ ਨਾਲੋਂ ਤੇਜ਼ ਅਤੇ ਆਸਾਨ ਬਣਾਉਣ ਲਈ ਸਾਡੀਆਂ flexbox ਉਪਯੋਗਤਾਵਾਂ ਦੇ ਸਿਖਰ 'ਤੇ ਬਣਦੇ ਹਨ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਸਟੈਕ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਤੇਜ਼ੀ ਨਾਲ ਅਤੇ ਆਸਾਨੀ ਨਾਲ ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ ਕਈ ਫਲੈਕਸਬਾਕਸ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਇੱਕ ਸ਼ਾਰਟਕੱਟ ਪੇਸ਼ ਕਰਦੇ ਹਨ। ਸੰਕਲਪ ਅਤੇ ਲਾਗੂ ਕਰਨ ਦਾ ਸਾਰਾ ਸਿਹਰਾ ਓਪਨ ਸੋਰਸ ਪਾਈਲਨ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਜਾਂਦਾ ਹੈ ।

ਸਿਰ! flexbox ਦੇ ਨਾਲ ਗੈਪ ਉਪਯੋਗਤਾਵਾਂ ਲਈ ਸਮਰਥਨ ਹਾਲ ਹੀ ਵਿੱਚ Safari ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ ਸੀ, ਇਸਲਈ ਆਪਣੇ ਉਦੇਸ਼ ਵਾਲੇ ਬ੍ਰਾਊਜ਼ਰ ਸਮਰਥਨ ਦੀ ਪੁਸ਼ਟੀ ਕਰਨ 'ਤੇ ਵਿਚਾਰ ਕਰੋ। ਗਰਿੱਡ ਲੇਆਉਟ ਵਿੱਚ ਕੋਈ ਸਮੱਸਿਆ ਨਹੀਂ ਹੋਣੀ ਚਾਹੀਦੀ। ਹੋਰ ਪੜ੍ਹੋ .

ਵਰਟੀਕਲ

.vstackਵਰਟੀਕਲ ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ ਵਰਤੋ । ਸਟੈਕ ਕੀਤੀਆਂ ਆਈਟਮਾਂ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਤੌਰ 'ਤੇ ਪੂਰੀ-ਚੌੜਾਈ ਵਾਲੀਆਂ ਹੁੰਦੀਆਂ ਹਨ। .gap-*ਆਈਟਮਾਂ ਵਿਚਕਾਰ ਥਾਂ ਜੋੜਨ ਲਈ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ।

ਪਹਿਲੀ ਆਈਟਮ

ਦੂਜੀ ਆਈਟਮ

ਤੀਜੀ ਆਈਟਮ

html

<div class="vstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

ਹਰੀਜੱਟਲ

.hstackਹਰੀਜੱਟਲ ਲੇਆਉਟ ਲਈ ਵਰਤੋਂ । ਸਟੈਕਡ ਆਈਟਮਾਂ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਤੌਰ 'ਤੇ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਹੁੰਦੀਆਂ ਹਨ ਅਤੇ ਸਿਰਫ਼ ਉਹਨਾਂ ਦੀ ਲੋੜੀਂਦੀ ਚੌੜਾਈ ਨੂੰ ਲੈਂਦੀਆਂ ਹਨ। .gap-*ਆਈਟਮਾਂ ਵਿਚਕਾਰ ਥਾਂ ਜੋੜਨ ਲਈ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ ।

ਪਹਿਲੀ ਆਈਟਮ

ਦੂਜੀ ਆਈਟਮ

ਤੀਜੀ ਆਈਟਮ

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

ਖਿਤਿਜੀ ਮਾਰਜਿਨ ਉਪਯੋਗਤਾਵਾਂ ਜਿਵੇਂ .ms-autoਕਿ ਸਪੇਸਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ:

ਪਹਿਲੀ ਆਈਟਮ

ਦੂਜੀ ਆਈਟਮ

ਤੀਜੀ ਆਈਟਮ

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

ਅਤੇ ਲੰਬਕਾਰੀ ਨਿਯਮਾਂ ਦੇ ਨਾਲ :

ਪਹਿਲੀ ਆਈਟਮ

ਦੂਜੀ ਆਈਟਮ

ਤੀਜੀ ਆਈਟਮ

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>

ਉਦਾਹਰਨਾਂ

.vstackਬਟਨਾਂ ਅਤੇ ਹੋਰ ਤੱਤਾਂ ਨੂੰ ਸਟੈਕ ਕਰਨ ਲਈ ਵਰਤੋਂ :

html

<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">Save changes</button>
  <button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>

ਇਸ ਨਾਲ ਇੱਕ ਇਨਲਾਈਨ ਫਾਰਮ ਬਣਾਓ .hstack:

html

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

ਸੱਸ

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}