Bootstrap - Система сетки: Дружественное руководство для начинающих

Здравствуйте, будущие веб-разработчики! Сегодня мы отправимся в увлекательное путешествие в мир системы сетки Bootstrap. Не волнуйтесь, если вы никогда не писали ни строчки кода раньше - я буду рядом с вами, объясняя все шаг за шагом. Так что возьмите杯 кофе (или чай, если это ваш выбор), и давайте окунемся в это!

Что такое система сетки Bootstrap?

Прежде чем мы начнем, позвольте мне рассказать вам небольшую историю. Представьте, что вы пытаетесь организовать свою книжную полку. Вы хотите arrange свои книги аккуратно, но они всех разных размеров. Раздражает, правда? Ну, система сетки Bootstrap как магическая книжная полка, которая автоматически organize ваш контент, независимо от его размера или формы!

В терминах веб-дизайна, система сетки - это мощный инструмент для разметки, который помогает вам создавать адаптивные и структурированные веб-страницы. Это как иметь личного ассистента, который perfectly arrange контент вашей веб-страницы, будь то просмотр на large desktop мониторе или крошечном экране смартфона.

Пример

Давайте начнем с простого примера, чтобы размяться. Вот базовая структура системы сетки Bootstrap:

<div class="container">
<div class="row">
<div class="col-sm">
Одна из трех колонок
</div>
<div class="col-sm">
Одна из трех колонок
</div>
<div class="col-sm">
Одна из трех колонок
</div>
</div>
</div>

Что здесь происходит? Давайте разберем это:

1. Мы начинаем с класса container. Это как внешняя коробка, которая держит все.
2. Внутри контейнера у нас есть класс row. Представьте это как полку в нашей метафоре с книжной полкой.
3. Внутри строки у нас три класса col-sm. Это наши книги, стоящие плечом к плечу на полке.

Как это работает

Система сетки Bootstrap основана на разметке с 12 колонками. Почему 12? Это магическое число в веб-дизайне,因为它 divisible на 1, 2, 3, 4 и 6, давая нам много гибкости!

Вот визуальное представление:

1	2	3	4	5	6	7	8	9	10	11	12
Колонка	Колонка	Колонка	Колонка	Колонка	Колонка	Колонка	Колонка	Колонка	Колонка	Колонка	Колонка

Каждая из этих колонок может быть combined для создания более широких областей контента. Например, у вас может быть макет с двумя колонками по 6 единиц каждая или тремя колонками по 4 единицы каждая. Это как игра с строительными блоками!

Автоматическая разметка колонок

Теперь давайте посмотрим на некоторые классные фокусы. Bootstrap может автоматически handled ширины колонок для вас. Проверьте это:

<div class="container">
<div class="row">
<div class="col">
1 из 2
</div>
<div class="col">
2 из 2
</div>
</div>
<div class="row">
<div class="col">
1 из 3
</div>
<div class="col">
2 из 3
</div>
<div class="col">
3 из 3
</div>
</div>
</div>

В этом примере мы не указываем ширины колонок. Bootstrap достаточно умен, чтобы разделить пространство поровну между колонками. Это как иметь робота, который arrange вашу книжную полку за вас!

Равная ширина

Хотите, чтобы все колонки имели одинаковую ширину, независимо от контента? Легко!

<div class="container">
<div class="row">
<div class="col">
1 из 3
</div>
<div class="col">
2 из 3 (шире)
</div>
<div class="col">
3 из 3
</div>
</div>
</div>

Даже если средняя колонка имеет больше контента, все три колонки останутся одинаковой ширины. Это как иметь расширяемые книги, которые всегда идеально fit на вашей полке!

Указание ширины одной колонки

Иногда вы хотите, чтобы одна колонка имела определенную ширину, а другие автоматически подстраивались. Вот как это сделать:

<div class="container">
<div class="row">
<div class="col">
1 из 3
</div>
<div class="col-6">
2 из 3 (шире)
</div>
<div class="col">
3 из 3
</div>
</div>
</div>

В этом случае средняя колонка займет 6 единиц (половину ширины), а две другие колонкиsplit оставшееся пространство поровну.

Variable Width Content

Что, если вы хотите, чтобы колонка изменяла свою ширину в зависимости от контента? Bootstrap это поддерживает:

<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 из 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 из 3
</div>
</div>
</div>

Класс col-md-auto позволяет этой колонке увеличиваться или уменьшаться в зависимости от контента. Это как книга, которая может изменять свой размер, чтобы идеально fit между своими соседями!

Responsive Classes

Теперь давайте поговорим о том, как сделать наш макет адаптивным. Bootstrap использует breakpoints для ajustement макета в зависимости от размера экрана. Вот основные.breakpoints:

Breakpoint	Class infix	Dimensions
Extra small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

All Breakpoints

Вот как использовать эти.breakpoints:

<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>

Этот макет останется таким же на всех размерах экранов. Это как книжная полка, которая выглядит одинаково, независимо от того, смотрите ли вы на нее издалека или вблизи!

Stacked to Horizontal

Но что, если мы хотим, чтобы наш макет изменялся в зависимости от размера экрана? Проверьте это:

<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>

На малых и более крупных экранах эти колонки будут идти плечом к плечу. На extra small экранах они будут叠放vertically. Это как книжная полка, которая может transform в башню из книг, когда места мало!

Mix and Match

Вы также можете mix и match размеры колонок для разных экранов:

<div class="container">
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
</div>

Этот макет будет выглядеть по-разному на малых экранах по сравнению с medium и более крупными экранами. Это как shape-shifting книжная полка!

Row Columns

Хотите быстро создать equal-width колонки? Используйте row columns:

<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>

Это создаст строку с двумя колонками, независимо от того, сколько у вас col divs. Это как книжная полка, которая всегда arranges ваши книги парами!

Nesting

Последнее, но не менее важное, вы можете嵌套 grids внутри grids:

<div class="container">
<div class="row">
<div class="col-sm-3">
Уровень 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Уровень 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Уровень 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>

Это создает grid внутри grid. Это как маленькие книжные полки внутри большей книжной полки!

И вот и все, друзья! Вы только что сделали свои первые шаги в мир системы сетки Bootstrap. Помните, что практика делает perfect. Попробуйте поиграть с этими примерами, mix и match разные классы и посмотрите, что получится. Before you know it, вы будете создавать красивые, адаптивные макеты, как профессионал!

Счастливого кодирования, и пусть ваши веб-страницы всегда будут идеально организованы!

Credits: Image by storyset