Классы Bootstrap: общие настройки и стили

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

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

Bootstrap также предлагает различные классы для создания сетки страницы. Такие классы, как container, row и col, позволяют легко размещать содержимое на странице в нужном порядке и с нужным расположением, а также делать адаптивный дизайн.

Общие классы для контейнеров

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

.container: Этот класс создает контейнер с фиксированной шириной, которая автоматически подстраивается под разные разрешения экрана. Он центрирует содержимое и обеспечивает отступы по бокам.

.container-fluid: В отличие от класса .container, этот класс создает контейнер, который занимает всю ширину экрана без отступов по бокам.

Кроме того, Bootstrap также предлагает классы для управления шириной контейнера:

.container-sm: Ширина контейнера будет уменьшаться на экранах с малым разрешением.

.container-md: Ширина контейнера будет уменьшаться на средних экранах.

.container-lg: Ширина контейнера будет уменьшаться на больших экранах.

.container-xl: Ширина контейнера будет уменьшаться на очень больших экранах.

Пример использования:

<div class="container"><p>Содержимое контейнера.</p></div>

В этом примере создается контейнер с фиксированной шириной и центрированным содержимым.

Общие классы для сетки

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

Для работы со сеткой в Bootstrap используются следующие классы:

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

• .container: создает фиксированную ширину контейнера, которая не меняется при изменении размера экрана.
• .container-fluid: создает контейнер, который занимает всю доступную ширину экрана, а также адаптируется к изменению размера экрана.

row: определяет ряд внутри контейнера. Ряд содержит колонки, которые можно горизонтально расположить. Он используется для создания сеточного макета.

col-[sm/md/lg/xl]-N: определяют колонки внутри ряда. Здесь N может быть числом от 1 до 12 и указывает на количество колонок, которые займет элемент. При этом ширина колонки будет автоматически рассчитываться в зависимости от ширины экрана. Например, для малых экранов используется класс col-sm-12, который указывает, что элемент займет всю доступную ширину на экранах с маленьким разрешением.

Помимо основных классов, Bootstrap также предоставляет возможность использовать дополнительные классы для расширения функциональности сетки, такие как offset-[sm/md/lg/xl]-N и order-[sm/md/lg/xl]-N. Эти классы позволяют сдвигать элементы в сетке или изменять их порядок отображения на различных экранах.

Общие классы для типографики

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

Классы для изменения размера текста:

• h1 — для заголовков первого уровня
• h2 — для заголовков второго уровня
• h3 — для заголовков третьего уровня
• h4 — для заголовков четвертого уровня
• h5 — для заголовков пятого уровня
• h6 — для заголовков шестого уровня
• lead — для особо выделенного текста
• small — для уменьшенного текста

Классы для изменения стиля текста:

• text-muted — для серого текста
• text-primary — для текста, выделенного синим цветом
• text-success — для текста, выделенного зеленым цветом
• text-info — для текста, выделенного голубым цветом
• text-warning — для текста, выделенного желтым цветом
• text-danger — для текста, выделенного красным цветом

Классы для изменения жирности текста:

• font-weight-bold — для жирного текста
• font-weight-normal — для обычного текста
• font-weight-light — для светлого текста

Классы для изменения курсивности текста:

• font-italic — для курсивного текста

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

Общие классы для кнопок

Bootstrap предоставляет ряд общих классов для стилизации кнопок:

.btn: основной класс для создания кнопки, используется по умолчанию без других классов;

.btn-primary: добавляет стилизацию для первичных кнопок с основным акцентированным цветом, рекомендуется использовать для основных действий;

.btn-secondary: добавляет стилизацию для вторичных кнопок, которые используются второстепенными действиями;

.btn-success: добавляет стилизацию для кнопок с положительным результатом или успешным завершением;

.btn-danger: добавляет стилизацию для кнопок с отрицательным результатом или опасными действиями;

.btn-warning: добавляет стилизацию для кнопок с предупреждениями или важными уведомлениями;

.btn-info: добавляет стилизацию для кнопок с информационными действиями или уведомлениями;

.btn-light: добавляет светлую стилизацию для кнопок;

.btn-dark: добавляет темную стилизацию для кнопок;

.btn-link: делает кнопку похожей на обычную ссылку.

Дополнительные классы могут быть добавлены для изменения размера (.btn-sm, .btn-lg) и состояния (.btn-disabled, .btn-active, .btn-loading).

Общие классы для форм

Bootstrap предоставляет ряд общих классов, которые можно использовать для стилизации форм на веб-странице:

.form-control — данный класс можно применить к любому HTML-элементу формы, такому как <input>, <select> или <textarea>, чтобы сделать его стилизованным в соответствии с дизайном Bootstrap. Этот класс добавляет базовые стили, такие как ширина и высота элемента, а также настраивает его на мобильных устройствах.

.form-group — данный класс оборачивает элементы формы в контейнер для создания группы. Он добавляет отступы между элементами формы и располагает их вертикально друг за другом.

.form-inline — этот класс позволяет создавать инлайновые формы, где элементы формы располагаются горизонтально в одной строке. Это полезно, например, для создания поисковой строки или формы с несколькими полями в одной строке.

.form-check — данный класс можно использовать для стилизации чекбоксов и радио кнопок. Он создает контейнеры для этих элементов и добавляет стилизацию, включая кастомные фоновые иконки.

.form-check-label — этот класс можно добавить к метке чекбокса или радио кнопки для создания стилизованного текста метки.

.form-text — данный класс добавляет стилизованный текст под полем формы. Это полезно, например, для добавления пояснений или инструкций перед или после полей формы.

.disabled — используя этот класс, можно отключить элемент формы, чтобы его нельзя было редактировать или выбрать.

.valid и .invalid — этими классами можно выделить элементы формы, которые прошли или не прошли проверку валидации, соответственно.

Примечание: вышеупомянутые классы являются только некоторыми из множества классов, предоставляемых Bootstrap для работы с формами. Другие классы позволяют стилизовать поля с ошибками или успешной валидацией, добавить кнопки и др. Их можно найти в официальной документации Bootstrap.

Общие классы для таблиц

В Bootstrap существует несколько общих классов для стилизации таблиц. Они позволяют легко изменять внешний вид таблиц и делать их более удобочитаемыми.

.table — основной класс для оформления таблиц. Он добавляет базовый стиль и делает таблицу респонсивной (адаптивной). Используется для элемента <table>.

.thead-dark и .thead-light — классы для стилизации заголовка таблицы. Он изменяет фон и цвет текста в заголовке таблицы. Можно использовать для элемента <thead>.

.table-striped — добавляет полосатую окраску для строк таблицы. Каждая вторая строка будет иметь другой фоновый цвет. Используется для элемента <tbody>.

.table-bordered — добавляет границы между ячейками таблицы. Используется для элемента <table>.

.table-hover — добавляет стилизацию для наведения курсора на строки таблицы. При наведении фоновый цвет изменяется. Используется для элемента <tbody>.

.table-responsive — делает таблицу адаптивной, чтобы она была более удобной для просмотра на мобильных устройствах. Используется для элемента <div>.

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