17

カスタムテーマで .navbar-inner をサブクラス化したいのですが、グラデーションを無効にする非ハックな方法がわかりません (両方のグラデーションの色を同じ色に設定して汚れているように見えることは別として)。less でサブクラスの mixin をオーバーライド (無効化) するにはどうすればよいですか??

4

5 に答える 5

14

これは、グラデーションを無効にするために css で達成する必要があることです。

CSS:

.navbar-inner {
  background-color: #2c2c2c; 
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

background-image: none;すべてのベンダー接頭辞をオーバーライドするには、数回使用する必要があります。

グラデーションを削除

于 2012-07-04T20:28:13.613 に答える
5

SASSコードの場合：background-color：transparentを追加し、ミックスインに移動しました

@mixin override_gradient_vertical() {
  background-color:transparent;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

今、あなたはただ使うことができます

@include override_gradient_vertical();
于 2012-08-21T15:52:30.643 に答える
3

解決策をありがとう。答えを読んだ後に思いついたことを共有するだけです：

これは、単純なグラデーションを削除するために使用している SCSS です。

@mixin remove_gradient($color:transparent) {
    background-color:$color;
    background-image: none;
    background-repeat: no-repeat;
    filter: none;
}

ミックスインに色を渡すことができることに注意してください（私の場合は必要でした）：

@include remove_gradient(white);

または、デフォルトで透明にします。

@include remove_gradient();
于 2013-07-16T01:38:13.247 に答える
1

ここでの価値は、より少ない実装です。ブートストラップ ファイル mixin.less

#gradient{
    .remove(@color: transparent) {
        background-color:@color;
        background-image: none;
        background-repeat: no-repeat;
        filter: none;
    }
}
于 2014-02-11T02:25:35.937 に答える
1

グラデーションは、bootstrap_theme ファイルによって追加されます。

私は本当に多くの背景画像を何も持たないという考えが好きではありませんでした. したがって、私の解決策は、ブートストラップの SASS または LESS バージョンを使用している場合、_theme.scss に最初に存在する次の行でグラデーションをオーバーライドすることです。

から

.navbar-default {
  @include gradient-vertical($start-color: lighten($navbar-default-bg, 10%), $end-color: $navbar-default-bg);
  @include reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
  border-radius: $navbar-border-radius;
  $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
  @include box-shadow($shadow);

  .navbar-nav > .active > a {
    @include gradient-vertical($start-color: darken($navbar-default-bg, 5%), $end-color: darken($navbar-default-bg, 2%));
    @include box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
  }
}

に

.navbar-default {
  @include gradient-vertical($start-color: $navbar-default-bg, $end-color: $navbar-default-bg);
  @include reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered

  $shadow: inset 0 0px 0 rgba(255,255,255,.15), 0 0px 0px rgba(0,0,0,.075);
  @include box-shadow($shadow);

  .navbar-nav > .active > a {
    @include gradient-vertical($start-color: $navbar-default-bg, $end-color: $navbar-default-bg);
    @include box-shadow(inset 0 0px 0px rgba(0,0,0,.075));
  }
}

ご覧のとおり、開始点と終了点は同じ値であるため、グラデーション効果は見られません。シンプルでクリーンです。

于 2015-03-04T09:49:28.160 に答える