先日の記事「Bootstrapのグリッドシステムの基本な使い方（翻訳版）」で、Bootstrapのファイルのダウンロードからファイルのセットアップ、グリッドシステムの基本的な使い方まで紹介しました。
次のステップとして、ベースのCSSを使ってさまざまな要素を実装してみましょう。

Base CSS and Navigation Systems in Bootstrap

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

• BootstrapのベースのCSS
• 見出し（hx）を実装する
• 「small」を使って実装
• 引用（blockquote）を実装する
• 連絡先情報（address）を実装する
• コード（code）を実装する
• 整列のclassを実装する
• 強調のclassを実装する
• フォーム（form）を実装する
• テーブル（table）を実装する
• 画像（img）を実装する
• ナビゲーションバーを実装する

BootstrapのベースのCSS

ここで使用するのはBootstrapのベースのCSSで、見出し、パラグラフ、フォーム、テーブルなど、Webページでよく使用するエレメントの実装方法を紹介します。

Bootstrapのファイル構成

使用するファイルは「bootstrap.css」または、そのファイルをミニファイした「bootstrap.min.css」です。

Bootstrapで見出し（hx）を実装する

標準的なHTMLと同様に、Bootstrapでも見出しの各レベルに応じて異なるサイズのものが用意されています。サイズは、下記の通りです。

• 見出し レベル1 <h1>

  38px (デフォルトのフォントサイズ: 14px*2.70)

• 見出し レベル2 <h2>

  32px (デフォルトのフォントサイズ: 14px*2.25)

• 見出し レベル3 <h3>

  24px (デフォルトのフォントサイズ: 14px*1.70)

• 見出し レベル4 <h4>

  18px (デフォルトのフォントサイズ: 14px*1.25)

• 見出し レベル5 <h5>

  14px (デフォルトのフォントサイズ: 14pxと同じ)

• 見出し レベル6 <h6>

  12px (デフォルトのフォントサイズ: 14px*0.85)

HTML

[html]

This is H1

This is H2

This is H3

This is H4

This is H5

This is H6

[/html]

下記のように表示されます。

Bootstrapで「small」を使って実装

small要素は「small print」と呼ばれ、主に法的な但し書きなどのために使用されます。

HTML

[html]

[/html]

上記のコードはp要素にsmall要素を使ったコードで、デフォルトで12pxのサイズを継承します。

small要素は見出しに使用することもできます。

• 見出し レベル1 <h1>の中にsmall

  38pxだったフォントサイズが、24pxに

• 見出し レベル2 <h2>の中にsmall

  32pxだったフォントサイズが、18pxに

• 見出し レベル3 <h3>の中にsmall

  24pxだったフォントサイズが、14pxに

• 見出し レベル4 <h4>の中にsmall

  18pxだったフォントサイズが、デフォルトのフォントサイズ: 14pxに

Bootstrapで引用（blockquote）を実装する

引用は通常、外部の情報提供者から引用したテキストを強調して表示します。Bootstrapのデフォルトではテキストの左側に5pxのボーダーが表示されます。

HTML

[html]

Great minds discuss ideas; average minds discuss events; small minds discuss people.

Eleanor Roosevelt Ideas, Minds and Average

[/html]

下記のように表示されます。

Bootstrapで連絡先情報（address）を実装する

連絡先情報はHTMLのaddress要素で実装します。Bootstrapではシンプルなデザインで表示されます。

HTML

[html]

Reach to Us

#123 St. Kansas City, MO
+34 1234 5678
name@email.com

[/html]

下記のように表示されます。

Bootstrapでコード（code）を実装する

コード要素は通常、HTMLや他の言語などのコンピュータのコードに使用します。Bootstrapでcode要素を使用する時は、pre要素と一緒に記述します。コードはエスケープして記述する必要があります（例: 「<」は「&lt;」、「>」は「&gt;」）。

HTML

[html]
The <code> element

[/html]

下記のように表示されます。

Bootstrapで整列のclassを実装する

Bootstrapではテキストを整列させるために3つのclassが用意されています。

• text-left

  テキストを左に揃える

• text-right

  テキストを右に揃える

• text-center

  テキストを中央に揃える

• text-justify

  テキストを均等揃えに揃える

Bootstrapで強調のclassを実装する

Bootstrapではテキストを強調させるために6つのclassが用意されています。

• text-muted

  テキストのカラーを明るいグレーに変更

• text-primary

  テキストのカラーをスカイブルーに変更

• text-success

  テキストのカラーをグリーンに変更

• text-info

  テキストのカラーをブルーに変更

• text-warning

  テキストのカラーをオレンジに変更

• text-danger

  テキストのカラーをレッドに変更

HTML

[html]

This is muted

This is primary

This is success

This is info

This is warning

This is danger

[/html]

下記のように表示されます。

Bootstrapでフォーム（form）を実装する

Bootstrapではフォームは、標準（normal）とインライン（inline）と水平（horizontal）の3つのスタイルが用意されています。

標準（normal）スタイルのフォーム

標準スタイルのフォームではform要素にclassを特に使用する必要はありません。

HTML

[html]

Email

Password

Browse File

This is a checkbox

Log-in!

[/html]

下記のように表示されます。
「.form-group」で囲まれた要素は適度なスペースでまとめられて表示されます。

インライン（inline）スタイルのフォーム

フォームのスタイルをインラインにするには、form要素に「.form-inline」を使用します。

HTML

[html]

Your Name

Your Email

Submit!

[/html]

下記のように表示されます。

水平（horizontal）スタイルのフォーム

フォームのスタイルを水平にするには、form要素に「.form-horizontal」を使用します。

HTML

[html]

Name

Email

Check me!

Sign Me In!

[/html]

下記のように表示されます。
グリッドのclassを加えることで、ラベルを揃えています。

また、span要素を使いアイコンのclassを加えることで、アイコンを簡単に利用できます。

HTML

[html]

[/html]

下記のように表示されます。

Bootstrapでテーブル（table）を実装する

Bootstrapではテーブルに5つのスタイルが用意されています。

• Basic

  水平な区切りだけでシンプルなレイアウトのテーブルで、table要素に「.table」を加えます。

• Striped rows

  水平にストライプ柄のレイアウトのテーブルで、table要素に「.table-striped」を加えます。

• Bordered table

  それぞれのサイドにボーダーを表示する典型的なテーブルで、table要素に「.table-bordered」を加えます。

• Hover rows

  Basicなスタイルでセルのホバー時に列をハイライトするテーブルで、table要素に「.table-hover」を加えます。

• Condensed table

  セルのスペースとパディングをコンパクトにしたテーブルで、table要素に「.table-condensed」を加えます。

HTML

[html]

Web Developer's Name	Phone	Email
Rick Meyer	(123) 456-7890 x10	rickmeyer@email.com
James Patir	(123) 456-7890 x11	james@email.com
Roderick Lovegood	(123) 456-7890 x12	roderick@email.com

[/html]

下記のように表示されます。
「.table-striped」を使ったストライプ柄のテーブルで、背景カラーを変更する時はLESSの「@table-bg」や「@table-bg-accent」の値を変更します。

Bootstrapで画像（img）を実装する

Bootstrapではimg要素に3つのスタイルが用意されています。

• img-rounded

  画像を角丸でスタイルします。

• img-circle

  画像をサークルでスタイルします。

• img-thumbnail

  画像にパディングとボーダーを加えてスタイルします。

レスポンシブ用として「.img-responsive」が用意されており、これをIE8-10でも使えるようにするにはimg要素に「width: 100% \9;」を加えます。

HTML

[html]

[/html]

左から、角丸、サークル、サムネイルの順です。

Bootstrapでナビゲーションバーを実装する

ナビゲーションバーはBootstrapのレスポンシブ用のコンポーネントの一つで、ナビゲーションヘッダやコンテナの役割をします。小さいスクリーンでは独立したバーで表示されます。

このナビゲーションバーにはメニューだけでなく、フォームや検索ボックスやドロップダウンメニューを加えることができます。

HTML

[html]

[/html]

Bootstrapではアクセシビリティを確保するためにナビゲーションを定義する必要があります。「.navbar」に続いて「.navbar-inverse」「.navbar-fixed-top」を使用します。「.navbar-inverse」を加えるのは、メニューにブラックの背景とホワイトのテキストを加え、「.navbar-fixed-top」をページをスクロールした際に固定位置に表示させます。

次にdiv要素に「.navbar-header」を与え、その中のa要素に「.navbar-brand」を与えました。

ナビゲーションをレスポンシブ対応にするために、「.navbar-collapse」と「.collapse」を設定します。「.navbar-toggle」は「data-toggle」と「data-target」の2つのデータ要素を可能にします。メニューに使用するリンクを加えるためにリストを使い、「.nav」と「.navbar-nav」を与えます。

最後のステップとして、「.navbar-form」で検索フォームを加え、右側にシンプルな検索バーを加えました。