Bootstrap mesti belajar label dan lencana setiap hari_javascript kemahiran

1. Teg

Dalam sesetengah halaman web, teg sering ditambahkan untuk memberitahu pengguna beberapa maklumat tambahan Sebagai contoh, jika item navigasi baharu ditambahkan pada navigasi, teg "baharu" boleh ditambah untuk memberitahu pengguna. Ini ialah item navigasi yang baru ditambah. Seperti yang ditunjukkan di bawah:

Kemudian kesan ini diekstrak khas ke dalam komponen label dalam rangka kerja Bootstrap dan diserlahkan dalam gaya ".label".

Memandangkan ia adalah komponen bebas, sudah tentu terdapat fail yang berbeza dalam versi yang berbeza:

☑ Versi KURANG: label fail sumber yang sepadan.less

☑ Versi Sass: Fail_label.scss sumber yang sepadan

☑ Versi tersusun: Baris 4261~Baris 4327 fail bootstrap.css

1), prinsip penggunaan:

Kaedah penggunaannya sangat mudah, anda boleh menggunakan tag sebaris seperti span:

Salin kod Kod adalah seperti berikut:

684271ed9684bde649abda8831d4d355Contoh tajuk a4621e44493deb5eb9f130a077ff2cebBaharu54bdf357c58b8a65c66d7c19c8e4d11439528cedfa926ea0c01e69ef5b2ea9b0

Kesan operasi:

2), prinsip pelaksanaan:

/Baris 4261~Baris 4272 daripada fail 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;
}

Jika anda menggunakan elemen tag untuk membuatnya, untuk menjadikannya lebih cantik, alih keluar garis bawah dan seumpamanya dalam keadaan tuding:

/Baris 4273~Baris 4278 fail bootstrap.css/

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

Kadangkala apabila tiada kandungan dalam teg, anda boleh menggunakan CSS3 :empty pseudo-element untuk menyembunyikannya:

.label:empty {
display: none;
}

3), tetapan gaya warna:

Sama seperti butang elemen butang, gaya label juga menyediakan pelbagai warna:

☑ label-deafult: Label lalai, kelabu gelap

☑ label-utama：label utama, biru tua

☑ label-kejayaan: Label kejayaan, hijau

☑ label-info: Label maklumat, biru muda

☑ label-amaran: label amaran, oren

☑ label-bahaya: label salah, merah

Terutamanya gunakan nama kelas ini untuk mengubah suai warna latar belakang dan warna teks:

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

Kesan operasi:

4. Prinsip pelaksanaan warna:

/Baris 4286~Baris 4237 fail 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. Lencana

Dari satu segi, kesan lencana sangat serupa dengan kesan label yang diperkenalkan sebelum ini. Ia juga digunakan untuk membuat beberapa mesej segera. Yang sering muncul ialah mesej yang dihantar oleh beberapa sistem Contohnya, selepas anda log masuk ke Twitter anda, jika anda belum membaca mesej tersebut, sistem akan memberitahu anda berapa banyak mesej yang belum dibaca, seperti yang ditunjukkan dalam rajah di bawah:

Dalam rangka kerja Bootstrap, kesan ini dipanggil kesan lencana dan dilaksanakan menggunakan gaya "lencana".

Versi fail yang sepadan:

☑ Versi KURANG: Lencana fail sumber.kurang

☑ Versi Sass: Sumber file_badges.scss

☑ Versi tersusun: Baris 4328~Baris 4366 fail bootstrap.css

Cara menggunakan:

Malah, tidak banyak yang boleh diperkatakan tentang cara menggunakannya Anda boleh menggunakan teg span untuk menjadikannya seperti teg, dan kemudian menambah kelas lencana padanya:

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

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