Bootstrap-typography

提供：Dev Guides
移動先:案内、検索

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

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>

ブートストラップで上記のコードセグメントは、次の結果を生成します-

インライン小見出し

見出しのいずれかにインライン小見出しを追加するには、単に要素の周囲に<small>を追加するか、*。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>

ブートストラップで上記のコードセグメントは、次の結果を生成します-

リードボディコピー

段落を強調するには、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のデフォルトの強調タグ（<small>など）は、親のサイズの85％にテキストを設定し、<strong>は、より太いフォントのテキストを強調し、<em>は斜体のテキストを強調します。

ブートストラップは、次の例に見られるようにテキストを強調するために使用できるいくつかのクラスを提供します- 

<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属性に追加する場合）。 わずかに小さいフォントサイズを取得するには、.initialismを<abbr>に追加します。 

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

アドレス

<address>タグを使用すると、Webページに連絡先情報を表示できます。 <address>のデフォルトはdisplay：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>を使用できます。 他のオプションには、引用のソースを識別するための<small>タグの追加、クラス_.pull-right_を使用したblockquoteの右揃えが含まれます。 次の例は、これらのすべての機能を示しています- 

<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>

リスト

ブートストラップは、順序付きリスト、順序なしリスト、および定義リストをサポートしています。

  • 順序付きリスト-順序付きリストは、ある種の連続した順序に該当するリストであり、数字が先頭に付きます。
  • 順序なしリスト-順序なしリストは、特定の順序を持​​たないリストであり、伝統的に箇条書きでスタイル設定されています。 箇条書きを表示したくない場合は、。list-unstyled_クラスを使用してスタイルを削除できます。 クラス.list-inline_を使用して、すべてのリストアイテムを1行に配置することもできます。
  • 定義リスト-このタイプのリストでは、各リスト項目は<dt>要素と<dd>要素の両方で構成できます。 <dt>は_definition term_を表し、辞書のように、これは定義されている用語（またはフレーズ）です。 その後、<dd>は<dt>の定義です。 クラス_dl-horizo​​ntal_を使用して、<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>
「https://www.finddevguides.com/index.php?title=Bootstrap-typography&oldid=7356」から取得
Powered by MediaWiki