web-dev-qa-db-ja.com

リンクの色を変更する方法（ブートストラップ）

enter image description here

<div class="collapse navbar-collapse">
                    <ul class="nav pull-right">
                        <li class="active"><a href="#">О нас</a></li>
                        <li><a href="#">Как это работает</a></li>
                        <li><a href="#">Цены</a></li>
                        <li><a href="#">Контакты</a></li>
                    </ul>

私はBootstrapが初めてです。ここでは、3つのクラスが指摘されています。そして、少なくとも3つの.cssファイルがあります：styles.css、flat-ui.css、bootstrap.css。これらのリンクの色を変更する方法がわかりません。

twitter-bootstrapcolorshyperlinknavbar
21
anindis
ul.nav li a, ul.nav li a:visited {
    color: #anycolor !important;
}

ul.nav li a:hover, ul.nav li a:active {
    color: #anycolor !important;
}

ul.nav li.active a {
    color: #anycolor !important;
}

必要に応じてスタイルを変更します。

25
Mihail Burduja

直接変更するには、Bootstrap <a>タグのクラスを使用できます（<div>では機能しません）：

<h4 class="text-center"><a class="text-warning" href="#">Your text</a></h4>
25
Roubi

私は、元のクエシトンのコードがnavbarに関連する状況を表示することを完全に認識しています。しかし、他のコンポーネントにも飛び込むので、テキストスタイリングのクラスオプションが機能しない可能性があることを知っておくと役立つ場合があります。

ただし、独自のヘルパークラスを作成して、HTMLで「ブートストラップフロー」を維持できます。 panel-titleリージョンにあるスタイルリンクを支援する1つのアイデアを次に示します。

次のコード自体は、アンカーリンクの警告色をスタイルしません...

<div class="panel panel-default my-panel-styles"> 
...    
  <h4 class="panel-title">
    <a class="accordion-toggle btn-block text-warning" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      My Panel title that is also a link
    </a>
  </h4>
 ...
 </div>

しかし、このような適切な色の独自のクラスを追加することにより、Bootstrapスタイリングパッケージを拡張できます...

.my-panel-styles .text-muted {color:#777;}
.my-panel-styles .text-primary {color:#337ab7;}
.my-panel-styles .text-success {color:#d44950;}
.my-panel-styles .text-info {color:#31708f;}
.my-panel-styles .text-warning {color:#8a6d3b;}
.my-panel-styles .text-danger {color:#a94442;}

...これで、必要なBootstrap色でパネルアンカーリンクを作成し続けることができます。

3
klewis

Bootstrap 4を使用している場合は、単純に colorユーティリティクラス を使用できます（例：text-success、text-dangerなど...）。

独自のクラスを作成することもできます（例：text-my-own-color）

両方のオプションを以下の例に示します。ライブデモを見るには、code snippetを実行します。

.text-my-own-color {
  color: #663300 !important; // Define your own color in your CSS
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar-collapse">
  <ul class="nav pull-right">

    <!-- Bootstrap's color utility class -->
    <li class="active"><a class="text-success" href="#">О нас</a></li>

    <!-- Bootstrap's color utility class -->
    <li><a class="text-danger" href="#">Как это работает</a></li>

    <!-- Bootstrap's color utility class -->
    <li><a class="text-warning" href="#">Цены</a></li>

    <!-- Custom color utility class -->
    <li><a class="text-my-own-color" href="#">Контакты</a></li>

  </ul>
</div>
3
cetinajero