В этом уроке мы узнаем о компонентах. Все наши компоненты отзывчивы и имеют базовые классы и классы-модификаторы.
Аккордеон
Аккордеон использует внутреннюю функцию collapse, чтобы сделать его разборным. Чтобы отобразить развернутый аккордеон, добавьте класс .open на .accordion.
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
Смыть
Добавьте .accordion-flush, чтобы удалить цвет фона по умолчанию, некоторые границы и закругленные углы, чтобы аккордеоны отображались на одном уровне с их родительским контейнером.
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
</div>
</div>
</div>
Оповещения
Оповещения предоставляют контекстные сообщения обратной связи для типичных действий пользователя с помощью нескольких ответственных и гибких окон оповещения.
Предоставляют контекстные сообщения обратной связи для типичных действий пользователя с помощью горстки доступных и гибких оповещений.
Примеры
Оповещения имеют текст любой длины, а также необязательную кнопку закрытия. Для правильной стилизации используйте один из восьми необходимых контекстных классов (например, .alert-success). Для удаления оповещений в строке используйте плагин alerts JavaScript.
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
Цвет ссылки
Используйте класс .alert-link для быстрого создания соответствующих цветных ссылок в любом оповещении.
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
Отключение
С помощью JavaScript-плагина alert можно отключить любое оповещение в строке. Вот как это делается:
— Убедитесь, что вы загрузили плагин alert или скомпилированный Bootstrap JavaScript.
— Добавьте кнопку закрытия и класс .alert-dismissible, который добавляет дополнительную прокладку справа от оповещения и позиционирует кнопку закрытия.
— На кнопку закрытия добавьте атрибут data-bs-dismiss=»alert», который запускает функциональность JavaScript. Обязательно используйте элемент button вместе с ним для правильного поведения на всех устройствах.
— Чтобы анимировать предупреждения при их отключении, добавьте классы .fade и .show.
Значки
Значки добавляют дополнительную информацию, например, счетчик или метку, к любому содержимому. Используйте счетчики, значки или метки.
<h2>Example heading <span class="badge bg-primary">New</span></h2>
Размеры
Значки масштабируются в соответствии с размером непосредственного родительского элемента с помощью относительного размера шрифта и единиц em. Начиная с версии 5, значки больше не имеют стилей фокусировки или наведения для ссылок.
<h1>Example heading <span class="badge bg-primary">New</span></h1>
<h2>Example heading <span class="badge bg-primary">New</span></h2>
<h3>Example heading <span class="badge bg-primary">New</span></h3>
<h4>Example heading <span class="badge bg-primary">New</span></h4>
<h5>Example heading <span class="badge bg-primary">New</span></h5>
<h6>Example heading <span class="badge bg-primary">New</span></h6>
Кнопка
Значки можно использовать как часть ссылок или кнопок, чтобы обеспечить счетчик.
<button type="button" class="btn btn-primary">
Notifications<span class="badge badge text-bg-secondary ms-2">4</span>
</button>
Цвета
Используйте наши полезные классы для фона, чтобы быстро изменить внешний вид бейджа. Обратите внимание, что при использовании в Bootstrap стандартного .bg-light, вам, скорее всего, понадобится утилита цвета текста, например .text-dark, для правильной стилизации. Это связано с тем, что фоновые утилиты не устанавливают ничего, кроме цвета фона.
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
Таблетки
Используйте класс утилиты .rounded-pill, чтобы сделать значки более округлыми с большим радиусом границы.
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
Позиционированный
Используйте утилиты, чтобы изменить .badge и расположить его в углу ссылки или кнопки.
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
Вы также можете заменить класс .badge несколькими утилитами без графа для получения более универсального индикатора.
<button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button>
Кнопки
Кнопки предоставляют предопределенные стили (предупреждение, информация, опасность) для нескольких типов кнопок: контурные, закругленные, социальные, плавающие, фиксированные, теги и т.д.
<button type="button" class="btn btn-primary">Button</button>
Цвета
Включает несколько предопределенных стилей кнопок, каждый из которых служит своей смысловой цели, а также несколько дополнительных стилей для большего контроля.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Контур
Нужна кнопка, но нет необходимости в большом количестве фоновых цветов? Замените классы модификаторов по умолчанию на .btn-outline-*, чтобы удалить все фоновые изображения и цвета для любой кнопки.
<button type="button" class="btn btn-outline-primary">
Primary
</button>
<button type="button" class="btn btn-outline-secondary">
Secondary
</button>
<button type="button" class="btn btn-outline-success">
Success
</button>
<button type="button" class="btn btn-outline-danger">
Danger
</button>
<button type="button" class="btn btn-outline-warning">
Warning
</button>
<button type="button" class="btn btn-outline-info">
Info
</button>
<button type="button" class="btn btn-outline-dark">
Dark
</button>
Размеры
Вам нравятся кнопки большего или меньшего размера? Добавьте .btn-lg или .btn-sm для дополнительных размеров.
<button type="button" class="btn btn-primary btn-sm">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary btn-lg">Button</button>
Отключенное состояние
Чтобы кнопки выглядели неактивными, добавьте к любому элементу атрибут disabled boolean. К отключенным кнопкам применяется pointer-events: none, что предотвращает срабатывание состояний hover и active.
<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button>
Отключенные кнопки, использующие элемент <a>, ведут себя несколько иначе:
В некоторых стилях, ориентированных на будущее, предусмотрено отключение всех событий от указателя на кнопках с якорем. В браузерах, поддерживающих это свойство, отключенный курсор вообще не будет виден.
Отключенные кнопки должны включать атрибут aria-disabled=»true», чтобы указать состояние элемента вспомогательным технологиям.
Блокирующие кнопки
Создавайте отзывчивые стопки «блочных кнопок» во всю ширину экрана, как в Bootstrap 4, используя сочетание наших утилит display и gap. Используя утилиты вместо классов для конкретных кнопок, мы получаем гораздо больший контроль над расстоянием между кнопками, выравниванием и поведением, отвечающим требованиям.
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Здесь мы создаем отзывчивую вариацию, начиная с вертикально расположенных кнопок до точки разрыва md, где .d-md-block заменяет класс .d-grid, тем самым сводя на нет утилиту gap-2.
Измените размер браузера, чтобы увидеть их изменение.
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Вы можете регулировать ширину кнопок блока с помощью классов ширины столбцов сетки. Например, для «блок-кнопки» половинной ширины используйте .col-6. Отцентрируйте ее по горизонтали с помощью .mx-auto.
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Для настройки выравнивания кнопок по горизонтали можно использовать дополнительные утилиты. Здесь мы взяли наш предыдущий отзывчивый пример и добавили некоторые утилиты flex и утилиту margin на кнопку, чтобы выровнять кнопки вправо, когда они больше не сложены в стопку.
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary me-md-2" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
Переключение состояний
Добавьте data-bs-toggle=»button» для переключения активного состояния кнопки. Если вы предварительно переключили кнопку, вы должны вручную добавить класс .active и aria-pressed=»true», чтобы обеспечить надлежащую передачу информации вспомогательным технологиям.
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
Группы кнопок
Группа кнопок объединяет ряд кнопок в одну строку (navbar) или складывает в вертикальный столбец.
Сгруппируйте ряд кнопок в одну строку с помощью группы кнопок.
Базовый пример
Заверните серию кнопок с .btn в .btn-group.
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
Эти классы также можно добавить к ссылкам. Используйте класс .active, чтобы выделить ссылку.
<div class="btn-group">
<a href="#!" class="btn btn-primary active">Active link</a>
<a href="#!" class="btn btn-primary">Link</a>
<a href="#!" class="btn btn-primary">Link</a>
</div>
Выделенные стили
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
Панель инструментов
Для создания более сложных компонентов объединяйте группы кнопок в панели инструментов. При необходимости используйте вспомогательные классы, чтобы расставить группы, кнопки и многое другое.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-info">8</button>
</div>
</div
Карточки
Карточка — это гибкий и расширяемый контейнер для содержимого. Он включает в себя опции для верхних и нижних колонтитулов, широкий выбор содержимого, контекстные цвета фона и мощные опции отображения. Карточки создаются с минимально возможным количеством разметки и стилей, но при этом предоставляют массу возможностей для управления и настройки. Созданные с помощью flexbox, они легко выравниваются и хорошо сочетаются с другими компонентами Bootstrap.
Простая карточка
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Типы контента
Карточки поддерживают широкий спектр содержимого, включая изображения, текст, группы списков, ссылки и многое другое. Ниже приведены примеры того, что поддерживается
Тело
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Заголовки, текст и ссылки
Заголовки карточек используются путем добавления .card-title к тегу <h*>. Аналогичным образом добавляются ссылки, которые размещаются рядом друг с другом путем добавления .card-link к тегу <a>.
Подзаголовки используются путем добавления .card-subtitle к тегу <h*>. Если элементы .card-title и .card-subtitle помещены в элемент .card-body, то заголовок и субтитры выравниваются.
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>