web-dev-qa-db-ja.com

Bootstrapのグローバルなデフォルトのフォントサイズを変更する方法

ブートストラップのグローバルなデフォルトのフォントサイズは14pxで、行の高さは1.428です。デフォルトのグローバル設定を変更するにはどうすればよいですか？

複数のエントリすべてでbootstrap.min.cssを変更する必要がありますか？

csstwitter-bootstraptwitter-bootstrap-3font-size
43
Chetan

いくつかの方法がありますが、SASSまたはLESSバージョンではなくCSSバージョンのみを使用しているため、Bootstraps独自のカスタマイズツールを使用するのが最善の方法です。

http://getbootstrap.com/customize/

このページで必要なものをカスタマイズしてから、独自のフォントサイズや変更したいその他のものを含むカスタムビルドをダウンロードできます。

CSSファイルを直接変更する（または単にBootstrap CSSをオーバーライドする新しいCSSスタイルを追加する）ことは、他のBootstrapスタイルの値が基本フォントサイズから派生するため、お勧めしません。例えば：

https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss#L52

ベースフォントサイズがh1、h2、h3などのサイズの計算に使用されていることがわかります。CSSでフォントサイズを変更した場合（または独自のオーバーライドfont-sizeを追加した場合）、計算のフォントサイズは、Bootstrapの設計に従って比例的に正確ではなくなりました。

私が言ったように、あなたの最善の策は、独自のカスタマイズツールを使用することです。それはまさにそれが目的です。

SASSまたはLESSを使用している場合は、コンパイルする前に変数ファイルのフォントサイズを変更します。

47
Jake Wilson

style.cssを追加し、bootstrap.cssの後にこのファイルをインポートして、このコードをオーバーライドできます。

例えば：

/* bootstrap.css */
* {
   font-size: 14px;
   line-height: 1.428;
}

/* style.css */
* {
   font-size: 16px;
   line-height: 2;
}

コードのメンテナンスを改善するために、bootstrap.cssを直接変更しないでください。

39
Alessander França

ブートストラップは変数を使用します：

$font-size-base: 1rem; // Assumes the browser default, typically 16px

これをいじることはお勧めしませんが、できます。ベストプラクティスは、ブラウザのデフォルトのベースフォントサイズを次のようにオーバーライドすることです。

html {
  font-size: 14px;
}

ブートストラップはその値を取得し、remsを介してそれを使用して、あらゆる種類の値を設定します。

26
CloudMagick

現在のv4ドキュメントからこれを行うための推奨される方法は次のとおりです。

$font-size-base: 0.8rem;
$line-height-base: 1;

必ずbootstrap css includeの上に変数を定義してください。これらの変数はブートストラップをオーバーライドします。

他には何も必要なく、これが最もクリーンな方法です

ドキュメントで非常に明確に説明されています https://getbootstrap.com/docs/4.1/content/typography/#global-settings

5
Paul Odeon

V4でSASS変数を変更します。

$font-size-base: 1rem !default;
2
Jeremy Lynch