Bootstrap doit apprendre les étiquettes et les badges tous les jours_compétences javascript

1. Balises

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 l'informer. Il s'agit d'un élément de navigation nouvellement ajouté. Comme indiqué ci-dessous :

Ensuite, cet effet est spécialement extrait dans un composant label dans le framework Bootstrap, et mis en évidence dans le style ".label".

Comme il s'agit d'un composant indépendant, il existe bien sûr différents fichiers dans différentes versions :

☑ Version LESS : fichier source correspondant label.less

☑ Version Sass : Source correspondante file_label.scss

☑ Version compilée : Ligne 4261~Ligne 4327 du fichier bootstrap.css

1), principe d'utilisation :

La méthode d'utilisation est très simple, vous pouvez utiliser une balise en ligne comme span :

Copier le code Le code est le suivant :

684271ed9684bde649abda8831d4d355Exemple de titre 9349105fb841df73ac878df518ac5ec5Nouveau54bdf357c58b8a65c66d7c19c8e4d11439528cedfa926ea0c01e69ef5b2ea9b0

Effet opérationnel :

2), principe de mise en œuvre :

/Ligne 4261~Ligne 4272 du fichier bootstrap.css/

.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}

Si vous utilisez l'élément de balise a pour le rendre, afin de le rendre plus beau, supprimez le soulignement et autres à l'état de survol :

/Ligne 4273~Ligne 4278 du fichier bootstrap.css/

.label[href]:hover,
.label[href]:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}

Parfois, lorsqu'il n'y a pas de contenu dans la balise, vous pouvez utiliser le pseudo-élément :empty de CSS3 pour le masquer :

.label:empty {
display: none;
}

3), réglage du style de couleur :

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

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

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

☑ label-succès : Label Succès, vert

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

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

☑ étiquette-danger : mauvaise étiquette, rouge

Utilisez principalement ces noms de classes pour modifier la couleur d'arrière-plan et la couleur du texte :

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">错误标签</span>

Effet opérationnel :

4. Principe de mise en œuvre des couleurs :

/Ligne 4286~Ligne 4237 du fichier bootstrap.css/

.label-default {
background-color: #999;
}
.label-default[href]:hover,
.label-default[href]:focus {
background-color: #808080;
}
.label-primary {
background-color: #428bca;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
background-color: #3071a9;
}
.label-success {
background-color: #5cb85c;
}
.label-success[href]:hover,
.label-success[href]:focus {
background-color: #449d44;
}
.label-info {
background-color: #5bc0de;
}
.label-info[href]:hover,
.label-info[href]:focus {
background-color: #31b0d5;
}
.label-warning {
background-color: #f0ad4e;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
background-color: #ec971f;
}
.label-danger {
background-color: #d9534f;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
background-color: #c9302c;
}

2. Insigne

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 messages envoyés par certains systèmes. Par exemple, après vous être connecté à votre Twitter, si vous n'avez pas lu les messages, le système vous indiquera combien de messages sont non lus, comme le montre la figure ci-dessous :

Dans le framework Bootstrap, cet effet est appelé effet de badge et est implémenté en utilisant le style "badge".

Version du fichier correspondant :

☑ Version MOINS : Fichier source badges.less

☑ Version Sass : Source file_badges.scss

☑ Version compilée : Ligne 4328~Ligne 4366 du fichier bootstrap.css

Comment utiliser :

En fait, il n'y a pas grand chose à dire sur la façon de l'utiliser. Vous pouvez utiliser les balises span pour les transformer en balises, puis y ajouter la classe badge :

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

运行效果:

1）、实现原理：

主要将其设置为椭圆形，并且加了一个背景色：

/bootstrap.css文件第4328行～第4341行/

.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: #999;
border-radius: 10px;
}

同样也使用`:empty`伪元素，当没有内容的时候隐藏：

.badge:empty {
display: none;
}

正如开头所说，可以将徽章与按钮或者导航之类配合使用：

<div class="navbar navbar-default" role="navigation">
　<div class="navbar-header">
　    <a href="##" class="navbar-brand">慕课网</a>
　</div>
 <ul class="nav navbar-nav">
     <li class="active"><a href="##">网站首页</a></li>
     <li><a href="##">系列教程</a></li>
     <li><a href="##">名师介绍</a></li>
     <li><a href="##">成功案例<span class="badge">23</span></a></li>
     <li><a href="##">关于我们</a></li>
 </ul>
</div>

运行效果

2）、按钮和胶囊形导航设置徽章：

另外，徽章在按钮元素button和胶囊形导航nav-pills也可以有类似的样式，只不过是颜色不同而以：

<ul class="nav nav-pills">
 <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
 <li><a href="#">Profile</a></li>
 <li><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
<br />

 运行效果:

样式代码请查看bootstrap.css文件第4345行～第4366行。

注意：不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。此处对不做过多阐述。

通过上文的介绍大家对标签和徽章是不是有了大概的了解，希望大家把标签和徽章应用到自己的网站中，真正的做到学以致用。