Что такое атрибут `data-target` в Bootstrap 3?

Можете ли вы рассказать мне, что такое система или поведение за атрибутом data-target, используемым Bootstrap 3?

Я знаю, что data-toggle используется для нацеливания API JavaScript Bootstrap на графическую функциональность.

Ответы

Ответ 1

data-target используется бутстрапом, чтобы упростить вашу жизнь. Вам (в основном) не нужно писать одну строку Javascript для использования своих предварительно созданных компонентов JavaScript.

Атрибут data-target должен содержать селектор CSS, который указывает на элемент HTML, который будет изменен.

Код модального кода из BS3:

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  [...]
</div>

В этом примере кнопка имеет data-target="#myModal", если вы нажмете на нее, <div id="myModal">...</div> будет изменен (в этом случае исчезнет). Это происходит потому, что #myModal в CSS-селекторах указывает на элементы, у которых есть атрибут id со значением myModal.

Дополнительная информация об атрибуте "data-" HTML5: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

Ответ 2

Переключатель сообщает Bootstrap, что делать, и целевой объект указывает Bootstrap, какой элемент будет открыт. Поэтому всякий раз, когда нажимается такая ссылка, появляется модальный с идентификатором "basicModal".