メインコンテンツへスキップ

CSS

Bootstrap3の使い方をBootstrap2.xからの変更箇所を交えて解説しています。

概要（Overview）

Bootstrapの基盤の主要部分について、より良く、より速く、より強力なWeb開発へのアプローチを含めて取得。

HTML5のdoctypeを使用（HTML5 doctype）

Bootstrapは、HTML5のdoctypeの使用を必要とする特定のHTML要素とCSSプロパティを使用。すべてのプロジェクトの始めにそれを組み込む。

<!DOCTYPE html>
<html lang="ja">
	...
</html>

※英語のサイトの場合は lang="en"、日本語のサイトの場合は lang="ja" となる。

モバイル・ファースト（Mobile first）

Bootstrap2では、フレームワークの主要な側面に、オプションのモバイルフレンドリーなスタイルを追加した。Bootstrap3では、最初からモバイルフレンドリーになるようにプロジェクトを書き直した。オプションのモバイルスタイルを追加するのではなく、すぐに中核として焼き付けられている。実際、Bootstrapはモバイル・ファースト。モバイルファーストスタイルは、別々のファイルではなく、ライブラリ全体で発見可能。

レンダリングとズームの調整を正しく行うには、<head>にビューポートメタタグを追加。

<meta name="viewport" content="width=device-width, initial-scale=1">

ビューポートメタタグにuser-scalable=noを追加すると、モバイルデバイスのズーム機能を無効にすることが可能。これにより、ズームが無効になる。これは、ユーザーがスクロールできるだけで、サイトがネイティブアプリケーションのように感じられる。全体的には、すべてのサイトでこれを推奨しないので、注意すること！

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Bootstrapは、基本的な全体的表示、文字の体裁、リンクのスタイルを設定。 具体的には：

  • bodyにbackground-color: #fff;を設定
  • @font-family-base, @font-size-base, @line-height-baseの属性を印刷ベースとして使用
  • @link-colorを使って全体的なリンクの色を設定し、:hoverにのみリンクの下線を適用

これらのスタイルはscaffolding.lessの中で探し出すことが可能。

Normalize.css

ブラウザ間のレンダリングを改善するために、Nicolas GallagherとJonathan NealのプロジェクトであるNormalize.cssを使用。

コンテナ（Containers）

Bootstrapには、サイトのコンテンツを囲み、グリッドシステムを格納するための要素が必要。プロジェクトで使用する2つのコンテナのいずれかが選択可能。paddingなどにより、どちらのコンテナも入れ子は不可。

1. 固定幅のコンテナ

レスポンシブな固定幅のコンテナには.containerを使用。

見本

ヘッダの表示
サイドバーの表示
メインの表示

設定例

<div class="container">
	...
</div>

2. 全幅のコンテナ v3.1.0復活

ビューポートの幅全体に広がる幅広のコンテナには.container-fluidを使用。

見本

ヘッダの表示
サイドバーの表示
メインの表示

設定例

<div class="container-fluid">
	...
</div>

【設定】

  • 固定幅レイアウト：div.containerでコンテンツを囲む
  • 全幅レイアウト：div.container-fluidでコンテンツを囲む

【変更履歴】

  • 【3.0.1】.container使用時の幅が最小幅より幅固定に
  • 【3.1.0】全幅レイアウト.container-fluidが復活

【Bootstrap2.3.2との変更箇所】

  • .container-fluidは一旦廃止⇒v3.1.0で復活

グリッドシステム（Grid system）

Bootstrapには、デバイスまたはビューポートのサイズが増加するにつれて最大12列まで適切に拡大する、レスポンシブ対応のモバイル・ファーストの可変グリッドシステムが組み込まれている。簡単なレイアウトオプション用の定義済みのクラスと、より意味のあるレイアウト生成用の強力なmixinが組み込まれている。

前置き（Introduction）

グリッドシステムは、コンテンツを格納する一連の行と列を使用してページレイアウトを作成するために使用される。Bootstrapグリッドシステムの仕組みは次のとおり：

  • 適切な配置と余白のためには、行を.container（固定幅）または.container-fluid（全幅）内に配置する必要がある。
  • 行を使用して、列の水平グループを作成。
  • コンテンツは列内に配置し、列のみを行の直下の子にすることが可能。
  • .rowと.col-xs-4のような事前定義されたグリッドクラスは、グリッドレイアウトをすばやく作成するために利用可能。より少ないmixinは、より意味のあるレイアウトにも使用可能。
  • 列は、余白（padding）を介して左右脇の余白（gutters）（列コンテンツ間の隙間）を作成。その余白は、.rowsの負のマージンを介して最初と最後の列の行で相殺される。
  • 負のマージンは、以下の例が驚くほどの理由です。グリッド列内のコンテンツはグリッド以外のコンテンツに並べられるようになっている。
  • グリッド列は、使用可能な12の列の数を指定することによって作成される。例えば、3つの等幅列にするには3つの.col-xs-4を使用。
  • 1つの行に12個以上の列が配置されている場合、余分な列の各グループは1つの単位として新しい行に折り返される。
  • グリッドクラスは、画面幅がブレークポイントサイズ以上のデバイスに適用され、より小さいデバイスを対象とするグリッドクラスを再定義する。従って、例えば任意の.col-md-*クラスを要素に適用するだけで、中型デバイスのスタイルに影響を与えるだけでなく、.col-lg-*クラスが存在しない場合は大型デバイスにも影響する。

これらの原則をコードに適用する例を見るように。

メディアクエリ（Media queries）

Lessファイルでは、グリッドシステムにキーブレークポイントを作成するために、次のメディアクエリを使用。

/* 極小デバイス (携帯電話, 768px 未満) */
/* ここはBootstrapのデフォルトであるため、メディアクエリはなし */

/* 小デバイス (タブレット, 768px 以上) */
@media (min-width: @screen-sm-min) { ... }

/* 中デバイス (デスクトップ, 992px 以上) */
@media (min-width: @screen-md-min) { ... }

/* 大デバイス (ワイド・デスクトップ, 1200px 以上) */
@media (min-width: @screen-lg-min) { ... }

これらのメディアクエリを拡張して、幅の狭いデバイスにCSSを制限するmax-widthを組み込むことがある。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

グリッドの設定（Grid options）v3.0設定変更

Bootstrap3のグリッドシステムが、複数のデバイスでどのように動作するか、以下の表で確認。

デバイスの幅 極小
モバイルサイズ
<480px		 小
タブレットサイズ
≥768px		 中
デスクトップサイズ
≥992px		 大
大画面サイズ
≥1200px
グリッド行動 常に水平 開始は折り畳み、ブレークポイントより上では水平
.container使用時の幅
（v3.0.1より幅固定に） 		なし（自動） 750px
v3RC1の728px、初期v3RC2の720pxより変更		 970px
初期v3RC2の940pxより変更		 1170px
初期v3RC2では1140pxに変更されたが途中で戻る
クラス名 .col-xs- .col-sm- .col-md- .col-lg-
列の数 12
列の幅 自動 ～62px ～81px ～97px
左右脇の余白幅 30px（それぞれの側に15pxずつ）
入れ子 可能
空白列 可能
順序変更 可能

定義済みクラス（Example: Stacked-to-horizontal）v3.0設定変更

一組の.col-md-*グリッドクラスを使用すると、デスクトップ（中）以上のデバイスでは水平に並び、モバイルデバイスとタブレットデバイスでは積み重ねを開始する基本的なグリッドシステムが作成可能。グリッド列を任意の.rowに配置。

見本 見やすいよう色を付けています

●12列で表示

1列目: .col-md-1
2列目: .col-md-1
3列目: .col-md-1
4列目: .col-md-1
5列目: .col-md-1
6列目: .col-md-1
7列目: .col-md-1
8列目: .col-md-1
9列目: .col-md-1
10列目: .col-md-1
11列目: .col-md-1
12列目: .col-md-1

●2:1で表示

1列目: .col-md-8
2列目: .col-md-4

●1:1:1で表示

1列目: .col-md-4
2列目: .col-md-4
3列目: .col-md-4

●1:1で表示

1列目: .col-md-6
2列目: .col-md-6

Bootstrap2.3.2の設定例 赤背景が変更箇所

<!-- 12列で表示 -->
<div class="row">
	<div class="span1">1列目:...</div>
	<div class="span1">2列目:...</div>
	<div class="span1">3列目:...</div>
	<div class="span1">4列目:...</div>
	<div class="span1">5列目:...</div>
	<div class="span1">6列目:...</div>
	<div class="span1">7列目:...</div>
	<div class="span1">8列目:...</div>
	<div class="span1">9列目:...</div>
	<div class="span1">10列目:...</div>
	<div class="span1">11列目:...</div>
	<div class="span1">12列目:...</div>
</div>

<!-- 2:1で表示 -->
<div class="row">
　<div class="span8">1列目:...</div>
　<div class="span4">2列目:...</div>
</div>

<!-- 1:1:1で表示 -->
<div class="row">
	<div class="span4">1列目:...</div>
	<div class="span4">2列目:...</div>
	<div class="span4">3列目:...</div>
</div>

<!-- 1:1で表示 -->
<div class="row">
	<div class="span6">1列目:...</div>
	<div class="span6">2列目:...</div>
</div>

Bootstrap3.xの設定例 緑背景が変更箇所

<!-- 12列で表示 -->
<div class="row">
	<div class="col-md-1">1列目:...</div>
	<div class="col-md-1">2列目:...</div>
	<div class="col-md-1">3列目:...</div>
	<div class="col-md-1">4列目:...</div>
	<div class="col-md-1">5列目:...</div>
	<div class="col-md-1">6列目:...</div>
	<div class="col-md-1">7列目:...</div>
	<div class="col-md-1">8列目:...</div>
	<div class="col-md-1">9列目:...</div>
	<div class="col-md-1">10列目:...</div>
	<div class="col-md-1">11列目:...</div>
	<div class="col-md-1">12列目:...</div>
</div>

<!-- 2:1で表示 -->
<div class="row">
	<div class="col-md-8">1列目:...</div>
	<div class="col-md-4">2列目:...</div>
</div>

<!-- 1:1:1で表示 -->
<div class="row">
	<div class="col-md-4">1列目:...</div>
	<div class="col-md-4">2列目:...</div>
	<div class="col-md-4">3列目:...</div>
</div>

<!-- 1:1で表示 -->
<div class="row">
	<div class="col-md-6">1列目:...</div>
	<div class="col-md-6">2列目:...</div>
</div>

【設定】

  • div.row > div.col-{breakpoint}-*（以下の「クラスの種類」から選択）
  • *は1行につき合計が12になるように指定（12を超える場合は列の折り返しを参照）

【Bootstrap2.3.2との変更箇所】

  • .span* ⇒ .col-* ⇒ .col-{breakpoint}-*（v3RC1の途中）（従来の.span*は.col-md-*として使用）
  • 列と列の間に隙間がなくなった

クラスの種類 *の数値は1～12

デバイスの幅 極小
モバイルサイズ
<768px		 小
タブレットサイズ
≥768px		 中
デスクトップサイズ
≥992px		 大　v3RC2新設
大画面サイズ
≥1200px
全サイズに適用 .col-xs-*
v3RC1の.col-*より変更
768px以上に適用 .col-sm-*
992px以上に適用 .col-md-*
v3RC2新設
1200px以上に適用 .col-lg-*
v3RC1のビューポートの幅992px以上より変更

グリッドレイアウト（Example: Fluid container）v3.1.0一部変更

一番外側の.containerを.container-fluidに変更することで、固定幅のグリッドレイアウトを全幅レイアウトに変更可能。

見本 別タブで表示します

●固定幅レイアウト

ココを押して下さい

●全幅レイアウト

ココを押して下さい

Bootstrap2.3.2の設定例 赤背景が変更箇所

<!-- 固定幅レイアウト -->
<div class="container">
	<div class="row">
		<div class="span2">
		サイドバーの表示
		</div>
		<div class="span10">
		メインの表示
		</div>
	</div>
</div>

<!-- 全幅レイアウト -->
<div class="container-fluid">
	<div class="row-fluid">
		<div class="span2">
		サイドバーの表示
		</div>
		<div class="span10">
		メインの表示
		</div>
	</div>
</div>

Bootstrap3.xの設定例 緑背景が変更箇所

<!-- 固定幅レイアウト -->
<div class="container">
	<div class="row">
		<div class="col-md-2">
		サイドバーの表示
		</div>
		<div class="col-md-10">
		メインの表示
		</div>
	</div>
</div>

<!-- 全幅レイアウト -->
<div class="container-fluid">
	<div class="row">
		<div class="col-md-2">
		サイドバーの表示
		</div>
		<div class="col-md-10">
		メインの表示
		</div>
	</div>
</div>

【設定】

  • 固定幅レイアウト：div.container > div.row
  • 全幅レイアウト：div.container-fluid > div.row

【変更履歴】

  • 【3.1.0】全幅レイアウト.container-fluidが復活

【Bootstrap2.3.2との変更箇所】

  • 全幅レイアウト：div.container-fluid > div.row-fluid ⇒ div.container-fluid > div.row（.row-fluidは.rowに統合）

ビューポートの幅によって列の指定を変える

モバイルとデスクトップ（Example: Mobile and desktop）

小型のデバイスで参照するときは列を積み重ねたいなら、列に .col-xs-* と .col-md-* を追加して、極小と中デバイスのグリッドクラスを使用すること。すべての動作でより良く見える方法については、以下の例に記載。

見本 見やすいよう色を付けています

●極小/小サイズでは列を積み重ねて表示、中/大サイズでは2:1で表示

1列目: .col-xs-12 .col-md-8
2列目: .col-xs-6 .col-md-4

●極小/小サイズでは1:1+積み重ねで表示、中/大サイズでは1:1:1で表示

1列目: .col-xs-6 .col-md-4
2列目: .col-xs-6 .col-md-4
3列目: .col-xs-6 .col-md-4

●常に1:1で表示

1列目: .col-xs-6
2列目: .col-xs-6

設定例

<!-- 極小/小サイズでは列を積み重ねて表示、中/大サイズでは2:1で表示 -->
<div class="row">
	<div class="col-xs-12 col-md-8">1列目:...</div>
	<div class="col-xs-6 col-md-4">2列目:...</div>
</div>

<!-- 極小/小サイズでは1:1+積み重ねで表示、中/大サイズでは1:1:1で表示 -->
<div class="row">
	<div class="col-xs-6 col-md-4">1列目:...</div>
	<div class="col-xs-6 col-md-4">2列目:...</div>
	<div class="col-xs-6 col-md-4">3列目:...</div>
</div>

<!-- 常に1:1で表示 -->
<div class="row">
	<div class="col-xs-6">1列目:...</div>
	<div class="col-xs-6">2列目:...</div>
</div>

モバイル、タブレット、デスクトップ（Example: Mobile, tablet, desktop）

タブレット用の.col-sm-*クラスを使用して、さらにダイナミックでパワフルなレイアウトが作成可能。

見本 見やすいよう色を付けています

●極小サイズでは列を積み重ねて表示、小サイズでは1:1で表示、中/大サイズでは2:1で表示

1列目: .col-xs-12 .col-sm-6 .col-md-8
2列目: .col-xs-6 .col-md-4

●極小サイズでは1:1+積み重ねで表示、小サイズ以上では1:1:1で表示

1列目: .col-xs-6 .col-sm-4
2列目: .col-xs-6 .col-sm-4
3列目: .col-xs-6 .col-sm-4

設定例

<!-- 極小サイズでは列を積み重ねて表示、小サイズでは1:1で表示、中/大サイズでは2:1で表示 -->
<div class="row">
	<div class="col-xs-12 col-sm-6 col-md-8">1列目:...</div>
	<div class="col-xs-6 col-md-4">2列目:...</div>
</div>

<!-- 極小サイズでは1:1+積み重ねで表示、小サイズ以上では1:1:1で表示 -->
<div class="row">
	<div class="col-xs-6 col-sm-4">1列目:...</div>
	<div class="col-xs-6 col-sm-4">2列目:...</div>
	<!-- オプション：コンテンツの高さが一致しない場合は、XS colsをクリア -->
	<div class="clearfix visible-xs-block"></div>
	<div class="col-xs-6 col-sm-4">3列目:...</div>
</div>

列の折り返し（Column grid-example-wrapping）

1つの行に12個以上の列が配置されている場合、余分な列の各グループは1つの単位として新しい行に折り返される。

見本 見やすいよう色を付けています

1列目: .col-xs-9
2列目: .col-xs-4
9 + 4 = 13 > 12 になるので、この列は1つの連続したユニットとして新しい行に折り返される
3列目: .col-xs-6
以降の列は新しい行に沿って継続

設定例

<div class="row">
	<div class="col-xs-9">1列目:...</div>
	<div class="col-xs-4">2列目:...</div>
	<div class="col-xs-6">3列目:...</div>
</div>

レスポンシブ列のリセット（Responsive column resets）

4つの階層のグリッドを使用可能にすると、特定のブレークポイントでは、列の長さが他の列よりも大きくなって列がきれいに表示されない問題が起きる。これを修正するには、.clearfixとレスポンシブ・ユーティリティクラスを組み合わせて使用。

見本 見やすいよう色を付けています

●極小サイズではclearfixが有効になる

1列目: .col-xs-6 .col-sm-3
この列だけ高さが異なる
2列目: .col-xs-6 .col-sm-3
3列目: .col-xs-6 .col-sm-3
4列目: .col-xs-6 .col-sm-3

※参考：clearfixなし（極小サイズで見ると違いがわかります）

1列目: .col-xs-6 .col-sm-3
この列だけ高さが異なる
2列目: .col-xs-6 .col-sm-3
3列目: .col-xs-6 .col-sm-3
4列目: .col-xs-6 .col-sm-3

設定例

<div class="row">
	<div class="col-xs-6 col-sm-3">1列目:...<br>この列だけ高さが異なる</div>
	<div class="col-xs-6 col-sm-3">2列目:...</div>
	<!-- 極小サイズではclearfixが有効になる -->
	<div class="clearfix visible-xs"></div>
	<div class="col-xs-6 col-sm-3">3列目:...</div>
	<div class="col-xs-6 col-sm-3">4列目:...</div>
</div>

レスポンシブ・ブレークポイントでの列クリアに加えて、空白列や順序変更もリセットする必要がある。

見本 見やすいよう色を付けています

●極小サイズでは積み重ねで表示、小サイズでは列の間に空白あり、中/大サイズでは1:1の表示

1列目: .col-sm-5 .col-md-6
2列目: .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0

●極小サイズでは積み重ねで表示、小サイズでは1:1の表示、中サイズでは列の間に空白あり、大サイズでは再び1:1の表示

1列目: .col-sm-6 .col-md-5 .col-lg-6
2列目: .col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0

設定例

<!-- 極小サイズでは積み重ねで表示、小サイズでは列の間に空白あり、中/大サイズでは1:1の表示 -->
<div class="row">
	<div class="col-sm-5 col-md-6">1列目:...</div>
	<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">2列目:...</div>
</div>

<!-- 極小サイズでは積み重ねで表示、小サイズでは1:1の表示、中サイズでは列の間に空白あり、大サイズでは再び1:1の表示 -->
<div class="row">
	<div class="col-sm-6 col-md-5 col-lg-6">1列目:...</div>
	<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">2列目:...</div>
</div>

左右脇の余白を削除（Remove gutters） v3.4.0新設

行に.row-no-guttersクラスを追加して、各列から左右脇の余白を削除。

見本 見やすいよう色を付けています

●極小/小サイズでは列を積み重ねて表示、中/大サイズでは2:1で表示

1列目: .col-xs-12 .col-md-8
2列目: .col-xs-6 .col-md-4

●極小/小サイズでは1:1+積み重ねで表示、中/大サイズでは1:1:1で表示

1列目: .col-xs-6 .col-md-4
2列目: .col-xs-6 .col-md-4
3列目: .col-xs-6 .col-md-4

●常に1:1で表示

1列目: .col-xs-6
2列目: .col-xs-6

設定例

<!-- 極小/小サイズでは列を積み重ねて表示、中/大サイズでは2:1で表示 -->
<div class="row row-no-gutters">
	<div class="col-xs-12 col-md-8">1列目:...</div>
	<div class="col-xs-6 col-md-4">2列目:...</div>
</div>

<!-- 極小/小サイズでは1:1+積み重ねで表示、中/大サイズでは1:1:1で表示 -->
<div class="row row-no-gutters">
	<div class="col-xs-6 col-md-4">1列目:...</div>
	<div class="col-xs-6 col-md-4">2列目:...</div>
	<div class="col-xs-6 col-md-4">3列目:...</div>
</div>

<!-- 常に1:1で表示 -->
<div class="row row-no-gutters">
	<div class="col-xs-6">1列目:...</div>
	<div class="col-xs-6">2列目:...</div>
</div>

空白列の指定（Offsetting columns） v3.0設定変更

.col-md-offset-*クラスを使用して列を右に移動する。これらのクラスは、列の左余白を*列だけ増加させる。例えば、.col-md-offset-4は4列分.col-md-4を移動する。

見本 見やすいよう色を付けています

●有効/空白/有効

1列目: .col-md-4
2列目: .col-md-4 .col-md-offset-4

●空白/有効/空白/有効

1列目: .col-md-3 .col-md-offset-3
2列目: .col-md-3 .col-md-offset-3

●空白/有効/空白

1列目: .col-md-6 .col-md-offset-3

Bootstrap2.3.2の設定例 赤背景が変更箇所

<!-- 有効/空白/有効 -->
<div class="row">
	<div class="span4">1列目:...</div>
	<div class="span4 offset4">2列目...</div>
</div>

<!-- 空白/有効/空白/有効 -->
<div class="row">
	<div class="span3 offset3">1列目:...</div>
	<div class="span3 offset3">2列目:...</div>
</div>

<!-- 空白/有効/空白 -->
<div class="row">
	<div class="span6 offset3">1列目:...</div>
</div>

Bootstrap3.xの設定例 緑背景が変更箇所

<!-- 有効/空白/有効 -->
<div class="row">
	<div class="col-md-4">1列目:...</div>
	<div class="col-md-4 col-md-offset-4">2列目:...</div>
</div>

<!-- 空白/有効/空白/有効 -->
<div class="row">
	<div class="col-md-3 col-md-offset-3">1列目:...</div>
	<div class="col-md-3 col-md-offset-3">2列目:...</div>
</div>

<!-- 空白/有効/空白 -->
<div class="row">
	<div class="col-md-6 col-md-offset-3">1列目:...</div>
</div>

【設定】

  • div.col-{breakpoint}-*に.col-{breakpoint}-offset-*（以下の「クラスの種類」から選択）を追加（その列の左側が空白になる）

【変更履歴】

  • 【3.0.1】.col-xs-offset-*が追加

【Bootstrap2.3.2との変更箇所】

  • .offset* ⇒ .col-offset-* ⇒ .col-{breakpoint}-offset-*（v3RC1の途中）（従来の.offset*は.col-md-offset-*として使用）

クラスの種類 *の数値は0～12

デバイスの幅 極小
モバイルサイズ
<768px		 小
タブレットサイズ
≥768px		 中
デスクトップサイズ
≥992px		 大　v3RC2新設
大画面サイズ
≥1200px
全サイズに適用 .col-xs-offset-*
v3.0.1新設
768px以上に適用 .col-sm-offset-*
992px以上に適用 .col-md-offset-*
v3RC2新設
1200px以上に適用 .col-lg-offset-*
v3RC1のビューポートの幅992px以上より変更

.col-*-offset-0クラスを使用して、下位グリッド階層の空白設定を再定義してクリアすることも可能。

見本 見やすいよう色を付けています

●極小サイズでは3列目が空白/有効/空白だが、小サイズ以上だとクリア

1列目: .col-xs-6 .col-sm-4
2列目: .col-xs-6 .col-sm-4
3列目: .col-xs-6 .col-xs-offset-3 .col-sm-4 .col-sm-offset-0

設定例

<!-- 極小サイズでは3列目が空白/有効/空白だが、小サイズ以上だとクリア -->
<div class="row">
	<div class="col-xs-6 col-sm-4">1列目:...</div>
	<div class="col-xs-6 col-sm-4">2列目:...</div>
	<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">3列目:...</div>
</div>

列の入れ子（Nesting columns）

既定のグリッドでコンテンツを入れ子にするには、既存の.col-sm-*の列内に新しい.rowと.col-sm-*の列のセットを追加する。入れ子になった行には、最大12サイズ以内の列を含む必要がある（12サイズの列をすべて使用する必要はない）。

見本 見やすいよう色を付けています

親の1列目: .col-sm-9
子の1列目: .col-xs-8 .col-sm-6
子の2列目: .col-xs-4 .col-sm-6
親の2列目: .col-sm-3

設定例

<div class="row">
	<div class="col-sm-9">
		親の1列目:...
		<div class="row">
			<div class="col-xs-8 col-sm-6">
				子の1列目:...
			</div>
			<div class="col-xs-4 col-sm-6">
				子の2列目:...
			</div>
		</div>
	</div>
	<div class="col-sm-3">
		親の2列目:...
	</div>
</div>

【設定】

  • div.row > div.rowの入れ子にする

【Bootstrap2.3.2との変更箇所】

  • Bootstrap2では子の列は親の列の列数を引き継ぐ（親の列が6列なら子の列は6列分しか指定できない）が、Bootstrap3では子の列は親の列の列数に関係なく新たに12列分指定可能。

列の順序変更（Column ordering） v3.0新設

.col-md-push-* と .col-md-pull-* クラスを使用して、組み込んだグリッド列の順序を簡単に変更。

見本 見やすいよう色を付けています

●2列目、1列目の順に表示

1列目: .col-md-9 .col-md-push-3
2列目: .col-md-3 .col-md-pull-9

設定例

<!-- 2列目、1列目の順に表示 -->
<div class="row">
	<div class="col-md-9 col-md-push-3">1列目:...</div>
	<div class="col-md-3 col-md-pull-9">2列目:...</div>
</div>

【設定】

  • div.row > [div.col-{breakpoint}-*.col-{breakpoint}-push-** + div.col-{breakpoint}-**.col-{breakpoint}-pull-*]（.col-{breakpoint}-push-*と.col-{breakpoint}-pull-*は以下の「クラスの種類」から選択）（*及び**の数値は一致させる）

【変更履歴】

  • .col-push-*/.col-pull-* ⇒ .col-{breakpoint}-push-*/.col-{breakpoint}-pull-*（v3RC1の途中）
  • 【3.0.1】.col-xs-push-*, .col-xs-pull-*が追加

クラスの種類 *の数値は0～12

デバイスの幅 極小
モバイルサイズ
<768px		 小
タブレットサイズ
≥768px		 中
デスクトップサイズ
≥992px		 大　v3RC2新設
大画面サイズ
≥1200px
全サイズに適用 .col-xs-push-*
.col-xs-pull-*
v3.0.1新設
992px以上に適用 .col-sm-push-*
.col-sm-pull-*
992px以上に適用 .col-md-push-*
.col-md-pull-*
v3RC2新設
1200px以上に適用 .col-lg-push-*
.col-lg-pull-*
v3RC1のビューポートの幅992px以上より変更

Less mixinと変数（Less mixins and variables）

Bootstrap3には、高速レイアウト用の定義済みのグリッドクラスに加えて、簡単な意味的レイアウトを素早く生成するために、より少ない変数とmixinが組み込まれている。

変数（Variables）

変数は、列の数、左右脇の余白の幅、列の移動を開始するメディアクエリポイントを決定。これらの関数を使用して、前述の定義済みのグリッドクラスを生成。また、下記のカスタムmixinも生成。

@grid-columns:							12;
@grid-gutter-width:					30px;
@grid-float-breakpoint:			768px;

mixin（Mixins）

mixinはグリッド変数と共に使用され、個々のグリッド列に対してセマンティックCSSを生成。

// 一連の列の囲みを作成
.make-row(@gutter: @grid-gutter-width) {
	// Then clear the floated columns
	.clearfix();

	@media (min-width: @screen-sm-min) {
		margin-left:	(@gutter / -2);
		margin-right: (@gutter / -2);
	}

	// 負のマージンが入れ子になった行の列のコンテンツを整列させる
	.row {
		margin-left:	(@gutter / -2);
		margin-right: (@gutter / -2);
	}
}

// 極小の列を生成
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
	position: relative;
	// 空のときに列が折り畳まれないようにする
	min-height: 1px;
	// paddingを介した内側の余白
	padding-left:	 (@gutter / 2);
	padding-right: (@gutter / 2);

	// 使用可能な列の数に基づいて幅を計算
	@media (min-width: @grid-float-breakpoint) {
		float: left;
		width: percentage((@columns / @grid-columns));
	}
}

// 小の列を生成する
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
	position: relative;
	// 空のときに列が折り畳まれないようにする
	min-height: 1px;
	// paddingを介した内側の余白
	padding-left:	 (@gutter / 2);
	padding-right: (@gutter / 2);

	// 使用可能な列の数に基づいて幅を計算する
	@media (min-width: @screen-sm-min) {
		float: left;
		width: percentage((@columns / @grid-columns));
	}
}

// 小の列の空白を生成する
.make-sm-column-offset(@columns) {
	@media (min-width: @screen-sm-min) {
		margin-left: percentage((@columns / @grid-columns));
	}
}
.make-sm-column-push(@columns) {
	@media (min-width: @screen-sm-min) {
		left: percentage((@columns / @grid-columns));
	}
}
.make-sm-column-pull(@columns) {
	@media (min-width: @screen-sm-min) {
		right: percentage((@columns / @grid-columns));
	}
}

// 中の列を生成する
.make-md-column(@columns; @gutter: @grid-gutter-width) {
	position: relative;
	// 空のときに列が折り畳まれないようにする
	min-height: 1px;
	// paddingを介した内側の余白
	padding-left:	 (@gutter / 2);
	padding-right: (@gutter / 2);

	// 使用可能な列の数に基づいて幅を計算する
	@media (min-width: @screen-md-min) {
		float: left;
		width: percentage((@columns / @grid-columns));
	}
}

// 中の列の空白を生成する
.make-md-column-offset(@columns) {
	@media (min-width: @screen-md-min) {
		margin-left: percentage((@columns / @grid-columns));
	}
}
.make-md-column-push(@columns) {
	@media (min-width: @screen-md-min) {
		left: percentage((@columns / @grid-columns));
	}
}
.make-md-column-pull(@columns) {
	@media (min-width: @screen-md-min) {
		right: percentage((@columns / @grid-columns));
	}
}

// 大の列を生成する
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
	position: relative;
	// 空のときに列が折り畳まれないようにする
	min-height: 1px;
	// paddingを介した内側の余白
	padding-left:	 (@gutter / 2);
	padding-right: (@gutter / 2);

	// 使用可能な列の数に基づいて幅を計算する
	@media (min-width: @screen-lg-min) {
		float: left;
		width: percentage((@columns / @grid-columns));
	}
}

// 大の列の空白を生成する
.make-lg-column-offset(@columns) {
	@media (min-width: @screen-lg-min) {
		margin-left: percentage((@columns / @grid-columns));
	}
}
.make-lg-column-push(@columns) {
	@media (min-width: @screen-lg-min) {
		left: percentage((@columns / @grid-columns));
	}
}
.make-lg-column-pull(@columns) {
	@media (min-width: @screen-lg-min) {
		right: percentage((@columns / @grid-columns));
	}
}

使用例（Example usage）

変数を独自のカスタム値に変更するか、mixinをデフォルト値で使用するだけ。ここでは、デフォルト設定を使用して2列のレイアウトを作成し、その間に隙間を置いた例を示す。

設定例

Less
.wrapper {
	.make-row();
}
.content-main {
	.make-lg-column(8);
}
.content-secondary {
	.make-lg-column(3);
	.make-lg-column-offset(1);
}
HTML
<div class="wrapper">
	<div class="content-main">...</div>
	<div class="content-secondary">...</div>
</div>

文字の体裁（Typography）

見出し（Headings）

すべてのHTML見出し<h1>～<h6>が利用可能。見出しのフォントスタイルを一致させたいが、テキストをインラインで表示したい場合は、.h1～.h6クラスも使用可能。

一般的な<small>タグまたは.smallクラスを使用して、見出しに軽い補助文を作成。

設定例

<!-- タグで設定 -->
<h*>見出し <small>補助文</small></h*>

<!-- クラスで設定 -->
<p class="h*">見出し <span class="small">補助文</span></p>

見出しの種類

見出し1 補助文：<h1>または.h1

見出し2 補助文：<h2>または.h2

見出し3 補助文：<h3>または.h3

見出し4 補助文：<h4>または.h4

見出し5 補助文：<h5>または.h5
見出し6 補助文：<h6>または.h6

【設定】

  • すべてHTMLの見出しに<h1>～<h6>タグが使用可能
  • 見出しのフォントスタイルを一致させた上でテキストもインラインで表示したい場合.h1～.h6クラスを使用
  • 補助文：<h*>タグまたは.h*内に<small>タグかspan.smallを入れる

段落文（Body copy）

Bootstrap3の全体のデフォルトのfont-sizeは14pxで、line-heightは1.428。これは<body>とすべての段落に適用される。さらに、<p>（段落）では、計算されたline-heightの半分（デフォルトで10px）の下余白を設定している。

リード文（Lead body copy）

段落を目立たせるには、.leadを追加。

見本

これがリード文の字体です。

これが標準の字体です。

文章の途中でリード文を入れることもできます。

設定例

<p class="lead">これがリード文の字体です。</p>

<p>文章の途中で<span class="lead">リード文を入れる</span>こともできます。</p>

【設定】

  • 段落の文章で.leadを入れる

文字の装飾（Inline text elements）

軽量なスタイルを持つHTMLのデフォルトの強調タグを使用。

装飾の種類

マーク<mark>：テキストをハイライトで表示する。

削除<del>：この行のテキストは、削除されたテキストとみなされる。

取消<s>：この行のテキストは、もはや適切でないように扱われる。

挿入<ins>：この行のテキストは、文書への挿入とみなされる。

下線<u>：この行のテキストは、強調とみなされる。

小さめの文字<small>/.small：小さめの文字のテキスト　クラス設定でもOK

太めの文字<strong>：太めの文字のテキスト

斜体<em>：Italic体のテキスト

設定例

<!-- マーク -->
テキストを<mark>ハイライト</mark>で表示する。

<!-- 削除 -->
<del>この行のテキストは、削除されたテキストとみなされる。</del>

<!-- 取消 -->
<s>この行のテキストは、もはや適切でないように扱われる。</s>

<!-- 挿入 -->
<ins>この行のテキストは、文書への挿入とみなされる。</ins>

<!-- 下線 -->
<u>この行のテキストは、強調とみなされる。</u>

<!-- 小さめの文字 -->
<small>小さめの文字のテキスト</small>　<span class="small">クラス設定でもOK</span>

<!-- 太めの文字 -->
<strong>太めの文字のテキスト</strong>

<!-- 斜体 -->
<em>Italic体のテキスト</em>

【設定】

  • マーク：テキストをハイライトで強調するために<mark>タグを使用
  • 削除：削除されたテキストブロックを示すために<del>タグを使用
  • 取消：もはや適切でないテキストブロックを示すために<s>タグを使用
  • 挿入：文書への挿入を示すために<ins>タグを使用
  • 下線：テキストを強調するために<u>タグを使用
  • 小さめの文字：標準に比べ85％のサイズでテキストを表示するために<small>タグまたは.smallクラスを使用
  • 太めの文字：より重いフォントでテキストを強調するために<strong>タグを使用
  • 斜体：イタリック体でテキストを強調するために<em>タグを使用（ブラウザによっては123やabcなど英数字のみ適用）

文字の配置（Alignment classes）v3.2.0一部追加

テキストをテキスト整列クラスでコンポーネントに簡単に整列させる。

設定例

<p class="text-{side}">...</p>

配置の種類

文字の左寄せ：.text-left

文字のセンタリング：.text-center

文字の右寄せ：.text-right

文字の均等割付：.text-justify v3.1.0新設

文字を折り返さない：.text-nowrap v3.2.0新設

【設定】

  • テキストに.text-{side}（上記の「配置の種類」から選択）を入れる
  • .text-nowrap（文字を折り返さない）はテーブルのセル内で使うと便利

【注意】

  • .text-justify（文字の均等割付）は、別途CSSでtext-justifyプロパティの指定をする必要がある
  • 全体の配置を設定する場合は要素の配置を参照

文字の変換（Transformation classes）v3.2.0新設

テキストの大文字小文字のクラスを使用してコンポーネント内のテキストを変換。

設定例

<!-- すべて小文字 -->
<p class="text-lowercase">Lowercased text.</p>

<!-- すべて大文字 -->
<p class="text-uppercase">Uppercased text.</p>

<!-- 最初の文字が小文字⇒大文字 -->
<p class="text-capitalize">Capitalized text.</p>

変換の種類

●すべて小文字：.text-lowercase

Lowercased text.

●すべて大文字：.text-uppercase

Uppercased text.

●最初の文字が小文字⇒大文字：.text-capitalize

Capitalized text.

【設定】

  • テキストに.text-{transform}（上記の「変換の種類」から選択）を入れる

【注意】

  • テキストが英文字のみ適用

省略語（Abbreviations）

ホバー上に展開されたバージョンを示す略語と略語用のHTMLの<abbr>要素の書式化された実装。title属性を持つ略語は、点線の下線とホバーでの補助カーソルを持ち、補助技術のユーザーに追加のコンテキストを提供。

見本

単語属性の省略形はattrです。

htmlはたいへんすばらしいものです。

設定例

<p>単語属性の省略形は<abbr title="Attribute">attr</abbr>です。</p>

<p><abbr title="HyperText Markup Language" class="initialism">html</abbr>はたいへんすばらしいものです。</p>

【設定】

  • 省略形や頭字語を表示するために<abbr>タグを使用
  • abbrにtitle属性で説明をつけると、その部分にカーソルを合わせたときに「？」のカーソルとともに説明がホバー表示される（ブラウザによる）
  • abbr.initialismにすると字体が若干小さめになり、英単語は全て大文字で表示される

アドレス（Addresses）

最も上位の製造元（または作品全体）の連絡先情報を表示。すべての行を<br>で終了して書式を保持。

見本

Twitter社
アメリカ合衆国 カルフォルニア州
サンフランシスコ市　フォルサム通り795番地　600号室
P: (123) 456-7890
フルネーム
first.last@example.com

設定例

<address>
	<strong>Twitter社</strong><br>
	アメリカ合衆国 カルフォルニア州<br>
	サンフランシスコ市　フォルサム通り795番地　600号室<br>
	<abbr title="電話">P:</abbr> (123) 456-7890
</address>
<address>
	<strong>フルネーム</strong><br>
	<a href="mailto:#">first.last@example.com</a>
</address>

【設定】

  • 現在の連絡先情報を表示するために<address>タグを使用
  • 各行の改行には<br>タグを使用

引用（Blockquotes）

ドキュメント内の別のソースからのコンテンツ・ブロックを引用する場合に使用。

引用の設定（Default blockquote）

引用符としてHTMLの周囲を<blockquote>で囲む。直接な引用の場合は、<p>を推奨。

見本

基本の引用文です。

設定例

<blockquote>
	<p>基本の引用文です。</p>
</blockquote>

【設定】

  • 文書の範囲内で別のソースから大量の内容を引用するために<blockquote>タグを使用
  • 引用文は直線状の引用符（"または'）のため<blockquote> > <p>を推奨

引用元の表示（Naming a source）v3.1.0設定変更

ソースを識別する<footer>を追加。<cite>に引用元の名前を囲む。

見本

引用文です。

文章の引用元が明示できます。

Bootstrap2.3.2（～3.0.3）の設定例 赤背景が変更箇所

<blockquote>
	<p>引用文です。</p>
	<small>文章の<cite title="引用元の名前">引用元</cite>が明示できます。</small>
</blockquote>

Bootstrap3.x（3.1.0～）の設定例 緑背景が変更箇所

<blockquote>
	<p>引用文です。</p>
	<footer>文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
</blockquote>

【設定】

  • <blockquote> > <footer>
  • さらに<footer> > <cite>にして、<cite>にtitle属性を入れると、その部分にカーソルを合わせたときに出典の追加情報がホバー表示される（ブラウザによる）

【Bootstrap2.3.2（～3.0.3）との変更箇所】

  • <blockquote> > <small> ⇒ <blockquote> > <footer>

引用の右寄せ（Alternate displays）v3.1.0設定変更

内容を右寄せしたいblockquoteには、.blockquote-reverseを追加。

見本

右寄せの引用文です。

文章の引用元が明示できます。

Bootstrap2.3.2（～3.0.3）の設定例 赤背景が変更箇所

<blockquote class="pull-right">
	<p>右寄せの引用文です。</p>
	<small>文章の<cite title="引用元の名前">引用元</cite>が明示できます。</small>
</blockquote>

Bootstrap3.x（3.1.0～）の設定例 緑背景が変更箇所

<blockquote class="blockquote-reverse">
	<p>右寄せの引用文です。</p>
	<footer>文章の<cite title="引用元の名前">引用元</cite>が明示できます。</footer>
</blockquote>

【設定】

  • <blockquote>に.blockquote-reverseを入れる

【Bootstrap2.3.2（～3.0.3）との変更箇所】

  • blockquote.pull-right ⇒ blockquote.blockquote-reverse

リスト（Lists）

箇条書きリスト（Unordered）

明示的に順序が関係しない項目のリスト。

見本

  • リスト1
  • リスト2
  • リスト3
    • 子リスト1
    • 子リスト2
    • 子リスト3
  • リスト4
  • リスト5
  • リスト6

設定例

<ul>
	<li>リスト1</li>
	...
	<ul>
		<li>子リスト1</li>
		...
	</ul>
	...
</ul>

【設定】

  • <ul> > <li>タグを使用

順序つきリスト（Ordered）

明示的に順序が重要な項目のリスト。

見本

  1. リスト1
  2. リスト2
  3. リスト3
    1. 子リスト1
    2. 子リスト2
    3. 子リスト3
  4. リスト4
  5. リスト5
  6. リスト6

設定例

<ol>
	<li>リスト1</li>
	...
	<ol>
		<li>子リスト1</li>
		...
	</ol>
	...
</ol>

【設定】

  • <ol> > <li>タグを使用

マークなしリスト（Unstyled） v3.0設定変更

リスト項目のデフォルトのlist-styleと左マージンを削除（直下の子のみ）。これは直下の子リスト項目にのみに適用。つまり、入れ子のリストにもクラスを追加する必要がある。

見本

  • リスト1
  • リスト2
  • リスト3
    • 子リスト1
    • 子リスト2
    • 子リスト3
  • リスト4
  • リスト5
  • リスト6

Bootstrap2.3.2の設定例 赤背景が変更箇所

<ul class="unstyled">
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<ul class="unstyled" style="margin-left:40px;">
		<li>子リスト1</li>
		<li>子リスト2</li>
		<li>子リスト3</li>
	</ul>
	<li>リスト4</li>
	<li>リスト5</li>
	<li>リスト6</li>
</ul>

Bootstrap3.xの設定例 緑背景が変更箇所

<ul class="list-unstyled">
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<ul class="list-unstyled" style="margin-left:40px;">
		<li>子リスト1</li>
		<li>子リスト2</li>
		<li>子リスト3</li>
	</ul>
	<li>リスト4</li>
	<li>リスト5</li>
	<li>リスト6</li>
</ul>

【設定】

  • <ul>または<ol>に.list-unstyledを入れる
  • 入れ子リストもマークなしにする場合は、同様に.list-unstyledを入れ、さらにmargin-leftの設定も入れる

【Bootstrap2.3.2との変更箇所】

  • .unstyled ⇒ .list-unstyled
  • <ul>だけでなく、<ol>でも設定可能に

横並びリスト（Inline） v3.0設定変更

すべてのリスト項目をdisplay：inline-blockと軽めのpaddingで1行に配置。

見本

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5
  • リスト6

Bootstrap2.3.2の設定例 赤背景が変更箇所

<ul class="inline">
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<li>リスト4</li>
	<li>リスト5</li>
	<li>リスト6</li>
</ul>

Bootstrap3.xの設定例 緑背景が変更箇所

<ul class="list-inline">
	<li>リスト1</li>
	<li>リスト2</li>
	<li>リスト3</li>
	<li>リスト4</li>
	<li>リスト5</li>
	<li>リスト6</li>
</ul>

【設定】

  • <ul>または<ol>に.list-inlineを入れる

【Bootstrap2.3.2との変更箇所】

  • .inline ⇒ .list-inline
  • <ul>だけでなく、<ol>でも設定可能に

定義リスト（Description）

関連する説明のある用語のリスト。

見本

リスト項目
リスト項目の説明
リスト項目
リスト項目の説明1
リスト項目の説明2
リスト項目がとても長い場合
リスト項目の説明1
リスト項目の説明2
リスト項目の説明3

設定例

<dl>
	<dt>リスト項目</dt>
		<dd>リスト項目の説明</dd>
	<dt>リスト項目</dt>
		<dd>リスト項目の説明1</dd>
		<dd>リスト項目の説明2</dd>
	<dt>リスト項目がとても長い場合</dt>
		<dd>リスト項目の説明1</dd>
		<dd>リスト項目の説明2</dd>
		<dd>リスト項目の説明3</dd>
</dl>

【設定】

  • 用語と関連する説明のリストを表示するために<dl> > <dt>《項目》 + <dd>《項目の説明》を使用

水平定義リスト（Horizontal description）

<dl>の用語と説明を並べて並べる。デフォルトの<dl>のように積み重ねられるが、ナビゲーションバーが展開されたときにも同様に展開される。

見本

リスト項目
リスト項目の説明
リスト項目
リスト項目の説明1
リスト項目の説明2
リスト項目がとても長い場合
リスト項目の説明1
リスト項目の説明2
リスト項目の説明3

設定例

<dl class="dl-horizontal">
	<dt>リスト項目</dt>
		<dd>リスト項目の説明</dd>
	<dt>リスト項目</dt>
		<dd>リスト項目の説明1</dd>
		<dd>リスト項目の説明2</dd>
	<dt>リスト項目がとても長い場合</dt>
		<dd>リスト項目の説明1</dd>
		<dd>リスト項目の説明2</dd>
		<dd>リスト項目の説明3</dd>
</dl>

【設定】

  • dlに.dl-horizontalを入れる

コード（Code）

コード表示（Inline code）

埋め込みのコードスニペットを<code>で囲む。

見本

プログラムコードを埋め込むには<code>を使います。

設定例

<p>プログラムコードを埋め込むには<code>&lt;code&gt;</code>を使います。</p>

【設定】

  • <code>タグを使用
  • <code>タグ内で<、>、&を使うときは、それぞれ&lt;、&gt;、&amp;にエスケープ処理をする

【変更履歴】

  • 【3.2.0】コードが続くようだと文章が折り返さない⇒折り返すようになる（white-space: nowrap;の指定が削除）

ユーザー入力（User input） v3.1.0新設

<kbd>を使用して、通常キーボードから入力されるインプットを示す。

見本

ユーザーが入力した内容を表示するにはユーザー入力のようにします。
タグを入れ子にするとユーザー入力のようになります。

設定例

ユーザーが入力した内容を表示するには<kbd>ユーザー入力</kbd>のようにします。
タグを入れ子にすると<kbd><kbd>ユーザー入力</kbd></kbd>のようになります。

【設定】

  • <kbd>タグを使用

【変更履歴】

  • 【3.3.0】<kbd>タグを入れ子にすると太字で表記

整形済みテキスト（Basic block）

複数行のコードには<pre>を使用。適切なレンダリングのために、コード内の< >をエスケープすること。

見本

<p>整形済みテキストは、HTMLソース中のスペースや改行をそのまま表示します。</p>
<p>このサイトの設定例のようにソースコードなどを表示する際にはとても便利です。</p>

設定例

<pre>&lt;p&gt;整形済みテキストは、HTMLソース中のスペースや改行をそのまま表示します。&lt;/p&gt;
&lt;p&gt;このサイトの設定例のようにソースコードなどを表示する際にはとても便利です。&lt;/p&gt;</pre>

必要に応じて .pre-scrollable クラスを追加すれば、最大の高さが340pxに設定され、y軸スクロールバーが提供される。

見本

テキストが長くなる場合は、スクロールできるようにしています。
これだと表示がダラダラ長くなることもありません。

【IT用語辞典バイナリより引用】

インターネットとは、TCP/IPを通信プロトコルとして世界中のコンピュータあるいはコンピュータネットワークを相互に接続している通信網のことである。

インターネットでは、各コンピュータに割り当てられたIPアドレスと呼ばれる識別番号を元に、ネットワークに接続されたコンピュータを一意に識別し、アクセスすることを可能としている。ただし、IPアドレスは単なる数字の羅列であって人間が識別することは容易でないため、IPアドレスをドメイン名へと変換して英数字などの文字情報で可能にするドメインネームシステム（DNS）が併用されている。

インターネットそのものについて特定の統括者や運営母体はないが、IPアドレスやドメイン名などの管理はICANNなどの管理団体が、技術や仕様の標準化はIETFが指揮をとっている。

インターネットには自由に参加できるが、利用するためにはインターネットの通信網に接続する必要がある。データセンターやインターネットサービスプロバイダ（ISP）各社は、主にインターネットエクスチェンジ（IX）を通じて相互接続している。一般ユーザーはISPと契約して、電話回線やADSL回線などを用いた通信をインターネットに接続させることにより、各家庭からのインターネット接続を実現している。

インターネットは通信プロトコルにTCP/IPを用いているが、ネットワーク構造のより上位に他の通信プロトコルを組み合わせることで、電子メールやファイル転送などのような、さまざまな通信サービスが提供されている。例えばWWWには主にHTTPが用いられており、電子メールにはSMTPやPOP、IMAPなどが、ネットニュースにはNNTP、インスタントメッセージングにはXMPPなどのプロトコルが用いられている。

ちなみに、WWWとインターネットの違いを挙げるとすれば、以下のように言うことができる。すなわち、WWWは、HTMLなどの文書フォーマットを用いてWebページの表現やWebページ同士のハイパーリンクを実現するシステムであり、電子メールと同様、インターネット上で実現されている仕組みの一種である。これに対して、インターネットは、WWWのシステムの土台となっているネットワークそのもののことである。

インターネットは誰に対しても開かれたネットワークである。インターネットの技術を応用して、LANなどの閉じたネットワーク環境として構築されたネットワークは、イントラネットと呼ばれる。インターネットとイントラネットの接続点には、外部からの悪意あるアクセスを防止する目的で、ファイヤーウォールなどが設置されることが多い。

インターネットの技術の発端は、1960年代終わりに米国国防総省によって構築されたコンピュータネットワークである「ARPAnet」が原型とされている。その後、学術研究を目的とするコンピュータネットワーク「NSFNet」が登場し、学術機関を中心としてネットワークが広がっていった。当初は電子メールや電子掲示板（BBS）が行われていたが、1991年にCERNからWWWの仕組みが発表され、90年代を通じて爆発的に普及していった。

日本では、1984年に村井純を中心とした学術機関のネットワーク「JUNET」が構築され、1988年にはWIDEプロジェクトが発足、1990年代中盤に至ると商用のISPも多数登場して一般家庭への普及が急速に進んだ。

今日、インターネットはPCだけでなく携帯電話や生活家電、家庭用ゲーム機などからも接続可能となっており、日常生活への浸透がますます進んでいる。

設定例

<pre class="pre-scrollable">
テキストが長くなる場合は、スクロールできるようにしています。
これだと表示がダラダラ長くなることもありません。

...
</pre>

【設定】

  • 複数行のコードを表示するために<pre>タグを使用
  • <pre>タグ内で<、>、&を使うときは、それぞれ&lt;、&gt;、&amp;にエスケープ処理をする
  • pre.pre-scrollableにすると、表示の高さの最大が340pxになり、縦方向のスクロールバーが表示される

【注意】

  • <pre>タグのみではテキストが入りきらない場合は折り返さないが、<pre><code>タグにすればwhite-space: pre-wrap;でテキストは折り返すようになる

【変更履歴】

  • 【3.1.0】テキストが入りきらない場合は折り返さずに横方向のスクロールバーが表示される（white-space: pre-wrap;の指定が削除）

変数（Variables）

変数を指示するには、<var>タグを使用。

見本

y = mx + b

設定例

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

【設定】

  • <var>タグを使用（基本的に斜体で表示）

【注意】

  • ブラウザによっては123やabcなど英数字のみ適用

サンプル出力（Sample output）

プログラムからのサンプル出力を表示するには、<samp> タグを使用。

見本

This text is meant to be treated as sample output from a computer program.
 

※標準の段落文（参考）

This text is meant to be treated as sample output from a computer program.

設定例

<samp>This text is meant to be treated as sample output from a computer program.</samp>

【設定】

  • <samp>タグを使用（基本的に等幅フォントで表示）

【注意】

  • ブラウザによっては123やabcなど英数字のみ適用

テーブル（Tables）

基本のテーブル（Basic example）

基本的なスタイル（軽めのpaddingや水平方向の線のみ）の場合は、ベースクラス.tableを任意の<table>に追加。それはとても余分なことのように思うかもしれないが、カレンダーや日付ピッカーのような他のプラグイン用のテーブルが広く使用されているため、カスタムのテーブルスタイルを分離することを選択した。

見本

テーブルの表題
# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル

設定例

<table class="table">
	<caption>テーブルの表題</caption>
	<thead>
		<tr>
			<th>#</th>
			<th scope="col">見出し</th>
			...
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>テーブルのセル</td>
			...
		</tr>
		...
	</tbody>
</table>

【設定】

  • table.table > [<thead> > <tr> > <th>]（見出し） + [<tbody> > <tr> > <td>]（コンテンツ）
    ※<table>の中に.tableを入れる

【アクセシビリティの設定】

  • 行（右）方向に対する見出しの<th>タグには、scope="row"を入れる
  • 列（下）方向に対する見出しの<th>タグには、scope="col"を入れる

【変更履歴】

  • 【3.3.0】表題（<caption>）のスタイルが追加
  • 【3.3.2】アクセシビリティの設定が追加

交互に行の色が変わるテーブル（Striped rows）

.table-stripedを使用して、<tbody> 内のテーブル行に縞ストライブを追加。

見本

# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル

設定例

<table class="table table-striped">
　...
</table>

【設定】

  • table.table に .table-striped を追加すると、<tbody> 内の行の背景色が交互に変わるようになる

縦線が入ったテーブル（Bordered table）

テーブルとセルのすべての辺に罫線用の .table-bordered を追加。

見本

# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル

設定例

<table class="table table-bordered">
　...
</table>

【設定】

  • table.tableに.table-borderedを追加

マウスオーバーで行の背景色がホバー表示するテーブル（Hover rows）

.table-hover を追加すると、<tbody> 内のテーブル行でホバー状態が有効になる。

見本

# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル

設定例

<table class="table table-hover">
　...
</table>

【設定】

  • table.table に .table-hover を追加すると、<tbody> 内の行にカーソルを合わせるとその行の背景色がかわるようになる

行間が狭いテーブル（Condensed table）

.table-condensed を追加して、セルのpaddingを半分にカットしてテーブルをコンパクトにする。

見本

# 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル

設定例

<table class="table table-condensed">
　...
</table>

【設定】

  • table.tableに.table-condensedを追加

行/セルの背景色（Contextual classes） v3.0一部変更

背景色クラスを使用して、表の行または個々のセルを色付る。

設定例

行の場合

<tr class="xxx">
	<td>...</td>
</tr>

セルの場合

<tr>
	<td class="xxx">...</td>
</tr>

背景色の種類 v3.0一部クラス変更

Active：.active v3.0新設
Success：.success
Info：.info v3.1.0復活
Warning：.warning
Danger：.danger v3.0名称変更
※標準（参考）

【設定】

  • 行全体（<tr>）、セル（<th>, <td>）に.xxx（上記の「背景色の種類」から選択）を入れる

【Bootstrap2.3.2との変更箇所】

  • Danger：.error ⇒ .danger
  • Active：.activeが新設
  • Info：.infoは一旦廃止⇒v3.1.0で復活
  • 行全体（<tr>）だけでなく、セル（<th>, <td>）でも設定可能に

レスポンシブテーブル（Responsive tables） v3RC2新設

.table を .table-responsive で囲むことでレスポンシブに対応したテーブルを作成し、小さめデバイス（768px以下）で水平にスクロールさせるようにする。768px以上のサイズでは、これらの表に違いは見られない。

見本

# 見出し 見出し 見出し 見出し 見出し 見出し
1 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
2 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル
3 テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル テーブルのセル

設定例

<div class="table-responsive">
	<table class="table">
	　...
	</table>
</div>

【設定】

  • div.table-responsive > table.table

フォーム（Forms）

※コントロールの前後にテキストやボタンをつける等の拡張フォームはインプットグループに移動

基本のフォーム（Basic example） v3.0設定変更

個々のフォームコントロールには、自動的にグローバルスタイルが適用される。.form-controlを使用するテキストの<input>, <textarea>, <select>要素はすべてwidth: 100%;に設定される。デフォルトでは ラベルとコントロールを.form-groupで囲んで最適な間隔を確保する。

見本

ファイルを選択して下さい

Bootstrap2.3.2の設定例 赤背景が変更箇所

<form>
	<fieldset>
		<legend>フォームの名前</legend>
		<!-- ラベルとコントロールの表示 -->
		<label for="Email">Eメール</label>
		<input type="email" id="Email" placeholder="Eメール">
		<label for="Password">パスワード</label>
		<input type="text" id="Password" placeholder="パスワード">
		<!-- ファイル選択の表示 -->
		<label for="File">ファイル</label>
		<input type="file" id="File">
		<p class="help-block">ファイルを選択して下さい</p>
		<!-- チェックボックスの表示 -->
		<label class="checkbox">
			<input type="checkbox"> 記憶する
		</label>
		<!-- 登録ボタンの表示 -->
		<button type="submit" class="btn">サインイン</button>
	</fieldset>

</form>

Bootstrap3.xの設定例 緑背景が変更箇所

<form>
	<!-- ラベルとコントロールの表示 -->
	<div class="form-group">
		<label for="Email">Eメール</label>
		<input type="email" class="form-control" id="Email" placeholder="Eメール">
	</div>
	<div class="form-group">
		<label for="Password">パスワード</label>
		<input type="password" class="form-control" id="Password" placeholder="パスワード">
	</div>
	<!-- ファイル選択の表示 -->
	<div class="form-group">
		<label for="File">ファイル</label>
		<input type="file" id="File">
		<p class="help-block">ファイルを選択して下さい</p>
	</div>
	<!-- チェックボックスの表示 -->
	<div class="checkbox">
		<label>
			<input type="checkbox"> 記憶する
		</label>
	</div>
	<!-- 登録ボタンの表示 -->
	<button type="submit" class="btn btn-default">サインイン</button>
</form>

【設定】

  • <fieldset>と<legend>の設定は不要に
  • <form> > {div.form-group > [label[for="ID名"]《ラベル》 + input.form-control[id="ID名"]《コントロール》] + .btn《ボタン》}
  • label[for="ID名"] + input.form-control[id="ID名"]（textarea.form-control[id="ID名"]、select.form-control[id="ID名"]）でラベルとコントロールを関連付ける

【変更履歴】

  • 【3.3.2】<form>にrole="form"の設定が不要に

【Bootstrap2.3.2との変更箇所】

  • <input>([type="file"]を除く）, <textarea>, <select>に.form-controlを指定（v3RC1の途中）
    ※.form-controlのコントロールの幅はwidth:100%に指定されるため、<input>, <textarea>, <select>に.col-{breakpoint}-*等の列幅を指定しても不能に（グリッド表記による幅の変更は可能）
  • ラベル（見出し）とコントロール部分はdiv.form-group（コントロールがチェックボックスの場合はdiv.checkbox、ラジオボタンの場合はdiv.radio）で囲む（v3RC2以降）

●.form-controlあり


※.form-controlなし（参考）



横並びフォーム（Inline form） v3.0設定変更

左寄せのインラインブロック・コントロールのフォーム（<form>でなくてもよい）にする場合は、.form-inlineを追加。これは、最低768px幅のビューポート内のフォームにのみ適用。

ラベルを表示する場合 v3.3.2新設

見本

設定例

<form class="form-inline">
	<div class="form-group">
		<label for="Name">名前</label>
		<input type="text" class="form-control" id="Name" placeholder="ブート太郎">
	</div>
	<div class="form-group">
		<label for="Email">Eメール</label>
		<input type="email" class="form-control" id="Email" placeholder="taro.boot@example.com">
	</div>
	<button type="submit" class="btn btn-default">送信</button>
</form>

ラベルを非表示にする場合

見本

Bootstrap2.3.2の設定例 赤背景が変更箇所

<form class="form-inline">
	<input type="email" class="input-small" placeholder="Eメール">
	<input type="password" class="input-small" placeholder="パスワード">
	<label class="checkbox">
		<input type="checkbox"> 記憶する
	</label>
	<button type="submit" class="btn">サインイン</button>
</form>

Bootstrap3.xの設定例 緑背景が変更箇所

<form class="form-inline">
	<div class="form-group">
		<label class="sr-only" for="Email">Eメール</label>
		<input type="email" class="form-control" id="Email" placeholder="Eメール">
	</div>
	<div class="form-group">
		<label class="sr-only" for="Password">パスワード</label>
		<input type="password" class="form-control" id="Password" placeholder="パスワード">
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox"> 記憶する
		</label>
	</div>
	<button type="submit" class="btn btn-default">サインイン</button>
</form>

インプットグループを使用する場合 v3.3.2新設

見本

$
.00

設定例

<form class="form-inline">
	<div class="form-group">
		<label class="sr-only" for="exampleInputAmount">金額（ドル）</label>
		<div class="input-group">
			<div class="input-group-addon">$</div>
			<input type="text" class="form-control" id="exampleInputAmount" placeholder="金額">
			<div class="input-group-addon">.00</div>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">現金送金</button>
</form>

【設定】

  • form.form-inline > {div.form-group > [label[for="ID名"]《ラベル》 + input.form-control[id="ID名"]《コントロール》]} + .btn《ボタン》
    ※.form-controlのコントロールの幅は自動で調節される
  • ユーザー補助用に必ず<label>でラベルをつけ、非表示にする場合は.sr-onlyを入れる
  • label[for="ID名"] > input.form-control[id="ID名"]（select.form-control[id="ID名"]）でラベルとコントロールを関連付ける

【変更履歴】

  • 【3.3.2】ラベルを表示する場合とインプットグループを使用する場合が追加

【Bootstrap2.3.2との変更箇所】

  • ビューポートの幅768px以上で適用（v3RC2）
  • 必ず<label>でラベルをつけ、非表示にするため.sr-onlyを指定（v3RC2）
  • <input>([type="file"]を除く）、<textarea>、 <select>に.form-controlを指定（v3RC1の途中）
    ※.form-controlのコントロールの幅は自動で調節される（v3RC2）

水平フォーム（Horizontal form）v3.0設定変更

Bootstrap3の定義済みグリッドクラスを使用して、フォーム（<form>でなくてもよい）に.form-horizontalを追加することによって、水平レイアウトのラベルとフォームコントロールのグループを整列させる。そうすることで.form-groupsがグリッド行として動作するようになる。したがって、.rowの必要はない。

見本

Bootstrap2.3.2の設定例 赤背景が変更箇所

<form class="form-horizontal">
	<div class="control-group">
		<label class="control-label" for="Email">Eメール</label>
		<div class="controls">
			<input type="email" id="Email" placeholder="Eメール">
		</div>
	</div>
	<div class="control-group">
		<label class="control-label" for="Password">パスワード</label>
		<div class="controls">
			<input type="password" id="Password" placeholder="パスワード">
		</div>
	</div>
	<div class="control-group">
		<div class="controls">
			<label class="checkbox">
				<input type="checkbox"> 記憶する
			</label>
			<button type="submit" class="btn">サインイン</button>
		</div>
	</div>
</form>

Bootstrap3.xの設定例 緑背景が変更箇所

<form class="form-horizontal">
	<div class="form-group">
		<label class="col-sm-2 control-label" for="Email">Eメール</label>
		<div class="col-sm-10">
			<input type="email" class="form-control" id="Email" placeholder="Eメール">
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label" for="Password">パスワード</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="Password" placeholder="パスワード">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<div class="checkbox">
				<label>
					<input type="checkbox"> 記憶する
				</label>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button type="submit" class="btn btn-default">サインイン</button>
		</div>
	</div>
</form>

【設定】

  • form.form-horizontal > 〔div.form-group > {label.control-label.col-sm-**[for="ID名"]《ラベル》 + [div.col-sm-* > input.form-control[id="ID名"]]《コントロール》} + [div.form-group > div.col-sm-offset-**.col-sm-* > .btn]《ボタン》〕
    ※ラベルとコントロールは.col-sm-*（グリッド表記）で設定
  • label.control-label[for="ID名"] + input.form-control[id="ID名"]（textarea.form-control[id="ID名"]、select.form-control[id="ID名"]）でラベルとコントロールを関連付ける

【Bootstrap2.3.2との変更箇所】

  • ビューポートの幅768px以上で適用
  • .control-group ⇒ .form-group
  • .controls ⇒ .col-sm-*（コントロールの幅は.col-sm-offset-*（空白時）や.col-sm-*を指定）
  • <input>([type="file"]を除く）、<textarea>、 <select>に.form-controlを指定（v3RC1の途中）

フォームコントロール（Supported controls）

フォームレイアウトの例でサポートされている標準フォームコントロールの例。

入力コントロール（Inputs）

最も一般的なフォームコントロール、テキストベースの入力フィールド。text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, colorなど、すべてのHTML5typeのサポートが組み込まれている。

見本

Bootstrap2.3.2の設定例 赤背景が変更箇所

<input type="text" placeholder="入力テキスト">

Bootstrap3.xの設定例 緑背景が変更箇所

<input type="text" class="form-control" placeholder="入力テキスト">

【設定】

  • input.form-controlを使用

【Bootstrap2.3.2との変更箇所】

  • .form-controlを指定（v3RC1の途中）
    ※.form-controlのコントロールの幅はwidth:100%に指定されるため、.col-{breakpoint}-*等の列幅を指定しても不能に（グリッド表記による幅の変更は可能）

テキストエリア（Textarea）

複数行のテキストをサポートするフォームコントロール。必要に応じてrowの属性を変更。

見本

Bootstrap2.3.2の設定例 赤背景が変更箇所

<textarea rows="3"></textarea>

Bootstrap3.xの設定例 緑背景が変更箇所

<textarea class="form-control" rows="3"></textarea>

【設定】

  • textarea.form-controlを使用
  • 高さはrows属性の数値で調整（横幅のcols属性は無効）

【Bootstrap2.3.2との変更箇所】

  • .form-controlを指定（v3RC1の途中）
    ※.form-controlのコントロールの幅はwidth:100%に指定されるため、.col-{breakpoint}-*等の列幅を指定しても不能に（グリッド表記による幅の変更は可能）

チェックボックス&ラジオボタン（Checkboxes and radios）

チェックボックスはリスト内の1つまたは複数のオプションを選択するためのものであり、ラジオボタンは多くのオプションから1つを選択するためのもの。

積み重ね（Default(stacked)）v3.0設定変更

見本


Bootstrap2.3.2の設定例 赤背景が変更箇所

<!-- チェックボックス -->
<label class="checkbox">
	<input type="checkbox" value="">
	オプション1
</label>
		 
<!-- ラジオボタン -->
<label class="radio">
	<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
	オプション1
</label>
<label class="radio">
	<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
	オプション2
</label>

Bootstrap3.xの設定例 緑背景が変更箇所

<!-- チェックボックス -->
<div class="checkbox">
	<label>
		<input type="checkbox" value="">
		オプション1
	</label>
</div>

<!-- ラジオボタン -->
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
		オプション1
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
		オプション2
	</label>
</div>

【設定】

  • チェックボックス：div.checkbox > <label> > input[type="checkbox"]
  • ラジオボタン：div.radio > <label> > input[type="radio"]

【Bootstrap2.3.2との変更箇所】

  • チェックボックス：label.checkbox ⇒ div.checkbox > <label>（v3RC2）
  • ラジオボタン：label.radio ⇒ div.radio > <label>（v3RC2）

横並び（Inline checkboxes and radios）v3.0設定変更

同じ行に表示されるコントロールには、一連のチェックボックスまたはラジオで.checkbox-inlineまたは.radio-inlineクラスを使用。

見本


Bootstrap2.3.2の設定例 赤背景が変更箇所

<!-- チェックボックス -->
<label class="checkbox inline">
	<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox inline">
	<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox inline">
	<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<!-- ラジオボタン -->
<label class="radio inline">
	<input type="radio" name="inlineRadios" id="inlineRadios1" value="option1" checked> 1
</label>
<label class="radio inline">
	<input type="radio" name="inlineRadios" id="inlineRadios2" value="option2"> 2
</label>
<label class="radio inline">
	<input type="radio" name="inlineRadios" id="inlineRadios3" value="option3"> 3
</label>

Bootstrap3.xの設定例 緑背景が変更箇所

<!-- チェックボックス -->
<label class="checkbox-inline">
	<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
	<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
	<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<!-- ラジオボタン -->
<label class="radio-inline">
	<input type="radio" name="inlineRadios" id="inlineRadios1" value="option1" checked> 1
</label>
<label class="radio-inline">
	<input type="radio" name="inlineRadios" id="inlineRadios2" value="option2"> 2
</label>
<label class="radio-inline">
	<input type="radio" name="inlineRadios" id="inlineRadios3" value="option3"> 3
</label>

【設定】

  • チェックボックス：label.checkbox-inline > input[type="checkbox"]
  • ラジオボタン：label.radio-inline > input[type="radio"]

【Bootstrap2.3.2との変更箇所】

  • チェックボックス：.checkbox.inline ⇒ .checkbox-inline
  • ラジオボタン：.radio.inline ⇒ .radio-inline

ラベルなし（Checkboxes and radios without label text）v3.3.0新設

<label>の中にテキストがなければ、inputは期待どおりに配置される。現在、横並びでないチェックボックスやラジオボタンでのみ動作可能。支援技術にラベルの形式（例：aria-labelを使用）を提供することを忘れないこと。

見本

設定例

<!-- チェックボックス -->
<div class="checkbox">
	<label>
		<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
	</label>
</div>

<!-- ラジオボタン -->
<div class="radio">
	<label>
		<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
	</label>
</div>

【設定】

  • <label>内にテキストを入れないようにする
    ※横並びのチェックボックスとラジオボタンには非対応

【アクセシビリティの設定】

  • ラベルテキストの代替として<input>に、aria-label属性（要素に対するラベル付け）を入れる

選択コントロール（Selects）

SafariやChromeの多くのネイティブセレクトメニューには、border-radiusのプロパティでは変更できない角丸がある。

multiple属性を持つ<select>コントロールの場合、複数選択のオプションがデフォルトで表示される。

見本


●複数選択

Bootstrap2.3.2の設定例 赤背景が変更箇所

<select>
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
</select>

<!-- 複数選択 -->
<select multiple="multiple">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
</select>

Bootstrap3.xの設定例 緑背景が変更箇所

<select class="form-control">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
</select>

<!-- 複数選択 -->
<select multiple class="form-control">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
</select>

【設定】

  • 選択で入力をするために<select>タグを使用
  • multiple属性（複数選択）にも対応

【Bootstrap2.3.2との変更箇所】

  • .form-controlを指定（v3RC1の途中）
    ※.form-controlのコントロールの幅はwidth:100%に指定されるため、.col-{breakpoint}-*等の列幅を指定しても不能に（グリッド表記による幅の変更は可能）
  • 複数選択の設定：multiple="multiple" ⇒ multipleのみに

静的テキスト（コントロールの代用テキスト）（Static control）v3RC1の途中新設⇒v3.3.0一部追加

フォーム内にフォームラベルの横にプレーンテキストを配置する必要がある場合は、<p>に.form-control-staticクラスを使用する。

見本

●水平フォーム

email@example.com

●横並びフォーム

email@example.com

設定例

<!-- 水平フォーム -->
<form class="form-horizontal">
	<div class="form-group">
		<label class="col-sm-2 control-label">Eメール</label>
		<div class="col-sm-10">
			<p class="form-control-static">email@example.com</p>
		</div>
	</div>
	<div class="form-group">
		<label class="col-sm-2 control-label" for="Password">パスワード</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="Password" placeholder="パスワード">
		</div>
	</div>
</form>

<!-- 横並びフォーム -->
<form class="form-inline">
	<div class="form-group">
		<label class="sr-only">Eメール</label>
		<p class="form-control-static">email@example.com</p>
	</div>
	<div class="form-group">
		<label for="Password" class="sr-only">パスワード</label>
		<input type="password" class="form-control" id="Password" placeholder="パスワード">
	</div>
	<button type="submit" class="btn btn-default">確認</button>
</form>

【設定】

  • input.form-controlの代わりにp.form-control-staticを入れる

【変更履歴】

  • 【3.3.0】横並びフォームでの設定が追加

フォーカス状態（Focus state）

いくつかのフォームコントロールでデフォルトのoutlineスタイルを削除して、:focusのためにその場所にbox-shadowを適用。

見本

コントロールの無効化（Disabled inputs）

ユーザーの操作を防止するため、コントロールにdisabledブール値属性を追加する。無効状態のコントロールは軽めに表示され、not-allowedカーソルが追加される。

チェックボックスとラジオボタンの無効にも対応しているが、親の<label>のホバーでnot-allowedカーソルを表示するには、.disabledクラスを親の.radio, .radio-inline, .checkbox, .checkbox-inlineに追加。

見本

設定例

<form>
	<fieldset>
		<div class="form-group">
			<label>インプット</label>
			<input type="text" class="form-control" placeholder="入力できません" disabled>
		</div>
		<div class="form-group">
			<label>セレクトメニュー</label>
			<select class="form-control" disabled>
				<option>選択できません</option>
			</select>
		</div>
		<div class="checkbox disabled">
			<label>
				<input type="checkbox" disabled> チェックできません
			</label>
		</div>
		<button type="submit" class="btn btn-primary">登録可能</button>
	</fieldset>
</form>

【設定】

  • 無効化したいコントロール（<input>、<select>、<textarea>）にdisabled属性を入れる
  • チェックボックスの場合は、併せてdiv.checkboxに.disabledを追加
  • ラジオボタンの場合は、併せてdiv.radioに.disabledを追加

【Bootstrap2.3.2との変更箇所】

  • 編集不能コントロール（Uneditable inputs）：.uneditable-inputは廃止

フォーム全体の無効化（Disabled fieldsets）v3.0新設

<fieldset>内のすべてのコントロールを一度に無効にするには、disabled属性を<fieldset>に追加。

見本

設定例

<form>
	<fieldset disabled>
		<div class="form-group">
			<label >インプット</label>
			<input type="text" class="form-control" placeholder="入力できません">
		</div>
		<div class="form-group">
			<label>セレクトメニュー</label>
			<select class="form-control">
				<option>選択できません</option>
			</select>
		</div>
		<div class="checkbox">
			<label>
				<input type="checkbox"> チェックできません
			</label>
		</div>
		<button type="submit" class="btn btn-primary">登録不能</button>
	</fieldset>
</form>

【設定】

  • <fieldset>にdisabled属性を入れる

読み取り専用コントロール（Readonly inputs）v3.2.0新設

入力コントロールにreadonlyブール値属性を追加して、入力値の変更を防止する。読み取り専用入力コントロールは、（無効状態の入力と同じように）軽めに表示されるが、カーソルは標準のまま保持される（フォーカスも可能）。

見本

設定例

<input class="form-control" type="text" placeholder="ここは読み取り専用です" readonly>

【設定】

  • <input>にreadonly属性を入れる

ヘルプテキスト（Help text）v3.3.1設定変更

フォームコントロールのブロックレベルのヘルプテキスト。

見本

ここにヘルプテキストが入ります

設定例

<label for="inputHelpBlock">ヘルプテキストの入力</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
<span id="helpBlock" class="help-block">ここにヘルプテキストが入ります</span>

【設定】

  • ヘルプテキストをspan.help-blockで囲む

【アクセシビリティの設定】

  • input.form-controlに、aria-describedby="ヘルプテキストのID"属性（フォームコントロールとヘルプテキストを関連付ける）を入れる

【変更履歴】

  • 【3.3.1】アクセシビリティの設定が追加

【Bootstrap2.3.2との変更箇所】

  • 横並びヘルプテキスト：.help-inlineは廃止

検証状態（Validation states）v3.0設定変更

Bootstrap3には、フォームコントロールのエラー、警告、成功の各状態の検証スタイルが組み込まれている。使用するには、.has-warning, .has-error, .has-successを親要素に追加。その要素内の.control-label, .form-control, .help-blockは、すべて検証スタイルに変わる。

検証状態の種類 v3.0クラス変更

●Success（成功）：.has-success

ヘルプテキスト

●Warning（警告）：.has-warning

ヘルプテキスト

●Error（エラー）：.has-error

ヘルプテキスト

Bootstrap2.3.2の設定例 赤背景が変更箇所

<!-- Success（成功） -->
<div class="control-group success">
	<label class="control-label" for="inputSuccess">見出し</label>
	<div class="controls">
		<input type="text" id="inputSuccess">
		<span class="help-block">ヘルプテキスト</span>
	</div>
</div>
<div class="control-group success">
	<label class="checkbox">
		<input type="checkbox" id="checkboxSuccess" value="option1">
		チェックボックス
	</label>
</div>

<!-- Warning（警告） -->
<div class="control-group warning">
	<label class="control-label" for="inputWarning">見出し</label>
	<div class="controls">
		<input type="text" id="inputWarning">
		<span class="help-block">ヘルプテキスト</span>
	</div>
</div>
<div class="control-group warning">
	<label class="checkbox">
		<input type="checkbox" id="checkboxWarning" value="option1">
		チェックボックス
	</label>
</div>

<!-- Error（エラー） -->
<div class="control-group error">
	<label class="control-label" for="inputError">見出し</label>
	<div class="controls">
		<input type="text" id="inputError">
		<span class="help-block">ヘルプテキスト</span>
  </div>
</div>
<div class="control-group error">
	<label class="checkbox">
		<input type="checkbox" id="checkboxError" value="option1">
		チェックボックス
	</label>
</div>

Bootstrap3.xの設定例 緑背景が変更箇所

<!-- Success（成功） -->
<div class="form-group has-success">
	<label class="control-label" for="inputSuccess">見出し</label>
	<input type="text" class="form-control" id="inputSuccess" aria-describedby="helpBlock">
	<span id="helpBlock" class="help-block">ヘルプテキスト</span>
</div>
<div class="has-success">
	<div class="checkbox">
		<label>
			<input type="checkbox" id="checkboxSuccess" value="option1">
			チェックボックス
		</label>
	</div>
</div>

<!-- Warning（警告） -->
<div class="form-group has-warning">
	<label class="control-label" for="inputWarning">見出し</label>
	<input type="text" class="form-control" id="inputWarning" aria-describedby="helpBlock">
	<span id="helpBlock" class="help-block">ヘルプテキスト</span>
</div>
<div class="has-warning">
	<div class="checkbox">
		<label>
			<input type="checkbox" id="checkboxWarning" value="option1">
			チェックボックス
		</label>
	</div>
</div>

<!-- Error（エラー） -->
<div class="form-group has-error">
	<label class="control-label" for="inputError">見出し</label>
	<input type="text" class="form-control" id="inputError" aria-describedby="helpBlock">
	<span id="helpBlock" class="help-block">ヘルプテキスト</span>
</div>
<div class="has-error">
	<div class="checkbox">
		<label>
			<input type="checkbox" id="checkboxError" value="option1">
			チェックボックス
		</label>
	</div>
</div>

【設定】

  • インプット：.form-groupに.has-{themecolor}を追加（.has-{themecolor}は上記の「検証状態の種類」から選択）
  • チェックボックス：.checkboxを.form-group.has-{themecolor}で囲む（.has-{themecolor}は上記の「検証状態の種類」から選択）

【Bootstrap2.3.2との変更箇所】

  • インプット：.control-group.{themecolor} > .controls ⇒ .form-group.has-{themecolor}
  • チェックボックス：.control-group.{themecolor} > label.checkbox ⇒ .form-group.has-{themecolor} > .checkbox > <label>
  • Success：.success ⇒ .has-success
  • Warning：.warning ⇒ .has-warning
  • Error：.error ⇒ .has-error
  • Info：.infoは廃止

アイコンつきコントロール（With optional icons） v3.1.0新設⇒v3.3.2一部追加

.has-feedbackと右アイコンを追加してオプションのフィードバックアイコンを追加することも可能。

フィードバックアイコンはテキストの<input class="form-control">要素でのみ動作。

見本

@
(成功)

設定例

<div class="form-group has-success has-feedback">
	<label class="control-label" for="inputSuccess2">成功</label>
	<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
	<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
	<span id="inputSuccess2Status" class="sr-only">(成功)</span>
</div>

<div class="form-group has-warning has-feedback">
	<label class="control-label" for="inputWarning2">警告</label>
	<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
	<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
	<span id="inputWarning2Status" class="sr-only">(警告)</span>
</div>

<div class="form-group has-error has-feedback">
	<label class="control-label" for="inputError2">エラー</label>
	<input type="text" class="form-control" id="inputError2">
	<span class="glyphicon glyphicon-remove form-control-feedback"></span>
	<span id="inputError2Status" class="sr-only">(エラー)</span>
</div>

<div class="form-group has-success has-feedback">
	<label class="control-label" for="inputGroupSuccess1">成功したインプットグループ</label>
	<div class="input-group">
		<span class="input-group-addon">@</span>
		<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
	</div>
	<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
	<span id="inputGroupSuccess1Status" class="sr-only">(成功)</span>
</div>

水平および横並び形式のオプションのアイコン（Optional icons in horizontal and inline forms）v3.1.0新設⇒v3.3.2一部追加

見本

●水平フォーム

(成功)
@
(成功)

●横並びフォーム

(成功)

@
(成功)

設定例

<!-- 水平フォーム -->
<form class="form-horizontal">
	<div class="form-group has-success has-feedback">
		<label class="control-label col-sm-3" for="inputSuccess3">成功したインプット</label>
		<div class="col-sm-9">
			<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
			<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
			<span id="inputSuccess3Status" class="sr-only">(成功)</span>
		</div>
	</div>
	<div class="form-group has-success has-feedback">
		<label class="control-label col-sm-3" for="inputGroupSuccess2">成功したインプットグループ</label>
		<div class="col-sm-9">
			<div class="input-group">
				<span class="input-group-addon">@</span>
				<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
			</div>
			<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
			<span id="inputGroupSuccess2Status" class="sr-only">(成功)</span>
		</div>
	</div>
</form>

<!-- 横並びフォーム -->
<form class="form-inline">
	<div class="form-group has-success has-feedback">
		<label class="control-label" for="inputSuccess4">成功したインプット</label>
		<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
		<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
		<span id="inputSuccess4Status" class="sr-only">(成功)</span>
	</div>
</form>
<form class="form-inline">
	<div class="form-group has-success has-feedback">
		<label class="control-label" for="inputGroupSuccess3">成功したインプットグループ</label>
		<div class="input-group">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
		</div>
		<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
		<span id="inputGroupSuccess3Status" class="sr-only">(成功)</span>
	</div>
</form>

.sr-onlyでラベルが隠されたオプションのアイコン（Optional icons with hidden .sr-only labels）v3.2.0新設⇒v3.3.2一部追加

見本

(成功)
@
(成功)

設定例

<div class="form-group has-success has-feedback">
	<label class="control-label sr-only" for="inputSuccess5">ラベルを隠す</label>
	<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
	<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
	<span id="inputSuccess5Status" class="sr-only">(成功)</span>
</div>
<div class="form-group has-success has-feedback">
	<label class="control-label sr-only" for="inputGroupSuccess4">成功したインプットグループ</label>
	<div class="input-group">
		<span class="input-group-addon">@</span>
		<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
	</div>
	<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
	<span id="inputGroupSuccess4Status" class="sr-only">(成功)</span>
</div>

【設定】

  • .form-group.has-{themecolor}.has-feedback > [label.control-label + input.form-control + span.glyphicon.glyphicon-{icon}.form-control-feedback]
  • <input>の代わりにインプットグループの使用も可
  • ラベルを隠す場合は、label.control-labelに.sr-onlyを追加

【アクセシビリティの設定】

  • span.glyphicon.glyphicon-{icon}の後に、.sr-onlyに非表示テキスト（支援技術にアイコンの意味を伝える）を入れる
  • input.form-controlに、aria-describedby="非表示テキストのID"属性（フォームコントロールとアイコンを関連付ける）を入れる

【変更履歴】

  • 【3.2.0】.sr-onlyでラベルが隠されたオプションのアイコンが追加
  • 【3.3.1】アクセシビリティの設定が追加
  • 【3.3.2】インプットグループを使用する場合が追加

コントロールのサイズ（Control sizing）

.input-lgなどのクラスを使用して高さを設定し、.col-lg-*などのグリッド列クラスを使用して幅を設定する。

コントロールの大きさ（Height sizing）v3.0新設

ボタンのサイズと一致した高さのフォームコントロールを作成。

設定例

<input type="text" class="form-control input-{size}">
<select class="form-control input-{size}">...</select>

サイズの種類

●大きめ：.input-lg


●小さめ：.input-sm


※標準（参考）

【設定】

  • .form-controlに.input-{size}（上記の「サイズの種類」から選択）を追加

【変更履歴】

  • 【3RC1の途中】大きめ：.input-large ⇒ .input-lg
  • 【3RC1の途中】小さめ：.input-small ⇒ .input-sm

水平フォームのサイズ（Horizontal form group sizes）v3.2.0新設

.form-group-lgまたは.form-group-smを追加すると、.form-horizontal内のラベルとフォームコントロールのサイズがすばやく調整可能。

設定例

<form class="form-horizontal" role="form">
	<div class="form-group form-group-{size}">
		<label class="col-sm-2 control-label" for="formGroupInput">ラベル</label>
		<div class="col-sm-10">
			<input class="form-control" type="text" id="formGroupInput" placeholder="入力コントロール">
		</div>
	</div>
</form>

サイズの種類

●大きめ：.form-group-lg


●小さめ：.form-group-sm

※標準（参考）

【設定】

  • .form-groupに.form-group-{size}（上記の「サイズの種類」から選択）を追加

コントロールの幅サイズ（Column sizing）v3.0設定変更

グリッド列やカスタム親要素でインプットを囲んで、簡単に目的の幅を適用させる。

見本

Bootstrap2.3.2の設定例 赤背景が変更箇所

<input type="text" class="input-small">
<input type="text" class="input-medium">
<input type="text" class="input-large">

Bootstrap3.xの設定例 緑背景が変更箇所

<div class="row">
	<div class="col-xs-2">
		<input type="text" class="form-control">
	</div>
	<div class="col-xs-3">
		<input type="text" class="form-control">
	</div>
	<div class="col-xs-4">
		<input type="text" class="form-control">
	</div>
</div>

【設定】

  • div.row > div.col-{breakpoint}-* > .form-control

【Bootstrap2.3.2との変更箇所】

  • 極短：.input-mini
    短め：.input-small
    中ぐらい：.input-medium
    長め：.input-large
    極大：.input-xlarge
    超極大：.input-xxlarge
    はすべて廃止

その他Bootstrap3.0で廃止になったもの（フォーム関連）

  • 検索用フォーム（Search form）：form.form-search、input.search-query
  • ブロックタイプのコントロール（Block level inputs）：input.input-block-level
  • 複数グリッドコントロール（Multiple grid inputs）：.controls/.controls-row
  • フォームボタン用スタイル（Form actions）：.form-actions
  • 無効インプット（Invalid inputs）：required属性の指定

ボタン（Buttons）

ボタンタグ（Button tags）

<a>、<button>、または<input>要素のボタンクラスを使用。

見本

リンク

設定例

<!-- アンカーリンクで設定 -->
<a class="btn btn-default" href="#" role="button">リンク</a>
<!-- ボタンタグで設定 -->
<button class="btn btn-default" type="submit">ボタン</button>
<!-- インプットボタンで設定 -->
<input class="btn btn-default" type="button" value="入力する">
<input class="btn btn-default" type="submit" value="登録する">

ボタンの設定（Options）

使用可能なボタンクラスのいずれかを使用して、スタイル付きボタンを素早く作成。

設定例

<!-- Defaultボタン -->
<button type="button" class="btn btn-default">Default</button>

<!-- Primaryボタン -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Infoボタン -->
<button type="button" class="btn btn-info">Info</button>

<!-- Successボタン -->
<button type="button" class="btn btn-success">Success</button>

<!-- Warningボタン -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Dangerボタン -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- リンクのように見えるボタン -->
<button type="button" class="btn btn-link">Link</button>

スタイルの種類

　.btn-default

　.btn-primary

　.btn-info

　.btn-success

　.btn-warning

　.btn-danger

　.btn-link

【設定】

  • <button>、<a>、input[type="button"]、input[type="reset"]、input[type="submit"]のいずれかに.btn.btn-{themecolor}（.btn-{themecolor}は上記の「スタイルの種類」から選択）を追加（.btn単独での使用は不可）

【アクセシビリティの設定】

  • <a> で使用する際には、role="button"属性（スクリーンリーダーなどの支援技術にボタンの役割を伝える）を入れる

【Bootstrap2.3.2との変更箇所】

  • Default：.btn ⇒ .btn.btn-default（初期v3RC1では濃いグレー色だったが白色に戻った）
  • Inverse：.btn-inverseは廃止

ボタンのサイズ（Sizes）

大きめか小さめのボタンにしたいなら、追加サイズとして.btn-lg, .btn-sm, .btn-xsのいずれかを追加。

設定例

<!-- 大きめのボタン -->
<p>
	<button type="button" class="btn btn-primary btn-lg">...</button>
	<button type="button" class="btn btn-default btn-lg">...</button>
</p>

<!-- 小さめのボタン -->
<p>
	<button type="button" class="btn btn-primary btn-sm">...</button>
	<button type="button" class="btn btn-default btn-sm">...</button>
</p>

<!-- 極小のボタン -->
<p>
	<button type="button" class="btn btn-primary btn-xs">...</button>
	<button type="button" class="btn btn-default btn-xs">...</button>
</p>

サイズの種類 v3.0クラス変更

　.btn-lg

　.btn-sm

　.btn-xs

（参考）

【設定】

  • .btn.btn-{themecolor}に.btn-{size}（上記の「サイズの種類」から選択）を追加

【Bootstrap2.3.2との変更箇所】

  • 大きめ：.btn-large ⇒ .btn-lg（v3RC1の途中）
  • 小さめ：.btn-small ⇒ .btn-sm（v3RC1の途中）
  • 極小：.btn-mini ⇒ .btn-xs（初期のv3RC1では廃止⇒途中で復活）

ブロックタイプのボタン

親の全幅にまたがるブロックレベルのボタンを作成するなら、.btn-blockを追加。

見本

設定例

<button type="button" class="btn btn-primary btn-block">ブロックタイプのボタン</button>
<button type="button" class="btn btn-default btn-block">ブロックタイプのボタン</button>

【設定】

  • .btn.btn-{themecolor}に.btn-blockを追加

ボタンのアクティブ化（Active state）

アクティブにすると、ボタンが押されたように見える（背景が暗くて濃いボーダーに影が挿入される。<button>要素の場合は:active経由で行われるが、<a>要素の場合は、.activeを使用。ただし、プログラムでアクティブな状態を複製する必要がある場合は、<button>で.activeが使用可能（aria-pressed="true"属性も組み込み可能）。

ボタン要素（Button element）

:activeを擬似クラスとして追加する必要はないが、同じ外観を強制する必要がある場合は、先に.activeを追加すること。

見本

設定例

<button type="button" class="btn btn-primary active">アクティブボタン</button>
<button type="button" class="btn btn-default active">アクティブボタン</button>

アンカー要素（Anchor element）

<a>ボタンに.activeクラスを追加。

見本

アクティブボタン アクティブボタン

※通常のボタン ※通常のボタン

設定例

<a href="#" class="btn btn-primary active" role="button" aria-pressed="true">アクティブボタン</a>
<a href="#" class="btn btn-default active" role="button" aria-pressed="true">アクティブボタン</a>

【設定】

  • .btn.btn-{themecolor}に.activeを追加

【アクセシビリティの設定】

  • .btn.btn-{themecolor}.activeには、aria-pressed="true"属性（支援技術にボタンが押された状態であることを伝える）を入れる

ボタンの無効化（Disabled state）

opacityに戻してフェードすることで、ボタンをクリックできないように見せる。

ボタン要素（Button element）

<button>ボタンにdisabled属性を追加。

見本

設定例

<button type="button" class="btn btn-primary" disabled>無効ボタン</button>
<button type="button" class="btn btn-default" disabled>無効ボタン</button>

【設定】

  • ボタンの設定にdisabled属性を入れる

アンカー要素（Anchor element）

<a>ボタンに.disabledクラスを追加。

見本

無効ボタン 無効ボタン

設定例

<a href="#" class="btn btn-primary disabled" role="button">無効ボタン</a>
<a href="#" class="btn btn-default disabled" role="button">無効ボタン</a>

ここでは.disabledをユーティリティクラスとして使用。一般的な.activeクラスと似ているため、接頭辞は必要ない。

【設定】

  • a.btn.btn-{themecolor}に.disabledを追加

イメージ（Images）

レスポンシブイメージ（Responsive images）v3.0新設

Bootstrap3の画像は、.img-responsiveクラスを追加することで、レスポンシブすることが可能。これは、max-width:100%;, height:auto;, display: block;で表示。それを親要素にうまく合わせるように画像に追加すること。

.img-responsiveクラスを使用する画像を中央に配置するには、.text-centerの代わりに.center-blockを使用すること。.center-blockの使用の詳細は、ブロックの中央揃えに記載。

見本

●.img-responsiveあり

木片


●.img-responsiveなし（原寸大）※画面からはみ出すので横スライドで表示するようにしています

木片

設定例

<img src="..." alt="..." class="img-responsive">

【設定】

  • <img>に.img-responsiveを入れる

イメージ枠（Image shapes）

<img>要素にクラスを追加すると、どのプロジェクトでも簡単にイメージをスタイル可能。

設定例

<img src="..." alt="..." class="img-xxx">

イメージ枠の種類 一部クラス変更

140x140　角丸：.img-rounded

140x140　丸：.img-circle

140x140　枠付：.img-thumbnail

【設定】

  • <img>に.img-xxx（上記の「イメージ枠の種類」から選択）を入れる

【Bootstrap2.3.2との変更箇所】

  • 枠付：.img-polaroid ⇒ .img-thumbnail

ヘルパークラス（Helper classes）

文字の色（Contextual colors）

いくつかの重点ユーティリティクラスを使用して色で意味を伝える。これらはリンクにも適用され、デフォルトのリンクスタイルと同じようにホバーすると暗めになる。

設定例

<span class="text-{themecolor}">通常の文章の場合</span>と<a href="#" class="text-{themecolor}">リンクを貼った</a>場合。

文字色の種類 一部変更

Muted：.text-muted
通常の文章の場合とリンクを貼った場合。

Primary：.text-primary
通常の文章の場合とリンクを貼った場合。

Info：.text-info
通常の文章の場合とリンクを貼った場合。

Success：.text-success
通常の文章の場合とリンクを貼った場合。

Warning：.text-warning
通常の文章の場合とリンクを貼った場合。

Danger：.text-danger
通常の文章の場合とリンクを貼った場合。

※標準の文字色（参考）：
通常の文章の場合とリンクを貼った場合。

【設定】

  • <p>や<span>などの要素に.text-{themecolor}（上記の「文字色の種類」から選択）を入れる
  • <a>に.text-{themecolor}を入れるとホバーで暗めに強調表示される

【Bootstrap2.3.2との変更箇所】

  • Muted：.muted ⇒ .text-muted
  • Danger：.text-error ⇒ .text-danger
  • Primary：.text-primaryが新設

文字の背景色（Contextual backgrounds）v3.1.0新設

文字色クラスと同様に、要素の背景を任意の色クラスに簡単に設定可能。アンカーコンポーネントは、テキストクラスと同様に、ホバーで暗めになる。

設定例

<p><span class="bg-{themecolor}">通常の文章の場合</span>と<a href="#" class="bg-{themecolor}">リンクを貼った</a>場合。

背景色の種類

Primary：.bg-primary
通常の文章の場合とリンクを貼った場合。

Info：.bg-info
通常の文章の場合とリンクを貼った場合。

Success：.bg-success
通常の文章の場合とリンクを貼った場合。

Warning：.bg-warning
通常の文章の場合とリンクを貼った場合。

Danger：.bg-danger
通常の文章の場合とリンクを貼った場合。

※背景色なし（参考）：
通常の文章の場合とリンクを貼った場合。

【設定】

  • <p>や<span>などの要素に.bg-{themecolor}（上記の「背景色の種類」から選択）を入れる
  • <a>に .bg-{themecolor} を入れるとホバーで暗めに強調表示される

閉じるアイコン（Close icon）v3.3.2設定変更

モーダルやアラートなどのコンテンツを削除するには、一般的に閉じるアイコンを使用。

見本

Bootstrap2.3.2の設定例 赤背景が変更箇所

<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>

Bootstrap3.xの設定例 緑背景が変更箇所

<button type="button" class="close" data-dismiss="alert" aria-label="閉じる"><span aria-hidden="true">&times;</span></button>

【設定】

  • button.close[aria-label][data-dismiss="xxx"] > <span aria-hidden="true">&times;</span>
    ※data-dismiss="xxx"にはアラートの時はalert、モーダルの時はmodalを入れる
  • アイコンとなる×は、&times;と記述してエスケープ処理をする

【アクセシビリティの設定】

  • アイコンとなる<button>に、
    • aria-label="閉じる"属性（アイコンボタンのラベル）
    • span[aria-hidden="true"]（スクリーンリーダー等での読み上げをスキップさせる）
    を入れる

【変更履歴】

  • 【3.2.0】aria-hidden="true"は<button>内より独立した<span>に移動し、<span class="sr-only">閉じる</span>を追加
  • 【3.3.2】<button>にaria-label="閉じる"を追加して、<span class="sr-only">閉じる</span>を不要に

【Bootstrap2.3.2との変更箇所】

  • アクセシビリティの設定が追加

キャレット（Carets）

キャレットを使用して、ドロップダウン機能と方向を示す。ドロップアップメニューでは、キャレットの向きが自動的に反転するので注意。

見本

設定例

<span class="caret"></span>

【設定】

  • span.caret（独立した要素として使用）

要素の配置（Quick floats）

要素をクラスで左または右に寄せる。!importantは、特異性の問題を避けるために組み込まれている。クラスはmixinとしても使用可能。

クラスの種類 見やすいよう色と枠を付けています

●要素全体を左寄せ（float:left）：.pull-left

左寄せ部分

●要素全体を右寄せ（float:right）：.pull-right

右寄せ部分

設定例

<!-- 要素全体を左寄せ -->
<div class="pull-left">...</div>

<!-- 要素全体を右寄せ -->
<div class="pull-right">...</div>

// クラス
.pull-left {
	float: left !important;
}
.pull-right {
	float: right !important;
}

// mixinとして使用
.element {
	.pull-left();
}
.another-element {
	.pull-right();
}

【設定】

  • 要素に.xxx（上記の「クラスの種類」から選択）を入れる

【注意】

ブロックの中央揃え（Center content blocks）v3.0.1新設

要素をdisplay: blockに設定し、margin経由で中央に配置。mixinとクラスとして利用可能。

見本 見やすいよう色と枠を付けています

中央揃え部分

設定例

<div class="center-block" style="width:6.5em">...</div>

// クラス
.center-block {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

// mixinとして使用
.element {
	.center-block();
}

【設定】

  • 要素に.center-blockを入れる

【注意】

  • 同時にブロック部分の幅widthを指定
  • テキストの中央揃えを設定する場合は文字の配置を参照

クリアフィックス（Clearfix）

.clearfixを親要素に追加することでfloatを簡単にクリアすることが可能。Nicolas Gallagherによって広く普及したmicro clearfixを利用。mixinとしても使用可能。

設定例

<div class="clearfix"></div>

// 自身をmixin
.clearfix() {
	&:before,
	&:after {
		content: " ";
		display: table;
	}
	&:after {
		clear: both;
	}
}

// mixinとして使用
.element {
	.clearfix();
}

以下の事例でクリアフィックスの使用方法を表示。

ブロックを変えて左寄せ/右寄せ/中央揃え

見本 見やすいよう色と枠を付けています

ここは
左寄せ部分
ここは
右寄せ部分
ここは
中央揃え部分

設定例

<div class="row">
	<div class="pull-left">ここは<br>左寄せ部分</div>
	<div class="clearfix"></div>
	<div class="pull-right">ここは<br>右寄せ部分</div>
	<div class="clearfix"></div>
	<div class="center-block" style="width:6.5em">ここは<br>中央揃え部分</div>
</div>

【設定】

  • クリアしたいところで div.clearfix を入れる
  • レイアウトを崩さないようにするため、ブロックの親要素に .row を入れる

同じブロックで左寄せ/右寄せ/中央揃え

見本 見やすいよう色と枠を付けています

ここは
左寄せ部分
ここは
右寄せ部分
ここは
中央揃え部分

設定例

<div class="clearfix">
	<div class="pull-left">ここは<br>左寄せ部分</div>
	<div class="pull-right">ここは<br>右寄せ部分</div>
	<div class="center-block" style="width:6.5em">ここは<br>中央揃え部分</div>
</div>

【設定】

  • ブロックの親要素に .clearfix を入れる

コンテンツの表示と非表示（Showing and hiding content/Screen reader content）v3.0一部変更

.showクラスと.hiddenクラスを使用して、要素を強制的に表示または非表示にする（スクリーンリーダーを含む）。これらのクラスは、要素の配置のように、特異性の競合を避けるために!importantを使用。ブロックレベルでのみ使用可能。mixinとして使用も可能。

.hideは利用可能だが、スクリーンリーダーに必ずしも影響を及ぼすわけではないので、v3.0.1以降では推奨されていない。代わりに.hiddenまたは.sr-onlyを使用すること。

さらに、.invisibleを使用して要素の可視性のみの切り替えが可能。つまり、その表示は変更されず、要素は文書の流れに影響を与える。

.sr-onlyでスクリーンリーダーを除くすべてのデバイスに要素を非表示にする。.sr-onlyと.sr-only-focusableを組み合わせると、（キーボードのみのユーザーなどで）要素がフォーカスされているときに再表示する。 アクセシビリティのベストプラクティスに従うために必要。mixinとしても使用可能。

クラスの種類 見やすいよう領域に枠を付けています

●表示：.show

表示されます

●非表示（領域自体も非表示）：.hidden v3.0新設


●非表示（領域自体は表示）：.invisible


●スクリーンリーダーを除いて非表示：.sr-only v3RC2新設

表示されません

●スクリーンリーダーを除いて非表示（フォーカス時には表示）：.sr-only.sr-only-focusable v3.2.0新設

表示されません

設定例

<!-- 表示 -->
<div class="show">表示されます</div>

<!-- 非表示（領域自体も非表示） -->
<div class="hidden">表示されません</div>

<!-- 非表示（領域自体は表示） -->
<div class="invisible">表示されません</div>

<!-- スクリーンリーダーを除いて非表示 -->
<div class="sr-only">表示されません</div>

<!-- スクリーンリーダーを除いて非表示（フォーカス時には表示） -->
<div class="sr-only sr-only-focusable">表示されません</div>

// クラス
.show {
	display: block !important;
}
.hidden {
	display: none !important;
}
.invisible {
	visibility: hidden;
}

// mixinとして使用
.element {
	.show();
}
.another-element {
	.hidden();
}
.skip-navigation {
	.sr-only();
	.sr-only-focusable();
}

【設定】

  • 表示/非表示したい要素に.xxx（上記の「クラスの種類」から選択）を入れる

画像置換（Image replacement）v3.0クラス変更

.text-hideクラスまたはmixinを使用して、背景画像を持つ見出しなどの要素のテキスト内容を非表示にして画像に置換するのに便利。

設定例

<h1 class="text-hide">カスタム見出し</h1>

// mixinとして使用
.heading {
	.text-hide();
}

【設定】

  • 見出しの部分に.text-hideを入れる

【Bootstrap2.3.2との変更箇所】

  • .hide-text ⇒ .text-hide

レスポンシブユーティリティ（Responsive utilities）

より高速でモバイルフレンドリーな開発用に、これらのユーティリティクラスを使用してメディアクエリ経由でデバイスごとにコンテンツの表示・非表示を行う。また、印刷時にコンテンツを切り替えるためのユーティリティクラスも組み込まれている。

これらは各デバイスのプレゼンテーションを補完するために使用するものであり、限定的に使用して、同じサイトの全く異なるバージョンを作成しないようにすること。

閲覧時の表示/非表示（Available classes）v3.0クラス変更

ビューポート・ブレークポイント間でコンテンツを切り替えるには、使用可能なクラスを1つまたは組み合わせて使用。

クラスの種類 v3.2.0一部変更*の種類は下記の表示可能クラスの種類から選択

モバイルサイズ タブレットサイズ デスクトップサイズ 大画面サイズ
v3RC2新設
ビューポートの幅 768px未満 768px～991px 992px～1199px 1200px以上
.visible-xs-*
v3.2.0新設		 [表示] [非表示] [非表示] [非表示]
.visible-sm-*
v3.2.0新設		 [非表示] [表示] [非表示] [非表示]
.visible-md-*
v3.2.0新設		 [非表示] [非表示] [表示] [非表示]
.visible-lg-*
v3.2.0新設		 [非表示] [非表示] [非表示] [表示]
.hidden-xs [非表示] [表示] [表示] [表示]
.hidden-sm [表示] [非表示] [表示] [表示]
.hidden-md [表示] [表示] [非表示] [表示]
.hidden-lg [表示] [表示] [表示] [非表示]

v3.2.0以降、各ブレークポイントの.visible-{breakpoint}-*クラスには3つのバリエーションが存在。下記のCSS表示プロパティ値ごとに1つずつ。

表示可能クラスの種類 xxの種類はxs,sm,md,lg

クラスのグループ CSS display
.visible-{breakpoint}-block display: block;（ブロック（縦積み）表示）
.visible-{breakpoint}-inline display: inline;（インライン（横並び）表示）
.visible-{breakpoint}-inline-block display: inline-block;（インラインブロック（横並びで幅や高さも持たせる）表示）

例えばモバイルサイズの場合、使用可能な.visible-{breakpoint}-*クラスは、.visible-xs-block, .visible-xs-inline, .visible-xs-inline-blockとなる。

.visible-xs, .visible-sm, .visible-md, .visible-lgクラスも存在するが、v3.2.0では非推奨。これらは、<table>関連要素の切り替えの特別な場合を除いて、.visible-{breakpoint}-blockとほぼ同じ。

【設定】

  • ビューポートの幅によって表示/非表示を切り替えたい要素に上記のクラスを入れる

【変更履歴】

  • 【3.2.0】.visible-{breakpoint}が.visible-{breakpoint}-block,.visible-{breakpoint}-inline,.visible-{breakpoint}-inline-blockに分離

【Bootstrap2.3.2との変更箇所】

  • .visible-phone ⇒ .visible-sm（v3RC1）⇒ .visible-xs（v3RC2）⇒ .visible-xs-*（v3.2.0）
  • .visible-tablet ⇒ .visible-md（3RC1）⇒ .visible-sm（v3RC2）⇒ .visible-sm-*（v3.2.0）
  • .visible-desktop ⇒ .visible-lg（v3RC1）⇒ .visible-md/.visible-lg（v3RC2）⇒ .visible-md-*/.visible-lg-*（v3.2.0）
  • .hidden-phone ⇒ .hidden-sm（v3RC1）⇒ .hidden-xs（v3RC2）
  • .hidden-tablet ⇒ .hidden-md（v3RC1）⇒ .hidden-sm（v3RC2）
  • .hidden-desktop ⇒ .hidden-lg（v3RC1）⇒ .hidden-md/.hidden-lg（v3RC2）

印刷時の表示/非表示（Print classes）v3.0新設

通常のレスポンスクラスと同様に、これらを使用してコンテンツを印刷用に切り替え可能。

クラスの種類 v3.2.0一部変更

閲覧時 印刷時
.visible-print-blockv3.2.0新設
.visible-print-inlinev3.2.0新設
.visible-print-inline-blockv3.2.0新設		 [非表示] [表示]
.hidden-print [表示] [非表示]

.visible-printクラスも存在するが、v3.2.0では廃止予定。<table>関連要素の特別な場合を除いて、.visible-print-blockとほぼ同じ。

【設定】

  • 印刷時に表示/非表示を切り替えたい要素に上記のクラスを入れる

【変更履歴】

  • 【3.2.0】.visible-printが.visible-print-block,.visible-print-inline,.visible-print-inline-blockに分離

テストケース（Test cases）

レスポンシブ・ユーティリティクラスをテストするには、ブラウザの幅のサイズを変えるか様々なデバイスで読み込むこと。

表示の場合（Visible on...）

緑のチェックマークが、その要素が現在の表示可能なビューポイントであることを示す。

✔ 極小なので表示
.visible-xs-block
✔ 小なので表示
.visible-sm-block
中ではない
.visible-md-blockは非表示 ✔ 中なので表示
.visible-md-block
✔ 大なので表示
.visible-lg-block
✔ 極小と小なので表示
.visible-xs-block.visible-sm-block
✔ 中と大なので表示
.visible-md-block.visible-lg-block
✔ 極小と中なので表示
.visible-xs-block.visible-md-block
✔ 小と大なので表示
.visible-sm-block.visible-lg-block
✔ 極小と大なので表示
.visible-xs-block.visible-lg-block
✔ 小と中なので表示
.visible-sm-block.visible-md-block

非表示の場合（Hidden on...）

ここでは緑のチェックマークは、現在のビューポートで要素が非表示であることを示す。

✔ 極小なので非表示
.hidden-xsは非表示
✔ 小なので非表示
.hidden-smは非表示
中ではない
.hidden-md ✔ 中なので非表示
.hidden-mdは非表示
✔ 大なので非表示
.hidden-lgは非表示
✔ 極小と小なので非表示
.hidden-xs.hidden-smは非表示
✔ 中と大なので非表示
.hidden-md.hidden-lgは非表示
✔ 極小と中なので非表示
.hidden-xs.hidden-mdは非表示
✔ 小と大なので表示
.hidden-sm.hidden-lgは非表示
✔ 極小と大なので非表示
.hidden-xs.hidden-lgは非表示
✔ 小と中なので非表示
.hidden-sm.hidden-mdは非表示

Lessを使用（Using Less）

Bootstrap3のCSSは、変数のような追加機能を持つプリプロセッサ、mixin、CSSをコンパイルするための関数を持つLessで構築されている。コンパイルされたCSSファイルの代わりにソースLessファイルを使用する場合は、フレームワーク全体で使用する多数の変数とmixinを利用することが可能。

グリッドでの変数とmixinについては、グリッドシステムのLess mixinと変数に記載。

【参考】

Bootstrap3のコンパイル（Compiling Bootstrap）

Bootstrap3は、コンパイルされたCSSを使用するかソースLessファイルを使用するか、少なくとも2つの方法で使用可能。Lessファイルをコンパイルするには、必要なコマンドを実行するために開発環境を設定する方法について、導入のCSSとJavaScriptのコンパイルを参照。

サードパーティのコンパイルツールはBootstrap3で動作するが、Bootstrapのコアチームではサポートしていない。

変数（Variables）

変数は、色、間隔、フォントスタックなどの一般的に使用される値を集中化して共有する方法として、プロジェクト全体で使用。完全な内訳については、公式サイトのカスタマイズに記載。

色について（Colors）

グレースケールとテーマカラーの2つのカラースキームが簡単に使用可能。グレースケールの色は、一般的に使用される黒の色合いに素早くアクセスし、テーマカラーは意味のあるコンテキスト値に割り当てられた様々な色を組み込む。

グレースケールの見本

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

テーマカラーの見本

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

これらの色変数をそのまま使用するか、プロジェクトに意味のある変数に再割当てをする。

// 現状のまま使用
.masthead {
  background-color: @brand-primary;
}

// Lessで変数を再割り当て
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

スキャフォールディング（Scaffolding）

サイトの骨格となる主要要素をすばやくカスタマイズするための変数。

// スキャフォールディング
@body-bg:    #fff;
@text-color: @black-50;

1つの値で適切な色のリンクを簡単にスタイル可能。

// 変数
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// 使用例
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

@link-hover-colorでは、自動的に正しいホバーカラーを作成するために、Lessの素晴らしいツールである関数を使用。ここではdarken, lighten, saturate, desaturate が使用可能。

文字の体裁（Typography）

いくつかの簡単な変数を使用して、書体、テキストサイズ、見出しなどが簡単に設定可能。Bootstrap3はこれらを使用して簡単な字体のmixinを提供。

font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

アイコン（Icons）

アイコンの場所とファイル名をカスタマイズするための2つの簡単な変数。

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

コンポーネント（Components）

Bootstrap3全体のコンポーネントは、共通の値を設定するためのいくつかのデフォルト変数を使用。ここで最も一般的に使用される。

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

ベンダーmixin（Vendor mixins）

ベンダーmixinは、コンパイル済みのCSSにすべての関連ベンダープレフィックスを組み込むことで、複数のブラウザーをサポートするためのmixin。

Box-sizing

1つのmixinでコンポーネントのボックスモデルをリセット。コンテキストについては、Mozillaのbox-sizingの解説を参照。

mixinはv3.2.0で廃止し、Autoprefixerを導入。下位互換性を保つために、Bootstrap v4になるまで内部ではmixinを使い続ける。

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari 5以下
     -moz-box-sizing: @box-model; // Firefox 19以下
          box-sizing: @box-model;
}

角を丸める（Rounded corners）

今日の最新ブラウザでは、接頭辞なしのborder-radiusプロパティがサポートされている。したがって、.border-radius()mixinというのはないが、Bootstrap3には、オブジェクトの特定の面にある2つの角をすばやく丸めるためのショートカットが組み込まれている。

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

ボックス（ドロップ）シャドウ（Box (Drop) shadows）

ターゲットにしているサイトの読者が最新かつ最高のブラウザとデバイスを使用している場合は、box-shadowプロパティを単独で使用する。古いAndroid（v4以前）とiOSデバイス（iOS 5以前）のサポートが必要な場合は、廃止されたmixinを使用して、必要な-webkitプレフィックスを取得すること。

Bootstrapは標準プロパティをサポートしていない旧式のプラットフォームを正式にサポートしていないため、mixinはv3.1.0で廃止。下位互換性を保つために、Bootstrap v4になるまで内部ではmixinを使い続ける。

できるだけシームレスにバックグラウンドで混ぜられるように、ボックスシャドウではrgba()の色を使用すること。

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS 4.3未満 & Android 4.1未満
          box-shadow: @shadow;
}

遷移（Transitions）

柔軟性のために複数のmixinに。すべての遷移情報を1つに設定するか、必要に応じて個別の遅延と継続時間を指定。

mixinはv3.2.0で廃止し、Autoprefixerを導入。下位互換性を保つために、Bootstrap v4になるまでは内部ではmixinを使い続ける。

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

変換（Transformations）

オブジェクトの回転、拡大縮小、平行移動（移動）、または斜行。

mixinはv3.2.0で廃止し、Autoprefixerを導入。下位互換性を保つために、Bootstrap v4になるまでは内部でmixinを使い続ける。

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 のみ
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 のみ
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9のみ
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // IE9以上は https://github.com/twbs/bootstrap/issues/4885 を参照
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 のみ
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 のみ
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 のみ
          transform-origin: @origin;
}

アニメーション（Animations）

1つの宣言でCSS3のアニメーションプロパティをすべて使用し、個々のプロパティで他のmixinを使用するための1つのmixinに。

mixinはv3.2.0で廃止し、Autoprefixerを導入。下位互換性を保つために、Bootstrap v4になるまでは内部でmixinを使い続ける。

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

透明度（Opacity）

すべてのブラウザの不透明度を設定し、IE8のfilterフォールバックを提供。

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

プレースホルダテキスト（Placeholder text）

各フィールド内のフォームコントロールのコンテキストを提供。

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10以上
  &::-webkit-input-placeholder  { color: @color; } // SafariとChrome
}

列（Columns）

1つの要素内でCSSを使用して列を生成。

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

グラデーション（Gradients）

任意の2色を背景グラデーションに簡単に変換可能。より高度なものを入手し、方向を設定したり、3つの色を使用したり、放射状のグラデーションが使用可能。単一のmixinでは、必要なすべての接頭辞付きの構文が得られる。

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

また、標準の2色の線形グラデーションの角度を指定することも可能。

#gradient > .directional(#333; #000; 45deg);

バーバーストライプスタイルのグラデーションが必要な場合も簡単に設定可能。単一の色を指定するだけで、半透明の白いストライプがオーバーレイされる。

#gradient > .striped(#333; 45deg);

水準を上げて3色を使用。第1の色、第2の色、第2の色の色停止（25％のようなパーセンテージ値）、および第3の色をこれらのmixinで設定。

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

注意！グラデーションを削除する必要がある場合は、追加した可能性のあるIE固有のfilterをすべて削除。background-image：none;と一緒に.reset-filter()mixinを使用すれば可能。

ユーティリティmixin（Utility mixins）

ユーティリティmixinは、関連のないCSSプロパティを組み合わせて特定の目標やタスクを達成するmixin。

クリアフィックス（Clearfix）

class="clearfix"を任意の要素に追加するのを忘れたら、必要に応じて.clearfix()mixinを追加する。Nicolas Gallagherのmicro clearfixを使用。

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// 使用例
.container {
  .clearfix();
}

水平方向の中央揃え（Horizontal centering）

親内の要素をすばやく中央に配置。widthまたはmax-widthを設定する必要あり。

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// 使用例
.container {
  width: 940px;
  .center-block();
}

サイズ補助（Sizing helpers）

オブジェクトの寸法をより簡単に指定。

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// 使用例
.image { .size(400px; 300px); }
.avatar { .square(48px); }

サイズ変更可能なテキストエリア（Resizable textareas）

任意のテキストエリアやその他の要素のサイズ変更オプションが簡単に設定可能。デフォルトはブラウザの通常の動作 (both)。

.resizable(@direction: both) {
  // オプション：水平、垂直、両方
  resize: @direction;
  // Safariの修正
  overflow: auto;
}

テキストの省略（Truncating text）

1つのmixinで省略記号付きのテキストが簡単に作成可能。要素をblockまたはinline-blockレベルにする必要あり。

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 使用例
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Retina画像（Retina images）

2つのイメージパスと@1xイメージのサイズを指定し、Bootstrap3は@2xのメディアクエリを提供。提供する画像が多い場合は、単一のメディアクエリで手動でRetina画像CSSを書くことも検討すること。

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// 使用例
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Sassを使用（Using Sass）

Bootstrap3はLessで構築されているが、正式なSassポートもある。別のGitHubリポジトリに保存し、変換スクリプトで更新を処理。

【参考】

組み込まれるもの（What's included）

Sassポートは個別のレポを持ち、若干異なる聴衆を提供するため、プロジェクトの内容はメインのBootstrap3プロジェクトと大きく異なる。これにより、Sassポートは可能な限り多くのSassベースシステムと互換性がある。

パス 説明
lib/ Rubyのgemコード（Sass設定、RailsとCompassの統合）
tasks/ コンバータースクリプト（LessからSassへ）
test/ コンパイルテスト
templates/ Compassパッケージ目録
vendor/assets/ Sass, JavaScript, フォントファイル
Rakefile rakeや変換などの内部タスク

SassポートのGitHubリポジトリにアクセスして、これらのファイルの動作を確認すること。

インストール（Installation）

Bootstrap for Sassをインストールして使用する方法については、GitHubリポジトリのreadmeを参照。これは最新のソースであり、Rails、Compass、および標準のSassプロジェクトで使用するための情報を含む。

Bootstrap for Sass