Bootstrap で毎日学ぶべきラベルとバッジ_JavaScript スキル

1. タグ

一部の Web ページでは、ユーザーに追加情報を伝えるためにタグが追加されることがよくあります。たとえば、新しいナビゲーション項目がナビゲーションに追加された場合、ユーザーに伝えるために「新しい」タグが追加されることがあります。新しく追加されたナビゲーション項目です。以下に示すように:

次に、この効果はブートストラップ フレームワークのラベル コンポーネントに特別に抽出され、「.label」スタイルで強調表示されます。

これは独立したコンポーネントであるため、当然のことながら、バージョンごとに異なるファイルが存在します。

☑ LESS バージョン: 対応するソース ファイル label.less

☑ Sass バージョン: 対応するソース file_label.scss

☑ コンパイル済みバージョン: bootstrap.css ファイルの 4261 行目～4327 行目

1)、使用原則:

使用方法は非常に簡単で、span のようなインラインタグを使用できます:

コードをコピー コードは次のとおりです。

684271ed9684bde649abda8831d4d355見出しの例 d0d8ad821bf2e5efbd13a9edb4a1e98a新規54bdf357c58b8a65c66d7c19c8e4d11439528cedfa926ea0c01e69ef5b2ea9b0

動作効果:

2)、実装原則:

/bootstrap.css ファイルの 4261 行目～4272 行目/

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

aタグ要素を使って作成する場合、より美しくするためにホバー状態の下線等を削除してください:

/bootstrap.css ファイルの 4273 行目～4278 行目/

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

タグにコンテンツがない場合は、CSS3 の :empty 擬似要素を使用してタグを非表示にすることができます。

.label:empty {
display: none;
}

3)、カラースタイル設定:

ボタン要素のボタンと同様に、ラベル スタイルにもさまざまな色が用意されています。

☑ label-default: デフォルトのラベル、ダークグレー

☑ label-primary：プライマリ ラベル、ダークブルー

☑ label-success: 成功ラベル、緑色

☑ label-info: 情報ラベル、水色

☑ ラベル警告: 警告ラベル、オレンジ

☑ ラベル危険: 間違ったラベル、赤

主に背景色とテキストの色を変更するために次のクラス名を使用します:

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

動作効果:

4. 色の実装原則:

/bootstrap.css ファイルの 4286 行目～4237 行目/

.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. バッジ

ある意味、バッジ効果は前に紹介したラベル効果とよく似ています。いくつかのプロンプトメッセージを作成するためにも使用されます。よく表示されるのは、一部のシステムによって送信されたメッセージです。たとえば、Twitter にログインした後、メッセージを読んでいない場合、システムは次の図に示すように未読のメッセージの数を通知します。

Bootstrap フレームワークでは、この効果はバッジ効果と呼ばれ、「バッジ」スタイルを使用して実装されます。

対応するファイルバージョン:

☑ LESS バージョン: ソース ファイル Badges.less

☑ Sass バージョン: ソース file_badges.scss

☑ コンパイル済みバージョン: bootstrap.css ファイルの 4328 行目～4366 行目

使用方法:

実際、その使用方法についてはあまり説明する必要はありません。span タグを使用してタグのようにし、それにバッジ クラスを追加します。

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

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