Русский

Учебник Bootstrap

Макеты Bootstrap

Содержание Bootstrap

Компоненты Bootstrap

Bootstrap Формы

Поддержка Bootstrap

Утилиты Bootstrap

Демо Bootstrap

Bootstrap - Аккордеон: Пособие для начинающих

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

Bootstrap - Accordion

Что такое аккордеон Bootstrap?

Прежде чем углубляться в детали, давайте поговорим о том, что такое аккордеон в веб-дизайне. Представьте себе музыкальный аккордеон - он расширяется и сжимается, открывая разные секции. Именно так и работает аккордеон на веб-странице! Это удобный способ organize контента, позволяя пользователям показывать и скрывать секции по мере необходимости.

Как это работает

Аккордеон Bootstrap создается с использованием HTML, CSS и JavaScript (не волнуйтесь, Bootstrap обрабатывает большую часть JavaScript за нас!). Он состоит из серии collapsible элементов, которые можно расширять или сворачивать, кликая на их заголовки.

Вот разбор основных компонентов:

  1. Внешний контейнер (обычно <div> с классом accordion)
  2. Индивидуальные элементы аккордеона (каждый в <div> с классом accordion-item)
  3. Заголовки для каждого элемента (обычно <h2> элементы с классом accordion-header)
  4. Кнопки в заголовках для触发ения расширения/сворачивания
  5. Панели контента, которые показываются/скрываются при клике (в <div> элементах с классом accordion-collapse)

Теперь давайте посмотрим, как это работает!

Пример

Вот пример простого аккордеона Bootstrap:

<div class="accordion" id="basicAccordion">
<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">
Элемент аккордеона #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#basicAccordion">
<div class="accordion-body">
Это контент первого элемента аккордеона.
</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">
Элемент аккордеона #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#basicAccordion">
<div class="accordion-body">
Вот контент второго элемента аккордеона.
</div>
</div>
</div>
</div>

Давайте разберем это:

  1. Мы начинаем с <div> с классом accordion. Это наш основной контейнер.
  2. Внутри, у нас есть accordion-item divы для каждого collapsible секции.
  3. Каждый элемент имеет заголовок (accordion-header) с кнопкой, которая управляет действием collapse/expand.
  4. Контент находится в отдельном <div> с классами accordion-collapse и collapse.
  5. Атрибуты data-bs-toggle="collapse" и data-bs-target="#collapseOne" на кнопке связывают ее с контентным divом.

Совет: Обратите внимание, как первый элемент имеет class="accordion-collapse collapse show" и aria-expanded="true"? Это означает, что он будет открыт по умолчанию при загрузке страницы.

Аккордеон без границ

Хотите более изысканный вид без границ? Bootstrap предоставляет аккордеон без границ:

<div class="accordion accordion-flush" id="flushAccordion">
<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">
Элемент аккордеона без границ #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#flushAccordion">
<div class="accordion-body">Это первый элемент аккордеона без границ.</div>
</div>
</div>
<!-- Добавьте больше элементов по мере необходимости -->
</div>

Основное отличие здесь - добавление класса accordion-flush к основному контейнеру. Это удаляет стандартный цвет фона и некоторые границы, давая более чистый вид.

Всегда открытый аккордеон

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

<div class="accordion" id="alwaysOpenAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingAlwaysOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAlwaysOne" aria-expanded="true" aria-controls="collapseAlwaysOne">
Всегда открытый элемент #1
</button>
</h2>
<div id="collapseAlwaysOne" class="accordion-collapse collapse show" aria-labelledby="headingAlwaysOne">
<div class="accordion-body">Этот элемент может оставаться открытым, когда другие открываются.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingAlwaysTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAlwaysTwo" aria-expanded="false" aria-controls="collapseAlwaysTwo">
Всегда открытый элемент #2
</button>
</h2>
<div id="collapseAlwaysTwo" class="accordion-collapse collapse" aria-labelledby="headingAlwaysTwo">
<div class="accordion-body">Этот элемент также может оставаться открытым независимо.</div>
</div>
</div>
</div>

Секрет здесь? Мы удалили атрибут data-bs-parent из контентных divов. Это сообщает Bootstrap не закрывать автоматически другие элементы при открытии одного.

Доступность

Доступность имеет решающее значение в веб-разработке. Аккордеоны Bootstrap имеют встроенные функции доступности, но важно использовать их правильно:

  1. Используйте правильные уровни заголовков (<h2>, <h3>, и т.д.) для заголовков аккордеона.
  2. Включите атрибуты aria-expanded на кнопках (установите "true" при открытии, "false" при закрытии).
  3. Используйте aria-controls на кнопках, чтобы связать их с их контентными divами.
  4. Добавьте aria-labelledby в контентные divы, ссылаясь на их соответствующие заголовки.

Вот таблица, резюмирующая ключевые атрибуты доступности:

Атрибут Местоположение Purpose
aria-expanded Кнопка Indicates if the section is expanded
aria-controls Кнопка Links button to its content
aria-labelledby Контентный div Links content to its header

Remember, these aren't just for show - screen readers and other assistive technologies rely on these attributes to navigate your accordion correctly.

Заключение

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

Remember, practice makes perfect. Попробуйте создать свои собственные аккордеоны, комбинируйте стили и, самое главное, получайте удовольствие! Кто знает, может быть, вы найдете новый аккорд в веб-разработке. (Извините, не смог удержаться от小小的 аккордеонного каламбура!)

Счастливо кодируйте и до следующего раза, продолжайте расширять свои знания - как аккордеон!

Credits: Image by storyset

Предыдущий учебник:
Bootstrap - Иллюстрации
Следующий учебник:
Bootstrap - Уведомления