web-dev-qa-db-ja.com

追加のTwitter Bootstrap label / button / alert / badgeの色

bootstrapにデフォルトの色以外の色を追加するためのすぐに使用できるパックはありますか？

デフォルトの色は（ラベルの例）です。

<span class="label">Default</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
<span class="label label-important">Important</span>
<span class="label label-info">Info</span>
<span class="label label-inverse">Inverse</span>
csstwitter-bootstraptwitter-bootstrap-3
15
4m1nh4j1

この種の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セットを示します。

enter image description here

  • デフォルト： #95a5a6/#7f8c8d
  • プライマリ：#3498db/#2980b9
  • 成功： #2ecc71/#27ae60
  • 情報：#9b59b6/#8e44ad
  • 警告：#e67e22/#d35400
  • 危険： #e74c3c/#c0392b

enter image description here

  • デフォルト： #95a5a6/#7f8c8d
  • プライマリ：#00A388/#007D68
  • 成功： #79BD8F/#659E78
  • 情報：#BEEB9F/#A5CC8A
  • 警告：#FFFF9D/#D1D181
  • 危険： #FF6138/#D6512F

Bootplyの例

16
zessx

一部のサードパーティのカスタムテーマには色が追加されていますが、「すぐに使用できるパック」を知りません。 CSSを拡張するだけで簡単に追加できます。たとえば、ここには「ソーシャル」ボタンがあります。

[〜＃〜] css [〜＃〜]

.btn-facebook {
    background-color:#3b5998;
    color:#fff;
}
.btn-google {
    background-color:#dd4b39;
    color:#fff;
}
.btn-Twitter {
    background-color:#2ba9e1;
    color:#fff;
}
.btn-pinterest {
    background-color:#cb2027;
    color:#fff;
}
.btn-tumblr {
    background-color:#2c4762;
    color:#fff;
}

使用法

<button class="btn btn-facebook btn-lg">Facebook</button>

[〜＃〜] edit [〜＃〜]

CSSワイルドカードセレクターを使用して、このようなスタイルを作成することもできます。

Appleの色のデモ： http://bootply.com/112999

10
Zim

OPは「すぐに使えるパック」を求めていますが、私は自分で何かを探しているときにこれに出くわしました。 Bootstrap Button Generator は、追加のボタンの色をすばやく作成するための非常にシンプルなオンラインツールを提供します。

これも、カスタムボタンのHTMLとCSSを作成します。 http://www.tutorialrepublic.com/Twitter-bootstrap-button-generator.php

8
Homer

以下の私の例のように、zessxの答えは正しいものの、一部のユーザーはソリューションが真新しいクラスの作成に有効であることを理解しないかもしれません。

.label-alarm {
  background-color: #e0e000;
}
.label-alarm[href]:hover,
.label-alarm[href]:focus {
  background-color: #e0e12;
}

このコードを追加することにより、すべての標準Bootstrap=クラス（label-default、label-primaryなど）に加えて、 "label-alarm"という新しいラベルクラスが作成されます。

4
Bizarro

私はこれをbootstrap以下のボタンのmixin、および以下のようなもので行います：

@import "path/to/bootstrap/mixins/buttons.less";
// Danger and error appear as red
.btn-sample {
  .button-variant(@btn-sample-color; @btn-sample-bg; @btn-sample-border);
}

これにより、特にラベル、ボタン、パネルなどをすべて新しい色で作成する場合に、カスタムcssを書く際の時間と潜在的なエラーを大幅に節約できます。

何らかの理由で、Bootstrap=ウェブサイトでこのオプションに関する情報を見つけることができませんが、これらのオプションのいくつかについてのサードパーティのガイドがあります： https：// www。 sitepoint.com/less-beyond-basics-bootstrap-mixins-library/

0
Martin Randall