Bootstrap - Ratio: Понимание и использование пропорций аспектов

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

Bootstrap - Ratio

Что такое Bootstrap Ratio?

Прежде чем мы перейдем к коду, давайте поймем, о чем идет речь. Утилита пропорций Bootstrap - это мощный инструмент, который помогает вам поддерживать consistentные пропорции aspect ratio для вашего содержимого, независимо от размера экрана. Представьте его как магическую коробку, которая поддерживает ваши изображения, видео или любое другое содержимое в perfectной пропорции, независимо от того, как вы изменяете размер окна браузера.

Why это важно?

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

Начало работы с Bootstrap Ratio

Во-первых, убедитесь, что у вас есть Bootstrap 5 включен в ваш проект. Если вы еще этого не сделали, вы можете добавить следующую ссылку в ваш HTML <head> раздел:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

Теперь создадим наш первый пример пропорций!

Основной пример пропорций

Вот простой пример использования утилиты пропорций:

<div class="ratio ratio-1x1">
<img src="your-image.jpg" alt="Квадратное изображение">
</div>

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

Мы создаем <div> с двумя классами: ratio и ratio-1x1.
Класс ratio говорит Bootstrap, что мы хотим использовать утилиту пропорций.
Класс ratio-1x1 specifies, что мы хотим пропорцию aspect ratio 1:1 (идеальный квадрат).
Внутри этого div мы размещаем наше содержимое (в данном случае, изображение).

Результат? Идеально квадратное изображение, которое поддерживает свою форму на любом размере экрана. Pretty cool, не так ли?

Исследование различных пропорций

Bootstrap предоставляет несколько предопределенных классов пропорций. Давайте посмотрим на некоторые из них:

Класс пропорции	Пропорция aspect ratio
ratio-1x1	1:1
ratio-4x3	4:3
ratio-16x9	16:9
ratio-21x9	21:9

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

<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video" allowfullscreen></iframe>
</div>

Этот код嵌入一个YouTube видео с пропорцией aspect ratio 16:9, ideal для большинства современных видео!”

Пользовательские пропорции

Но что, если вам нужна пропорция, которой нет в предопределенном списке? Не волнуйтесь! Bootstrap вас covered с пользовательскими пропорциями.

Чтобы создать пользовательскую пропорцию, вы можете использовать переменную CSS --bs-aspect-ratio. Вот как:

<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>Это пропорция 2:1</div>
</div>

В этом примере мы создаем пропорцию 2:1, устанавливая пропорцию aspect ratio на 50% (1 разделить на 2, умножить на 100).

Давайте попробуем что-то более необычное:

<div class="ratio" style="--bs-aspect-ratio: 75%;">
<div>Это пропорция 4:3</div>
</div>

Это создает пропорцию 4:3, что идеально для старых TV-style контента или определенного типа изображений.

Практическое применение

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

Адаптивное嵌入 видео

<div class="ratio ratio-16x9">
<iframe src="https://player.vimeo.com/video/137857207" title="Vimeo video" allowfullscreen></iframe>
</div>

Этот код嵌入Vimeo видео, которое поддерживает свою пропорцию aspect ratio 16:9 на всех устройствах. Нет больше сжатых или растянутых видео!

Фотогалерея

<div class="row">
<div class="col-md-4 mb-3">
<div class="ratio ratio-1x1">
<img src="square-image1.jpg" alt="Изображение галереи 1" class="object-fit-cover">
</div>
</div>
<div class="col-md-4 mb-3">
<div class="ratio ratio-1x1">
<img src="square-image2.jpg" alt="Изображение галереи 2" class="object-fit-cover">
</div>
</div>
<div class="col-md-4 mb-3">
<div class="ratio ratio-1x1">
<img src="square-image3.jpg" alt="Изображение галереи 3" class="object-fit-cover">
</div>
</div>
</div>

Этот код создает адаптивную галерею изображений с квадратными изображениями. Класс object-fit-cover ensures, что изображения заполняют квадрат без искажения.

Лучшая практика и советы

Выбирайте правильную пропорцию: Рассмотрите ваш контент при выборе пропорции. Используйте 16:9 для большинства видео, 1:1 для профилей или изображений в стиле Instagram, и 4:3 для старого контента или определенного типа фотографий.
Комбинируйте с другими классами Bootstrap: Утилита пропорций работает отлично с grid system и другими утилитами Bootstrap. Экспериментируйте с комбинациями, чтобы создать сложные, адаптивные макеты.
Используйте пользовательские пропорции экономно: Хотя пользовательские пропорции мощны, stick к предопределенным пропорциям, когда возможно, для一致性 и легкости обслуживания.
Тестируйте на нескольких устройствах: Всегда проверяйте, как ваши пропорции выглядят на разных размерах экранов, чтобы обеспечить хороший пользовательский опыт на всех устройствах.

Заключение

Поздравляю! Вы теперь mastered искусство использования утилиты пропорций Bootstrap. От поддержания perfectных квадратов в галереях изображений до создания адаптивных嵌入视频, у вас есть инструменты, чтобы поддерживать ваш контент великолепным на любом устройстве.

Remember, веб-разработка - это все о практике и эксперименте. Не бойтесь пробовать разные пропорции и смотреть, как они влияют на ваши макеты. Happy coding, и пусть ваши пропорции aspect ratio всегда будут на точке!

Credits: Image by storyset

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

Bootstrap - Позиционирование

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

Bootstrap - Стеки