Bootstrap - CSS Grid: руковод novičkov

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

Bootstrap - CSS Grid

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

CSS Grid от Bootstrap - это как магический инструмент для разметки, который помогает нам организовать контент на наших веб-страницах. Представьте, что вы расставляете мебель в комнате - это exactly то, что мы делаем, но с элементами веб-страницы!

Система сетки основана на 12-колоночной разметке, что означает, что мы можем разделить нашу страницу на 12 равных частей. Это дает нам невероятную гибкость в designing наших макетов. Давайте посмотрим на простой пример:

<div class="container">
<div class="row">
<div class="col-4">Колонка 1</div>
<div class="col-4">Колонка 2</div>
<div class="col-4">Колонка 3</div>
</div>
</div>

В этом примере мы создали три равные колонки, каждая из которых занимает 4 части нашей 12-колоночной сетки (4 + 4 + 4 = 12). Это как разрезать пиццу на три равные части!

Основные различия

Теперь вы, возможно, задаетесь вопросом: "Что делает CSS Grid от Bootstrap особенным?" Ну, позвольте мне告诉你 - все дело в простоте и мощности. В отличие от традиционных макетов CSS, система сетки Bootstrap:

Использует flexbox, делая ее более гибкой и адаптивной
Предлагает легкие в использовании классы для быстрого создания макетов
Обеспечивает встроенную адаптивность для разных размеров экранов

Три колонки

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

<div class="container">
<div class="row">
<div class="col-3">Боковая панель</div>
<div class="col-6">Основной контент</div>
<div class="col-3">Правая панель</div>
</div>
</div>

В этом примере у нас есть боковая панель и правая панель (каждая занимает 3 колонки) с болееlarge основной контентной областью в середине (6 колонок). Это как иметь большой телевизор в центре стены вашей гостиной, с книжными полками по обе стороны!

Адаптивность

Одна из coolest вещей в CSS Grid от Bootstrap - это ее адаптивность. Мы можем сделать наши макеты адаптируются к разным размерам экранов с легкостью. Давайте посмотрим, как это делается:

<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">Колонка 1</div>
<div class="col-12 col-md-6 col-lg-4">Колонка 2</div>
<div class="col-12 col-md-12 col-lg-4">Колонка 3</div>
</div>
</div>

Этот макет будет сворачиваться вертикально на маленьких экранах, становиться двумя колонками на средних экранах и тремя колонками на больших экранах. Это как иметь transformable веб-сайт!

Пример

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

<div class="container">
<div class="row">
<div class="col-12 col-lg-8">
<h1>Моя потрясающая запись в блоге</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<div class="col-12 col-lg-4">
<h2>Последние записи</h2>
<ul>
<li>Запись 1</li>
<li>Запись 2</li>
<li>Запись 3</li>
</ul>
</div>
</div>
</div>

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

Перенос

Иногда мы хотим, чтобы наш контент перешел на следующую строку, когда он exceeds ширину сетки. Bootstrap делает это super легко:

<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Так как 9 + 4 = 13 > 12, этот div шириной в 4 колонки перейдет на новую строку как одно целое.</div>
<div class="col-6">.col-6<br>Следующие колонки продолжаются на новой строке.</div>
</div>
</div>

Этот пример показывает, как колонки автоматически переносятся, когда они exceed 12-колоночный лимит. Это как играть в Тетрис с вашим макетом!

Начало

Мы также можем контролировать, с какой части сетки начинаются наши колонки:

<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 class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
</div>

Классы offset-* позволяют нам moved колонки влево. Это как давать вашему контенту head start в гонке!

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

Bootstrap также позволяет создавать гибкие, автоматизированные колонки:

<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>

Здесь первая и третья колонки автоматически подгоняются под размер средней колонки. Это как иметь smart мебель, которая adjust к пространству!

Вложение

Мы можем даже вставлять сетки внутрь сеток для более сложных макетов:

<div class="container">
<div class="row">
<div class="col-sm-9">
Уровень 1: .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>

Это создает сетку внутри сетки, позволяя нам создавать intricate макеты. Это как иметь комнаты внутри комнат в вашем доме!

Настройка

Система сетки Bootstrap highly customizable. Вы можете adjust количество колонок, отступы и точки останова под ваши нужды. Вот пример, как настроить сетку с использованием Sass:

$grid-columns: 15;
$grid-gutter-width: 20px;

@import "bootstrap/scss/bootstrap";

Это изменяет стандартную 12-колоночную сетку на 15-колоночную и adjust ширину отступа. Это как быть архитектором вашего собственного digital города!

Промежутки

Bootstrap 5 introduces концепцию промежутков, которые позволяют вам контролировать пространство между колонками:

<div class="container">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>

Класс gy-5 добавляет вертикное пространство между строками. Это как добавлять breathing room между элементами в вашем макете!

Заключение

И вот мы и arrived, folks! Мы путешествовали через страну системы CSS Grid от Bootstrap. От базовых макетов до адаптивных дизайнов, nesting и настройки, вы теперь имеете власть создавать потрясающие макеты для ваших веб-проектов.

Remember, практика делает perfect. Так что вперед, experiment с этими концепциями, и скоро вы будете создавать макеты как профи! Happy coding, и пусть ваши сетки всегда будут perfectly выровнены! ?

Method	Description
`container`	Создает адаптивный фиксированный контейнер
`row`	Создает строку для holding колонок
`col-*`	Создает колонки различных размеров (1-12)
`col--`	Создает адаптивные колонки для разных размеров экранов
`offset--`	Отодвигает колонки
`col`	Создает автоматические колонки
`g-*`	Добавляет отступы между колонками
`gy-*`	Добавляет вертикные отступы между строками
`gx-*`	Добавляет горизонтальные отступы между колонками

Credits: Image by storyset

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

Bootstrap - Утилиты

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

Bootstrap - Перезагрузка