Bootstrap - Состояние COLLAPSE: Подробное руководство для начинающих

Здравствуйте, будущие веб-разработчики! Сегодня мы погрузимся в один из самых полезных компонентов Bootstrap: Состояние COLLAPSE. Представьте себе魔术 для ваших веб-страниц - теперь вы видите его, теперь нет! Давайте отправимся в это увлекательное путешествие вместе.

Что такое Состояние COLLAPSE?

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

Пример

Давайте начнем с простого примера, чтобы размяться.

<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Нажмите, чтобы открыть секрет!
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Секрет в том, что вы awesome за изучение Bootstrap!
</div>
</div>

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

1. У нас есть кнопка (оформленная как ссылка), которая запускает состояние COLLAPSE.
2. Атрибут data-bs-toggle="collapse" говорит Bootstrap, что этот элемент управляет collapsible областью.
3. href="#collapseExample" указывает на ID collapsible контента.
4. Collapsible контент заключен в div с классом collapse и ID, который соответствует href в кнопке.

Когда вы нажимаете кнопку, Bootstrapmagic срабатывает, и voila! Ваш контент появляется или исчезает.

Горизонтальное Состояние COLLAPSE

Теперь давайте добавим немного остроты с горизонтальным состоянием COLLAPSE. Это как если бы ваш контент играет в прятки, но в стороны!

<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Переключить ширину collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
Это примерный контент для горизонтального состояния COLLAPSE. Он скрыт по умолчанию и отображается при активации.
</div>
</div>
</div>

Основные различия здесь:

1. Мы используем класс collapse-horizontal вместе с collapse.
2. Мы установили определенную ширину для collapsible контента.
3. Внешний div с min-height обеспечивает то, что другие элементы не прыгают при переключении состояния.

Множественные Переключатели и Цели

Теперь давайте создадим симфонию collapsible элементов! Мы можем иметь несколько кнопок, управляющих различными (или теми же) collapsible областями.

<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Переключить первый элемент</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Переключить второй элемент</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Переключить оба элемента</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Примерный контент для первого компонента состояния COLLAPSE в этом примере с множественным collapsible.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Примерный контент для второго компонента состояния COLLAPSE в этом примере с множественным collapsible.
</div>
</div>
</div>
</div>

Вот что происходит:

1. У нас есть три кнопки: две управляют отдельными состояниями, а одна управляет обоими.
2. Третья кнопка использует .multi-collapse для управления обоими collapsible областями.
3. Each collapsible area has both a unique ID and the multi-collapse class.

Доступность

Будучи ответственными разработчиками, мы должны убедиться, что наши веб-сайты доступны всем. Компонент Состояние COLLAPSE от Bootstrap comes with built-in accessibility features, but we can enhance them:

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#accessibleCollapse" aria-expanded="false" aria-controls="accessibleCollapse">
Кнопка доступного состояния COLLAPSE
</button>

<div class="collapse" id="accessibleCollapse">
<div class="card card-body">
Этот контент скрыт, но доступен для экранных读者的.
</div>
</div>

Основные функции доступности:

1. Атрибут aria-expanded сообщает экранным читателям, виден ли в данный момент collapsible контент.
2. Атрибут aria-controls связывает кнопку с collapsible контентом.

Таблица Методов

Вот удобная таблица методов Состояния COLLAPSE, которые вы можете использовать в вашем JavaScript:

Метод	Описание
collapse('toggle')	Переключает состояние collapsible элемента
collapse('show')	Показывает collapsible элемент
collapse('hide')	Сворачивает collapsible элемент
collapse('dispose')	Уничтожает состояние COLLAPSE элемента

Чтобы использовать эти методы, вы делаете что-то вроде:

var myCollapsible = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapsible, {
toggle: false
})
bsCollapse.show()

И вот и все,朋友们! Вы только что овладели искусством Bootstrap COLLAPSE. Помните, практика делает мастера, так что не бойтесь экспериментировать с этими примерами. Before you know it, you'll be creating web pages that fold and unfold like origami!

Счастливого кодирования, и пусть ваши collapse всегда проходят гладко, а ваши переключатели всегда отзывчивы!

Credits: Image by storyset