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

Question 1

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

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

Question 2

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значением.

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

Question 3

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