Introduction détaillée aux informations sur l'invite Bootstrap

Dans certaines pages Web, une balise est souvent ajoutée pour indiquer à l'utilisateur des informations supplémentaires. Par exemple, si un nouvel élément de navigation est ajouté à la navigation, une "nouvelle" balise peut être ajoutée pour informer l'utilisateur

.

　[Recommandations vidéo associées : Tutoriel Bootstrap]

　 Dans le framework Bootstrap, cet effet est spécialement extrait dans un composant label et se termine par ".label " style pour réaliser la mise en évidence

La méthode d'utilisation est très simple, vous pouvez utiliser des balises en ligne telles que span

<h3>Example heading <span class="label label-default">New</span></h3>

【Masquer automatiquement】

Lorsqu'il n'y a pas de contenu, masquer automatiquement

.label:empty {display: none;
}

<h3>Example heading <span class="label label-default"></span></h3>

[Paramètres de couleur]

Semblable au bouton de l'élément bouton, le style d'étiquette fournit également une variété de couleurs :

☑ label-default : étiquette par défaut, gris foncé

☑ label-primary : étiquette principale , bleu foncé

　☑ label-success : label succès, vert

☑ label-info : étiquette d'information, bleu clair

☑ label-warning : étiquette d'avertissement, orange

　☑ label-danger : mauvaise étiquette, rouge

Utilisez principalement ces noms de classes pour modifier la couleur de fond et la couleur du texte

<span class="label label-default">Default</span><span class="label label-primary">Primary</span><span class="label label-success">Success</span><span class="label label-info">Info</span><span class="label label-warning">Warning</span><span class="label label-danger">Danger</span>

Badge

Dans un sens, l'effet badge est très similaire à l'effet étiquette introduit précédemment. Il est également utilisé pour créer des messages d'invite. Ce qui apparaît souvent, ce sont les informations envoyées par certains systèmes, comme le système demande combien de messages ne sont pas lus

Dans le framework Bootstrap, cet effet est appelé effet badge, et le style "badge" est utilisé pour obtenir it

Vous pouvez utiliser des balises span pour les faire ressembler à des balises, puis ajouter la classe badge

<a href="#">Inbox <span class="badge">42</span></a>

【Masquer automatiquement】

S'il n'y a pas d'entrées d'informations nouvelles ou non lues, c'est-à-dire qu'elles ne contiennent aucun contenu, le composant badge peut être automatiquement masqué (implémenté via le sélecteur CSS

) :empty

.badge:empty {display: none;
}

<a href="#">Inbox <span class="badge"></span></a>

【Badge de bouton】

Le badge a un style similaire dans le bouton de l'élément bouton et les pilules de navigation de la capsule, mais la couleur est différente

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li></ul><button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span></button>

Écran géant

Il s'agit d'un composant léger et flexible qui peut s'étendre jusqu'au fenêtre entière du navigateur pour afficher le contenu clé sur le site Web

<div class="jumbotron">
  <h1>小火柴的蓝色理想</h1>
  <p>好的代码像粥一样，都是用时间熬出来的</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p></div>

Si vous souhaitez ajouter des coins arrondis au composant écran géant, mettez simplement ceci composant à l'intérieur de l'élément

.container

<div class="container"><div class="jumbotron"><h1>小火柴的蓝色理想</h1><p>好的代码像粥一样，都是用时间熬出来的</p><p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p></div></div>

En-tête

Le composant d'en-tête peut ajouter des éléments appropriés espacez la balise

et travaillez avec elle. Le reste de la page forme une certaine séparation. Il prend en charge l'effet par défaut des éléments h1 intégrés dans les balises h1, et prend également en charge la plupart des autres composants (nécessité d'ajouter des styles supplémentaires) small

.page-header {padding-bottom: 9px;margin: 40px 0 20px;border-bottom: 1px solid #eee;
}

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1></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!