web-dev-qa-db-ja.com

Twitter Bootstrapを使用して、1つのページのh1テキストの色をカスタマイズし、他のページをデフォルトのままにするにはどうすればよいですか？

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

twitter-bootstraptextcolor
21
tom

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

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

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

#index h1 {
   color:red;
}
23
Andres Ilich

in bootstrap 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

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

104
Connor Leech

bootstrap自体から利用可能なデフォルトの 'text'クラスを適用することもできます

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

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

8
sk8terboi87 ツ

これを自分で熟読した後（コナーリーチの答えのテキストカラークラスの使用）

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

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

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

これは機能しません!! 「navbar-text」は色を上書きし、標準のnavbarテキストの色に置き換えます。

正しい方法は、テキストを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>

この方法で行うと、テキストをnavbarの高さに合わせて適切に配置し、色も変更できます。

3
shawty

bootstrap 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

1
Poorna Rao

@Connor Leechの回答に加えて。

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

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

ミックスインtext-emphasis-variantは、ブートストラップのmixins.lessファイル。

1
pymarco

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

     <font color="white"><h1>Header Content</h1></font>
0
nimey sara thomas

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

http://getbootstrap.com/customize/

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

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

今、あなたが望むことを達成するために、この変更を行った後、あなた自身のCSSでそれらを明確に上書きして、あなた自身の色をそれらに適用することができます。 「継承」というキーワードは、フレームワークの苦痛を常に感じています。

0
Kris Boyd