Bootstrapクラスを使用してフォントの太さを設定する


128

のTwitter Bootstrapクラスfont-weight: boldやその他の値はありfont-weightますか?

これがBootstrapに既に存在する場合は、新しいものを作成しません。


5
クラスはありません。自分でカスタマイズする必要があります。
Manoz 2013

2
そう、Font-weight:boldには別のクラスはありません
Dinesh Kanivu 2013

回答:


53

EDIT 2(最終):によると、ブートストラップ4ドキュメントclass="font-weight-bold"あなたが探しているものです。


EDIT:あなたが使用できるclass="font-weight-bold"よう、ここで示した(ブートストラップ4アルファ)。

明確にするために、以下の元の回答はそのままにしました。


このスレッドには多くの訪問者がいるようですが、この問題を解決するための適切な解決策がなかったため、この回答を投稿しています。しかし、Bootstrap 4を使用する方法がすぐにあります。

このGitHubのプル要求のショー、あなただけ使用する必要がありますtext-weight-normaltext-weight-boldそしてtext-weight-italicクラスを。

これは、正式な安定版リリースまで変わる可能性があります。この執筆日現在、このプルリクエストはまだalphaブランチにマージされていません。

Bootstrap v4がリリースされたら、この投稿を更新します。


あ、かわいい!これがBootstrap 4で発生することを述べ、現在のバージョンのソリューション(<strong>独自のクラスを使用して作成するだけ)を追加するための回答を改善できますか?そのときあなたの答えをマークします。
IonicăBizău

また、(Bootstrap 4では)提案されたクラス( "font-weight-bold")を<input/>ボックスに追加すると、内部のテキストが太字になります。必要に応じて強調するために、これをTitleフィールドと一緒に使用します。Chrome ver76およびIE11のWindows x64でテスト済み。
timmi4sa

クールでクールな男。できます!!!CSSファイルに手動でスタイルを追加してコンテンツを太字にしようとしましたが、実際には起こりませんでした。それから私はあなたの答えを見つけました:D
Travis Le

93

これはBootstrap Webサイトで見つかりましたが、実際にはBootstrapクラスではなく、単なるHTMLです。

<strong>rendered as bold text</strong>

3
さらに、strong必ずしも大胆な意味ではありません。developer.mozilla.org/en-US/docs/Web/HTML/Element/strongから:「通常、この要素はデフォルトで太字のフォントの太さを使用してレンダリングされます。ただし、太字のスタイルを適用するためだけに使用するのではなく、そのためのCSS font-weightプロパティ。」

強いが強い、太字は太字である:( @GurgenHakobyanによって答えがはるかに好まれるべき。
MattAllegro

これはCSSがなかった昔のことです。懸念事項のデザインパターンの分離により、CSSは、コンテンツとプレゼンテーションの両方をHTMLで混在させないようにするために発明されました。Webブラウザは、まだ下位互換性のためにこれをサポートするが、強く、<B>は使用しないことをお勧めとされての<strong>、<私>と<em>のなどen.wikipedia.org/wiki/Cascading_Style_Sheets
Wildhammer


39

Site.css(または別の場所)に、たとえば.font-boldという名前の新しいクラスを作成し、要素に設定します

.font-bold {
  font-weight: bold;
}

8
私はこれに対して助言します、マークアップは次のように意味論的であることになっています:.some-functional-description-of-the-element {font-weight:bold}。cssのような名前のクラスを使用するのではなく、style = "font-weight:bold;"を使用するだけです。
cmc

23
これは完璧なソリューションであり、.text-uppercaseや.list-unstyledなどの他の多くのBootstrapクラスと同じようにセマンティックです。インラインスタイルは、たとえば、すべての太字の要素を別の色にしたり、テキスト効果を持たせたりする場合など、管理上の悪夢になる可能性があります。クラスがあるとこれが簡単になり、これが最良の答えです。
Andy Mehalick

私はここでアンディに同意します。これは質問に正しく答えます。一般化されたクラスを使用すると、ジェネレーター、ツールキット、およびテンプレートが使用されている最もクリーンなhtml出力が提供される有効なユースケースがあります。
2016

これはブートストラップ<4の正しいソリューションです。の目的はstrong テキストを太字にすることではありません。慣例は太字のテキストを強調しているため、ブラウザは太字にすることです。HTMLタグは、デザイン目的のためだけに存在するのではなく、セマンティックな意味を持つ必要があります。実際、W3の推奨では引用されておらず、b 太字であると信頼すべきではありません
Andre Figueiredo 2017年

1
これはブートストラップ4で古くなっています
toddmo

8

Bootstrap 4では、以下を使用できます。

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>

2

よりカスタマイズされた値が必要な場合や、繰り返しが必要なスキームに従っている場合は、bootstarpの変数を使用してフォントの太さを制御する必要があります。変数は、色、間隔、フォントスタックなどの一般的に使用される値を集中化して共有する方法として、プロジェクト全体で使用されます。

すべてのドキュメントはhttp://getbootstrap.com/cssにあります

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.