Introduction détaillée à la boîte d'avertissement Bootstrap

Alerte Les messages sont principalement utilisés pour afficher des informations telles que des avertissements ou des messages de confirmation aux utilisateurs finaux. À l'aide du plugin Alert, vous pouvez ajouter une fonctionnalité de licenciement à tous les messages d'alerte.

Utilisation

Vous pouvez activer la fonction de licenciement de la boîte d'avertissement des deux manières suivantes :

Grâce à l'attribut data : Ajoutez la fonction de licenciement via l'API Data (Data API) Pour annuler la fonction, ajoutez simplement data-dismiss="alert" au bouton de fermeture, et la fonction de fermeture sera automatiquement ajoutée à la boîte d'avertissement.

Utilisation par défaut

Le composant de boîte d'alerte fournit des messages de retour pour les actions courantes de l'utilisateur en fournissant des messages prédéfinis flexibles

Il combine n'importe quel texte et un bouton de fermeture facultatif. Les combiner ensemble peut former une boîte d'avertissement. La classe .alert doit être définie. De plus, 4 classes avec des significations particulières (par exemple, .alert-success) sont fournies, représentant différents messages d'avertissement

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}.alert h4 {
  margin-top: 0;
  color: inherit;
}.alert .alert-link {
  font-weight: bold;
}.alert > p,
.alert > ul {
  margin-bottom: 0;
}.alert > p + p {
  margin-top: 5px;
}

<.> La boîte d'avertissement n'a pas de classe par défaut, seulement une classe de base et une classe modifiée. La boîte d'avertissement grise par défaut ne veut pas dire grand-chose. Vous utilisez donc une classe d’avertissement qui a du sens. Actuellement, le succès, le message, l'avertissement et le danger sont fournis

1. Boîte d'avertissement de succès : informez l'utilisateur que l'opération est réussie et ajoutez le style "alerte-succès" basé sur le style "alerte", qui présente spécifiquement l'arrière-plan, la bordure et le texte est tout vert ;

2. Boîte d'alerte d'information : fournit des informations rapides à l'utilisateur et ajoute le style "alerte-info" au style "alerte". l'arrière-plan, la bordure et le texte sont tous bleu clair ;

3. Boîte d'avertissement : invite l'utilisateur à agir avec précaution (en fournissant des informations d'avertissement) et ajoute le style « alerte-avertissement » basé sur le style « alerte » , qui présente spécifiquement l'arrière-plan, la bordure et le texte. Il est jaune clair

4. Boîte d'avertissement d'erreur : invite l'utilisateur à signaler les erreurs de fonctionnement. Basé sur le style "alerte", le "danger d'alerte". Le style est ajouté. Plus précisément, l'arrière-plan, la bordure et le texte sont tous rouge clair

<div class="alert" role="alert">基类</div><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>

Peut être fermé

Lorsque vous naviguez habituellement sur le Web, vous trouverez que certaines boîtes d'avertissement ont un bouton de fermeture. L'utilisateur peut fermer automatiquement l'écran dès qu'il clique sur le bouton de fermeture de la boîte d'alerte (c'est-à-dire masquer la boîte d'alerte et ne pas l'afficher). La boîte d'alerte du framework Bootstrap a également une telle fonction

Il vous suffit d'ajouter un bouton de fermeture à la boîte d'alerte par défaut. Procédez ensuite à trois étapes :

1. Vous devez ajouter le style "alerte-rejetable" sur la base de la boîte d'avertissement de base "alerte".

2. Ajoutez class="close" à la balise bouton pour implémenter le style du bouton de fermeture de la boîte d'alerte.

3. Assurez-vous que l'attribut personnalisé est défini sur l'élément du bouton de fermeture : data-dismiss="alert" (car la boîte d'alerte fermable nécessite Javascript pour détecter cet attribut afin de contrôler la fermeture de la boîte d'alerte)

.alert-dismissable {
  padding-right: 35px;
}.alert-dismissable .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}

Lien

Parfois, vous souhaiterez peut-être ajouter une adresse de lien dans la zone d'alerte pour indiquer aux utilisateurs d'accéder à un certain endroit ou à une nouvelle page. Pour le moment, je souhaite que les utilisateurs puissent voir clairement qu'il s'agit de l'adresse du lien. Dans le framework Bootstrap, le style de lien dans la zone d'alerte est mis en surbrillance. Les liens dans les différents types de boîtes d'alerte sont en gras et les couleurs sont approfondies en conséquence

Le framework Bootstrap ajoute un nom de classe appelé « lien d'alerte » aux liens dans la boîte d'alerte. Le style « lien d'alerte » permet la mise en évidence. pour les liens

.alert .alert-link {
  font-weight: bold;
}.alert-success .alert-link {
  color: #2b542c;
}.alert-info .alert-link {
  color: #245269;
}.alert-warning .alert-link {
  color: #66512c;
}.alert-danger .alert-link {
  color: #843534;
}

<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>

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!