web-dev-qa-db-ja.com

Bootstrapバージョン4でリンクの色とホバーの色を変更するにはどうすればよいですか？

私のデザインでは、特定の部分のリンクとホバーの色を変更したいと思います。最善を尽くしますが、それはできません。ブートストラップは初めてです。 Bootstrap 4を変更するにはどうすればよいですか？簡単なコードはこちら-

<div class="card" style="max-width: 320px;">
     <div class="card-header text-center"><h3>Navigation</h3></div>
          <div class="card-block">
               <ul class="nav navbar-nav" style="font-size: 1.50em;">
                   <li><a href="#" class="nav-link">Home</a></li>
                    <li><a href="#" class="nav-link">Documents</a></li>
                    <li><a href="#" class="nav-link">Videos</a></li>
                    <li><a href="#" class="nav-link">Gallery</a></li>
                    <li><a href="#" class="nav-link">Download</a></li>
                </ul>
           </div>                   
</div>
csstwitter-bootstraphovertwitter-bootstrap-4bootstrap-4
6
Fahim Foysal Kamal

Bootstrap 4のCSSコードは、LessではなくSass（SCSS）でコンパイルされるようになりました。 Bootstrap 4には、うなり声のあるビルドチェーンが付属しています。 Bootstrapをカスタマイズする「最良の」方法は、デフォルトのビルドチェーンを使用することです。

  1. ソースコードをダウンロードして解凍します
  2. bootstrap（bootstrap-4-dev）フォルダーに移動します
  3. コンソールでnpm installを実行します
  4. grunt distを実行してCSSコードを再コンパイルします

色を変更してscss/bootstrap.scssまたはscss/_variables.scssの両方を編集できます。以下の例ではscss/bootstrap.scssを編集しています。scss/bootstrap.scssファイルの先頭で変数を再宣言してください。

.nav-linkおよびnav-link:hoverの色はaセレクターのデフォルトの色によって設定されます。これらの色はscss/bootstrap.scssで次のように変更できます。

$link-color:                 #f00; //red
$link-hover-color:           #0f0; //green

// Core variables and mixins
@import "variables";
@import "mixins";
....

上記はすべてのリンクの色を変更することに注意してください。 .nav .nav-linkのみ、または.card .nav .nav-linkのみの色を変更するには、CSSコードをより高い specificity でコンパイルする必要があります。 ！important は使用しないでください

また、Bootstrapは現在アルファ状態であるため、本番環境では使用しないでください。 .nav-linkの色を宣言する変数はまだ存在していませんが、将来的には存在する可能性があります。以下も参照してください。 https://github.com/twbs/bootstrap/issues/186

コード内のすべての.nav .nav-linksの色を変更するには、scss/bootstrap.scssファイルの最後にある次のSCSSコードを使用します。

....
// Utility classes
@import "utilities";
.nav-link {
 color: #f00; //red

  @include hover-focus {
    color: #0f0; //green
  }  
}

.nav-links内の.cardsのみの色を変更するには、次のように特定性の高いCSSコードを作成する必要があります。

....
// Utility classes
@import "utilities";
.card .nav-link {
 color: #f00; //red

  @include hover-focus {
    color: #0f0; //green
  }  
}

もちろん、コンパイルしたbootstrap.cssファイルの最後に独自のCSSコードを作成することもできます。ニーズに応じて、より高い特異性を使用します。

すべてのリンクを変更：

a {color: #f00;}
a:hover {color: #0f0;}

HTML：

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap-4-dev/dist/css/bootstrap.css">
<style>
  a {color: #f00;}
  a:hover {color: #0f0;}
</style>

またはより高い特異性で：

.nav-link {color: #f00;}
.nav-link:hover {color: #0f0;}

あるいは：

.card .nav-link {color: #f00;}
.card .nav-link:hover {color: #0f0;}
24
Bass Jobsen

Mystyle.cssのようなカスタムcssファイルを追加してbootstrapクラスをオーバーライドし、ヘッドセクションのbootstrapの直後に配置します。

<!-- Bootstrap CSS -->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap"  rel="stylesheet">     
<link rel="stylesheet"  href="path/mystyle.css" type="text/css"/>

そしてmystyle.cssの中：

.navbar-light .navbar-nav .nav-link {
color: whitesmoke;
}
.navbar-light .navbar-nav .nav-link:hover {
color: whitesmoke;
}
4
bdaoudi

2つの方法（実際には1つ）：

1。独自のスタイルを追加する

実際にbootstrapを使用すると、ほとんどすべての場合に上書きできます。そのため、独自の.cssに何かを設定すると、bootstrap.cssに設定されたスタイルが無効になります

これを自分の.cssに追加します。

.navbar ul li a {
color:#fff;}
.navbar ul li a:hover {
color:#000;}

チャームとして機能することがわかります。

（2。bootstrap.cssに設定されているすべてのものに移動して見つけることができます

本当に必要な場合を除いて、そうすることはお勧めしません。すべてのスタイリングが上書きされる可能性があり、スタイリングの構造がよりきれいになるからです。

2
Andrew Adam

私のデザインでは、特定の部分のリンクとホバーの色を変更したいと思います。

Sassを使用してBS4内で一度に取り組むことができる3つのことを説明しています。カスタムプロジェクトの.scssファイルにアクセスしてコンパイルできる場合は、次の方法をお勧めします...

この特定のケースでは、次のようにカスタムミックスインを作成できます。

@mixin my-variant($bgcolorOff, $borcolorOff, $bgcolorOn, $borcolorOn, $bgcolorAct, $borcolorAct, $txtcolorOff, $txtcolorOn, $txtsize, $txtalign){
    @include button-variant($bgcolorOff, $borcolorOff, $bgcolorOn, $borcolorOn, $bgcolorAct, $borcolorAct);
    color:#333; /*set a fallback color*/
    font-weight:normal; /*customize other things about your like so like*/
    text-transform:none; /*customize other things about your like so like*/
    text-decoration:none; /*customize other things about your like so like*/
    text-align:$txtalign; /*reference parameter values like so*/
}


私はあなたがすでにこのようにsass変数に割り当てられた16進数の色を持っていると仮定しています：

$m-color-red: #da291c;
$m-color-blue: #004c97;
..etc..

その場合、sassファイルの特定の場所からミックスインを呼び出します。初めてのことですが、次のパラメータ$m-color-whiteが上記の$bgcolorOffパラメータの値をどのように表しているかに注目してください。したがって、カスタムバリアントの定義に役立つように色を配置する場所に細心の注意を払ってください。

  .m-variant {
      @include my-variant($m-color-white, $m-color-grey-light, $m-color-off-white, $m-color-grey-light, $m-color-blue, $m-color-grey-light, $m-color-grey-light, $m-color-grey-light, 1.200em, 'left');
   }


最後に、ボタンまたはアンカーリンクを作成するときに、要素構造に以下を追加できます。

<a class="btn btn-sm m-3 m-variant ">my custom button</a>


4つの簡単なステップ。初めてこれを行った後は、1回おきに簡単です。このアプローチをとることで、リンクとホバーの色を完全に制御できます。好きなだけバリエーションを再利用したり作成したりします。

お役に立てれば

1
klewis

このリンクは私のニーズに役立つことがわかりました。

ブートストラップ4色

0
kunaguvarun

これをCSSに追加します。

a.nav-link {color:#FFFFFF;} !important
a.nav-link:hover {color:#F00F00; text-decoration:none;} !important

ただし、最初は重要なタグを含めないでください。追加する前に競合がないか確認してください。個人的には、関連するクラスと親divを検索して見つけるだけで、競合を解消したり、クラス名を変更したりします。 mを使用しています。

0
Joel

私は初心者ですが、Bootstrap 4には、リンク要素タグで使用する「nav-link」と呼ばれるクラスがあります。私は暗い、主色のnavbarを使用しており、リンクは同じ色ですこれで解決しました.

<ul class="navbar-nav">
    <li class="nav-item">
        <a href="/Results/Create" class="nav-link">Create New Request</a>
    </li>
</ul>
0
Dr. Jon Paarlberg

これらのCSSは私のために働きます

.nav-pills .nav-link {
    color: #fff;
    cursor: default;
    background-color: #868686;
}

.nav-pills .nav-link.active {
    color: #000;
    cursor: default;
    background-color: #afafaf; 
    font-weight: bold;
}
0
Doberon