Maison > Article > interface Web > 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"
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
<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; }
<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
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>rrreePlus 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!