タイポグラフィー:Bootstrap 4

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

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

結果:

Bootstrap4のタイポグラフィー

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

「Webサイトからお問い合わせが来ない…」とお悩みの方必見!
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供

見出しタグ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

関連タグ:

CPIの最新情報をTwitterでチェックできます!
@cpiadjp
次へ
前へ