Quel est l'attribut `data-target` dans Bootstrap 3?

93

Pouvez-vous me dire quel est le système ou le comportement derrière l' data-targetattribut utilisé par Bootstrap 3?

Je sais que le basculement de données utilisé pour viser l'API JavaScript de Bootstrap de la fonctionnalité graphique.

twitter-bootstrap-3

— ténébreux
source

113

data-targetest 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-targetattribut 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 #myModaldans les sélecteurs CSS pointe vers des éléments qui ont un idattribut avec la myModalvaleur.

Plus d'informations sur l'attribut HTML5 "data-": https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

— Pascalmh
source

c'est comme un moteur CSS de sélecteur et rien d'autre?

— darkomen

@miltone - exactement, pas comme. data-targetaccepte un sélecteur CSS qui pointe vers l'élément concerné.

— PhistucK

18

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.

— user3098847
source