Explication détaillée des étiquettes, badges, écrans géants et en-têtes dans Bootstrap

Dans Bootstrap, il existe certains composants pour des informations rapides, tels que des étiquettes, des badges, des écrans géants et des en-têtes. Cet article vous présentera les informations d'invite dans Bootstrap. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandations associées : "tutoriel bootstrap"

balise

Dans certaines pages Web, une balise est souvent Les balises ajoutées sont utilisées 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

Cet effet est délibérément utilisé dans. le framework Bootstrap Extrayez-le dans un composant label et utilisez le style ".label" 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>New</span>
</h3>

<.>

【Masquer automatiquement】

Lorsqu'il n'y a pas de contenu, masquez automatiquement le

.label:empty {
    display: none;
}

rrree

【Paramètres de couleur】

et bouton Le bouton de l'élément est similaire et 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é

☑ étiquette-succès : étiquette succès, vert

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

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

☑ label -danger : étiquette d'erreur, rouge

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

<h3>Example heading <span></span>
</h3>

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 transformer en balises, puis ajouter la classe

badge

<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>

【Masquer automatiquement】

S'il n'y a pas d'éléments d'information de lecture nouveaux ou inutilisés, c'est-à-dire ne contiennent aucun contenu, et le composant badge peut être automatiquement masqué (implémenté via le sélecteur CSS

) :empty

<a>Inbox <span>42</span></a>

rrree [Badge de bouton]

Le badge est dans l'élément bouton. Les boutons et les pilules de navigation en forme de capsule ont également des styles similaires, mais les couleurs sont différentes

.badge:empty {
    display: none;
}

Écran géant

Il s'agit d'un composant léger et flexible qui peut s'étendre à toute la fenêtre d'affichage du navigateur pour afficher le contenu clé du site Web

<a>Inbox <span></span></a>

Si vous ajoutez des coins arrondis au composant écran géant, ajoutez ceci. Le composant peut être placé à l'intérieur de l'élément

.container

  
• Home 42
  
• Profile
  
• Messages 3

  Messages 4

En-tête

Le composant d'en-tête peut être la balise

Ajoutez un espace et une séparation appropriés du reste de la page. 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

<div>
  <h1>小火柴的蓝色理想</h1>
  <p>好的代码像粥一样，都是用时间熬出来的</p>
  <p><a>Learn more</a></p>
</div>

rrree

Plus de programmation pour connaissances connexes, veuillez visiter :

Vidéo de programmation ! !

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!