Стеклар
Компонент макетын тизрәк һәм җиңелрәк итәр өчен, безнең флексбок инженерлыклары өстендә төзелгән шортанд ярдәмчеләре.
Стеклар 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>
Сасс
.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;
}