Les attributs de bascule de données dans Bootstrap Twitter

Quoi data-toggle sont les attributs de Twitter Bootstrap? Je n'ai pas trouvé de réponse dans L'API de Bootstrap.

j'ai déjà vu une question semblable auparavant, link . Mais ça ne m'aide pas beaucoup.

253
demandé sur Community 2013-02-27 17:40:19

10 réponses

c'est un attribut de données HTML5 qui relie automatiquement l'élément au type de widget qu'il est.

Quelques Exemples:

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

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

un exemple pratique:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<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></li>
  </ul>
</div>
189
répondu epascarello 2016-07-04 22:04:23

tout attribut commençant par data- est le préfixe des attributs personnalisés utilisés dans un but spécifique (ce but dépend de l'application). Il a été ajouté à titre de remède sémantique à l'utilisation massive de rel et d'autres attributs à des fins autres que leurs fins prévues à l'origine ( rel a été souvent utilisé pour conserver des données pour des choses comme les infobulles avancées).

dans le cas de Bootstrap, Je ne connais pas son fonctionnement interne, mais à en juger par le nom, je suppose que c'est un crochet pour permettre le basculement de la visibilité ou peut-être un mode de l'élément il est attaché à (comme la barre latérale pliable sur Octopress.org ).

html5doctor a un bon article sur l'attribut de données .

le Cycle 2 est un autre exemple d'utilisation extensive de l'attribut de données .

66
répondu Shauna 2013-02-27 13:50:19

par exemple, dites que vous créez une application web pour répertorier et afficher des recettes. Vous voudrez peut-être que vos clients puissent trier la liste, Afficher les caractéristiques des recettes, et ainsi de suite avant de choisir la recette à ouvrir. Pour ce faire, vous devez associer des choses comme le temps de cuisson, l'ingrédient principal, la position du repas, et ainsi de suite à l'intérieur de la liste des éléments pour les recettes.

<li><a href="recipe1.html">Borscht</a></li>
<li><a href="recipe2.html">Chocolate Mousse</a></li>
<li><a href="recipe3.html">Almond Radiccio Salad</a></li>
<li><a href="recipe4.html">Deviled Eggs</a></li>

pour obtenir cette information dans la page, vous pourrait faire beaucoup de choses différentes. Vous pouvez ajouter des commentaires à chaque élément LI, Vous pouvez ajouter des attributs rel aux éléments de la liste, vous pouvez placer toutes les recettes dans des dossiers distincts basés sur le temps, le repas et l'ingrédient (i.e. ). La solution que la plupart des développeurs ont pris était d'utiliser les attributs de classe pour stocker des informations sur l'élément courant. Cela présente plusieurs avantages:

  • vous pouvez stocker plusieurs classes sur un élément
  • les noms de classe peuvent être lisible par l'homme
  • il est facile d'accéder aux classes avec JavaScript (nom de classe)
  • La classe est associée à l'élément sur

mais il y a quelques inconvénients majeurs à cette méthode:

  • vous devez vous rappeler ce que font les classes. Si vous oubliez ou un nouveau développeur prend en charge le projet, les classes peuvent être supprimés ou modifiés sans se rendre compte que cela affecte la façon dont l'application fonctionne.
  • Les Classes
  • sont également utilisées pour le style avec CSS, et vous pouvez dupliquer des classes CSS avec des classes de données par erreur, pour finir avec des styles étranges sur vos pages live.
  • il est plus difficile d'ajouter plusieurs éléments de données. Si vous avez plusieurs éléments de données, vous devez accéder à votre JavaScript, soit par le nom de la classe ou de la position dans la liste de la classe. Mais il est facile de désordre.

toutes les autres méthodes que je suggérais avaient ces problèmes ainsi que d'autres. Mais comme c'était la seule façon d'inclure rapidement et facilement des données, c'est ce que nous avons fait. HTML5 Attributs de Données à la Rescousse

HTML5 a ajouté un nouveau type d'attribut à tout élément-l'élément de données personnalisé (data-*). Ce sont des attributs personnalisés (marqués par les*) que vous pouvez ajouter à vos éléments HTML pour définir n'importe quel type de données que vous voulez. Ils se composent de deux parties:

Le Nom De L'Attribut C'est le nom de l'attribut. Il doit avoir au moins un caractère minuscule et avoir le préfixe data-. Par exemple: Données-ingrédient principal, données-temps de cuisson, données-repas. C'est le nom de vos données.

Attribut Vaule Comme tout autre attribut HTML, vous incluez les données elles-mêmes dans des guillemets séparés par un signe égal. Ces données peuvent être n'importe quelle chaîne de caractères valide sur une page web. Par exemple: données principal ingrédient="chocolat".

vous pouvez puis appliquez ces attributs de données à n'importe quel élément HTML que vous voulez. Par exemple, vous pouvez définir les informations dans la liste d'exemples ci-dessus:

<li data-main-ingredient="beets" data-cooking-time="1 hour" data-meal="dinner"><a href="recipe1.html">Borscht</a></li>
<li data-main-ingredient="chocolate" data-cooking-time="30 minutes" data-meal="dessert"><a href="recipe2.html">Chocolate Mousse</a></li>
<li data-main-ingredient="radiccio" data-cooking-time="20 minutes" data-meal="dinner"><a href="recipe1.html">Almond Radiccio Salad</a></li>
<li data-main-ingredient="eggs" data-cooking-time="15 minutes" data-meal="appetizer"><a href="recipe1.html">Deviled Eggs</a></li>

une fois que vous aurez cette information dans votre HTML, vous pourrez y accéder avec JavaScript et manipuler la page à partir de ces données.

28
répondu shikarii 2016-04-09 06:45:14

From the Bootstrap Docs:

<!--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>
21
répondu Dan 2014-06-24 03:27:42

la présence de cet attribut de données indique à Bootstrap de basculer entre les états visuels ou logiques d'un autre élément sur l'interaction utilisateur.

il est utilisé pour afficher les modaux, le contenu des onglets, les tooltips et les menus popover ainsi que pour définir un état pressé pour un bouton à bascule. Il est utilisé de multiples façons sans une documentation claire.

4
répondu Gregor 2013-02-27 13:50:10

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

4
répondu Amrendra 2014-08-19 20:01:30

le but de la bascule de données dans bootstrap est donc vous pouvez utiliser jQuery pour trouver toutes les étiquettes d'un certain type. Par exemple, vous mettez data-toggle="liste" dans tous les liste des balises que vous pouvez utiliser un sélecteur JQuery pour trouver toutes ces balises et exécuter la liste() pour l'initialiser. Vous pouvez tout aussi bien mettre class="myPopover" sur l'étiquette et utiliser le .myPopover sélecteur de faire la même chose. La documentation est déroutante, parce qu'elle donne l'impression qu'il se passe quelque chose de spécial. avec cet attribut.

Ce

<div class="container">
    <h3>Popover Example</h3>
    <a href="#" class="myPop" title="Popover1 Header" data-content="Some content inside the popover1">Toggle popover1</a>
    <a href="#" class="myPop" title="Popover2 Header" data-content="Some content inside the popover2">Toggle popover2</a>
</div>

<script>
    $(document).ready(function(){
        $('.myPop').popover();   
    });
</script>

fonctionne très bien.

4
répondu shawnlg 2016-07-26 22:51:07

ici vous pouvez également trouver plus d'exemples pour les valeurs que data-toggle peut avoir assigné. Il suffit de visiter la page puis CTRL+F pour rechercher data-toggle .

2
répondu pebox11 2015-08-22 18:32:51

Bootstrap exploite les standards HTML5 afin d'accéder facilement aux attributs des éléments DOM dans javascript.

data - *

forme une classe d'attributs, appelés attributs de données personnalisées, qui permettent l'échange d'informations exclusives entre le HTML et sa représentation DOM qui peut être utilisée par les scripts. Toutes ces données personnalisées sont disponibles via l'interface HTMLElement de l'élément sur lequel l'attribut est placé. Le HTMLElement.la propriété dataset leur donne accès.

référence

2
répondu Rel 2016-02-18 02:10:57

beaucoup de réponses, mais je ne pouvais pas obtenir le point de répondre. Permet de voir ce. http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp



au point



un. Un attribut à partir de données n'est pas d'analyser en HTML5 analyseur.



B. Bootstrap utilise l'attribut data-toggle pour créer fonction de collapsus

comment utiliser : seulement 2 étapes



1) Ajoutez class= "collapsus" à l'élément #a que vous voulez collapsus.



2) Ajouter data-target= "#A "et data-toggle= "collapse"



Purport: l'attribut data-toggle nous aide à créer le contrôle pour s'effondrer/étendre un div (bloc) si nous utilisons CSS Bootstrap

2
répondu Akshay Vijay Jain 2016-04-21 07:04:59