Bootstrap 4テキストのレイアウト

Bootstrap 4　デフォルト設定

Bootstrap 4のデフォルトのフォントサイズ(font-size)は16pxで、行の高さ(line-height)は1.5です。

デフォルトのフォントファミリ(font-family)は、“Helvetica Neue”、Helvetica、Arial、sans-serifです。

さらに、すべての<p>要素にはmargin-top：0、margin-bottom: 1rem (16px)があります。

<h1> – <h6>

すべてのHTMLタイトル（h1からh6）のスタイルは、Bootstrapで定義されています。 次の例を参照してください。

実例

<div class="container">
  <h1>h1 Bootstrap タイトル (2.5rem = 40px)</h1>
  <h2>h2 Bootstrap タイトル (2rem = 32px)</h2>
  <h3>h3 Bootstrap タイトル (1.75rem = 28px)</h3>
  <h4>h4 Bootstrap タイトル (1.5rem = 24px)</h4>
  <h5>h5 Bootstrap タイトル (1.25rem = 20px)</h5>
  <h6>h6 Bootstrap タイトル (1rem = 16px)</h6>
</div>

Display クラス(タイトル)

Bootstrapには、タイトルのスタイルを制御するために4つのDisplayクラス（.display-1、.display-2、.display-3、.display-4）が用意されています。

実例

<div class="container">
  <h1>Display タイトル</h1>
  <p>Display タイトルは、より大きく太字のフォントスタイルで出力できます。</p>
  <h1 class="display-1">Display 1</h1>
  <h1 class="display-2">Display 2</h1>
  <h1 class="display-3">Display 3</h1>
  <h1 class="display-4">Display 4</h1>
</div>

<small>

Bootstrap 4では、HTMLの<small>要素を使用して、フォントサイズを小さくし、色を薄くしたテキストを作成します。

実例

<div class="container">
  <h1>テキストのより小さいタイトル</h1>
  <p>small 要素はフォントサイズがより小さく、色が薄いテキストに使用されます:</p>       
  <h1>h1 タイトル <small>サブ(副)タイトル</small></h1>
  <h2>h2 タイトル <small>サブ(副)タイトル</small></h2>
  <h3>h3 タイトル <small>サブ(副)タイトル</small></h3>
  <h4>h4 タイトル <small>サブ(副)タイトル</small></h4>
  <h5>h5 タイトル <small>サブ(副)タイトル</small></h5>
  <h6>h6 タイトル <small>サブ(副)タイトル</small></h6>
</div>

<mark>

Bootstrap 4は、<mark>を黄色の背景と特定の内側の余白として定義しています。

実例

<div class="container">
  <h1>テキストを強調表示</h1>    
  <p>mark要素を使用してテキストを<mark>強調表示</ mark></p>
</div>

<abbr>

Bootstrap 4は、HTML<abbr>要素のスタイルを、テキストの下部に表示される点線の下線として定義します。

実例

<div class="container">
  <h1>Abbreviations</h1>
  <p>The abbr element is used to mark up an abbreviation or acronym:</p>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

<blockquote>

引用された内容に対して、.blockquoteクラスを<blockquote>に追加できます。

実例

<div class="container">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
</div>

<dl>

Bootstrap 4は、HTMLの要素のスタイルを次のように定義します。

実例

<div class="container">
  <h1>Description Lists</h1>    
  <p>The dl element indicates a description list:</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>

<code>

Bootstrap 4は、HTMLの<code>要素のスタイルを次のように定義します。

実例

<div class="container">
  <h1>一部のコード</h1>
  <p>code要素内にいくつかのコード要素を配置できます:</p>
  <p>以下の HTML 要素: <code>span</code>, <code>section</code>, 及び <code>div</code> はドキュメントコンテンツの一部を定義するために使用されます。</p>
</div>

<kbd>

Bootstrap 4は、HTMLの<kbd>要素のスタイルを次のように定義します。

実例

<div class="container">
  <h1>Keyboard Inputs</h1>
  <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

<pre>

Bootstrap 4は、HTMLの<pre>要素のスタイルを次のように定義します。

実例

<div class="container">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>
</div>

他のクラス

次の表に、Bootstrap4のその他のクラスの例を提供します。