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>
この種の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セットを示します。
#95a5a6
/#7f8c8d
#3498db
/#2980b9
#2ecc71
/#27ae60
#9b59b6
/#8e44ad
#e67e22
/#d35400
#e74c3c
/#c0392b
#95a5a6
/#7f8c8d
#00A388
/#007D68
#79BD8F
/#659E78
#BEEB9F
/#A5CC8A
#FFFF9D
/#D1D181
#FF6138
/#D6512F
一部のサードパーティのカスタムテーマには色が追加されていますが、「すぐに使用できるパック」を知りません。 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
OPは「すぐに使えるパック」を求めていますが、私は自分で何かを探しているときにこれに出くわしました。 Bootstrap Button Generator は、追加のボタンの色をすばやく作成するための非常にシンプルなオンラインツールを提供します。
これも、カスタムボタンのHTMLとCSSを作成します。 http://www.tutorialrepublic.com/Twitter-bootstrap-button-generator.php
以下の私の例のように、zessxの答えは正しいものの、一部のユーザーはソリューションが真新しいクラスの作成に有効であることを理解しないかもしれません。
.label-alarm {
background-color: #e0e000;
}
.label-alarm[href]:hover,
.label-alarm[href]:focus {
background-color: #e0e12;
}
このコードを追加することにより、すべての標準Bootstrap=クラス(label-default、label-primaryなど)に加えて、 "label-alarm"という新しいラベルクラスが作成されます。
私はこれを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/