ブートストラップ-タイポグラフィ

Bootstrapは、デフォルトのフォントスタックでHelvetica Neue、Helvetica、Arial、およびsans-serifを使用します。Bootstrapのタイポグラフィ機能を使用すると、見出し、段落、リスト、その他のインライン要素を作成できます。次のセクションで、これらのそれぞれについて学びましょう。

見出し

すべてのHTML見出し（h1からh6）は、Bootstrapでスタイル設定されています。例を以下に示します-

<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>

Bootstrapを使用した上記のコードセグメントは、次の結果を生成します-

インライン小見出し

いずれかの見出しにインライン小見出しを追加するには、任意の要素の周囲にを追加するか、追加します。 .small クラスを選択すると、以下の例に示すように、明るい色の小さなテキストが表示されます-

<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1> 
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>

Bootstrapを使用した上記のコードセグメントは、次の結果を生成します-

リードボディコピー

段落に強調を加えるには、class = "lead"を追加します。これにより、次の例のように、フォントサイズが大きくなり、太さが軽くなり、行の高さが高くなります。

<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating 
   the use of lead body copy. This is an example paragraph 
   demonstrating the use of lead body copy.This is an example 
   paragraph demonstrating the use of lead body copy.This is an 
   example paragraph demonstrating the use of lead body copy.
   This is an example paragraph demonstrating the use of lead body copy.</p>

強調

などのHTMLのデフォルトの強調タグは、テキストを親のサイズの85％に設定し、はフォントの太さが重いテキストを強調し、はイタリック体のテキストを強調します。

Bootstrapは、次の例に示すように、テキストを強調するために使用できるいくつかのクラスを提供します。

<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>

<p class = "text-left">Left aligned text.</p>
<p class = "text-center">Center aligned text.</p>
<p class = "text-right">Right aligned text.</p>
<p class = "text-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>

略語

HTMLの<abbr>要素は、WWWやHTTPなどの略語または頭字語のマークアップを提供します。ブートストラップは、下部に明るい点線の境界線を持つ<abbr>要素のスタイルを設定し、ホバー時に全文を表示します（そのテキストを<abbr> title属性に追加する場合）。フォントサイズを少し小さくするには、<abbr>に.initialismを追加します。

<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>

住所

<address>タグを使用すると、Webページに連絡先情報を表示できます。<address>はデフォルトで表示されるため：block; 使用する必要があります

囲まれたアドレステキストに改行を追加するタグ。

<address>
   <strong>Some Company, Inc.</strong><br>
   007 street<br>
   Some City, State XXXXX<br>
   <abbr title = "Phone">P:</abbr> (123) 456-7890
</address>

<address>
   <strong>Full Name</strong><br>
   <a href = "mailto:#">[email protected]</a>
</address>

ブロッククォート

任意のHTMLテキストの周りにデフォルトの<blockquote>を使用できます。他のオプションには、引用のソースを識別するためのタグの追加、およびクラス.pull-rightを使用したブロック引用の右揃えが含まれます。次の例は、これらすべての機能を示しています-

<blockquote>
   <p>This is a default blockquote example. This is a default 
      blockquote example. This is a default blockquote 
      example.This is a default blockquote example. This is a 
      default blockquote example.</p>
</blockquote>

<blockquote>
   This is a blockquote with a source title.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

<blockquote class = "pull-right">This is a blockquote aligned to the right.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

Ordered lists −順序付きリストは、ある種の順番に分類され、先頭に番号が付いたリストです。
Unordered lists−順不同リストとは、特定の順序がなく、従来は箇条書きでスタイル設定されたリストです。箇条書きを表示したくない場合は、クラス.list-unstyledを使用してスタイルを削除できます。クラス.list-inlineを使用して、すべてのリストアイテムを1行に配置することもできます。
Definition lists−このタイプのリストでは、各リスト項目は<dt>要素と<dd>要素の両方で構成できます。<dt>は定義用語を表し、辞書のように、これは定義されている用語（またはフレーズ）です。続いて、<dd>は<dt>の定義です。クラスdl-horizontalを使用して、<dl>の用語と説明を並べて作成できます。

次の例は、これらの各タイプを示しています-

<h4>Example of Ordered List</h4>
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

<h4>Example of UnOrdered List</h4>

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Unstyled List</h4>

<ul class = "list-unstyled">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Inline List</h4>

<ul class = "list-inline">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Definition List</h4>

<dl>
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>

<h4>Example of Horizontal Definition List</h4>

<dl class = "dl-horizontal">
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>