24

インデックスページでは、h1のテキストの色を白にして影を付けたいのですが、他のページのh1のデフォルトの動作を変更したくありません。どうすればこれを達成できますか？

4

8 に答える 8

105

ブートストラップ3には、テキストの色を変更するためのクラスがあります。

<p class="text-muted">...</p> //grey
<p class="text-primary">...</p> //light blue
<p class="text-success">...</p> //green
<p class="text-info">...</p> //blue
<p class="text-warning">...</p> //orangish,yellow
<p class="text-danger">...</p> //red

ヘルパークラスのドキュメント-コンテキストカラー。

于 2013-10-17T09:24:33.493 に答える
25

インデックスページのbodyタグに独自のIDまたはクラスを追加して、次のようなカスタムスタイルでそのページのすべての要素をターゲットにすることができます。

<body id="index">
   <h1>...</h1>
</body>

次に、次のように、クラスまたはIDで変更する要素をターゲットにできます。

#index h1 {
   color:red;
}
于 2012-06-22T19:07:31.320 に答える
9

ブートストラップ自体から利用可能なデフォルトの「テキスト」クラスを適用することもできます

 <h1 class='text-info'>Hey... I'm blue</h1>

http://twitter.github.io/bootstrap/base-css.html

于 2013-06-06T06:49:07.203 に答える
3

これを自分で熟読した後（Connor Leechの回答のテキストカラークラスを使用）

「navbar-text」クラスに注意を払うように注意してください。

たとえば、ナビゲーションバーに緑色のテキストを表示するには、次のようにしたくなるかもしれません。

<p class="navbar-text text-success">Some Text Here</p>

これは動作しません!! 「navbar-text」は色を上書きし、標準のナビゲーションバーテキストの色に置き換えます。

これを行う正しい方法は、テキストを2番目の要素EGにネストすることです。

<p class="navbar-text"><span class="text-success">Some Text Here</span></p>

または私の場合（強調されたテキストが欲しかったので）

<p class="navbar-text"><strong class="text-success">Some Text Here</strong></p>

このようにすると、ナビゲーションバーの高さにテキストが適切に配置され、色も変更されます。

于 2015-01-22T00:33:16.357 に答える
1

@ConnorLeechの答えに加えて。

独自の新しいカスタムタイポグラフィタイプを作成する場合は、cssファイルで次のように定義します。

.text-foo {
  .text-emphasis-variant(#FFFFFF);
}

ミックスインtext-emphasis-variantはBootstrapのmixins.lessファイルで定義されています。

于 2014-05-21T22:29:33.863 に答える
1

ブートストラップ3には、コンテキストカラーのヘルパークラスがあります。これらのクラスをhtml属性で使用してください。

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

参照： http： //getbootstrap.com/css/#type

于 2017-05-28T04:56:18.397 に答える
0

この問題を解決する最善の方法は、カスタマイズツールを使用してBootstrapをカスタマイズすることから始めることです。

http://getbootstrap.com/customize/

@ headings-colorに移動し、「継承」から、ヘッダーをサイト全体に配置したいものに変更します（デフォルトが必要な場合は、＃333に変更します）。

これにより、要求したとおりにすべての見出しが同じ色に保たれることに注意してください。

これで、この変更を行った後、必要なことを実現するために、独自のCSSでそれらを上書きして、独自の色を適用することができます。私がいつも見つけた「継承」キーワードは、フレームワークの苦痛です。

于 2017-07-18T13:53:54.703 に答える
-2

次のようなフォントスタイルを使用できます。

     <font color="white"><h1>Header Content</h1></font>
于 2017-03-05T13:15:37.420 に答える