Organisation des attributs data-[*] dans Bootstrap

Cet article collecte et organise des connaissances pertinentes sur l'attribut data-[*] dans Bootstrap. Les amis intéressés devraient y jeter un œil

[1 data-attribute]

L'attribut data est un nouvel attribut du HTML5. Les développeurs sont autorisés à ajouter librement des attributs à leurs balises pour stocker des données. Ces attributs personnalisés commencent généralement par « data- ».

Les données stockées (personnalisées) peuvent être utilisées dans le JavaScript de la page.

data-* L'attribut se compose de deux parties :

1. * Le nom de l'attribut ne doit contenir aucune lettre majuscule et il doit y avoir au moins un caractère après le préfixe "données-".

2. * La valeur de l'attribut peut être n'importe quelle chaîne.

Pour parler franchement, il s'agit de l'application d'attributs de données, de sorte que les balises HTML peuvent implicitement attacher certaines données, et JavaScript peut lire/écrire ces données d'attribut, et vous pouvez ensuite le faire Produire les actions et événements correspondants.

[2 Attributs de données dans Bootstrap]Il y a une introduction sur le site officiel indiquant que vous pouvez utiliser tous les plug-ins Bootstrap simplement via l'API d'attribut de données sans écrire une ligne de code JavaScript. Il s'agit d'une API de première classe dans Bootstrap et devrait être votre premier choix.

Dans le passé, lorsque nous utilisions javascrpt natif, nous déterminions d'abord la disposition du style frontal et les événements interactifs, puis utilisions les arborescences javascript et HTML DOM pour exploiter les objets texte existants afin de pratiquer des effets dynamiques et d'autres interactions.

Plus tard, Facebook a découvert que de nombreux effets de page Web de base sont couramment utilisés et fréquemment utilisés, tels que les menus déroulants, les pliages, les boîtes modales, etc. Pourquoi ne pas extraire ceux couramment utilisés dans un ensemble de modèles standard, puis formuler des règles d'utilisation lors de l'utilisation, utilisez-les directement selon ces règles, et c'est ainsi que le bootstrap est né.

Pour parler franchement, dans le passé, nous avions d'abord des exigences fonctionnelles, puis nous les implémentions. Maintenant, les fonctions sont essentiellement couvertes pour vous, les fonctions d'opération js ont été écrites et les styles css ont également été écrits. Si vous souhaitez l'utiliser, appelez-le simplement selon ses règles. Ensuite afin d'être plus diversifiées, les fonctions dans bootstrap.js peuvent avoir différentes valeurs de paramètres. Ces valeurs de paramètres sont définies en fonction des attributs que vous donnez aux balises. (En fait, les plug-ins js utilisent désormais essentiellement cette routine) L'attribut class="xxx" de la balise

est principalement utilisé pour utiliser le style CSS de bootstrap et comme identifiant de nom de classe pour un objet identifiable. L'attribut data-[xx]="yy" de la balise

est principalement utilisé pour utiliser et appeler des composants et des plug-ins d'amorçage, c'est-à-dire utiliser bootstrap.js pour obtenir certains effets interactifs.

[3 attributs de données communs Bootstrap]

1 data-toggle data-toggle fait référence au type d'événement déclenché, les plus couramment utilisés sont les suivants.

data-toggle="dropdown"//下拉菜单
data-toggle="model" //模态框事件
data-toggle="tooltip"//提示框事件
data-toggle="tab"//标签页
data-toggle="collapse"//折叠
data-toggle="popover"//弹出框
data-toggle="button"//按钮事件

Les événements généraux affecteront un objet label. S'il s'agit d'un autre objet label, vous devez utiliser data-target pour faire référence à la cible label de. l'événement. Ainsi, data-loggle et data-target sont parfois utilisés ensemble. Comme suit

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
 开始演示模态框
</button>
<!-- 模态框（Modal） -->
<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <p class="modal-dialog">
  <p class="modal-content">
   <p class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
     ×
    </button>
    code。。。
   </p>
  </p><!-- /.modal-content -->
 </p><!-- /.modal -->
</p>

2 data-dismiss

est couramment utilisé dans les fenêtres modales pour fermer le statut modal window data-dismiss=”modal”

3 data-slide-to, data-slide, data-ride

data-slide-to, data-slide , data-ride est utilisé pour le carrousel carrousel.

L'attribut data-slide accepte le mot-clé prev ou next, qui est utilisé pour changer la position de la diapositive par rapport à la position actuelle.

Utilisez data-slide-to pour transmettre un index de diapositive brut au carrousel, data-slide-to="2" déplacera le curseur vers un index spécifique et l'index commencera à compter à partir de 0.

L'attribut data-ride="carousel" est utilisé pour marquer le carrousel pour démarrer la lecture de l'animation lorsque la page est chargée

Ce qui précède est ce que j'ai compilé pour tout le monde. être utile à tout le monde à l’avenir.

Articles associés :

Exemples détaillés d'interaction entre Servlet3.0 et javascript pur via Ajax

Remplacement du nœud par JQuery elements Comment fonctionner

Tutoriel détaillé sur l'utilisation d'Angular CLI pour générer des projets Angular 5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!