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

Bootstrap は、デフォルトのフォントスタックとして Helvetica Neue、Helvetica、Arial、および sans-serif を使用します。

Bootstrap のタイポグラフィー機能を使用して、見出し、段落、リスト、その他のインライン要素を作成できます。

Heading

Bootstrap は、すべての HTML 見出し (h1 から h6) のスタイルを定義します。以下の例を参照してください:

インスタンス

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 标题</title>
	<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
	<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>

</body>
</html>

サンプルの実行 »

「サンプルの実行」ボタンをクリックしてオンラインサンプルを表示します

インライン字幕

タイトルにインライン字幕を追加する必要がある場合次の例に示すように、要素の両側に <small> を追加するか、.small クラスを追加するだけで、フォントサイズが小さくなり、テキストが明るくなります。 html>

<html>

<head>

<title>ブートストラップの例 - インラインサブタイトル</title>
<link href="/bootstrap/css/bootstrap.min.css" rel ="stylesheet"> ;
<スクリプト src="/scripts/jquery.min.js"></script>
<スクリプト src="/bootstrap/js/bootstrap.min.js">< ;/script>
</head>
<body>

<h1>私はタイトル 1 h1、<small>私はサブタイトル 1 h1</small></h1>私はタイトル 2 h2 . <small>私はサブタイトル 2 h2</small></h2>
<h3>私はタイトル 3 h3<small>私はサブタイトル 3h3</h3>
< ;h4>私はタイトル 4 h4。<small>私はサブタイトル 4 h4</small></h4>
<h5>私はタイトル 5 h5<small>私はサブタイトル 5 h5</small> ;</h5>
<h6>私はタイトル 6 h6。<small>私はサブタイトル 6 h6</small></h6>

</body>
</html>

例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 内联子标题</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> 
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>

</body>
</html>

例の実行»

「例の実行」ボタンをクリックしてオンライン例を表示します

本文のコピーを起動します

段落に強調テキストを追加するには、 class="lead" を追加すると、次の例に示すように、テキストが大きく、太く、背が高くなります。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 引导主体副本</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<hr>
<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>

</body>
</html>

Example

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 引导主体副本</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>

</body>
</html>

サンプルの実行»

「サンプルの実行」ボタンをクリックしてオンラインサンプルを表示します

強調

HTMLのデフォルトの強調タグ<small> (テキストを親テキストのサイズの85%に設定します)、< Strong> (テキストを太字に設定)、<em> (テキストを斜体に設定)。

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

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 强调</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

</body>
</html>

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 强调</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在 <em> 标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

</body>
</html>

実行例»

オンライン例を表示するには、[インスタンスの実行] ボタンをクリックしてください

略語

HTML 要素は、WWW や HTTP などの略語のマークアップを提供します。ブートストラップは、<abbr> 要素のスタイルをテキストの下部に表示される破線の境界線として定義し、マウスをその上に置くと完全なテキストが表示されます (<abbr> タイトルのテキストを追加する場合)属性）。テキストのフォントサイズを小さくするには、<abbr> に .initialism を追加します。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 缩写</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

インスタンス

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 缩写</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

アドレス(アドレス)

<address>タグを使用すると、表示できますWeb ページの情報にある連絡先。 <address> のデフォルトは display:block; であるため、
タグを使用して囲まれたアドレステキストに改行を追加する必要があります。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 地址</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<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:#">mailto@somedomain.com</a>
</address>

</body>
</html>

インスタンス

インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

Blockquote

HTML テキストの横にデフォルトの <blockquote> を使用できます。その他のオプションには、引用元を識別するためのタグの追加や、クラス .pull-right を使用した引用の右揃えなどがあります。次の例は、これらの機能を示しています。

<!DOCTYPE html>
<html>
<head>
<title>ブートストラップの例 - Quote</title>
<link href="/bootstrap /css /bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js /bootstrap .min.js"></script>
</head>
<body>

<blockquote><p>
これはデフォルトの参照インスタンスです。これはデフォルトの参照インスタンスです。これはデフォルトの参照インスタンスです。これはデフォルトの参照インスタンスです。これはデフォルトの参照インスタンスです。これはデフォルトの参照インスタンスです。これはデフォルトの参照インスタンスです。これはデフォルトの参照インスタンスです。 </p></blockquote>
<blockquote>これは出典タイトル付きの引用です。 <small><cite title="出典タイトル">出典タイトル</cite></small></blockquote>で有名な人
<blockquote class="pull-right">これは右揃えの引用。 <small><cite title="出典タイトル">出典タイトル</cite></small></blockquote>

</body>
</html>

で有名な人

インスタンス

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 地址</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<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:#">mailto@somedomain.com</a>
</address>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

List

Bootstrap は、順序付きリスト、順序なしリスト、および定義済みリストをサポートします。

順序付きリスト: 順序付きリストは、数字またはその他の順序付き文字で始まるリストです。
順序なしリスト: 順序なしリストとは、特定の順序のないリストを指し、伝統的な強調から始まるリストです。これらの強調記号を表示したくない場合は、クラス .list-unstyled を使用してスタイルを削除できます。クラス .list-inline を使用して、すべてのリスト項目を同じ行に配置することもできます。
定義リスト: このタイプのリストでは、各リスト項目に <dt> 要素と <dd> 要素を含めることができます。 <dt> は、辞書のように、それが定義される用語を表します。次に、<dd>は<dt>の説明です。クラス dl-horizontal を使用すると、属性と説明を <dl> 行に並べて表示できます。

以下の例は、これらのタイプのリストを示しています:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 引用</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<blockquote><p>
这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。</p></blockquote>
<blockquote>这是一个带有源标题的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
<blockquote class="pull-right">这是一个向右对齐的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>

</body>
</html>

インスタンス

インスタンスの実行 »
オンラインインスタンスを表示するには、[インスタンスの実行] ボタンをクリックします

その他のタイポグラフィクラス

次の表は、その他の Bootstrap タイポグラフィクラスの例を示しています。段落ハイライト

試してみてください.small小さいテキストを設定します(親テキストのサイズの85%に設定します)試してみましょう.text-leftテキストの左揃えを設定します試してみましょう .text -centerテキストの中央揃えを設定します試してください.text-rightテキストを右揃えに設定します試してください.text-justifyテキストの配置、段落を設定します段落内のテキスト画面を超える部分は自動的に折り返されます。 text-nowrap 画面を超える部分は折り返されません。 text- lowercase テキストを小文字に設定します。試してみてください.text-capitalize単語の最初の文字を大文字に設定します試してみましょう.initialism & <で表示されます abbr> 要素内のテキストは、小さなフォント試してください.blockquote-reverse引用符を右揃えに設定します試してください.list-unstyledデフォルトのリストスタイルを削除し、リストアイテムを左揃えにします(

では; このクラスは直接の子リスト項目でのみ機能します (ネストされたリスト項目を削除する必要がある場合は、ネストされたリストでこのスタイルを使用する必要があります)

試してみる.list-inlineすべてのリスト項目を同じ行に配置します試してみる.dl-horizontalこのクラスは float と offset を設定し、<dl> 要素と <dt> 要素に適用されます。試してみてください。 -scrollable<pre>要素をスクロール可能にします試してみましょう

← ブートストラップグリッドシステム

ブートストラップコード →

提出する