96

Twitter-ブートストラップボタンは非常に美しいです。それらをスクロールして試してみてください

ブートストラップボタンのスクリーンショット

しかし、それらは色に制限があります。

ブートストラップがとても美しく、楽にした美しいホバーオーバー効果を維持しながら、ボタンのベースカラーを変更する方法はありますか？

私は、Twitterがそれらの効果を維持するために使用するcss/javascriptがどのように見えるかを完全に知りません。

4

14 に答える 14

178

最も簡単な方法は、これをオーバーライドに入れることです。想像を絶する色を選んでごめんなさい

ブートストラップ4-アルファSASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

ブートストラップ4AlphaSASSの例

Bootstrap 3LESS

.my-btn {
  //.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
  .button-variant(red; white; blue);
}

Bootstrap3LESSの例

ブートストラップ3SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

ブートストラップ3SASSの例

ブートストラップ2.3LESS

.btn-primary {
  //.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  .buttonBackground(red, white);
}

Bootstrap2.3LESSの例

ブートストラップ2.3SASS

.btn-primary {
  //@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); 
  @include buttonBackground(red, white); 
}

それはあなたのためにホバー/アクティブの世話をします

コメントから、黒を使用するときにボタンを暗くする代わりに明るくしたい場合（または単に反転させたい場合）は、次のようにクラスをもう少し拡張する必要があります。

Bootstrap 3 SASS Ligthen

.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
  }
}

Bootstrap 3SASSLightenの例

于 2013-01-05T17:56:35.887 に答える
33

たとえば、危険ボタンの場合、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]; }
于 2012-05-18T20:15:30.867 に答える
27

ここに良いリソースがあります：http：//charliepark.org/bootstrap_buttons/

色を変更して、実際の効果を確認できます。

于 2013-06-20T13:41:23.933 に答える
24

基本的に、Twitter Bootstrapのボタンは、CSSでは「.btn{}」によって制御されます。あなたがしなければならないことは、CSSファイルに行き、それが「btn」と言っているところを見つけて、色の設定を変更することです。ただし、ボタンを強調表示したときにボタンがどの色に変わるかなども変更する必要があるため、これを行うほど簡単ではありません。そのためには、CSSで「.btn：hover{}」などの他のタグを探す必要があります。 "など

それを変更するには、CSSを変更する必要があります。そのファイルへのクイックリンクは次のとおりです。

https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

于 2012-05-18T20:15:15.030 に答える
21

bootstrap.css（バージョン3）のロード後に独自のカスタムCSSファイルを既にロードしている場合は、これら2つのCSSスタイルをcustom.cssに追加すると、デフォルトのボタンスタイルのブートストラップのデフォルトが上書きされます。

.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;
}
于 2013-10-28T20:28:36.033 に答える
12

CSS値を1つずつ変更する代わりに、LESSを使用することをお勧めします。BootstrapのGithubのバージョンは少ないです：https ：//github.com/twbs/bootstrap

LESSを使用すると、変数を定義して色を変更できるため、非常に便利です。色を一度定義すると、LESSは値をグローバルに変更するCSSファイルをコンパイルします。時間と労力を節約します。

于 2012-08-21T20:47:10.013 に答える
11

ブートストラップボタンのスタイルを完全にオーバーライドするには、プロパティのリストをオーバーライドする必要があります。以下の例を参照してください。

    .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;
    }

リストされているすべてのスタイルを使用しない場合は、ボタンでアクションを実行するときにデフォルトのスタイルが表示されます。たとえば、ボタンをクリックしてボタンからマウスポインタを削除すると、デフォルトの色が表示されます。または、ボタンを押したままにすると、デフォルトの色が表示されます。そこで、オーバーライドするすべての疑似スタイルをリストしました。

于 2015-10-26T07:47:34.187 に答える
9

Sassオーバーライドのブートストラップの場合は

.btn-default {

    @include button-variant($color, $background, $border);

}

ソースはここで確認できます：https ：//github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

于 2014-02-04T06:53:20.817 に答える
5

または、http：//twitterbootstrapbuttons.w3masters.nl/を試してください。HTMLカラー入力に基づいてボタンのCSSを作成します。ブートストラップcssの後にcssを追加します。ボタンには、ライト、ダーク、スピンの3つのスタイルがあります。

于 2013-03-26T12:10:51.997 に答える
5

これは非常に簡単で効率的な方法です。ボタンに適用する色を使用してCSSにクラスを追加します。

.my-btn{
    background: #0099cc;
    color: #ffffff;
}
.my-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}

ブートストラップボタンまたはリンクにスタイルを追加します。

<a href="xxx" class="btn btn-info my-btn">aaa</a>
于 2015-04-07T10:44:15.213 に答える
3

Twitter Bootstrap bootstrap 3.0.0では、Twitterボタンはフラットです。http://getbootstrap.com/customizeからカスタマイズできます。ボタンの色、ボーダーラジオなど。

また、HTMLコードとその他の機能http://twitterbootstrap.org/bootstrap-css-buttonsを見つけることができます 。

Bootstrap 2.3.2ボタンはグラデーションですが、3.0.0（新しいリリース）はフラットで、よりクールに見えます。

また、このリソースからブートストラップの外観とスタイル全体をカスタマイズすることもできます： http ://twitterbootstrap.org/top-5-customizing-bootstrap-resources/

于 2013-09-03T08:17:10.663 に答える
1

私はこれが古いスレッドであることを知っていますが、別の視点を追加するだけです。オーバーライドを使用することは、実際にはコードの臭いが少しあり、大規模なプロジェクトではすぐに手に負えなくなると断言します。今日はボタン、明日はモーダル、翌日はドロップダウンなどをオーバーライドします。

インクルードをコメントアウトしてbuttons.less自分のインクルードを定義するか、自分のプロジェクトにより適した別のButtonsライブラリを見つけることをお勧めします。恥知らずなプラグイン：ButtonsライブラリとTBを簡単に組み合わせることができる例を次に示します。TwitterBootstrapでButtonsを使用する。実際には、パフォーマンスを向上させるためにインクルードを完全に削除するbuttons.lessことをお勧めしますが、これは、物事を少し「一般的」に見せないようにする方法を示しています。私はまだこの演習を自分で行っていませんが、次のような行をコメントアウトすることから始めることができると思います。

https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less#L17

次に、独自のボタンモジュールの1つを使用して`lesscを使用して再コンパイルします。そうすれば、TBのバトルテスト済みコアを取得できますが、主要なオーバーライドに頼ることなく、カスタマイズすることができます。Bootstrapのようなライブラリの一部だけを使用しない理由はまったくありません。もちろん、同じことがTBのSassバージョンにも当てはまります

于 2014-10-15T23:20:46.777 に答える
0

Bootstrap（少なくともバージョン3.1.1の場合）およびLESSの場合、次を使用できます。

.btn-my-custom {
    .button-variant(@color; @background; @border)
}

これはで定義されていbootstrap/less/buttons.lessます。

于 2014-08-19T00:18:34.237 に答える
0

背景色を変更して！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;
}

于 2017-07-25T14:13:46.333 に答える