Bootstrap - Колонки: Создание адаптивных макетов с легкостью
Здравствуйте,野心勃勃ые веб-разработчики! Сегодня мы погрузимся в одну из самых мощных функций Bootstrap: колонки. Как ваш доброжелательный соседский компьютерный учитель, я рад помочь вам в этом путешествии. Поверьте мне, к концу этого руководства вы будете создавать адаптивные макеты, как профи!
Как это работает
Прежде чем мы углубимся в детали, давайте поймем основы. Сеточная система Bootstrap основана на 12-колоночной разметке. Представьте себе, что вы делятесь пиццей на 12 кусочков - вы можете съесть их все сами (одна полная колонка) или поделиться с друзьями (множество колонок).
Вот простой пример, чтобы начать:
<div class="container">
<div class="row">
<div class="col-sm-4">Колонка 1</div>
<div class="col-sm-4">Колонка 2</div>
<div class="col-sm-4">Колонка 3</div>
</div>
</div>В этом примере мы создали три одинаковые по ширине колонки на малых экранах и выше. Класс col-sm-4 означает "занимать 4 из 12 колонок на малых экранах". Это как если бы вы сказали: "Дайте мне, пожалуйста, 4 кусочка из той 12-кусочной пиццы!"
Выравнивание
Теперь, когда у нас есть колонки, давайте научимся их выравнивать. Это как arranging furniture в комнате - вы хотите, чтобы все выглядело идеально!
Вертикальное выравнивание
Для вертикального выравнивания колонок мы используем классы на строке:
<div class="container">
<div class="row align-items-start">
<div class="col">Вверху</div>
<div class="col">Вверху</div>
<div class="col">Вверху</div>
</div>
<div class="row align-items-center">
<div class="col">Посередине</div>
<div class="col">Посередине</div>
<div class="col">Посередине</div>
</div>
<div class="row align-items-end">
<div class="col">Внизу</div>
<div class="col">Внизу</div>
<div class="col">Внизу</div>
</div>
</div>Здесь мы используем align-items-start, align-items-center и align-items-end, чтобы выровнять наши колонки вверху, по центру и внизу строки соответственно.
Горизонтальное выравнивание
Для горизонтального выравнивания мы используем классы justify-content:
<div class="container">
<div class="row justify-content-start">
<div class="col-4">Один</div>
<div class="col-4">Два</div>
</div>
<div class="row justify-content-center">
<div class="col-4">Один</div>
<div class="col-4">Два</div>
</div>
<div class="row justify-content-end">
<div class="col-4">Один</div>
<div class="col-4">Два</div>
</div>
</div>Эти классы (justify-content-start, justify-content-center, justify-content-end) выравнивают наши колонки слева, по центру и справа контейнера.
Перенос колонок
Иногда у вас может быть больше 12 единиц колонок в строке. Не волнуйтесь, Bootstrap всегда поможет вам! Он автоматически перенесет лишние колонки на новую строку:
<div class="container">
<div class="row">
<div class="col-9">Колонка 1</div>
<div class="col-4">Колонка 2</div>
<div class="col-6">Колонка 3</div>
</div>
</div>В этом примере 9 + 4 = 13, что больше 12, поэтому вторая колонка переносятся на новую строку.
Разрывы колонок
Но что, если вы хотите принудительно начать новую строку? Введите разрыв колонки:
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>Элемент <div class="w-100"></div> создает разрыв шириной 100%, принудительноbeginning следующую колонку с новой строки.
Переназначение
Классы заказа
Bootstrap позволяет вам изменять визуальный порядок ваших колонок:
<div class="container">
<div class="row">
<div class="col order-3">Первый, но последний</div>
<div class="col order-2">Второй, но второй</div>
<div class="col order-1">Третий, но первый</div>
</div>
</div>Классы order- определяют порядок колонок. Это как если бы ваши колонки играли в musical chairs!
Отступы колонок
Классы отступов
Иногда вам может понадобиться добавить немного места перед колонкой. Вот где на помощь приходят классы отступов:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
</div>Класс offset-md-4 добавляет отступ слева, эквивалентный 4 колонкам, pushing нашу вторую колонку вправо.
Очистка колонок на адаптивных точках останова
По мере того как ваш макет изменяется на разных размерах экранов, вам может потребоваться清除浮动ные колонки:
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>Здесь d-none d-md-block прячет разрыв на малых экранах, но показывает его на средних экранах и выше.
Утилиты отступов
Bootstrap предоставляет утилиты для быстрой корректировки отступов:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
</div>Класс ml-auto pushing вторую колонку вправо, автоматически корректируя левый отступ.
Независимые классы колонок
Наконец, вы можете использовать классы колонок без оберток строки для большей гибкости:
<div class="container">
<div class="col-3 bg-light p-3 border">
.col-3: ширина 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: ширина 75% выше точки останова sm
</div>
</div>Этот подход дает вам больше контроля над вашим макетом, особенно для сложных дизайнов.
И вот и все,folks! Вы только что узнали все о колонках Bootstrap. Помните, что практика делает мастера, так что не бойтесь экспериментировать с этими концепциями. Вскоре вы будете создавать адаптивные макеты, которые заставят даже самых опытных веб-разработчиков завидовать!
Вот quick reference table классов колонок, которые мы рассмотрели:
| Класс | Описание |
|---|---|
| col-* | Основной класс колонки (* может быть 1-12) |
| col-sm-* | Колонка для малых экранов и выше |
| col-md-* | Колонка для средних экранов и выше |
| col-lg-* | Колонка для больших экранов и выше |
| col-xl-* | Колонка для extra больших экранов |
| offset-- | Отступ колонки (* может быть sm, md, lg, xl) |
| order-* | Переназначение колонок (* может быть 1-12) |
Счастливого кодирования, и пусть ваши макеты всегда будут адаптивными!
Credits: Image by storyset