Twitter-Bootstrapボタンは驚くほど美しいです。 スクロールして試してみてください
しかし、色は限られています。
bootstrapが非常に美しく簡単にした美しいホバーオーバー効果を維持しながら、ボタンのベース色を変更する方法はありますか?
Twitterがこれらの効果を維持するために使用するcss/javascriptがどのように見えるか、私はまったく知りません。
基本的に、TwitterのボタンBootstrapはCSSで「.btn {}」によって制御されます。あなたがしなければならないことは、CSSファイルに行き、「btn」と書かれている場所を見つけて、色の設定を変更することです。ただし、ボタンを強調表示するときにボタンの色を変更する必要があるため、それを行うだけでは簡単ではありません。それを行うには、CSSで「.btn:hover {} 」など.
変更するには、CSSを変更する必要があります。そのファイルへのクイックリンクを次に示します。
https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
最も簡単な方法は、これをオーバーライドに追加することです。想像を絶する色の選択でごめんなさい
.my-btn {
//@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
@include button-variant(red, white, blue);
}
.my-btn {
//.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
.button-variant(red; white; blue);
}
.my-btn {
//@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
@include button-variant(red, white, blue);
}
.btn-primary {
//.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
.buttonBackground(red, white);
}
.btn-primary {
//@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
@include buttonBackground(red, white);
}
ホバー/アクティブの面倒をみてくれます
コメントから、黒を使用しているときにボタンを暗くするのではなく明るくしたい場合(または単に逆にしたい場合)、クラスをさらに次のように拡張する必要があります。
.my-btn {
// @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
$color: #fff;
$background: #000;
$border: #333;
@include button-variant($color, $background, $border);
// override the default darkening with lightening
&:hover,
&:focus,
&.focus,
&:active,
&.active,
.open > &.dropdown-toggle {
color: $color;
background-color: lighten($background, 20%); //10% default
border-color: lighten($border, 22%); // 12% default
}
}
たとえば、危険ボタンの場合、CSSの色を上書きできます。
.btn-danger { border-color: #[insert color here]; background-color: #[insert color here];
.btn-danger:hover { border-color: #[insert color here]; background-color: #[insert color here]; }
ここに良いリソースがあります: http://charliepark.org/bootstrap_buttons/
色を変更して、実際の効果を確認できます。
Bootstrap.css(バージョン3)のロード後に独自のカスタムCSSファイルをすでにロードしている場合、これら2つのCSSスタイルをcustom.cssに追加できます。これらのスタイルは、デフォルトボタンスタイルのbootstrapデフォルトをオーバーライドします。
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
background-color: #A6A8C1;
border-color: #31347B;
}
.btn
{
background-color: #9F418F;
border-color: #9F418F;
}
CSSの値を1つずつ変更する代わりに、 LESS。 BootstrapにはGithubのLESSバージョンがあります: https://github.com/twbs/bootstrap
LESSを使用すると、変数を定義して色を変更できるため、非常に便利です。色を一度定義すると、LESSは値をグローバルに変更するCSSファイルをコンパイルします。時間と労力を節約できます。
bootstrapボタンスタイルを完全にオーバーライドするには、プロパティのリストをオーバーライドする必要があります。以下の例を参照してください。
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus,
.btn-primary:active, .btn-primary.active, .btn-primary:visited,
.btn-primary:active:hover, .btn-primary.active:hover{
background-color: #F19425;
color:#fff;
border: none;
outline: none;
}
リストされたすべてのスタイルを使用しない場合、ボタンでアクションを実行するときにデフォルトのスタイルが表示されます。たとえば、ボタンをクリックしてボタンからマウスポインターを削除すると、デフォルトの色が表示されます。または、ボタンを押したままにすると、デフォルトの色が表示されます。そのため、オーバーライドするすべての疑似スタイルをリストしました。
SassオーバーライドのBootstrapの場合は、
.btn-default {
@include button-variant($color, $background, $border);
}
ここでソースを見ることができます: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6
または http://twitterbootstrapbuttons.w3masters.nl/ を試してください。 HTMLカラー入力に基づいてボタンのCSSを作成します。 bootstrap cssの後にcssを追加します。 3つのスタイルのボタン(ライト、ダーク、スピン)を提供します。
これは非常に簡単で効率的な方法です。ボタンに適用したい色をクラスにCSSに追加します。
.my-btn{
background: #0099cc;
color: #ffffff;
}
.my-btn:hover {
border-color: #C0C0C0;
background-color: #C0C0C0;
}
bootstrapボタンまたはリンクにスタイルを追加します。
<a href="xxx" class="btn btn-info my-btn">aaa</a>
Twitter Bootstrap bootstrap 3.0.0では、Twitterボタンはフラットです。 http://getbootstrap.com/customize からカスタマイズできます。ボタンの色、境界線の半径など.
また、HTMLコードおよびその他の機能を見つけることができます http://twitterbootstrap.org/bootstrap-css-buttons 。
ブートストラップ2.3.2ボタンはグラデーションですが、3.0.0(新しいリリース)は平らで、よりクールに見えます。
また、このリソースからbootstrap全体の外観とスタイルをカスタマイズすることもできます。 http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/
私はこれが古いスレッドであることを知っていますが、別の視点を追加するだけです。オーバーライドを使用することは、実際には少しコードの匂いであり、大きなプロジェクトではすぐに手に負えなくなると断言します。今日は、ボタン、明日モーダル、翌日ドロップダウンなどをオーバーライドしています。
buttons.less
のインクルードをコメントアウトして、自分で定義するか、自分のプロジェクトにより適した別のButtonライブラリを見つけることをお勧めします。恥知らずのプラグイン:ButtonsライブラリとTBを簡単に混在させる方法の例を次に示します。 Twitter BootstrapでButtonsを使用する 。実際には、パフォーマンスを向上させるためにbuttons.less
インクルードを完全に削除することもできますが、これは物事を少し「一般的」に見せることができる方法を示しています。私はまだこの演習を行っていませんが、次のような行をコメントアウトすることから始めることができると思います。
https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less#L17
そして、独自のボタンモジュールの1つを使用して `lesscを使用して再コンパイルします。こうすることで、TBのバトルテスト済みコアを取得できますが、メジャーオーバーライドに頼らずに物事をカスタマイズできます。 Bootstrapのようなライブラリの一部のみを使用しない理由はまったくありません。もちろん、TBのSassバージョンにも同じことが当てはまります。
背景色を変更して、!importantを使用できます。
.btn-primary {
background-color: #003c79 !important;
border-color: #15548b !important;
color: #fff;
}
.btn-primary:hover {
background-color: #4289c6 !important;
border-color: #3877ae !important;
color: #fff;
}
.btn-primary.focus, .btn-primary:focus {
background-color: #4289c6 !important;
border-color: #3877ae !important;
color: #fff;
}
Bootstrap(少なくともバージョン3.1.1の場合)およびLESSの場合、これを使用できます。
.btn-my-custom {
.button-variant(@color; @background; @border)
}
これはbootstrap/less/buttons.less
で定義されています。