Bootstrap muss jeden Tag Etiketten und Abzeichen erlernen_Javascript-Kenntnisse

1. Tags

Auf einigen Webseiten wird häufig ein Tag hinzugefügt, um dem Benutzer zusätzliche Informationen mitzuteilen. Wenn beispielsweise ein neues Navigationselement zur Navigation hinzugefügt wird, kann ein „neues“ Tag hinzugefügt werden, um den Benutzer darüber zu informieren. Dies ist ein neu hinzugefügtes Navigationselement. Wie unten gezeigt:

Dann wird dieser Effekt speziell in eine Label-Komponente im Bootstrap-Framework extrahiert und im „.label“-Stil hervorgehoben.

Da es sich um eine eigenständige Komponente handelt, gibt es natürlich auch unterschiedliche Dateien in unterschiedlichen Versionen:

☑ LESS-Version: entsprechende Quelldatei label.less

☑ Sass-Version: Entsprechende Quelle file_label.scss

☑ Kompilierte Version: Zeile 4261~Zeile 4327 der Datei „bootstrap.css“

1), Nutzungsprinzip:

Die Verwendungsmethode ist sehr einfach, Sie können ein Inline-Tag wie span:

Betriebseffekt:

2), Umsetzungsprinzip:

/Zeile 4261~Zeile 4272 der Bootstrap.css-Datei/

.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;
}

Wenn Sie das a-Tag-Element verwenden, um es schöner zu machen, entfernen Sie die Unterstreichung und dergleichen im Hover-Zustand:

/Zeile 4273~Zeile 4278 der Bootstrap.css-Datei/

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

Manchmal, wenn das Tag keinen Inhalt enthält, können Sie das CSS3-Pseudoelement :empty verwenden, um es auszublenden:

.label:empty {
display: none;
}

3), Farbstileinstellung:

Ähnlich wie das Schaltflächenelement „Schaltfläche“ bietet auch der Beschriftungsstil eine Vielzahl von Farben:

☑ label-deafult: Standardbezeichnung, dunkelgrau

☑ label-primary：Primäretikett, dunkelblau

☑ label-success: Erfolgslabel, grün

☑ label-info: Informationsetikett, hellblau

☑ label-warning: Warnschild, orange

☑ label-danger: falsches Etikett, rot

Verwenden Sie hauptsächlich diese Klassennamen, um die Hintergrundfarbe und Textfarbe zu ändern:

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

Betriebseffekt:

4. Farbimplementierungsprinzip:

/Zeile 4286~Zeile 4237 der Bootstrap.css-Datei/

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

In gewisser Weise ist der Badge-Effekt dem zuvor eingeführten Label-Effekt sehr ähnlich. Es wird auch verwendet, um einige Aufforderungsnachrichten zu erstellen. Was häufig angezeigt wird, sind Nachrichten, die von einigen Systemen gesendet werden. Wenn Sie sich beispielsweise bei Twitter angemeldet haben und die Nachrichten nicht gelesen haben, teilt Ihnen das System mit, wie viele Nachrichten ungelesen sind, wie in der Abbildung unten dargestellt:

Im Bootstrap-Framework wird dieser Effekt als Badge-Effekt bezeichnet und mithilfe des „Badge“-Stils implementiert.

Entsprechende Dateiversion:

☑ LESS-Version: Quelldatei Badges.less

☑ Sass-Version: Quelldatei_badges.scss

☑ Kompilierte Version: Zeile 4328~Zeile 4366 der Datei „bootstrap.css“

Anwendung:

Tatsächlich gibt es nicht viel zu sagen, wie man es verwendet. Sie können Span-Tags verwenden, um sie wie Tags zu machen, und dann die Badge-Klasse hinzufügen:

<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快速自定义。此处对不做过多阐述。

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