Добро пожаловать во вторую часть моей серии статей о стилях, где я рассматриваю некоторые популярные библиотеки/фреймворки стилей. В этом блоге мы рассмотрим Bootstrap. Bootstrap — это мощная интерфейсная платформа с открытым исходным кодом, которая ускоряет и упрощает создание веб-сайтов за счет интуитивно понятной системы сеток, компонентов пользовательского интерфейса и обширного набора утилит.

Настраивать

Конечно, прежде чем перейти к некоторым функциям, нам нужно поговорить о настройке Bootstrap в проекте. На момент написания текущей версии Bootstrap — 5.3.3, и именно ее я буду использовать для всех примеров.

Загрузка через CDN

Bootstrap можно настроить очень быстро с помощью CDN или сети доставки контента. Этот метод не требует установки, просто добавьте ссылки CSS и JavaScript Bootstrap в свой HTML-файл, и вы готовы к гонкам!
Вы поместите следующую ссылку CSS в тег

После этого перед закрывающим тегом

Через менеджер пакетов

Если вы работаете над более крупным проектом или работаете с современными инструментами внешнего интерфейса, вы можете установить его через менеджера проектов. К счастью для нас, это тоже просто! В терминале просто напишите npm install bootstrap, если используете npm, или Yarn add bootstrap, если используете Yarn. После установки вам нужно будет импортировать CSS и JavaScript начальной загрузки в ваши основные файлы CSS и JS:

// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Import Bootstrap JavaScript
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Сетка

Одной из самых мощных функций Bootstrap является система сеток. Это позволяет создавать адаптивные макеты, которые автоматически подстраиваются под разные размеры экрана.

Структура

Сетка основана на структуре из 12 столбцов для организации контента. Его базовая структура может выглядеть примерно так:

  

    
Column 1
    
Column 2
    
Column 3
  

• Контейнер: контейнер удерживает столбцы и строки при их выравнивании
• Строка: строки удерживают и группируют столбцы по горизонтали
• Col: В столбцах будет размещаться ваш контент, в каждой строке может быть 12

Размеры

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

  

    
100% Width
  
  

    
50% Width
    
50% Width
  
  

    
33.33% Width
    
33.33% Width
    
33.33% Width
  

Точки останова

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

• xs: для экранов менее 576 пикселей
• см: для экранов более 576 пикселей
• md: для экранов более 768 пикселей
• lg: для экранов более 992 пикселей
• xl: для экранов более 1200 пикселей

Например:

  

    
Wide on medium and larger screens
    
Narrower on medium and larger screens
  

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

Общие компоненты

Bootstrap предоставляет нам множество готовых компонентов, которые помогают создавать привлекательные, удобные для пользователя веб-сайты с минимальным использованием пользовательского CSS. Компонентов много, поэтому я рассмотрю некоторые из наиболее распространенных, с которыми вам, вероятно, придется работать.

Типография

Мы начнем с разговора о тексте, поскольку вашим пользователям нужно прочитать, чтобы поверить. Классы типографики упрощают определение единообразных стилей текста: от заголовков до основного текста и списков. Например, разные заголовки обозначаются своим классом отображения:

Heading 1
Heading 2
Heading 3
This is lead text, which stands out from regular paragraph text.
This is regular paragraph text.
This is small text, which stands out from regular paragraph text.

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

Кнопки

Каждому сайту или приложению нужны кнопки! Bootstrap предлагает множество стилей кнопок. Их классы определяются следующим образом:

Primary Button
Secondary Button
Danger Button


Large Button
Small Button


Success Outline
Warning Outline

Навбар

Компонент навигационной панели Bootstrap содержит встроенные классы для выравнивания, раскрывающихся списков и многого другого!

В этом примере панель навигации свернется на экранах меньшего размера.

Классы полезности

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

Расстояние

Интервалы чрезвычайно важны для удобства чтения пользователем. К счастью, Bootstrap предоставляет нам классы для настройки полей и отступов элементов. Все они имеют одинаковый формат {property}{sides}-{size}.

• Свойство: m для поля, p для заполнения
• Стороны: t сверху, b снизу, l слева, r справа, x слева и справа, y сверху и снизу или пусто для всех сторон
• Размер: 0, 1, 2, ... или автоматически

Например:

Margin Top of 3
Padding of 5
Horizontally Centered with Auto Margin

Отображать

Утилиты отображения помогают контролировать видимость и расположение элементов. Их можно использовать для отображения, скрытия или изменения поведения элементов. Классы отображения включают в себя:

• d-блок: отображение как блочный элемент
• d-inline: отображение как встроенный элемент
• d-none: скрыть элемент
• d-flex: включить Flexbox
• d-inline-block: Отображать как встроенный блок

Bootstrap также предоставляет адаптивные версии этих классов, которые применяются к точкам останова, например d-none d-md-block, который скрывает элемент на маленьких экранах.

Visible on medium and larger screens
Centered with Flexbox

Текстовые утилиты

Bootstrap предоставляет широкие возможности настройки текста с помощью таких классов, как:

Выравнивание текста

• text-start: выравнивает текст по левому краю
• text-end: выравнивает текст по правому краю
• text-center: выравнивает текст по центру

Перенос текста

• text-nowrap: запретить перенос текста на следующую строку
• text-truncate: обрезать текст многоточием, если он слишком длинный

Цвет текста

• text-primary: текст основного цвета (по умолчанию: синий)
• text-success: Цвет текста с успехом (по умолчанию: зеленый)
• text-danger: текст с цветом опасности (по умолчанию: красный)

This text is centered and green
This text is right-aligned and blue

Выводы

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

Источники

Бутстрап