Que signifient les données dans le bootstrap ?

Dans bootstrap, les données signifient définir des attributs personnalisés. Les attributs personnalisés commencent généralement par "data-". L'application des attributs de données permet aux balises HTML d'attacher implicitement certaines données, et Javascript peut gérer ces données d'attribut.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version bootstrap 3.3.7, ordinateur DELL G3

Que signifient les données dans le bootstrap

【1 attribut de données】

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

Les données stockées (personnalisées) peuvent être récupérées et utilisées par le JavaScript de la page. Les attributs

data-* se composent de deux parties :

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

• * 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, puis effectuer les actions et événements correspondants.

【2 attributs de données dans Bootstrap】

Le site officiel a une introduction selon laquelle 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 d'interaction requis, puis utilisions les arborescences Javascript et HTML DOM pour exploiter les objets texte existants afin d'obtenir des interactions telles que des effets dynamiques.

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 simplement directement selon ces règles, et c'est ainsi que Bootstrap est né.

En d’autres termes, dans le passé, nous avions d’abord des exigences fonctionnelles, puis nous les implémentions. Maintenant, les fonctions sont essentiellement couvertes et écrites pour vous. Les fonctions d'opération liées à js ont été écrites et le style css a également été écrit. Si vous souhaitez l'utiliser, appelez-le directement 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 suivent désormais essentiellement cette routine, tout comme diverses bibliothèques de classes Java.) L'attribut class="xxx" de la balise

est principalement utilisé pour utiliser le style CSS de bootstrap,

et comme classe de données identifiables. objets Nom ID. 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） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                code。。。
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

2 data-dismiss

couramment utilisé dans les fenêtres modales pour fermer la fenêtre modale data-dismiss="modal"

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

data -slide- to, data-slide et data-ride sont utilisés pour les carrousels carrousel.

Recommandations associées : Tutoriel bootstrap

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!