Maison > interface Web > Tutoriel d'amorçage > le corps du texte

Comment utiliser la boîte modale bootstrap

coldplay.xixi
Libérer: 2023-01-13 00:22:21
original
3797 Les gens l'ont consulté

Comment utiliser la boîte modale bootstrap : importez d'abord le fichier et appliquez le style modal bootstrap à la zone Corps ; puis placez la zone de contenu dans le div de style modal et définissez le style de la zone de contenu sur [modal -contenu] .

Comment utiliser la boîte modale bootstrap

L'environnement d'exploitation de cet article : système Windows 7, version bootstrapv4.4.1, ordinateur Dell G3.

Recommandé : Tutoriel vidéo bootstrap

Comment utiliser la boîte modale bootstrap :

1 , Importez d'abord les fichiers de bibliothèque requis en HTML, comme indiqué dans la figure ci-dessous, assurez-vous d'importer le fichier jquery

Comment utiliser la boîte modale bootstrap

2. Ensuite, dans la zone Corps, nous avons appliqué le style modal de bootstrap , comme le montre l'image ci-dessous

Comment utiliser la boîte modale bootstrap

3. Continuez ensuite à placer la zone de contenu dans le div de style modal. Le style de la zone de contenu est modal-content, comme le montre l'image ci-dessous

Comment utiliser la boîte modale bootstrap

4. Jetons ensuite un coup d'œil aux trois styles de la zone de contenu, la tête et la queue et la partie centrale, comme indiqué dans l'image ci-dessous. figure ci-dessous

Comment utiliser la boîte modale bootstrap

5. Ensuite, nous définissons un bouton Lorsque vous cliquez sur le bouton, une boîte apparaîtra, comme indiqué dans la figure ci-dessous

<.>Comment utiliser la boîte modale bootstrap

6. Assurez-vous de spécifier l'attribut data-target du bouton, comme indiqué dans l'image ci-dessous

Comment utiliser la boîte modale bootstrap

7. Après avoir exécuté le programme, nous verrons le contenu comme indiqué dans l'image ci-dessous, c'est notre boîte modale

Comment utiliser la boîte modale 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal