Stacks

زاپچاس ئورۇنلاشتۇرۇشىنى ئىلگىرىكىگە قارىغاندا تېخىمۇ تېز ۋە ئاسان قىلىش ئۈچۈن ئەۋرىشىم قوراللىرىمىزنىڭ ئۈستىگە قۇرۇلغان Shorthand ياردەمچىلىرى.

بۇ بەتتە

Stacks Bootstrap دا تېز ۋە ئاسان ئورۇنلاشتۇرۇش ئۈچۈن بىر قاتار ئەۋرىشىم خۇسۇسىيەتلەرنى قوللىنىش ئۈچۈن تېزلەتمە تەمىنلەيدۇ. بۇ ئۇقۇم ۋە يولغا قويۇشنىڭ بارلىق ئىناۋىتى ئوچۇق كود Pylon تۈرىگە كىرىدۇ.

Heads up! 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>

Sass

.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;
}