私のデザインでは、特定の部分のリンクとホバーの色を変更したいと思います。最善を尽くしますが、それはできません。ブートストラップは初めてです。 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>
Bootstrap 4のCSSコードは、LessではなくSass(SCSS)でコンパイルされるようになりました。 Bootstrap 4には、うなり声のあるビルドチェーンが付属しています。 Bootstrapをカスタマイズする「最良の」方法は、デフォルトのビルドチェーンを使用することです。
bootstrap
(bootstrap-4-dev
)フォルダーに移動しますnpm install
を実行します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-link
sの色を変更するには、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;}
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;
}
2つの方法(実際には1つ):
1。独自のスタイルを追加する
実際にbootstrapを使用すると、ほとんどすべての場合に上書きできます。そのため、独自の.cssに何かを設定すると、bootstrap.cssに設定されたスタイルが無効になります
これを自分の.cssに追加します。
.navbar ul li a {
color:#fff;}
.navbar ul li a:hover {
color:#000;}
チャームとして機能することがわかります。
(2。bootstrap.cssに設定されているすべてのものに移動して見つけることができます
本当に必要な場合を除いて、そうすることはお勧めしません。すべてのスタイリングが上書きされる可能性があり、スタイリングの構造がよりきれいになるからです。
私のデザインでは、特定の部分のリンクとホバーの色を変更したいと思います。
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回おきに簡単です。このアプローチをとることで、リンクとホバーの色を完全に制御できます。好きなだけバリエーションを再利用したり作成したりします。
お役に立てれば
このリンクは私のニーズに役立つことがわかりました。
これをCSSに追加します。
a.nav-link {color:#FFFFFF;} !important
a.nav-link:hover {color:#F00F00; text-decoration:none;} !important
ただし、最初は重要なタグを含めないでください。追加する前に競合がないか確認してください。個人的には、関連するクラスと親divを検索して見つけるだけで、競合を解消したり、クラス名を変更したりします。 mを使用しています。
私は初心者ですが、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>
これらの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;
}