Bootstrap - Стеки: Путеводитель для начинающих

Здравствуйте, будущие веб-разработчики! Сегодня мы окунемся в奇妙ный мир Bootstrap Стеков. Не волнуйтесь, если вы еще ни разу не писали строчку кода – я буду вашим доброжелательным проводником на этом захватывающем пути. К концу этого руководства вы будете располагать элементы как профи!

Bootstrap - Stacks

Что такое Bootstrap Стеки?

Прежде чем мы начнем, давайте поговорим о том, что такое стэки в Bootstrap. Представьте, что вы строите башню из кубиков Lego. Вы можете складывать их вертикально (один поверх другого) или горизонтально (рядом). Bootstrap стэки работают аналогичным образом, но вместо кубиков Lego, мы располагаем HTML элементы на веб-странице.

Теперь давайте рассмотрим два основных типа стэков в Bootstrap:

Вертикальный стэк

Вертикальный стэк похож на стопку блинов – каждый элемент sits на top của элемента ниже. В Bootstrap, мы создаем вертикальные стэки, используя класс .vstack.

Основной вертикальный стэк

Давайте начнем с простого примера:

<div class="vstack gap-3">
<div class="p-2">Первый элемент</div>
<div class="p-2">Второй элемент</div>
<div class="p-2">Третий элемент</div>
</div>

В этом коде:

Мы создаем контейнер <div> с классом vstack.
gap-3 добавляет немного пространства между是我们的 стекающими элементами.
Каждый элемент – это <div> с классом p-2 для отступа.

Когда вы запустите этот код, вы увидите три ящика, сложенные вертикально, каждый из которых содержит текст. Это так просто!

Вертикальный стэк с различным контентом

Давайте добавим немного остроты:

<div class="vstack gap-3">
<button class="btn btn-secondary">Нажми на меня!</button>
<div class="bg-light border">Я – коробка</div>
<div class="bg-light border">
<h3>Я – заголовок</h3>
<p>И я – текст</p>
</div>
</div>

Здесь мы смешали различные типы контента:

Кнопка (используя классы кнопок Bootstrap)
Простой div с легким фоном и границей
Более сложный div с заголовком и абзацем

Это показывает, насколько универсальными могут быть вертикальные стэки. Вы не ограничены только простыми текстовыми ящиками!

Горизонтальный стэк

Теперь давайте изменим направление и поговорим о горизонтальных стэках. Если вертикальные стэки похожи на блины, то горизонтальные стэки похожи на линию домино – элементы располагаются рядом. Мы используем класс .hstack для этого.

Основной горизонтальный стэк

Вот простой пример:

<div class="hstack gap-3">
<div class="p-2">Первый</div>
<div class="p-2">Второй</div>
<div class="p-2">Третий</div>
</div>

Этот код очень похож на наш вертикальный стэк, но мы используем hstack вместо vstack. Результат? Три ящика, расположенные горизонтально!

Горизонтальный стэк с выравниванием

Давайте сделаем вещи интереснее:

<div class="hstack gap-3">
<div class="bg-light border">Первый элемент</div>
<div class="bg-light border ms-auto">Второй элемент</div>
<div class="bg-light border">Третий элемент</div>
</div>

В этом примере:

Мы добавили фоны и границы нашим элементам.
Класс ms-auto на втором элементе толкает его вправо, создавая пространство между первым и вторым элементами.

Это демонстрирует, как мы можем контролировать позиционирование внутри нашего горизонтального стэка.

Combining Vertical and Horizontal Stacks

Теперь, где магия happens. Мы можем combine вертикыльные и горизонтальные стэки, чтобы создать сложные макеты:

<div class="vstack gap-3">
<div class="hstack gap-3">
<input class="form-control me-auto" type="text" placeholder="Добавь свой элемент здесь...">
<button type="button" class="btn btn-secondary">Submit</button>
<div class="vr"></div>
<button type="button" class="btn btn-outline-danger">Reset</button>
</div>
<div class="bg-light border">Custom item</div>
<div class="bg-light border">Custom item</div>
</div>

Этот сложный пример показывает:

Вертикальный стэк в качестве основного контейнера
Горизонтальный стэк внутри вертикального стэка (ввод и кнопки)
Дополнительные элементы под стэком

Результат – это структуру, похожую на форму с дополнительными элементами ниже – распространенный паттерн в веб-дизайне!

Таблица методов стэков

Вот удобная таблица, резюмирующая ключевые классы и методы, которые мы обсуждали:

Класс/Метод	Описание	Пример
`.vstack`	Создает вертикальный стэк	`<div class="vstack">`
`.hstack`	Создает горизонтальный стэк	`<div class="hstack">`
`gap-{size}`	Добавляет пространство между элементами стэка	`<div class="vstack gap-3">`
`ms-auto`	Pushes an item to the right in an hstack	`<div class="ms-auto">`
`.vr`	Создает вертикальную линию (разделитель) в hstack	`<div class="vr"></div>`

Заключение

И вот мы и добрались до этого, друзья! Мы совершили путешествие через страну Bootstrap Стеков, от простых вертикальных排列 до сложных kombinаций horizontal и vertical стэков. Помните, веб-дизайн – это как строительство из Lego – начните с этих простых деталек, и вскоре вы будете создавать потрясающие структуры!

Практикуйтесь с этими примерами, экспериментируйте с различными kombinaciyami, и не бойтесь犯错. Так мы все учимся и растем как разработчики. Before you know it, вы будете располагать элементы как erfahrener Pro!

Счастливо кодите, и да будет так, чтобы ваши стэки всегда выравнивались идеально! ?

Credits: Image by storyset

Предыдущий учебник:

Bootstrap - Relation

Следующий учебник:

Bootstrap - Расширенная ссылка