web-dev-qa-db-ja.com

ブートストラップで利用可能なテキストカラークラス

ナビゲーションバーのタイトルにテキストを入れて、サインアップページを作成しています。それらのテキストに異なる色を付けたいのです。この目的のために私は別のCSSファイルを使用していますが、私はこれをブートストラップのCSSファイルを使用して行いたいと思います。

誰もがブートストラップで利用可能なカラークラスをリストアップできますか？

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4
113
fidel castro

ブートストラップ3のドキュメント は、ヘルパークラスの下にこれをリストします：Muted、Primary、Success、Info、Warning、Danger。

ブートストラップ4のドキュメント はユーティリティ->色の下にこれをリストし、さらにオプションがあります：primary、secondary、success、danger、warning、info、light、dark、muted、white。

それらにアクセスするには、classtext-[class-name]を使用します

したがって、たとえば青色のテキストが必要な場合は、次のようにします。

<p class="text-primary">This text is the blue primary color.</p>

これは選択肢の膨大な数ではありませんが、いくつかあります。

190
Ted Delezene

ナビゲーションバーのテキストは通常​​、bootstrap.cssファイル内の次の2つのCSSクラスのいずれかを使用して色付けされます。

まず、デフォルトのナビゲーションバー（灰色のもの）を使用する場合、.navbar-defaultクラスが使用され、テキストは 濃い灰色 のように色付けされます。

.navbar-default .navbar-text {
  color: #777;
}

もう1つは、反転ナビゲーションバー（黒のバー）を使用している場合、テキストは gray6 のように色付けされています。

.navbar-inverse .navbar-text {
  color: #999;
}

だから、あなたはあなたが望むように色を変えることができます。ただし、それを変更するには別のcssファイルを使用することをお勧めします。

注：Navbarセクションで、Twitter Bootstrapによって提供される カスタマイザ を使用することもできます。

6
lvarayut

あなたはテキストクラスを使うことができます：

.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white

必要に応じて任意のタグにテキストクラスを使用します。

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

必要に応じて、独自のクラスを追加したり上記のクラスを変更したりできます。

4
Dipendra Ghatal