Bootstrap - Размеры: Полное руководство для начинающих

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

Что такое размеры Bootstrap?

Прежде чем мы углубимся в детали, давайте поймем, что такое размеры Bootstrap. Представьте, что выdecorating a room. Вы хотите, чтобы некоторые мебельные изделия идеально подходили, чтобы другие занимали половину пространства, а третьи подстраивались в зависимости от размера комнаты. Именно это помогают нам сделать размеры Bootstrap с элементами на веб-странице!

Относительно родителя

Давайте начнем с размера элементов относительно их родителя. Это как решить, сколько места на стене должно занимать изображение.

Классы ширины

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

Класс	Описание
w-25	Ширина 25%
w-50	Ширина 50%
w-75	Ширина 75%
w-100	Ширина 100%
w-auto	Автоматическая ширина

Давайте посмотрим, как это работает:

<div class="container">
<div class="w-25 p-3" style="background-color: #eee;">Ширина 25%</div>
<div class="w-50 p-3" style="background-color: #ddd;">Ширина 50%</div>
<div class="w-75 p-3" style="background-color: #ccc;">Ширина 75%</div>
<div class="w-100 p-3" style="background-color: #bbb;">Ширина 100%</div>
<div class="w-auto p-3" style="background-color: #aaa;">Автоматическая ширина</div>
</div>

В этом примере мы создаем пять div элементов, каждый с разным классом ширины. Класс p-3 добавляет немного отступа для видимости. Вы увидите, что каждый div занимает разный процент ширины родительского контейнера.

Классы высоты

Аналогично, Bootstrap предлагает классы для установки высоты:

Класс	Описание
h-25	Высота 25%
h-50	Высота 50%
h-75	Высота 75%
h-100	Высота 100%
h-auto	Автоматическая высота

Вот как вы можете использовать их:

<div style="height: 200px;">
<div class="h-25 d-inline-block" style="width: 120px; background-color: #eee;">Высота 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: #ddd;">Высота 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: #ccc;">Высота 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: #bbb;">Высота 100%</div>
<div class="h-auto d-inline-block" style="width: 120px; background-color: #aaa;">Автоматическая высота</div>
</div>

В этом примере мы устанавливаем фиксированную высоту для родительского div и затем используем классы высоты для дочерних элементов. Класс d-inline-block делает эти div элементами, отображаемыми inline.

Относительно ширины

Теперь давайте поговорим о размерах элементов относительно ширины окна просмотра. Это как подстраивать телевизионный экран под разные размеры комнаты.

Bootstrap использует единицу vw, которая означает "ширина окна просмотра". Вот некоторые классы:

Класс	Описание
vw-100	Ширина 100vw
min-vw-100	Минимальная ширина 100vw
max-vw-100	Максимальная ширина 100vw

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

<div class="vw-100" style="background-color: #eee;">Этот div всегда будет шириной 100vw.</div>

Этот div всегда будет有这么 широким, как и окно просмотра, даже если вы измените размер окна браузера.

Относительно высоты

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

Класс	Описание
vh-100	Высота 100vh
min-vh-100	Минимальная высота 100vh
max-vh-100	Максимальная высота 100vh

Вот как вы можете использовать это:

<div class="vh-100" style="background-color: #eee;">Этот div всегда будет высотой 100vh.</div>

Этот div всегда будет таким высоким, как и окно просмотра, изменяясь при изменении размера окна браузера.

Относительно окна просмотра

Наконец, давайте рассмотрим размеры,relative to both the viewport's width and height.

Минимальная ширина 100%

<div class="min-vw-100" style="background-color: #eee;">100vw</div>

Этот div будет не窄е, чем ширина окна просмотра, но может расширяться, если это потребуется для содержимого.

Минимальная высота 100%

<div class="min-vh-100" style="background-color: #eee;">100vh</div>

Аналогично, этот div будет не窄ше, чем высота окна просмотра, но может расширяться, если это потребуется.

Все вместе

Теперь, когда мы рассмотрели все эти варианты размера, давайте создадим забавный пример, который использует их:

<div class="container">
<div class="row">
<div class="col-md-6">
<div class="w-75 p-3 mb-2" style="background-color: #e9ecef;">
Я занимаю 75% ширины relative to my parent!
</div>
<div class="h-50 p-3" style="background-color: #ced4da;">
Я занимаю 50% высоты relative to my parent!
</div>
</div>
<div class="col-md-6">
<div class="vw-100 p-3 mb-2" style="background-color: #adb5bd;">
Я такой широкий, как и окно просмотра!
</div>
<div class="vh-50 p-3" style="background-color: #6c757d; color: white;">
Я半个 ростом окна просмотра!
</div>
</div>
</div>
</div>

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

И вот оно, друзья! Вы только что сделали свои первые шаги в мир размеров Bootstrap. Помните, что практика делает мастера, так что не бойтесь экспериментировать с этими классами в своих проектах. И soon you'll be creating responsive layouts like a pro!

Счастливого кодирования, и пусть ваши веб-сайты всегда будут подходящими! ?

Credits: Image by storyset