que fait data-toggle dans bootstrap ?

Question

Le titre est explicite. J'ai vu un question plus tôt mais ça ne m'a pas autant aidé.

J'ai consulté l'API de Boostrap mais je n'ai pas trouvé ma réponse.

Answer 1

Il s'agit d'un attribut de données HTML5 qui associe automatiquement l'élément au type de widget dont il s'agit.

Quelques exemples :

data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"

Passez par le Documentation sur le JavaScript et recherchez data-toggle et vous verrez qu'il est utilisé dans les exemples de code.

Un exemple concret :

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a href="#">Item</a>
  </ul>
</div>

Answer 2

Tout attribut qui commence par data- est le préfixe des attributs personnalisés utilisés dans un but précis (ce but dépend de l'application). Il a été ajouté comme un remède sémantique à l'utilisation intensive de l'attribut rel et d'autres attributs à des fins autres que celles auxquelles ils étaient initialement destinés ( rel était souvent utilisé pour contenir des données pour des choses comme des infobulles avancées).

Dans le cas de Bootstrap, je ne suis pas familier avec son fonctionnement interne, mais d'après son nom, je suppose qu'il s'agit d'un crochet permettant de basculer la visibilité ou peut-être un mode de l'élément auquel il est attaché (comme la barre latérale rétractable). sur Octopress.org ).

html5doctor a un bon article sur l'attribut data-. .

Le cycle 2 est un autre exemple d'utilisation intensive de l'attribut "données". .

Answer 3

De la Docs Bootstrap :

<!--Activate a modal without writing JavaScript. Set data-toggle="modal" on a 
controller element, like a button, along with a data-target="#foo" or href="#foo" 
to target a specific modal to toggle.-->

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Answer 4

La présence de cet attribut de données indique à Bootstrap de passer d'un état visuel à un état logique d'un autre élément lors de l'interaction avec l'utilisateur.

Il est utilisé pour afficher les modales, le contenu des onglets, les infobulles et les menus contextuels, ainsi que pour définir l'état d'activation d'un bouton à bascule. Il est utilisé de multiples façons sans documentation claire.

Answer 5

Il s'agit d'un attribut de données HTML5 défini par Bootstrap. Il lie un bouton à un événement.