Maison > interface Web > Tutoriel d'amorçage > Obtenez la boîte d'avertissement d'amorçage en une seule astuce

Obtenez la boîte d'avertissement d'amorçage en une seule astuce

醉折花枝作酒筹
Libérer: 2021-03-31 18:00:34
original
2143 Les gens l'ont consulté

La boîte d'avertissement peut fournir de manière flexible des informations prédéfinies pour fournir aux utilisateurs du contenu de commentaires et des conseils. Aujourd'hui, nous présenterons la boîte d'avertissement bootstrap, qui a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'elle sera utile à tout le monde.

Obtenez la boîte d'avertissement d'amorçage en une seule astuce

Boîte d'avertissement

Mettre du texte et un bouton facultatif ensemble est une boîte d'avertissement. Vous devez utiliser la boîte d'avertissement Paramètres , il existe d'autres cours parmi lesquels choisir. Fournit actuellement un succès, un message, un avertissement ou un danger. .alert

<div class="alert alert-success" role="alert">成功</div>
    <div class="alert alert-info" role="alert">你有一条新消息</div>
    <div class="alert alert-warning" role="alert">警告!!!</div>
    <div class="alert alert-danger" role="alert">本次操作危险,是否继续?</div>
Copier après la connexion

Obtenez la boîte davertissement damorçage en une seule astuce

peut fermer la boîte d'avertissement

Ajouter

. classe et un bouton de fermeture à la boîte d'avertissement, puis devenez une boîte d'avertissement qui peut être fermée. Afin de garantir que cette opération est réalisable, vous devez ajouter l'attribut alert-dismissible à l'élément <button> . data-dismiss="alert"

<div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>警告!</strong> 本次操作有风险,是否继续?
</div>
Copier après la connexion

Obtenez la boîte davertissement damorçage en une seule astuce

Liens dans les avertissements

Vous pouvez définir la même couleur pour le lien que l'avertissement actuel boîte. .alert-link

 <div class="alert alert-success" role="alert">
        <a href="#" class="alert-link">成功</a>
      </div>
      <div class="alert alert-info" role="alert">
        <a href="#" class="alert-link">你有一条新消息</a>
      </div>
      <div class="alert alert-warning" role="alert">
        <a href="#" class="alert-link">警告!!!</a>
      </div>
      <div class="alert alert-danger" role="alert">
        <a href="#" class="alert-link">本次操作危险,是否继续?</a>
    </div>
Copier après la connexion

Je ne le démontrerai pas cette fois. Vous ne pouvez pas le voir sur les photos, il vaut mieux le pratiquer vous-même.


Apprentissage recommandé :

Tutoriel vidéo 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