Можете ли вы сказать мне, какова система или поведение data-target
атрибута, используемого Bootstrap 3?
Я знаю, что переключение данных используется для нацеливания API JavaScript или Bootstrap на графические функции.
источник
Можете ли вы сказать мне, какова система или поведение data-target
атрибута, используемого Bootstrap 3?
Я знаю, что переключение данных используется для нацеливания API JavaScript или Bootstrap на графические функции.
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.
data-target
принимает селектор CSS, указывающий на соответствующий элемент.Переключатель сообщает Bootstrap, что делать, а цель сообщает Bootstrap, какой элемент будет открываться. Поэтому всякий раз, когда щелкают по такой ссылке, появляется модальное окно с идентификатором «basicModal».
источник