Stacks
زاپچاس ئورۇنلاشتۇرۇشىنى ئىلگىرىكىگە قارىغاندا تېخىمۇ تېز ۋە ئاسان قىلىش ئۈچۈن ئەۋرىشىم قوراللىرىمىزنىڭ ئۈستىگە قۇرۇلغان Shorthand ياردەمچىلىرى.
Stacks Bootstrap دا تېز ۋە ئاسان ئورۇنلاشتۇرۇش ئۈچۈن بىر قاتار ئەۋرىشىم خۇسۇسىيەتلەرنى قوللىنىش ئۈچۈن تېزلەتمە تەمىنلەيدۇ. بۇ ئۇقۇم ۋە يولغا قويۇشنىڭ بارلىق ئىناۋىتى ئوچۇق كود Pylon تۈرىگە كىرىدۇ.
ۋېرتىكال
.vstack
تىك ئورۇنلاشتۇرۇش ئۈچۈن ئىشلىتىڭ . قاچىلانغان تۈرلەر سۈكۈتتىكى ھالەتتە تولۇق كەڭلىك. .gap-*
تۈرلەر ئارا بوشلۇق قوشۇش ئۈچۈن ئىشلىتىڭ .
<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-*
تۈرلەر ئارا بوشلۇق قوشۇش ئۈچۈن ئىشلىتىڭ .
<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
:
<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>
ۋېرتىكال قائىدىلەر بىلەن :
<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
كۇنۇپكىلار ۋە باشقا ئېلېمېنتلارنى تىزىشقا ئىشلىتىڭ :
<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
:
<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;
}