概要

ウェブ開発をより良く、より速く、より強力にする手法を込めた、Bootstrap の基盤の要点を紹介します。

HTML5 doctype

Bootstrap は、HTML5 の doctype の使用を必要とするいくつかの HTML 要素と CSS プロパティを利用します。それを全てのプロジェクトの最初に記述します。

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

モバイル最優先

Bootstrap 2 では、オプションのモバイルフレンドリーなスタイルをフレームワークの重要項目に追加しました。Bootstrap 3 では、最初からモバイルフレンドリーになるようにプロジェクトを書き直しました。オプションのモバイルスタイルを追加するのではなく、モバイルスタイルを中核に仕上げました。事実、Bootstrap はモバイル最優先です。個々のファイルに分割されていますが、モバイル最優先なスタイルは、ライブラリ全体を通して見受けられます。

正しいレンダリングとタッチによるズームを確実にするために、<head>viewport meta タグを追加します

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

viewport meta タグに user-scalable=no を追加すると、モバイル・デバイスでのズーム機能を無効にすることができます。 ズームを無効にすると、ユーザーはスクロールできるだけになり、その結果サイトの感じが少しだけネイティブ・アプリケーションっぽくなります。 概して、あらゆるサイトにこれをオススメしませんので、注意して使ってください!

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

Bootstrap は、基本となるグローバルな表示、タイポグラフィとリンクスタイルを設定します。具体的には、:

  • bodybackground-color: #fff; を設定します
  • タイポグラフィのベースとして、@font-family-base@font-size-base@line-height-base 属性を使用します
  • @link-color でグローバルなリンク色を設定し、:hover にだけリンクの下線を適用します

これらのスタイルは scaffolding.less の中で見ることができます。

Normalize.css

改善されたクロス・ブラウザ・レンダリングのために、Nicolas GallagherJonathan Neal のプロジェクトである Normalize.css を使っています。

コンテナ

Bootstrap はサイトのコンテンツを包み込むための要素を必要とし、グリッド・システムを提供しています。プロジェクトには、2種類のコンテナの内の1つを使うことになります。padding 等のせいで、どちらのコンテナもネストできないことに注意してください。

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

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

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

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

グリッド・システム

Bootstrap には、デバイスやビューポートのサイズが増加したときに適切に拡大する12カラムのレスポンシブでモバイル最優先な可変グリッドシステムがあります。このグリッドシステムは、パワフルなよりセマンティックなレイアウトを生成するミックスインと同様に、容易なレイアウトのオプションのための事前定義されたクラスを備えています。

序文

グリッドシステムは、コンテンツを格納する一連のカラムや列によってページレイアウトを作るために使用されます。ここでは Bootstrap のグリッドシステムがどのように動作するかを紹介します:

  • 列は、正確なアラインメントとパディングのために、.container(固定幅)か .container-fluid(全幅)の中に配置されなければいけません。
  • 水平のカラムのグループを作るために列を使ってください。
  • コンテンツはカラムのなかに配置されるべきで、カラムだけが列の直接の子になります。
  • .row.col-xs-4 のような事前定義されたグリッド・クラスは、手早くグリッド・レイアウトを作るのに利用できます。Less のミックスインも、よりセマンティックなレイアウトに使うことができます。
  • カラムは padding で溝(カラム・コンテンツ間の隙間)を作ります。この padding は、列の中で .row のネガティブ・マージンを通して最初と最後のカラムのオフセットです。
  • メガティブ・マージンは、以下の例にあるようにインデントを戻すために使われています。これで、非グリッドなコンテンツをグリッド・カラムの中で整列させています。
  • グリッド・カラムは、どれだけ広げたいかを12の利用可能なカラム数を指定して生成されます。例えば、等間隔な3カラムであれば3つの .col-xs-4 を使用します。
  • もし1列に12を超えるカラムを配置すると、それぞれの超過したカラムのグループは、1つになって、新しいライン上に配置されます。
  • グリッド・クラスは、デバイスに区切りのサイズより大きいか同じ大きさの画面幅を適用し、小さなデバイスを対象にしたグリッド・クラスを上書きします。その結果、例えば、1つの要素にどんな .col-md-* を適用しても、.col-lg-* クラスがなければ、中間サイズのデバイスでの見た目だけでなく、大きなデバイスでの見た目にも影響を及ぼしません。

コードにこれらの原則を適用した例をご覧ください。

メディアクエリ

以下のメディアクエリを 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) { ... }

グリッドオプション

Bootstrap のグリッド・システムが、複数のデバイス間でどのように動作するかをまとめたテーブルをご覧ください。

極小デバイス 携帯電話 (<768px) 小型デバイス タブレット (≥768px) 中型デバイス デスクトップ (≥992px) 大型デバイス デスクトップ (≥1200px)
グリッドの挙動 常時水平 最初に折り畳まれて、切れ目の上で水平
コンテナ幅 なし(自動) 750px 970px 1170px
クラス接頭辞 .col-xs- .col-sm- .col-md- .col-lg-
カラム数 12
カラム幅 自動 ~62px ~81px ~97px
溝の幅 30px (カラムの両側に 15px ずつ)
ネスト
オフセット
カラム順序

例:水平方向に固定

単独で .col-md-* グリッド・クラスを使うと、デスクトップ・デバイス(中型)向けに水平にする前に、モバイル・デバイスやタブレット・デバイス(極小から小型)向けに積み上げ型から始まるグリッド・システムを構築することができます。.row のどこかにグリッド・カラムを配置してください。

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

例:可変コンテナ

いちばん外側の .container.container-fluid に変更して、固定幅のグリッド・レイアウトを全幅のレイアウトに切り替えます。

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

例:モバイルとデスクトップ

小さいデバイスで、カラムを単純に積む上げたくないですか?カラムに .col-xs-* .col-md-* を加えて、極小デバイスや中型デバイスにグリッド・クラスを使ってください。どんな風に機能するかのよりよいアイデアに以下の例を見てください。

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- ひとつの全幅と他を半幅にして、モバイルでカラムを積み上げます -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- カラムをモバイルでは 50% 幅から始まって、デスクトップでは 33.3% まで幅を広げます -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- モバイルとデスクトップで、カラムは常時 50% 幅にします -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

例:モバイル、タブレット、デスクトップ

タブレットに .col-sm-* を使って、先ほどの例を元にもっとダイナミックでパワフルなレイアウトを構築します。

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- オプション:もしコンテンツが高さに合わない場合は、XS cols をクリアしてください -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

例:カラムのラッピング

1列に12を超えるカラムが配置されると、超過したカラムのそれぞれのグループはひとつになって新しい列にラップされます。

.col-xs-9
.col-xs-4
9 + 4 = 13 > 12 なので、この4カラム幅の div は隣接したひとまとまりとして新しい列にラップされます。
.col-xs-6
後に続くカラムは新しい列に続いて配置されます。
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>9 + 4 = 13 > 12 なので、この4カラム幅の div は隣接したひとまとまりとして新しい列にラップされます。</div>
  <div class="col-xs-6">.col-xs-6<br>後に続くカラムは新しい列に続いて配置されます。</div>
</div>

レスポンシブなカラムのリセット

4段グリッドが有効な場合、ある切れ目のところでひとつが他より高いためにカラムが右側を正しく処理しない問題に必ず直面します。これを修正するには、.clearfixレスポンシブ・ユーティリティ・クラスを組み合わせて使ってください。

.col-xs-6 .col-sm-3
例として、ビューポートをリサイズするか携帯電話で確認してください。
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- 必要なビューポートのためだけに余分に clearfix を追加します -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

レスポンシブな切れ目でカラムをクリアするのに加えて、オフセットや左右の位置調整のリセットが必要になるかもしれません。これは動作をグリッドの例でご覧ください。

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row"gt;
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

カラムのオフセット

カラムを右へ移動するには .col-md-offset-* クラスを使います。このクラスはカラムの左マージンを * カラム増やします。例えば、.col-md-offset-4.col-md-4 を4カラム動かします。

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

ネストしたカラム

デフォルトのグリッドでコンテンツをネストするには、既にある .col-sm-* カラムの中に新しく .row.col-sm-* カラムのセットを追加します。ネストした列は12以下(12の全て有効なカラムを使う必要はありません)のカラムのセットになっている必要があります。

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

カラムの順序

.col-md-push-*.col-md-pull-* 修飾クラスを使うと、組み込みのグリッドのカラムの順序を簡単に変えることができます。

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Less の mixin と変数

素早いレイアウトのための事前にビルドされたグリッドクラスに加えて、Bootstrap にはシンプルでセマンティックなレイアウトを素早く生成する Less の変数と mixin があります。

変数

変数は、カラム数やガター幅とフローティング・カラムの開始点を指定するメディアクエリの値を決定します。以下にリストしたカスタム mixin と同様にこれらの変数を使って、上記に記述した事前定義されたグリッド・クラスを生成します。

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

Mixin

Mixin は、個々のグリッドのカラムにセマンティックな CSS を生成するグリッド変数と合わせて使われます。

// 一連のカラムのためにラッパーを作成
.make-row(@gutter: @grid-gutter-width) {
  // そしてフロート・カラムをクリア
  .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));
  }
}

使用例

変数を自分の好きな値に変えることもできますし、単に mixin をデフォルトの値で使うこともできます。これは、デフォルトの設定を使って間にギャップのある2カラムのレイアウトを作る例です。

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

タイポグラフィ

見出し

<h1> から <h6> の全ての HTML 見出しが利用できます。見出しのフォント・スタイルをインラインで表示されるテキストに使いたいときには、.h1 から .h6 のクラスも利用可能です。

h1. Bootstrap 見出し

中太字 36px

h2. Bootstrap 見出し

中太字 30px

h3. Bootstrap 見出し

中太字 24px

h4. Bootstrap 見出し

中太字 18px
h5. Bootstrap 見出し
中太字 14px
h6. Bootstrap 見出し
中太字 12px
<h1>h1. Bootstrap 見出し</h1>
<h2>h2. Bootstrap 見出し</h2>
<h3>h3. Bootstrap 見出し</h3>
<h4>h4. Bootstrap 見出し</h4>
<h5>h5. Bootstrap 見出し</h5>
<h6>h6. Bootstrap 見出し</h6>

一般的な <small> タグや .small クラスを使って、見出しに軽めで補助的なテキストを作ります。

h1. Bootstrap 見出し 補助的なテキスト

h2. Bootstrap 見出し 補助的なテキスト

h3. Bootstrap 見出し 補助的なテキスト

h4. Bootstrap 見出し 補助的なテキスト

h5. Bootstrap 見出し 補助的なテキスト
h6. Bootstrap 見出し 補助的なテキスト
<h1>h1. Bootstrap 見出し <small>補助的なテキスト</small></h1>
<h2>h2. Bootstrap 見出し <small>補助的なテキスト</small></h2>
<h3>h3. Bootstrap 見出し <small>補助的なテキスト</small></h3>
<h4>h4. Bootstrap 見出し <small>補助的なテキスト</small></h4>
<h5>h5. Bootstrap 見出し <small>補助的なテキスト</small></h5>
<h6>h6. Bootstrap 見出し <small>補助的なテキスト</small></h6>

本文

Bootstrap のグローバルな font-size のデフォルトは 14px で、line-height1.428 です。これは <body> と全てのパラグラフに適用されます。それに加えて、<p> (パラグラフ)は計算された行の高さ(デフォルトは 10px)の半分のボトム・マージンが設定されます。

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

書き出し

.lead をつけてパラグラフを目立たせます。

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Less によるビルド

タイポグラフィのスケールは、variables.less: @font-size-base@line-height-base の2つの Less 変数を元にしています。前者は全体を通してフォント・サイズのベースとして使われ、後者は行の高さのベースとして使われます。これらの変数といくつかの単純な計算で、全ての型その他のマージン、パディング、行の高さを作っています。変数をカスタマイズして Bootstrap を改造してください。

インラインテキスト要素

マークされたテキスト

連続したテキストを他の文脈でその関連性からハイライトさせるには <mark> タグを使います。

You can use the mark tag to highlight text.

You can use the mark tag to <mark>highlight</mark> text.

削除されたテキスト

ひとかたまりのテキストが削除されたことを表わすには <del> タグを使います。

This line of text is meant to be treated as deleted text.

<del>This line of text is meant to be treated as deleted text.</del>

取り消されたテキスト

まとまったテキストがもう適切ではないことを表すには <s> タグを使います。

This line of text is meant to be treated as no longer accurate.

<s>This line of text is meant to be treated as no longer accurate.</s>

挿入されたテキスト

ドキュメントにテキストが追加されたことを表すには <ins> タグを使います。

This line of text is meant to be treated as an addition to the document.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

アンダーラインを引かれたテキスト

テキストにアンダーラインを引くには <u> タグを使います。

This line of text will render as underlined

<u>This line of text will render as underlined</u>

ライト・ウェイトなスタイルには、HTML のデフォルトの強調タグを使ってください。

小さい文字

インラインやひとかたまりのテキストを抑えた感じにするには、<small> タグを使うと親サイズの 85% になります。見出し要素は、ネストされた <small> 要素に自身の font-size を受け取ります。

インライン要素に <small> の代わりに .small を使ってもかまいません。

This line of text is meant to be treated as fine print.

<small>This line of text is meant to be treated as fine print.</small>

太字

重みをつけたフォント・ウェイトでテキストの一部を強調します。

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

斜体

斜体でテキストの一部を強調します。

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

代替要素

HTML5 の <b><i> は気軽に使ってください。<i> が主に発言や専門用語等に使われる一方で、<b> は、単語やフレーズに余分な重要性を加えることなくハイライトにすることを意味します。

配置クラス

簡単にテキストを構成要素に対して再配置させるには、テキスト配置クラスを使います。

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

変形クラス

テキストを構成要素に対して変形させるには、大文字クラスを使います。

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

短縮

ホバーの拡張されたバージョンを表示するには、短縮と頭文字のために仕様実装された HTML <abbr> 要素を使います。title 属性を使った短縮には、ホバーに追加のコンテキストを表示したり支援技術ユーザーのために、細い点線とヘルプ・カーソルがあります。

基本の短縮

短縮の長いホバーで拡張されたテキストには、title 属性を <abbr> 要素と共に使います。

An abbreviation of the word attribute is attr.

<abbr title="attribute">attr</abbr>

イニシャル

少し小さいフォント・サイズで表示するには、短縮に .initialism を追加します。

HTML is the best thing since sliced bread.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

住所

最も近い先祖のための、もしくは作品全体のための問合せ情報を表示します。全ての行末は <br> で形式を保持します。

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

引用

ドキュメントに他から一団のコンテンツを引用したことを表示します。

デフォルトの引用

引用した HTML<blockquote> で括ります。直接的な引用には、<p> の使用を推奨します。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

引用のオプション

標準の <blockquote> のスタイルとコンテンツをシンプルなバリエーションに変更します。

引用元の表示

引用元を識別するために <footer> を加えます。引用作品の名前を <cite> で括ります。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

代替表示

右寄せするコンテンツには、引用に .blockquote-reverse を加えます。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote-reverse">
  ...
</blockquote>

リスト

順不同

アイテムのリストの並び順が、明らかに重要ではない場合

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...</li>
</ul>

順序

アイテムのリストの並び順が、明らかに重要である場合

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

様式なし

デフォルトの list-style とリスト・アイテム(直接の子だけ)の左マージンを取り除きます。これは直接の子リスト・アイテムだけに適用します。つまり、ネストしたリストにはさらにクラスを追加する必要があります。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="list-unstyled">
  <li>...</li>
</ul>

インライン

全てのリスト・アイテムを display: inline-block; で1行に配置して、少し間をあけます。

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li>...</li>
</ul>

説明

リスト項目に、関連した説明を添えます。

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

横配置の説明

<dl> 行の項目と説明を横に並べます。デフォルトの <dl> のように積み上げられた形式で始まりますが、ナビバーが広がるときは同じようになります。

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

自動切り詰め

横配置の説明リストは、項目が text-overflow で指定された左カラムに合わせるには長すぎる場合に切り詰めます。より狭いビューポートでは、デフォルトの積み上げられたレイアウトに変化します。

コード

インライン

インラインのコードの一部を <code> で括ります。

For example, <section> should be wrapped as inline.
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

ユーザー入力

キーボードからの一般的な入力を示すには、 <kbd> を使います。

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

コードブロック

複数行のコードには <pre> を使います。正しくレンダリングされるように、コードの中の < や > をエスケープするようにします。

<p>Sample text here...</p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

オプションとして .pre-scrollable クラスを加えて、高さを最大 350pxにしてY軸にスクロールバーを備えることもできます。

変数

変数であることを示すには <var> タグを使います。

y = mx + b

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

出力例

プログラムからの出力例のブロックであることを示すには <samp> タグを使います。

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>

テーブル

基本例

少しのパディングと水平の仕切りだけの基本的なスタイルには、<table> に基本クラス .table を追加します。すごく冗長に見えるかも知れませんが、カレンダーや日付選択のような他のプラグインにテーブルが横に広がった使い方を提供する、カスタムなテーブルのスタイルに分離することにしました。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table">
  ...
</table>

縞模様の行

<tbody> の中のテーブル行に縞模様を追加するには .table-striped を使います。

クロス・ブラウザーにおける互換性

縞模様のテーブルは :nth-child CSS セレクタでスタイルされているので、Internet Explorer 8 では利用できません。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-striped">
  ...
</table>

境界のあるテーブル

テーブルとセルの全ての横に境界を持たせるには .table-bordered を追加します。

# First Name Last Name Username
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-bordered">
  ...
</table>

ホバー行

<tbody> のテーブル行をホバー状態になるようにするには .table-hover を追加します。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-hover">
  ...
</table>

狭いテーブル

セルのパディングを半分にして、テーブルをよりコンパクトにするには .table-condensed を追加します。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<table class="table table-condensed">
  ...
</table>

コンテキスト・クラス

コンテキスト・クラスを使って、テーブルの行や個々のセルに色をつけます。

クラス 説明
.active 特定の行やセルにホバー色を適用します
.success 成功または肯定的な行動を表します
.info 中立的な情報を与える変化または行動を表します
.warning 注意が必要な警告を表します
.danger 危険または潜在的に否定的な行動を表します
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content
<!-- 行 -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- セル (`td` または `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

支援技術に意味を伝える

色を使ってテーブルの列や個別のセルに意味を持たせることは視覚的な表示だけで、読み上げソフトのような支援技術のユーザーには伝わりません。コンテンツそのものから明白なもの(適切な列やセルの見えるテキスト)にも、.sr-only クラスで隠された追加テキストのような他の意味を含むものにも、色が意味する情報を保証してください。

レスポンシブなテーブル

小さなデバイス(768px 未満)で水平スクロールさせるために、.table-responsive の中の .table を囲うことで、レスポンシブなテーブルを作ることができます。768px より広い場合は、このテーブルの違いはわかりません。

垂直方向のクリッピング/切り捨て

レスポンシブなテーブルは overflow-y: hidden を利用して、テーブルのいちばん下やいちばん上の端を超えるコンテンツをクリップします。特に、ドロップダウン・メニューや他のサード・パーティー製ウィジェットをクリップできます。

Firefox とフィールド・セット

Firefox には、レスポンシブなテーブルに干渉する width がらみの困ったフィールド・セットのスタイリングがあります。これは、Bootstrap には備わっていない Firefox 特有のハックなしでは上書きできません:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

もっと情報が必要な場合は、この Stack Overflow での回答をご覧ください。

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

フォーム

基本例

個々のフォームコントロールは自動的にグローバルなスタイルの影響を受けます。.form-control を伴う <input><textarea><select> といった全てのテキスト系の要素はデフォルトで width: 100%; に設定されています。最適なスペーシングのために .form-group の中のラベルとコントロールを囲います。

Example block-level help text here.

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

フォーム・グループと入力グループを混ぜないでください

フォーム・グループを直接入力グループと混ぜないでください。その代わりに、フォーム・グループの内側に入力グループをネストしてください。

インライン・フォーム

左揃えのインライン・ボックス・コントロールにはフォーム(<form> である必要はありません)に .form-inline を加えます。これは少なくとも幅が 768px あるビューポートの内側にだけ適用されます。

カスタム幅が必要になるかも知れません

Bootstrap ではデフォルトで入力と選択に 100% 幅が適用されます。インライン・フォームの中では、width: auto; にリセットするので、複数のコントロールを同じ行に配置できます。レイアウトによっては、追加でカスタム幅が必要になるかも知れません。

いつもラベルをつけてください

全ての入力にラベルがないと、読み上げソフトがフォームで困ることになります。こうしたインライン・フォームには、.sr-only クラスを使うことでラベルを隠すことができます。支援技術にラベルを提供するさらに進んだ代替案は、aria-labelaria-labelledbytitle 属性です。この内のどれひとつない場合、読み上げソフトは placeholder 属性を使うことに頼り、どれかがある場合でも、他のラベルの方法の代わりとしての placeholder の使用は推奨されないことに注意してください。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
$
.00
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
<-- ここまで作業中 ↑v3.3.5↓3.2.0 -->

水平フォーム

Bootstrap の事前に定義されたグリッド・クラスを使って、フォーム・コントロールのラベルとグループを、フォームに .form-horizontal を加えることで水平なレイアウトに位置揃えさせることができます。この変更で .form-group をグリッドの行として振る舞わせるので、.row は必要ありません。

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

サポートされるコントロール

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

入力

テキスト・ベースの入力領域のある、もっとも一般的なフォーム・コントロール。
全ての HTML5 の型:textpassworddatetimedatetime-localdatemonthtimeweeknumberemailurlsearchtelcolor のサポートが含まれています。

型宣言が必要です

入力は、その type が正しく宣言されていると、最大幅になるだけです。

<input type="text" class="form-control" placeholder="Text input">

入力グループ

テキスト・ベースの <input> の前や後に統合されたテキストやボタンを加えるには、入力グループ・コンポーネントを確認してください

テキスト領域

複数行のテキストをサポートするフォーム・コントール。必要に応じて rows 属性を変更してください。

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

チェックボックスとラジオボタン

チェックボックスはリストの中から1つもしくは複数の選択肢を選ぶためにあり、ラジオボタンはたくさんの中から1つの選択肢を選ぶためにあります。

disabled 属性のあるチェックボックスやラジオボタンは適正に表示されます。ユーザーがラベルにカーソルをかざしたときに「選択不可」カーソルを表示するようにチェックボックスやラジオボタンに <label> を持たせるには、.radio.radio-inline.checkbox.checkbox-inline<fieldset>.disabled クラスを加えます。

デフォルト(積み上げ型)


<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

インラインのチェックボックスとラジオボタン

同じ行に表示したい場合は、一連のチェックボックスやラジオボタンに .checkbox-inline.radio-inline を使います。


<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="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

選択

一度に複数の選択肢を表示したい場合は、デフォルト・オプションを使うか multiple を加えます。


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

静的なコントロール

水平フォームの中で簡単なテキストをフォームラベルの横に配置する場合は、<p>.form-control-static クラスを使います。

email@example.com

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

入力フォーカス

いくつかのフォーム・コントロールからデフォルトの outline 形式を廃止して、:focus のために box-shadow を適用しています。

:focus 状態のデモ

上の例では、.form-control:focus 状態をデモするために、入力にカスタム形式を使っています。

入力不可

ユーザーの入力を抑止するために、入力にブール値属性の disabled を加えると、わずかに違った見え方になります。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

不可フィールドセット

<fieldset>disabled 属性を加えると、 <fieldset> の中にある全てのコントロールを一度に不可にできます。

<a> のリンク機能についての警告

このケースでは、Bootstrap のスタイルは <a class="btn btn-*"> ボタンのリンク機能を不可にしようとして pointer-events: none を使いますが、この CSS のプロパティはまだ標準化されておらず、Opera 18 より以前のバージョンや Internet Explorer 11 では完全にサポートされていません。ですので、安全のために、こういうリンクを不可にするにはカスタムの JavaScript を使ってください。

クロス・ブラウザにおける互換性

Bootstrap は全てのブラウザにこれらのスタイルを適用していますが、Internet Explorer 9 とそれ以前のバージョンでは実際に <fieldset>disabled 属性をサポートしていません。これらのブラウザでフィールドセットを不可にするにはカスタムの JavaScript を使ってください。

<form role="form">
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

読み取り専用入力

ユーザーの入力を抑止するために、入力にブール値属性の readonly を加えると、入力不可表現になります。

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

状態確認

Bootstrap には、フォーム・コントロールにエラー、注意、成功の状態のために確認スタイルがあります。使うには、親要素に .has-warning.has-error.has-success を加えてください。その要素の中の .control-label.form-control.help-block は確認スタイルになります。

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-error">
  <div class="radio">
    <label class="checkbox">
      <input type="checkbox" id="checkboxError" value="option1">
      Option one is this and that&mdash;be sure to include why it's great
    </label>
  </div>
</div>
<div class="has-success">
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="radiosSuccess1" value="option1" checked>
      Option one is this and that&mdash;be sure to include why it's great
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="radiosSuccess2" value="option2">
      Option two can be something else and selecting it will deselect option one
    </label>
  </div>
</div>

オプション・アイコン

.has-feedback を追加すると、オプションのフィードバック・アイコンを右側に加えることができます。

フィードバック・アイコンは、テキストの <input class="form-control"> 要素だけに機能します。

アイコンやラベルと入力グループ

フィードバック・アイコンの手動による位置調整は、ラベルのない入力や右側に追加された入力グループには必要です。アクセシビリティのために、全ての入力にラベルをつけることを強く推奨します。表示されているラベルをやめたいなら、sr-only クラスでそれらを隠してください。ラベルなしでやらなければならないなら、フィードバック・アイコンの top の値を調整してください。入力グループには、right の値を調整してアドオンの幅に関係するピクセル値を適正にしてください。

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2">
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

水平インライン・フォームのオプション・アイコン

<form class="form-horizontal" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3">
      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
  </div>
</form>
<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
</form>

隠すための .sr-only ラベルのあるオプション・アイコン

見えるラベルのないフォーム・コントロールには、ラベルに .sr-only クラスを加えてください。加えられると Bootstrap は自動的にアイコンの位置を調整します。

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

サイズの制御

.input-lg のようなクラスを使って高さを設定し、.col-lg-* のようなグリッド・カラムのクラスを使って幅を設定してください。

高さ

ボタンのサイズに合うようにより高いまたはより低いフォーム・コントロールを作ります。

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

水平のフォーム・グループのサイズ

.form-group-lg.form-group-sm を加えると、.form-horizontal の中のラベルとフォーム・コントロールのサイズを素早く設定できます。

<form class="form-horizontal" role="form">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

カラムのサイズ

グリッド・カラムやカスタムの親要素の入力を囲むと、簡単に期待する幅にすることができます。

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

ヘルプ文

フォーム・コントロール用ブロック・レベル・ヘルプ文

A block of help text that breaks onto a new line and may extend beyond one line.
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

ボタン

オプション

すばやく様式化されたボタンを作るには、利用可能なボタン・クラスのどれかを使ってください。

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

サイズ

もっと大きいまたは小さいボタンがいいですか?追加のサイズに .btn-lg.btn-sm.btn-xs を加えてください。

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

.btn-block を加えると、親要素の幅いっぱいに広がるブロック・レベルのボタンを作れます。

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

アクティブ状態

ボタンはアクティブな場合、押された状態(暗くなった背景、暗くなった境界、差し込まれた影つき)に見えます。これは :active によって、<button> 要素になされます。<a> 要素には、.active でなされます。しかしながら、アクティブな状態をプログラム的に複製する必要から <button>.active を使ってもかまいません。

ボタン要素

疑似クラスとしてであれば :active を加える必要はありませんが、同じ見た目にする必要があるなら .active を加えてください。

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

アンカー要素

<a> ボタンに .active クラスを加えてください。

Primary link Link

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

不可状態

クリックできない見た目のボタンにするには背景を 50% 薄くします。

ボタン要素

<button> ボタンに disabled 属性を加えてください。

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

クロス・ブラウザ互換性

<button>disabled 属性を加えると、Internet Explorer 9 とそれ以下のバージョンではイヤなテキスト・シャドウのついたグレーのテキストにレンダリングされますが、修正不可能です。

アンカー要素

<a> ボタンに .disabled クラスを加えてください。

Primary link Link

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

一般的な .active クラスと同様に、ここではユーティリティ・クラスとして .disabled を使っているので、プリフィックスは必要ありません。

リンク機能についての注意

このクラスは <a> のリンク機能を不可にしようとして pointer-events: none を使っていますが、CSS のプロパティがまだ標準化されておらず、Opera 18 とそれ以下のバージョンと Internet Explorer 11 では完全にはサポートされていません。ですので安全のために、このようなリンクを不可にするにはカスタムの JavaScript を使ってください。

コンテキスト特有の使用方法

ボタン・クラスは <a><button> 要素で使えますが、<button> 要素だけはナビとナビバーのコンポーネントの中でサポートされています。

ボタン・タグ

<a><button><input> クラスでボタン・クラスを使ってください。

Link
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

クロス・ブラウザ・レンダリング

ベストな試みとして、クロスブラウザ・レンダリングとのマッチングを確実にするためには、いつでも可能な限り <button> 要素を使うことを強く推奨します

中でも、 Firefox 30 より前のバージョンにはバグがあって<input>ベースのボタンの line-height を設定することを妨げるので、Firefox では他のボタンの高さと正しくそろえられません。

画像

レスポンシブな画像

Bootstrap 3 においては、画像は .img-responsive クラスを加えることでレスポンシブにすることができます。これは画像に max-width: 100%;height: auto; を適用して、親要素にうまくサイズを合わせます。

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

画像の形

<img> 要素にクラスを加えることで、簡単に画像をスタイリングします。

クロス・ブラウザ互換性

Internet Explorer 8 では、角丸がサポートされていないことにご注意ください。

A generic square placeholder image with rounded corners A generic square placeholder image where only the portion within the circle circumscribed about said square is visible A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

ヘルパークラス

コンテキスト色

少しの強調ユーティリティ・クラスを使えば、色を通して意味を伝えることができます。これらはまたリンクに適用されたり、ちょうどデフォルトのリンク形式のようにホバーのときに暗くなったりします。

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

特殊性の扱い

ときどき強調クラスが他のセレクタの特殊性のせいで適用できないことがあります。たいていの場合、クラスと一緒に <span> の中のテキストを囲むことが十分な回避策です。

コンテキスト背景

コンテキスト・テキスト色クラスに似たものとして、簡単に要素の背景にコンテキスト・クラスを設定できます。アンカー・コポーネントはテキスト・クラスと同じようにホバーのときに暗くなります。

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

特殊性の扱い

ときどきコンテキスト背景クラスが他のセレクタの特殊性のせいで適用できないことがあります。 いくつかケースでは、クラスと一緒に <div> の中の要素のコンテンツを囲むことが十分な回避策です。

閉じるアイコン

モーダルやアラートのようにコンテンツを消してしまうためには、一般的な閉じるアイコンを使います。

<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

キャレット

ドロップダウン機能や向きを示すためにはキャレットを使います。デフォルトのキャレットはドロップ・メニューの中では自動的に逆になることにご注意ください。

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

すばやいフロート

要素をクラスで左や右にフロートさせます。!important は特定の問題を避けるためにあります。クラスはまた minxin としても使えます。

<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

ナビバーでは使えません

ユーティリティー・クラスでナビバーのコンポーネントを配置するには、代わりに .navbar-left.navbar-right を使ってください。詳細は、ナビバーのドキュメントをお読みください

コンテンツ・ブロックの中央配置

要素を display: block に設定して、margin で中央に配置します。mixin やクラスとしても利用できます。

<div class="center-block">...</div>
// Classes
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as mixins
.element {
  .center-block();
}

clearfix

親要素に .clearfix を加えることで簡単にfloat をクリアできます。Nicolas Gallagher によって広まった 極小の clearfix を利用します。mixin としても使うことができます。

<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a Mixin
.element {
  .clearfix();
}

コンテンツの表示/非表示

.show and .hidden クラスを使うことで要素の可視や不可視にできます(読み上げソフトを含む)。これらのクラスは !important を使うことで、すばやいフロートのように特定の競合を回避します。これはブロックレベルでの切り替えにだけ利用できます。mixin として使うこともできます。

.hide は利用可能ですが、いつも読み上げソフトに影響するわけではなく、v3.0.1 では使われていません。代わりに .hidden.sr-only を使ってください。

さらに、.invisible は要素の可視性だけの切り替えに使用可能で、これはその display が修正されておらず、要素がまだドキュメントの流れに影響を与えられることを意味します。

<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

読み上げソフトとキーボード・ナビゲーション・コンテンツ

.sr-only を使うと読み上げソフトを除く全てのデバイスに対して要素を隠します。.sr-only-focusable.sr-only を一緒に使うと、要素がフォーカスされたとき(例:キーボードしか使わないユーザーによって)に再度見えるようになります。次の アクセシビリティのベスト・プラクティスが必要です。mixin としても使うことができます。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a Mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

画像の入れ替え

.text-hide クラスか mixin で背景画像の要素のテキスト・コンテンツを入れ替えることができます。

<h1 class="text-hide">Custom heading</h1>
// Usage as a Mixin
.heading {
  .text-hide();
}

レスポンシブ・ユーティリティー

より早いモバイル・フレンドリーな開発のために、メディア・クエリでデバイスによってコンテンツを表示したり隠したりするこれらのユーティリティ・クラスを使ってください。印刷されたときにコンテンツを切り替えるためのユーティリティー・クラスもあります。

これらのユーティリティ・クラスは限定された基準で使い、全く異なるバージョンの同じサイトを作ることは避けてください。その代わりに、それぞれのデバイスでの見た目を補完するために使ってください。

利用可能なクラス

ビューポートのブレークポイントをまたいでコンテンツを切り替えるのに利用可能なクラスをひとつか組み合わせて使ってください。

極小デバイス 携帯電話 (<768px) 小型デバイス タブレット (≥768px) 中型デバイス デスクトップ (≥992px) 大型デバイス デスクトップ (≥1200px)
.visible-xs-* 見える
.visible-sm-* 見える
.visible-md-* 見える
.visible-lg-* 見える
.hidden-xs 見える 見える 見える
.hidden-sm 見える 見える 見える
.hidden-md 見える 見える 見える
.hidden-lg 見える 見える 見える

v3.2.0 では、それぞれのブレークポイントの .visible-*-* クラスは3つのバリエーションからなり、それぞれの CSS における display プロパティの値との対応は以下のようになります。

クラスのグループ CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

なので例えば、極小( xs )の画面では、利用できる .visible-*-* クラスは:.visible-xs-block.visible-xs-inline.visible-xs-inline-block です。

.visible-xs.visible-sm.visible-md.visible-lg クラスもありますが、v3.2.0 においては推奨しません。これらはほぼ .visible-*-block と等価ですが、<table> に関係する要素の切り替えのための追加的な特別な場合を除きます。

印刷クラス

通常のレスポンシブ・クラスと同様に、印刷のためにコンテンツを切り替えるのに使います。

クラス ブラウザ 印刷
.visible-print-block
.visible-print-inline
.visible-print-inline-block
見える
.hidden-print 見える

.visible-print クラスもありますが、v3.2.0 においては推奨しません。これはほぼ .visible-print-block と等価ですが、<table> に関係する要素のための追加的な特別な場合を除きます。

テスト・ケース

レスポンシブ・ユーティリティー・クラスを試すには、ブラウザをリサイズするか、異なるデバイスでロードしてください。

見えるのは...

緑のチェックマークは現在のビューポートで要素が見えることを示しています。

✔ 極小で見える
✔ 小型で見える
中型 ✔ 中型で見える
✔ 大型で見える
✔ 極小と小型で見える
✔ 中型と大型で見える
✔ 極小と中型で見える
✔ 小型と大型で見える
✔ 極小と大型で見える
✔ 小型と中型で見える

隠れるのは...

ここでも、緑のチェックマークは現在のビューポートで要素が隠れることを示しています。

✔ 極小では隠れる
✔ 小型では隠れる
Medium ✔ 中型では隠れる
✔ 大型では隠れる
✔ 極小と小型では隠れる
✔ 中型と大型では隠れる
✔ 極小と中型では隠れる
✔ 小型と大型では隠れる
✔ 極小と大型では隠れる
✔ 小型と中型では隠れる

Less の使用

Bootstrap の CSS は、CSS をコンパイルするための変数、mixin、関数のような付加機能のあるプリプロセッサである、Less でビルドされています。コンパイル済みの CSS ファイルの代わりに Less のソースを使うために見ることは、私達がフレームワークの至る所で使っているたくさんの変数や mixin を利用することが可能になります。

グリッド変数と mixin はグリッド・システムで説明しています。

Bootstrap のコンパイル

Bootstrap は少なくとも2つの方法:コンパイルされた CSS か、Less のソース・ファイル、で使うことができます。Less ファイルをコンパイルするには、必要なコマンドを実行するために開発環境をセットアップする方法を「はじめに」で調べてください。

サードパーティーのコンパイルしたツールは Bootstrap で動くかも知れませんが、私達のコア・チームにサポートされていません。

変数

変数は、色やスペーシングやフォントなどのように一般的に使われる値を一ヵ所に集めて共有する方法として、プロジェクトの全体を通して使われています。完全な内訳は、カスタマイザをご覧ください。

簡単に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: #428bca;
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

これらの色の値をそのまま使うか、あなたのプロジェクトにより意味のある変数に再指定してください。

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

足場

あなたのサイトのスケルトンのキーとなる要素をすばやくカスタマイズするための少しの変数です。

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

1つだけの値で、簡単にリンクを正しい色に合わせます。

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

// Usage
a {
  color: @link-color;
  text-decoration: none;

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

@link-hover-color は、正しいホバー色を自動的に作るために、Less の他のすばらしいツールである関数を使っていることに注意してください。darkenlightensaturatedesaturateも使用可能です。

タイポグラフィ

タイプ・フェイス、テキストのサイズ、見出し、その他をほんの少しのすばやい変数でカンタンに設定します。そのうえ Bootstrap は簡単なタイポグラフィの 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;

アイコン

アイコンの場所とファイル名をカスタマイズするための2つのすばやい変数です。

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

コンポーネント

Bootstrap を通してコンポーネントは、一般的な値を設定するためにいくつかのデフォルト変数を利用しています。これはもっとも一般的に使われているものです。

@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

ベンダー mixin は、コンパイルされた CSS の中の全ての関連しているベンダー・プリフィックスをインクルードすることで、複数のブラウザをサポートするのを手助けする mixin です。

box-sizing

コンポーネントの box モデルを1つの mixin でリセットします。詳しくは、Mozilla の役に立つ記事をご覧ください。

mixin は、v3.2.0 では自動プリフィックスの導入によって使われていません。Bootstrap は後方互換性を保つために、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;
}

角丸

今日、全ての最新ブラウザはプリフィックスのない border-radius プロパティをサポートしています。よって、.border-radius() mixin はありませんが、Bootstrap にはオブジェクトの個々の側にある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-shadow プロパティを使うようにしましょう。もし、旧型の Android(v4 以前)や iOS デバイス(iOS 5 以前)のサポートが必要なら、必要とされる -webkit プリフィックスを訂正する使用されていない mixin を使ってください。

Bootstrap は標準のプロパティをサポートしていない旧式のプラットフォームを公式にはサポートしていないので、mixin は、v3.1.0 では使用されていません。 Bootstrap は 後方互換性を保つために 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;
}

切り替え

柔軟性のための複数の mixin です。全ての切り替え情報を1つに設定するか、必要に応じて個々の遅延と持続を指定します。

mixin は v3.2.0 では自動プリフィックスの導入によって使用されていません。後方互換性を保つために、Bootstrap は 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;
}

変形

オブジェクトを回転させたり、拡大縮小させたり、移動(動き)させたり、傾けさせたりします。

mixin は v3.2.0 では自動プリフィックスの導入によって使用されていません。後方互換性を保つために、Bootstrap は Bootstrap v4 まで内部的に mixin を使い続けます。

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          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 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          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 only
          transform-origin: @origin;
}

アニメーション

1つの宣言で全ての CSS のアニメーションのプロパティを使うための1つの mixin と、個々のプロパティのための他の mixin です。

mixin は v3.2.0 では自動プリフィックスの導入によって使用されていません。後方互換性を保つために、Bootstrap は 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;
}

不透明度

全てのブラウザの不透明度を設定して、IE8 に filter の代替手段を提供します。

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

代替テキスト

それぞれのフィールドの中にフォーム・コントロールのためのコンテキストを提供します。

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

カラム

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

グラデーション

背景に対して、簡単に段階的に任意の2色の間でグラデーションを施します。もっと進んで、向きを設定したり、3色使ったり、放射状にグラデーションにしたり。1つの mixin で、必要な全てのプリフィックスされたシンタックスが得られます。

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

また、線形グラデーションのために、標準的な2色の角度を指定できます:

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

床屋のようなグラデーションが必要なら、それも簡単です。1色を指定して、半透明の白い縞模様を重ねます。

#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

ユーティリティ mixin は、特定の目的やタスクを達成するために、CSS の属性とは無関係に別の方法でまとめられた mixin です。

clearfix

適切な箇所に、.clearfix() mixin を加える代わりに、要素に class="clearfix" を加えるのを忘れないで下さい。Nicolas Gallagermicro clearfix を使ってください。

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

水平方向のセンタリング

親要素の中で要素を手早くセンタリングします。widthmax-width が設定されていることが必要です。

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

サイズ変更

オブジェクトの大きさを、より簡単に指定します。

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

リサイズ可能なテキスト領域

テキスト領域や他の要素をリサイズするオプションを簡単に設定できます。標準的なブラウザの挙動( both )がデフォルトです。

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

テキストの切り詰め

ひとつの mixin でテキストを簡単に省略形に切り詰められます。要素が blockinline-block レベルであることが必要です。

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Retina 画像

2つの画像のパスと1つ目の画像の大きさを指定すると、Bootstrap は2つ目のメディア・クエリを用意します。もし多くの画像を扱う場合は、Retina 画像の CSS を、手作業で1つのメディア・クエリ内に書くことを検討してください。

.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;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Sass の使用

Bootstrap は Less でビルドされていますが、公式の Sass 版もあります。別の GitHub のレポジトリでメンテナンスしていて、変換スクリプトと一緒に更新を処理しています。

内容

Sass 版は別のレポジトリで少し異なる聴衆を対象としているので、プロジェクトの中身はメインの Bootstrap のプロジェクトとは大きく異なっています。このことは、Sass 版がたくさんの Sass ベースのシステムとの可能な限りの互換性を保証しています。

パス 説明
lib/ Ruby gem のコード ( Sass の設定、Rails と Compass の統合)
tasks/ 変換スクリプト(上流の Less を Sass に変更)
test/ コンパイルのテスト
templates/ Compass パッケージのマニフェスト
vendor/assets/ Sass と JavaScript とフォント・ファイル
Rakefile かき集めたり変換したりといった内部タスク

これらのファイルの挙動を見るには、Sass 版の Github リポジトリを参照してください。

インストール

Sass 版の Bootstrap のインストールや使い方については、Github のリポジトリの readmeを参照してください。これがもっとも最新のソースで、Rails や Compass や標準の Sass プロジェクトと一緒に使うための情報が含まれています。

Sass 版 Bootstrap