Стеклар

Компонент макетын тизрәк һәм җиңелрәк итәр өчен, безнең флексбок инженерлыклары өстендә төзелгән шортанд ярдәмчеләре.

Бу биттә

Стеклар Bootstrap'та макетларны тиз һәм җиңел ясау өчен берничә флексбокс үзлекләрен куллану өчен кыска юл тәкъдим итәләр. Концепция һәм тормышка ашыру өчен барлык кредит ачык чыганак Pylon проектына бирелә .

Идарә итә! Күптән түгел Safari'ка flexbox ярдәмендә бушлык ярдәме өчен ярдәм өстәлде, шуңа күрә сезнең браузер ярдәмен тикшерегез. Челтәр макетында проблемалар булырга тиеш түгел. Күбрәк укыгыз .

Вертикаль

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