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


93

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

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

Відповіді:


113

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


це як селектор CSS-движка і нічого іншого?
darkomen

@miltone - точно, не подобається. data-targetприймає селектор CSS, який вказує на відповідний елемент.
PhistucK

18

Перемикач повідомляє Bootstrap, що робити, а ціль повідомляє Bootstrap, який елемент збирається відкрити. Отже, щоразу, коли натискається таке посилання, з’являється модаль з ідентифікатором “basicModal”.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.