interface Web
Tutoriel d'amorçage
Explication détaillée de la façon d'utiliser le composant de boîte d'avertissement dans Bootstrap
Explication détaillée de la façon d'utiliser le composant de boîte d'avertissement dans Bootstrap
Comment faire apparaître la boîte d'avertissement (Alertes) dans
Bootstrap ? L'article suivant expliquera l'utilisation du composant de boîte d'avertissement Bootstrap5 à travers des exemples de code. J'espère qu'il vous sera utile !
1 Alertes
Lorsque vous voyez le mot Alertes, ne le confondez pas avec la fenêtre d'avertissement d'alerte en js. Les deux n'ont rien à voir l'un avec l'autre. La définition officielle de la boîte d'avertissement Bootstrap5 est de fournir des messages de retour contextuels pour les opérations utilisateur typiques et de fournir un petit nombre de messages d'alerte disponibles et flexibles. La définition officielle est un peu déroutante. De manière générale, la boîte d'avertissement est en réalité appelée de manière plus appropriée un rappel de message. Elle rappelle généralement "vous avez plusieurs messages non lus" dans le coin inférieur droit ou dans le coin supérieur droit de la fenêtre. [Recommandation associée : "Tutoriel bootstrap"]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>警告窗口组件</title>
</head>
<body>
<div>
<br><br><br>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>老刘!</strong> 你收到一条站内短信，<a href="#">点此查看</a>
<button type="button" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
2 Composition de la boîte d'alerte
La boîte d'alerte est relativement simple, composée d'un conteneur et d'un bouton de fermeture, où le bouton de fermeture peut être omis et fermé régulièrement via js, par exemple Régler pour afficher pendant 30 secondes puis éteindre. Vous trouverez ci-dessous l’exemple le plus simple d’une boîte de message.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>警告窗口组件</title>
</head>
<body>
<div class="alert alert-primary">
老刘!你收到一条站内短信。
</div>
<script ></script>
</body>
</html>
3 Couleur de la boîte d'alerte
Dans l'exemple ci-dessus, en plus d'utiliser alert dans le conteneur pour le marquer comme boîte d'avertissement, il existe également une classe alert-primary pour définir la couleur d'arrière-plan de la boîte d'alerte . Toutes les couleurs courantes des boîtes d’alerte sont répertoriées ci-dessous.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>警告窗口组件</title>
</head>
<body>
<div>
<br><br><br>
<div class="alert alert-primary" role="alert">
alert-primary
</div>
<div class="alert alert-secondary" role="alert">
alert-secondary
</div>
<div class="alert alert-success" role="alert">
alert-success
</div>
<div class="alert alert-danger" role="alert">
alert-danger
</div>
<div class="alert alert-warning" role="alert">
alert-warning
</div>
<div class="alert alert-info" role="alert">
alert-info
</div>
<div class="alert alert-light" role="alert">
alert-light
</div>
<div class="alert alert-dark" role="alert">
alert-dark
</div>
</div>
<script ></script>
</body>
</html>
4 Couleurs des liens dans la boîte d'alerte
4.1 Correspondance automatique
Utilisez la classe utilitaire .alert-link pour fournir rapidement des liens de couleur correspondant dans n'importe quelle alerte, ci-dessous je ne donne qu'une comparaison des trois couleurs.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>彩色链接</title>
</head>
<body>
<div>
<br><br><br>
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<br><br>
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#">an example link</a>. Give it a click if you like.
</div>
</div>
<script ></script>
</body>
</html>
4.2 Utilisez la classe de liens colorés
Dans les liens colorés de la catégorie assistant du "Bootstrap5 Chinese Manual", vous pouvez utiliser différentes link-*类对链接着色。与text-* classes, ces classes ont : survol et : états de focus. Les liens colorés ne sont pas propres aux boîtes d'avertissement et sont valables pour tous les liens, donc les couleurs des boîtes d'avertissement ne sont pas utilisées ci-dessous :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>彩色链接</title>
</head>
<body>
<div>
<br><br><br>
<div><a href="#">Primary link</a></div>
<div><a href="#">Secondary link</a></div>
<div><a href="#">Success link</a></div>
<div><a href="#">Danger link</a></div>
<div><a href="#">Warning link</a></div>
<div><a href="#">Info link</a></div>
<div><a href="#" class="bg-dark link-light">Light link</a></div>
<div><a href="#">Dark link</a></div>
</div>
<script ></script>
</body>
</html>
Pour l'avant-dernier, j'ai défini l'arrière-plan sur noir, sinon. il sera difficile de faire la distinction.
5 Extras
Les alertes peuvent également contenir d'autres éléments HTML tels que des titres, des paragraphes et des séparateurs.
<div class="alert alert-success" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </div>
Bien que cela ait l'air bien, il n'est pas recommandé de l'utiliser comme composant pour la mise en page et la composition. Les grilles et les cartes plus puissantes introduites plus tard sont plus adaptées à la composition.
6 Fermer
Dans le premier exemple, nous avons utilisé le bouton de fermeture. Reparlons de son principe. Si vous ne souhaitez pas étudier cette section en profondeur, vous pouvez simplement copier l'exemple.
Toute alerte en ligne (c'est-à-dire une boîte d'avertissement) peut être désactivée à l'aide du plugin JavaScript d'alerte. Voici comment procéder :
- Assurez-vous que bootstrap.bundle.min.js est chargé.
- Ajoutez un bouton de fermeture et la classe .alert-dismissible qui ajoute un remplissage supplémentaire à droite de l'alerte et positionne le bouton de fermeture.
- Sur le bouton de fermeture, ajoutez l'attribut data-bs-dismiss="alert", qui déclenche la fonction JavaScript. Assurez-vous d'utiliser des éléments de bouton pour un fonctionnement correct sur tous les appareils.
- Pour animer l'alarme lorsqu'elle est désactivée, assurez-vous d'ajouter les classes .fade et .show.
Lorsque l'alerte est effacée, l'élément sera complètement supprimé de la structure de la page. Si un utilisateur du clavier ignore l'alerte à l'aide du bouton « Fermer », son focus sera soudainement perdu et, selon le navigateur, réinitialisé au début de la page/du document. Par conséquent, nous vous recommandons d'inclure du JavaScript supplémentaire pour écouter l'événement close.bs.alert et définir par programme focus() à la position la plus appropriée dans la page. Si vous envisagez de déplacer le focus vers un élément non interactif qui ne reçoit normalement pas le focus, assurez-vous d'ajouter tabindex="-1" à cet élément.
Pour plus de connaissances sur le bootstrap, veuillez visiter : Tutoriel de base du 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!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Comment afficher la date de bootstrap
Apr 07, 2025 pm 03:03 PM
Réponse: Vous pouvez utiliser le composant de sélecteur de date de bootstrap pour afficher les dates dans la page. Étapes: Présentez le framework bootstrap. Créez une boîte d'entrée de sélecteur de date dans HTML. Bootstrap ajoutera automatiquement des styles au sélecteur. Utilisez JavaScript pour obtenir la date sélectionnée.
Comment obtenir la barre de recherche bootstrap
Apr 07, 2025 pm 03:33 PM
Comment utiliser Bootstrap pour obtenir la valeur de la barre de recherche: détermine l'ID ou le nom de la barre de recherche. Utilisez JavaScript pour obtenir des éléments DOM. Obtient la valeur de l'élément. Effectuer les actions requises.
Comment vérifier la date de bootstrap
Apr 07, 2025 pm 03:06 PM
Pour vérifier les dates dans Bootstrap, suivez ces étapes: introduisez les scripts et styles requis; initialiser le composant de sélecteur de date; Définissez l'attribut Data-BV-Date pour activer la vérification; Configurer les règles de vérification (telles que les formats de date, les messages d'erreur, etc.); Intégrez le cadre de vérification de bootstrap et vérifiez automatiquement l'entrée de date lorsque le formulaire est soumis.
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
