Wat is het kenmerk `data-target` in Bootstrap 3?

Kun je me vertellen wat het systeem of gedrag is achter het data-target-kenmerk dat wordt gebruikt door Bootstrap 3?

Ik weet dat die data-toggle werd gebruikt om API JavaScript of Bootstrap van grafische functionaliteit te gebruiken.


Antwoord 1, autoriteit 100%

data-targetwordt door bootstrap gebruikt om uw leven gemakkelijker te maken. U hoeft (meestal) geen enkele regel Javascript te schrijven om hun vooraf gemaakte JavaScript-componentente gebruiken.

Het kenmerk data-targetmoet een CSS-selector bevatten die verwijst naar het HTML-element dat wordt gewijzigd.

Modal voorbeeldcode van 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>

In dit voorbeeld heeft de knop data-target="#myModal", als u erop klikt, <div id="myModal">...</div>zal worden gewijzigd (in dit geval ingefade).
Dit gebeurt omdat #myModalin CSS-kiezers verwijst naar elementen met een id-kenmerk met de waarde myModal.

Meer informatie over het HTML5-kenmerk “data-“: https://developer. mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes


Antwoord 2, autoriteit 20%

De toggle vertelt bootstrap wat te doen en het doelwit vertelt bootstrap welk element gaat openen. Dus wanneer een link zoals die wordt geklikt, verschijnt een modal met een ID van “Basicmodal”.

Other episodes