English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap 基礎トレーニング

Bootstrap プラグイン

Bootstrapレイアウト

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

Bootstrap のレイアウト機能を使用して、タイトル、段落、リスト、その他のインライン要素を作成できます。

タイトル

Bootstrap では、すべての HTML タイトル（h1 h6）のスタイル。以下の例を参照してください：

以下の結果が示されています：

インラインサブタイトル

タイトルにインラインサブタイトルを追加するには、簡単に要素の両側に <small> を追加するか、または以下のスタイルを追加してください。 .small クラスを使用すると、より小さくて色が淡いテキストを取得できます。以下の例を参照してください：

オンラインの例

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>Bootstrap　例　-　インラインサブタイトル</title>
<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<h1>私はタイトル1　h1.　<small>私はサブタイトル1　h1</small></h1>　
	<h2>私はタイトル2　h2.　<small>私はサブタイトル2　h2</small></h2>
	<h2>私はタイトル3　h2.　<small>私はサブタイトル3　h2</small></h2>
	<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>
	<meta　charset="utf-8">　
	<title>Bootstrap　例　-　導入文のコピー/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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>
	<meta　charset="utf-8">　
	<title>Bootstrap　例　-　強調/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<small>この行の内容はタグ内にあります</small><br>
<strong>この行の内容はタグ内にあります</strong><br>
<em>この行の内容はタグ内にあり、イタリックに表示されます</em><br>
<p　class="text-左">テキストを左に寄せます</p>
<p　class="text-中央">テキストを中央に寄せます</p>
<p　class="text-右">テキストを右に寄せます</p>
<p　class="text-抑制">この行の内容は弱化されています</p>
<p　class="text-主要">この行の内容には　主要　クラスがついています</p>
<p　class="text-成功">この行の内容には　成功　クラスがついています</p>
<p　class="text-情報">この行の内容には　情報　クラスがついています</p>
<p　class="text-警告">この行の内容には　警告　クラスがついています</p>
<p　class="text-危険">この行の内容には　危険　クラスがついています</p>
</body>
</html>
テストをしてみる ‹/›

以下の結果が示されています：

略

HTML 元素提供了用于缩写的标记，比如 WWW 或 HTTP。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到 <abbr>。

オンラインの例

<!DOCTYPE　html>
<html>
<head>
　　　<title>Bootstrap　例　-　略/title>
　　　<link　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"　rel="stylesheet">
　　　<script　src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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)

<address>タグを使用すると、ウェブページ上で連絡情報を表示できます。<address>はデフォルトでdisplay:block;であり、閉じた住所テキストに改行を追加するために<br>タグを使用する必要があります。

オンラインの例

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　例　-　住所</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<address>
	<strong>Some Company, Inc.</strong><br>
	007　street<br>
	Some City, State XXXXX<br>
	<abbr title="電話">P:</abbr>　(123)　456-7890
</address>
<address>
	<strong>フルネーム</strong><br>
	<a href="mailto:#">[email protected]</a>
</address>
</body>
</html>
テストをしてみる ‹/›

以下の結果が示されています：

引用(Blockquote)

任意のHTMLテキストの隣でデフォルトの<blockquote>を使用できます。他のオプションには、引用の出典を示すために<small>タグを追加したり、classを使用したりすることが含まれます。 .pull-right 右寄せ引用。以下の例ではこれらの特性を示しています：

オンラインの例

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　例　-　引用</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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>
テストをしてみる ‹/›

以下の結果が示されています：

リスト

Bootstrapは順序付きリスト、無序列表、定義リストをサポートしています。

  • 順序付きリスト：順序付きリストとは数字や他の順序的な文字で始まるリストです。

  • 無序列表：無序列表とは特定の順序がないリストで、伝統的なスタイルの強調点で始まるリストです。これらの強調点を表示したくない場合は、classを使用することができます。 .list-unstyled を使用してスタイルを除去します。また、classを使用することもできます。 .list-inline すべてのリストアイテムを同一行に配置します。

  • 定義リスト：この種類のリストでは、各リストアイテムが<dt>と<dd>要素を含むことができます。<dt>は 定義用語、辞書のように。次に<dd>は<dt>の説明です。.dl-horizontalは<dl>内の短語とその説明を一行に並べることができます。最初は<dl>のデフォルトのスタイルで重ね合わせて表示され、ナビゲーションバーが徐々に広がるにつれて一行に並べられます。

以下の例はこれらのリストの種類を示しています：

オンラインの例

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　例　-　リスト</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>順序リスト</h4>
<ol>
	<li>アイテム　1</li>
	<li>アイテム　2</li>
	<li>アイテム　3</li>
	<li>アイテム　4</li>
</ol>
<h4>無序列表</h4>
<ul>
	<li>アイテム　1</li>
	<li>アイテム　2</li>
	<li>アイテム　3</li>
	<li>アイテム　4</li>
</ul>
<h4>未定義のスタイルリスト</h4>
<ul　class="list-unstyled">
	<li>アイテム　1</li>
	<li>アイテム　2</li>
	<li>アイテム　3</li>
	<li>アイテム　4</li>
</ul>
<h4>内線リスト</h4>
<ul　class="list-inline">
	<li>アイテム　1</li>
	<li>アイテム　2</li>
	<li>アイテム　3</li>
	<li>アイテム　4</li>
</ul>
<h4>定義リスト</h4>
<dl>
	<dt>説明　1</dt>
	<dd>アイテム　1</dd>
	<dt>説明　2</dt>
	<dd>アイテム　2</dd>
</dl>
<h4>水平な定義リスト</h4>
<dl　class="dl-horizontal">
	　<dt>説明　1</dt>
	　<dd>アイテム　1</dd>
	　<dt>説明　2</dt>
	　<dd>アイテム　2</dd>
</dl>
</body>
</html>
テストをしてみる ‹/›

以下の結果が示されています：

更多レイアウトクラス

以下の表はBootstrapの更多のレイアウトクラスの例を提供しています：

クラス説明例
.leadパラグラフをハイライト表示試してみてください
.text-leftテキストを左揃えに設定試してみてください
.text-rightテキストを右揃えに設定試してみてください
.text-nowrapスクリーン外のパラグラフの部分は改行されません試してみてください
.text-uppercaseテキストを大文字に設定試してみてください
.initialism要素 <abbr> で表示されるテキストは小さなフォントで表示され、小文字を大文字に変換することができます試してみてください
.list-unstyledデフォルトのリストスタイルを削除し、リストアイテムを左対齐にします( <ul>および<ol>内)。このクラスは直接の子リストアイテムにのみ適用されます。 　 　(ネストされたリストアイテムを削除する必要がある場合は、ネストされたリスト内でこのスタイルを使用する必要があります)試してみてください
.dl-horizontalこのクラスはフロートとオフセットを設定し、<dl>要素および<dt>要素に適用されます。具体的な実装については、サンプルを参照してください。試してみてください
BootstrapコードBootstrapグリッドシステム