Rafu
Visaidizi vya mkono mkato ambavyo huunda juu ya huduma zetu za flexbox ili kufanya mpangilio wa vipengele haraka na rahisi zaidi kuliko hapo awali.
Rafu hutoa njia ya mkato ya kutumia idadi ya vipengele vya flexbox ili kuunda kwa haraka na kwa urahisi miundo katika Bootstrap. Sifa zote za dhana na utekelezaji huenda kwa mradi wa Pylon wa chanzo huria .
Wima
Tumia .vstack
kuunda mipangilio ya wima. Vipengee vilivyopangwa kwa rafu ni upana kamili kwa chaguo-msingi. Tumia .gap-*
huduma kuongeza nafasi kati ya vitu.
<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>
Mlalo
Tumia .hstack
kwa mipangilio ya usawa. Vipengee vilivyopangwa huwekwa katikati kiwima kwa chaguo-msingi na huchukua tu upana unaohitajika. Tumia .gap-*
huduma kuongeza nafasi kati ya vitu.
<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>
Kutumia huduma za ukingo wa usawa kama .ms-auto
vile spacers:
<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>
Na sheria za wima :
<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>
Mifano
Tumia .vstack
kuweka vitufe na vitu vingine:
<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>
Unda fomu ya ndani na .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;
}