Bootstrap で毎日学ぶべきラベルとバッジ_JavaScript スキル-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 15:29:26

オリジナル

1324 人が閲覧しました

1. タグ

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

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

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

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

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

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

1)、使用原則:

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

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

見出しの例新規

動作効果:

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

ログイン後にコピー

运行效果: