API Bootstrap: работа атрибута data-toggle и его опции

Быстрый ответ

Атрибут data-toggle представляет собой инструмент для активации функций JavaScript-плагинов Bootstrap. Он придает элементам пользовательского интерфейса определенную функциональность: так, data-toggle="dropdown" запускает выпадающее меню при нажатии на элемент. Bootstrap самостоятельно отслеживает этот атрибут, обеспечивая взаимодействие с DOM и обработку событий — разработчику не приходится имплементировать эти возможности в код на JavaScript.

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

<!-- Кнопка для отображения выпадающего меню -->
<button type="button" class="btn btn-primary" data-toggle="dropdown">
  Открыть меню
</button>

<!-- Само выпадающее меню -->
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Ссылка 1</a>
  <a class="dropdown-item" href="#">Ссылка 2</a>
</div>

В данном примере при нажатии на кнопку открывается или скрывается выпадающее меню — интуитивно понятная логика, верно?

Тщательный разбор атрибута data-toggle

Воспринимайте data-toggle как руководство для JavaScript-компонентов Bootstrap, указывающее на то, какие действия привязать к элементам. Его можно использовать не только для управления выпадающими меню. Указав значения collapse, modal, tab или button, вы получаете доcтуп к дополнительным функциям.

Скрытие контента с помощью collapse

Collapse позволит вам скрывать и отображать контент, что идеально подходит для создания компонентов-аккордеонов.

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#demoCollapse">
  Переключить видимость контента
</button>

<div id="demoCollapse" class="collapse">
  Это скрытый текст, который можно показать или снова скрыть.
</div>

Подробнее об этом расскажет наш спикер на видео

Использование вкладок и таблеток для навигации

Примените data-toggle="tab" или data-toggle="pill" для переключения между вкладками и таблетками, изменяя содержимое страницы без перезагрузки.

<!-- Навигационные вкладки -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">Главная</a>
  </li>
  <!-- ... другие вкладки ... -->
</ul>

<!-- Контент вкладок -->
<div class="tab-content">
  <div id="home" class="container tab-pane active"><br>
    Контент страницы «Главная».
  </div>
  <!-- ... прочий контент ... -->
</div>

Модальные окна и переключаемые кнопки

С помощью modal и button вы добавляете интерактивность: data-toggle="modal" вызывает модальное окно, а data-toggle="buttons" контролирует состояние группы переключаемых кнопок.

<!-- Кнопка для вызова модального окна -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Открыть модальное окошко
</button>

<!-- Заготовка модального окна -->
<div class="modal" id="exampleModal">
  <!-- ... содержание модального окна ... -->
</div>

Для контролирования состояния кнопок удобно использовать data-toggle="buttons":

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Enabled
  </label>
  <!-- ... другие кнопки ... -->
</div>

Не забывайте сочетать data-toggle с data-target для указания элемента, которому предстоит измениться.

Визуализация

Воспринимайте data-toggle как выключатель на устройстве. Возьмем для примера фонарик с выключателем data-toggle.

[Позиция OFF] 👉 (Выключатель: data-toggle="off") 👉 🔦❌ // Фонарик не светит.

Но если мы переключим его:

[Позиция ON] 👉 (Выключатель: data-toggle="on") 👉 🔦💡 // Фонарик светит!

Также data-toggle включает или отключает функции ваших HTML-компонентов.

Продвинутое использование data-toggle

Использование data-toggle позволяет элементам сохранять свое состояние, что особенно актуально для форм, визардов и переключателей. Хранилища localStorage или sessionStorage дадут возможность интерфейсам помнить действия пользователя.

Для работы с data-toggle в JavaScript вы можете использовать запрос document.querySelectorAll('[data-toggle="value"]'). Это позволит создавать собственные сценарии управления поведением в дополнение к готовым функциям Bootstrap.

Распространенные проблемы и пути их решения

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

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

Полезные материалы

1. Collapse · Bootstrap — подробное описание использования data-toggle в Bootstrap из официальной документации.
2. Использование атрибутов данных – Учебник по веб-разработке | MDN — гайд MDN по использованию атрибутов data-* в HTML.
3. HTML атрибут data-* — учебник W3Schools с примерами использования атрибутов data-*.
4. Полное руководство по атрибутам данных | CSS-Tricks — статья на CSS-Tricks для глубокого изучения атрибутов data-* в HTML и CSS.
5. Учимся использовать псевдоэлементы :before и :after в CSS — Smashing Magazine — Smashing Magazine рассматривает псевдоэлементы в CSS, которые можно сочетать с data-*.
6. Проблемы · twbs/bootstrap · GitHub — обсуждение и решение проблем, связанных с data-toggle в репозитории Bootstrap на GitHub.