Pouvez-vous me dire quel est le système ou le comportement derrière l' data-target
attribut utilisé par Bootstrap 3?
Je sais que le basculement de données utilisé pour viser l'API JavaScript de Bootstrap de la fonctionnalité graphique.
la source
Pouvez-vous me dire quel est le système ou le comportement derrière l' data-target
attribut utilisé par Bootstrap 3?
Je sais que le basculement de données utilisé pour viser l'API JavaScript de Bootstrap de la fonctionnalité graphique.
data-target
est utilisé par bootstrap pour vous faciliter la vie. Vous n'avez (principalement) pas besoin d'écrire une seule ligne de Javascript pour utiliser leurs composants JavaScript prédéfinis .
L' data-target
attribut doit contenir un sélecteur CSS qui pointe vers l'élément HTML qui sera modifié.
Exemple de code modal de 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>
Dans cet exemple, le bouton a data-target="#myModal"
, si vous cliquez dessus, <div id="myModal">...</div>
sera modifié (dans ce cas estompé). Cela se produit parce que #myModal
dans les sélecteurs CSS pointe vers des éléments qui ont un id
attribut avec la myModal
valeur.
Plus d'informations sur l'attribut HTML5 "data-": https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
data-target
accepte un sélecteur CSS qui pointe vers l'élément concerné.La bascule indique à Bootstrap ce qu'il doit faire et la cible indique à Bootstrap quel élément va s'ouvrir. Ainsi, chaque fois qu'un lien comme celui-ci est cliqué, un modal avec un identifiant «basicModal» apparaîtra.
la source