Ответ 1
Я думаю, вы немного сбиты с толку в целях пользовательских атрибутов данных. Из w3 spec
Пользовательские атрибуты данных предназначены для хранения конфиденциальных данных на странице или приложении, для которых нет более подходящих атрибутов или элементов.
Сам по себе атрибут data-toggle=value представляет собой в основном пару ключевых значений, в которой ключ является "переключением данных", а значение "значение".
В контексте Bootstrap пользовательские данные в атрибуте почти бесполезны без контекста, который их библиотека JavaScript включает в себя для данных. Если вы посмотрите на неминифицированную версию bootstrap.js, то вы можете выполнить поиск "data-toggle" и найти, как это происходит б.
Вот пример кода JavaScript Bootstrap, который я скопировал прямо из файла, касающегося использования "переключения данных".
-
Кнопка Toggle
Button.prototype.toggle = function () { var changed = true var $parent = this.$element.closest('[data-toggle="buttons"]') if ($parent.length) { var $input = this.$element.find('input') if ($input.prop('type') == 'radio') { if ($input.prop('checked') && this.$element.hasClass('active')) changed = false else $parent.find('.active').removeClass('active') } if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change') } else { this.$element.attr('aria-pressed', !this.$element.hasClass('active')) } if (changed) this.$element.toggleClass('active')}
Контекст, который предоставляет код, показывает, что Bootstrap использует атрибут data-toggle в качестве настраиваемого селектора запросов для обработки конкретного элемента.
Из того, что я вижу, это опции переключения данных:
- Свернуть
- выпадающий
- модальный
- вкладка
- таблетки
- Кнопка (ы)
Вы можете посмотреть Документацию по Bootstrap JavaScript, чтобы узнать больше о том, что каждый из них делает, но в основном атрибут data-toggle переключает элемент активен или нет.