web-dev-qa-db-ja.com

TwitterのスタイリングBootstrap 3.xボタン

TwitterのBootstrap ボタンの色は制限されています。デフォルトでは 5 7色（デフォルトのプライマリ、エラー、警告、情報、成功、リンク）参照：

enter image description here

Twitter's Bootstrap Buttons

すべてのボタンは3つの状態になりました（デフォルト、アクティブ、無効）

色を追加したり、カスタムボタンを作成する方法は？この質問は、TwitterのBootstrap 2.xについては既に回答済みです。 Twitterのスタイリングbootstrapボタン 。 Bootstrap 3は後方互換性がありません。 lessおよびcssファイルには多くの変更があります。 IE7のサポートは廃止されます。 TB3はモバイル第一です。マークアップコードも変更されます。

css3twitter-bootstraplesstwitter-bootstrap-3
37
Bass Jobsen

少ないファイルに色を追加して再コンパイルします。 Twitter Bootstrap Customization Best Practices 。updateも参照してください。

V3.0.3以降で@ ow3nが言及したように：

.btn-custom {
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}

上記の注@btn-default-colorはフォントの色を設定します、@btn-default-bg背景色、@ btn-default-borderは境界線の色です。アクティブ、ホバー、無効などの状態の色は、これらのパラメーターに基づいて計算されます。

例えば：

.btn-custom {
  .button-variant(blue; red; green);
}

結果として：

enter image description here

CSSを直接​​使用する場合は、次のコードの色を置き換えます。

.btn-custom {
  color: #0000ff;
  background-color: #ff0000;
  border-color: #008000;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
  color: #0000ff;
  background-color: #d60000;
  border-color: #004300;
}
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
  background-image: none;
}
.btn-custom.disabled,
.btn-custom[disabled],
fieldset[disabled] .btn-custom,
.btn-custom.disabled:hover,
.btn-custom[disabled]:hover,
fieldset[disabled] .btn-custom:hover,
.btn-custom.disabled:focus,
.btn-custom[disabled]:focus,
fieldset[disabled] .btn-custom:focus,
.btn-custom.disabled:active,
.btn-custom[disabled]:active,
fieldset[disabled] .btn-custom:active,
.btn-custom.disabled.active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom.active {
  background-color: #ff0000;
  border-color: #008000;
}
.btn-custom .badge {
  color: #ff0000;
  background-color: #0000ff;
}

更新の終了

カスタムボタンを生成するには：

.btn-custom {
    .btn-pseudo-states(@yourColor, @yourColorDarker);
 }

上記により、次のcssが生成されます。

.btn-custom {
  background-color: #1dcc00;
  border-color: #1dcc00;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active {
  background-color: #19b300;
  border-color: #169900;
}
.btn-custom.disabled:hover,
.btn-custom.disabled:focus,
.btn-custom.disabled:active,
.btn-custom.disabled.active,
.btn-custom[disabled]:hover,
.btn-custom[disabled]:focus,
.btn-custom[disabled]:active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom:hover,
fieldset[disabled] .btn-custom:focus,
fieldset[disabled] .btn-custom:active,
fieldset[disabled] .btn-custom.active {
  background-color: #1dcc00;
  border-color: #1dcc00;
}

上記では＃1dcc00がカスタムカラーになり、＃19b300が暗い色になります。少ないソリューションの代わりに、このCSSをHTMLファイルに直接追加することもできます（bootstrap cssの後に）。

または、CSSコードを TwitterのBootstrap 3 Button Generator から直接取得します

49
Bass Jobsen

未処理のcssでもこれを行うのは非常に簡単です

CSS

.btn-purple {
    background: #9b59b6;
    border-color: #9b59b6;
}

.btn-purple:hover {
    background: #8e44ad;
    border-color: #8e44ad;
}

.btn-teal {
    background: #1abc9c;
    border-color: #1abc9c;
}

.btn-teal:hover {
    background: #16a085;
    border-color: #16a085;
 }

HTML

<button class="btn btn-purple">purple</button>

<button class="btn btn-teal">teal</button>

フィドル： http://jsfiddle.net/z7hV6/

17
Matt Lambert

Googleでこのソリューションを見つけて、bootstrapボタンをよりよく理解した後、bootstrapボタンに対して異なる色を生成する次のツールを見つけました。

これを別のcssに追加する必要があることを意味しますが、私が必要とするものに最適です。他の人に役立つことを願っています：

http://twitterbootstrap3buttons.w3masters.nl/

3
Onimusha

追加のBootstrapボタンの色をスタイルする素敵で簡単な方法を次に示します。

ブートストラップボタンジェネレーター

以下は、生成するCSSのサンプルです。

.btn-sample { 
  color: #ffffff; 
  background-color: #611BBD; 
  border-color: #130269; 
} 

.btn-sample:hover, 
.btn-sample:focus, 
.btn-sample:active, 
.btn-sample.active, 
.open .dropdown-toggle.btn-sample { 
  color: #ffffff; 
  background-color: #49247A; 
  border-color: #130269; 
} 

.btn-sample:active, 
.btn-sample.active, 
.open .dropdown-toggle.btn-sample { 
  background-image: none; 
} 

.btn-sample.disabled, 
.btn-sample[disabled], 
fieldset[disabled] .btn-sample, 
.btn-sample.disabled:hover, 
.btn-sample[disabled]:hover, 
fieldset[disabled] .btn-sample:hover, 
.btn-sample.disabled:focus, 
.btn-sample[disabled]:focus, 
fieldset[disabled] .btn-sample:focus, 
.btn-sample.disabled:active, 
.btn-sample[disabled]:active, 
fieldset[disabled] .btn-sample:active, 
.btn-sample.disabled.active, 
.btn-sample[disabled].active, 
fieldset[disabled] .btn-sample.active { 
  background-color: #611BBD; 
  border-color: #130269; 
} 

.btn-sample .badge { 
  color: #611BBD; 
  background-color: #ffffff; 
}
2
Homer

私はかなり長い間、bootstrapボタンを様式化するための可能な解決策を探していました。最新のcssスタイル言語（より少ない http://lesscss.org/ ）、およびボタンをカスタマイズするためのかなりの回避策に従いましたが、どれも役に立ちませんでした。 http://www.plugolabs.com/Twitter-bootstrap-button-generator/ など、非常に素晴らしいbootstrapボタンジェネレーターがオンラインで利用できます。しかし、驚いたことに、cssファイル内の1行のコードは、私にとってうまく機能しました。 （注：「background-color」の代わりに、ボタンの色の名前を指定するパラメーターとして「background」を使用しました。htmlコードでは、csnで再定義したクラス名としてbtn-customを使用しましたファイル。）

HTMLコード

<a href="#" target="_blank" class="btn btn-custom pull-right"> 
<i class="fa fa-edit fa-lg"></i>
Create an Event
</a>

CSSコード

.btn-custom {
    background: #colorname; 
}
1
SrishAkaTux

必要な数の「ボタンアクション」（色）を追加できるという利点がある別の代替方法を次に示します。ここに短いデモビデオがあります： TwitterブートストラップでのUnicorn-UIボタンの使用

ライブラリを取得して自分でコンパイルする場合、次のようなSassリストを編集することで、多くの「ボタンアクション」を定義できます。

$ubtn-colors: ('primary' #1B9AF7  #FFF) ('plain' #FFF #1B9AF7) ('inverse' #222 #EEE) ('action' #A5DE37  #FFF) ('highlight' #FEAE1B #FFF)('caution' #FF4351 #FFF) ('royal' #7B72E9 #FFF) !default;

必要な数のカスタムタイプを追加します（もちろん、不要なものも削除します）。

0
Rob