Чи можете ви сказати мені, яка система чи поведінка лежать в основі data-target
атрибута, використовуваного Bootstrap 3?
Я знаю, що перемикач даних використовувався для націлювання API JavaScript Bootstrap графічної функціональності.
Чи можете ви сказати мені, яка система чи поведінка лежать в основі data-target
атрибута, використовуваного Bootstrap 3?
Я знаю, що перемикач даних використовувався для націлювання API JavaScript Bootstrap графічної функціональності.
Відповіді:
data-target
використовується bootstrap, щоб полегшити вам життя. Вам (переважно) не потрібно писати жодного рядка 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
data-target
приймає селектор CSS, який вказує на відповідний елемент.
Перемикач повідомляє Bootstrap, що робити, а ціль повідомляє Bootstrap, який елемент збирається відкрити. Отже, щоразу, коли натискається таке посилання, з’являється модаль з ідентифікатором “basicModal”.