タイポグラフィー

Bootstrap4のデフォルトの書式は下記の通りです。

<p>Bootstrap4のタイポグラフィー</p>
結果:

Bootstrap4のタイポグラフィー

font-size:16px
line-height:1.5px
font-family : "Helvetica Neue"、Helvetica、Arial、sans-serif

見出しタグH1 ~ H6

h1 Bootstrap heading (2.5rem = 40px)

h2 Bootstrap heading (2rem = 32px)

h3 Bootstrap heading (1.75rem = 28px)

h4 Bootstrap heading (1.5rem = 24px)

h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)

クラス

.display-1 : より大きい見出し
.display-2 : より大きい見出し
.display-3 : より大きい見出し
.display-4 : より大きい見出し
.font-weight-bold : 太字
.font-weight-normal : ノーマルフォント
.font-weight-light : 軽量フォント
.font-italic : イタリックテキスト
.lead : 段落を目立たせる
.small : テキストを85%縮小
.text-left : テキストの左寄せ
.text-center : テキストの中央寄せ
.text-right : テキストの右寄せ
.text-justify : テキストの整列
.text-nowrap : テキストの折り返しをしません
.text-lowercase : 小文字のテキストを表示
.text-uppercase : 大文字のテキストを表示
.text-capitalize : 大文字のテキスト表示
.initialism : 要素内のテキストを小さいフォントで表示。このクラスは直下の子クラスのみ適用される。
.list-inline : リストを一行で表示 
.pre-scrollable : <pre>要素をスクロール可能にする

<カラー>
.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
.text-secondary
.text-white
.text-dark
.text-light
            

利用例:

<p class="font-weight-light text-success">
  軽量フォント、カラーsuccess
</p>
結果:

軽量フォント、カラーsuccess


コンテンツをシェア


このエントリーをはてなブックマークに追加