どこでも、みんなのために設計されています。

ブートストラップを使う理由が必要ですか？もう探し回る必要はありません。

すべてのクリエイターたちのために構築されました

我々はWeb上で素晴らしい製品を作るのが大好きです。WEBをとても愛し、より便利に、より良く、より速く行うように支援することを決めました。ブートストラップはあなたのために構築されています。

すべてのスキルレベルに対応

ブートストラップは、あらゆるスキルレベルのデザイナーや開発者、熟練者から初心者の人々を助けるために設計されています。完全なキットとしてそれを使用するか、ライブラリーとして使うもよし、すべてはあなた次第です。

クロスブラウザ

元来はモダンブラウザだけで構築されておりましたが、ブートストラップ2により、タブレットやスマートフォンにも対応！すべての主要なブラウザ（IE7でも！）のサポートするために進化してきました。

12列のグリッドシステム

グリッドシステムは、すべてではありませんが、あなたの仕事の中核に耐久性と柔軟なものを持たせることにより、開発がはるかに簡単に行うことができます。内蔵のグリッドクラスを使用するか、独自のクラスを追加してもよいでしょう。

対応設計

ストラップ2では、我々は完全には応答行ってきました。このコンポーネントは、一貫性のある経験に関係なく、解像度やデバイスの範囲に応じてスケーリングされます。

スタイルガイドドキュメント

他のフロントエンドのツールキットと異なり、ブートストラップは、私たちの特徴だけでなくベスト・プラクティスも文書化するスタイルガイド、コード化された例として、第一に設計されました。

成長ライブラリ

わずか10kb(gzipped)であるにもかかわらず、ブートストラップは、多数の機能部品がすぐに使える最も完全なフロントエンドのツールキットのうちの1つです。

カスタムのjQueryプラグイン

使いやすい、適切、かつ拡張可能な素晴らしいデザインの良いコンポーネント、ブートストラップで、特注のjQuery pluginsにプロジェクトを活気づけさせます。

LESS上に構築されたCSS

複雑な構造なCSSよりLESSが優れいています。 LESSの中の変数、入れ子、操作、およびミックスインは、CSSコーディングを最小のオーバーヘッドでより速く、より効率的にします。

HTML5

新しいHTML5の要素と構文をサポートするために構築しました。

CSS3

究極のスタイルを徐々に強化されたコンポーネントです。

オープンソース

オープンソース用に構築されたGitHubのコミュニティによって維持されています。

Twitter製作者

経験豊かなエンジニアとデザイナーが提供しています。

Requires HTML5 doctype

ブートストラップは、HTML5のDOCTYPEを使用する必要があり、HTML要素とCSSプロパティを使用しています。プロジェクト内のすべてのブートストラップページの先頭にそれを含めるようにしてください

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

タイポグラフィとリンク

scaffolding.lessファイルは、基本的なグローバルなディスプレイ、タイポグラフィ、リンクスタイルを設定します。具体的には：

bodyにマージンを削除します。
bodyにbackground-color: white;を設定します。
@baseFontFamily, @baseFontSize, @baseLineHeightなどフォントのベース設定を行います。
@linkColor によってグローバルなリンク色を適用します。ホバーで強調する場合は:hoverを使用します。

標準的なリセット

ブートストラップ2のように、伝統的なCSSのリセットからのNormalize.cssによるプロジェクトニコラス·ギャラガーも電力いる HTML5ボイラープレートを要素を使用するために進化してきました。

新規リセットは（reset.less）簡潔性と精度のため削除され、多くの要素を持つことを見つけることができます。

固定レイアウト

デフォルトで、単一で提供されるほぼすべてのウェブサイトまたはページのシンプル940px幅、中心のレイアウトのcontainer。

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

可変レイアウト

container-fluidは、柔軟なページ構造は、min-widthとmax-width、および左側のサイドバーを提供します。画面サイズにより絡むサイズが変更されます。

<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>

ブートストラップの一部として提供されているデフォルトのグリッドシステムは幅940px、12列のグリッドで構成されています。スマートフォン、モバイルタブレット、タブレットPCと小さなデスクトップ、大型ワイドデスクトップ：4つのさまざまなデバイスや解像度の応答のバリエーションがあります。

ここに示すように、基本的なレイアウトは、2つの"列"グリッドシステムの一部として定義されている。基本12列の数を各スパニングで作成することができます。

<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>

相殺グリッド

カラムの間に余白をとったり幅を取らせてレイアウトする方法です

<div class="row">
<div class="span4">...</div>
<div class="span4 offset4">...</div>
</div>

<div class="row">
<div class="span8 offset4">...</div>
</div>

ネストカラムも可能です

ブートストラップのグリッドシステムでは、ネストもとても簡単です。ネストコンテンツに、新しい行と業とのセットを追加。コレだけです。

<div class="row">
<div class="span12">
Level 1 of column
<div class="row">
<div class="span6">Level 2</div>
<div class="span6">Level 2</div>
</div>
</div>
</div>

サポートされているデバイス

ブートストラップは、さまざまなデバイスや画面の解像度で、プロジェクトをより適切にするのに役立つメディアクエリの一握りをサポートしています。ここには含まれている内容は次のとおりです

ラベル	レイアウト幅	カラム幅	余白幅
スマートフォン	480px以下	可変カラム, 無固定幅
モバイルタブレット	480px ～ 768px	可変カラム, 無固定幅
タブレットPC	768px ～ 980px	44px	20px
デフォルト	最大980px	60px	20px
大型ディスプレイ	最大1210px	70px	30px

何をすればよいか

メディア合わせ、多くの条件比率に基づいた幅、表示方式、などカスタムCSSを考慮に入れます。変更はmin-widthおよびmax-widhtの近くを確認してください。
必要なところならどこでも、フロートの代わりにグリッド・スタック要素の中でカラムの幅を修正し、より適切に標題とテキストをリサイズします。

メディアクエリの使い方

ブートストラップは自動的にこれらのメディア対応していません。しかし、それらのメディアに対応することはとても簡単で、最小のセットアップで済みます。
ブートストラップ特徴を活かすための応答は少数のオプションを持っています。
コンパイルされた反応するバージョンを使用する、bootstrap-responsive.cssをリンクすれば4つのメディアと対応しています。
すべてに対応する必要がありません。以下がメディア対応の例になります。

  // Landscape phones and down
  @media (max-width: 480px) { ... }

  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }

  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 980px) { ... }

  // Large desktop
  @media (min-width: 1200px) { .. }

表記上のスケール

私たちはすべての文字列およびのマージン、パディング、ラインの高さを作成するために変数と計算をしています。

note:HTML5の中で自由に<b> と<i>を使用してください。しかし、それらの使用法はビットを変更しました。
<b> <i>がほとんど音声、専門用語など向けである間補足重要性を伝えずに、言葉または句を強調するというつもりです。

H1-見出し1

H2-見出し2

H3-見出し3

H4-見出し4

H5-見出し5

H6-見出し6

強調、アドレスおよび省略

要素	使用	オプション
`<strong>`	テキストのスニペットを強調するために重要	None
`<em>`	テキストのスニペットを強調するためにストレス	None
`<abbr>`	マウスオーバーにて略語や頭字語の正式名称を表示	オプション含む`title`展開されたテキスト
`<address>`	最も近い祖先や仕事の全体のボディのための連絡先については、	すべての行を終了して書式設定を保持 `<br>`

codeの使用例

単語やタグを強調表示します。

<p> <code><address></code>タグがどのように使われることができるかという2つの例が、ここにあります。</p>

<address>タグがどのように使われることができるかという2つの例が、ここにあります

addressの使用例

住所やメールアドレスを表記するときに使います。

<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@gmail.com</a>
</address>

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name
first.last@gmail.com

abbr使用例

略語はテキストと下点線の境界でスタイリングされています。本来の意味がホバーした時にタイトル表示されます。ホバーしたときヘルプカーソルも表示されます。

<p><abbr title="HyperText Markup Language">HTML</abbr>はスライスされたパン以来の最高のものです。</p>
<p><abbr title="attribute">attr</abbr>は単語属性の略語である。</p>

HTMLはスライスされたパン以来の最高のものです。

attrは単語属性の略語である。

blockquote使用例

.pull-rightクラスを追加すると右側に表示されます。

要素	使用	オプション
`<blockquote>`	別のソースからコンテンツを引用するためのブロックレベル要素	追加<引用元>URL属性フローとオプションで`.pull-left` （左寄り）と `.pull-right`（右寄り）が使用できます。
`<small>`	通常、省略可能な要素で、作品のタイトルや作者名などに利用する。	<引用する>出典のタイトルか名前の間に置く

<blockquote>
<p>ツイッターブートストラップは毎回すごい進化を遂げている！バージョンアップのたびにすごい機能が追加されている！</p>
<small>誰かがつぶやいていたよ</small>
</blockquote>

ツイッターブートストラップは毎回すごい進化を遂げている！バージョンアップのたびにすごい機能が追加されている！
誰かがつぶやいていたよ

<ul>
<li>ツイッター</li>
<li>ブート</li>
<li>ストラップ</li>
<li>バージョン2</li>
</ul>
<ul class="unstyled">
<li>リスト</li>
<li>タグ</li>
<li>なし</li>
</ul>
<ol>
<li>数字の付いた</li>
<i>リストタイプ</li>
<li>です</li>
</ol>
<dl>
<dt>記述リスト</dt>
<dd>説明リストは、用語を定義するのに最適です。</dd>
<dt>ツイッターブートストラップ</dt>
<dd>CSSフレームワークの大本命！ツイッターのデザインをそのままお届け！</dd>
</dl>

ツイッター
ブート
ストラップ
バージョン2

リスト
タグ
なし

数字の付いた
リストタイプ
です

記述リスト: 説明リストは、用語を定義するのに最適です。
ツイッターブートストラップ: CSSフレームワークの大本命！ツイッターのデザインをそのままお届け！

code使用例

ベーシック

適切なレンダリングをするため複数行のコードを表記する場合は<pre>を使用。

<p>Sample text here...</p>

<pre>
<p>Sample text here...</p>
</pre>

Google Prettify

グーグルのコードハイライトです。<pre>の要素をオプションクラスで強化されたレンダリング表示します。

<p>Sample text here...</p>

<pre class="prettyprint linenums">
  <p>Sample text here...</p>
</pre>

ダウンロードはコチラそして使い方はコチラを参照してください

テーブルが自動的に読みやすさを確保し、構造を維持するために、ほんの数枠でスタイリングされています。2.0では、テーブルのクラスが必要になります。

タグ	説明
`<table>`	データを表形式で表示するための要素をラップする
`<thead>`	テーブルのヘッダー行のコンテナ要素（<TR>は）テーブルの列にラベルを付け
`<tbody>`	テーブルの行のコンテナ要素（<TR>テーブルのボディに）
`<tr>`	表のセルのセットのコンテナエレメント（<TD>または<TH>単一の行に表示されます）
`<td>`	デフォルトのテーブルセル
`<th>`	列（または行、範囲、および配置に依存します）のための特別なテーブルセルがラベル内で使用する必要があります<THEAD>
`<caption>`	スクリーンリーダーのために特に有用なテーブルが保持する内容の説明や概要、

<table>
<thead>
<tr>
<th>…</th>
<th>…</th>
</tr>
</thead>
<tbody>
<tr>
<td>…</td>
<td>…</td>
</tr>
</tbody>
</table>

テーブルオプション

名前	クラス	説明
デフォルト	None	単に列と行でスタイルはありません。
ベーシック	`.table`	行と行の間だけのボーダー線
ボーダー	`.table-bordered`	テーブル内の境界線をボーダーで囲みます。
ゼブラストライプ	`.table-striped`	奇数行（1,3,5など）に薄い灰色の背景色を追加します。
コンデンス	`.table-condensed`	テーブル内のパディングが8pxから4pxの半分にカット。

1.デフォルトのテーブルスタイル

2.0では.tableのクラスを追加すると自動的に読みやすさを確保し、構造を維持するためのスタイリングが施されます。

<table class="table">
  …
</table>

#	名	姓	言語
1	マーク	オットー	CSS
2	ジェイコブ	トマソン	Javascript
3	シュチュー	デント	HTML

2. ゼブラストライプテーブル

.table-stripedゼブラストライプクラスを追加して白と灰色の背景を交互に表示します。

Note: ストライプの表はの使用は：nth-childセレクタはCSS3の仕様なのでIE7、IE8では使用できません。

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

#	名	姓	言語
1	マーク	オットー	CSS
2	ジェイコブ	トマソン	Javascript
3	シュチュー	デント	HTML

3. ボーダーテーブル

テーブル全体の周りに罫線を追加し、角を丸くします。

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

#	名	姓	言語
1	マークオットー		CSS
2	ジェイコブ	トマソン	Javascript
3	シュチュー	デント	Javascript
3	ボロゾフ	スターリン	HTML

4. コンデンステーブル

テーブルをよりコンパクトに凝縮、パディングを半分に（8pxから4pxに）削減するための.table-condensedクラスです。

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

#	名	姓	言語
1	マーク	オットー	CSS
2	ジェイコブ	トマソン	Javascript
3	シュチュー	デント	HTML

5. 全部込みテーブル

利用可能なクラスのいずれかを利用すれば、色々な外観を自由に表現ができます。

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

#	名	姓	言語
1	マーク	オットー	CSS
2	ジェイコブ	トマソン	Javascript
3	シュチュー	デント	HTML
4	ボロゾフ	スターリン	HTML

柔軟なHTMLとCSS

ブートストラップのフォームについての最もよい部分は、すべての入力とコントロールは、あなたのマークアップでそれらを構築どんなに見栄えしないことです。ない余分なHTMLは必要ありませんが、我々はそれを必要とする人のためのパターンを提供しています。

より複雑なレイアウトはあなたがすべての段階で覆われているので、簡単にスタイリングやイベントの結合のための簡潔で拡張可能なクラスが付属しています。

4つのレイアウトが含まれている

ブートストラップは、フォームのレイアウトの4つのタイプのサポートが付属しています。

垂直（デフォルト）
検索
インライン
水平

フォームレイアウトの異なるタイプのマークアップにいくつかの変更を必要としますが、コントロール自体は同じままで動作します。

コントロールの状態と

ブートストラップのフォームは、入力、テキストエリアのようなすべての基本フォームのコントロールのスタイルを含め、あなたが期待する選択します。しかし、それはまた、カスタムコンポーネントの数のように追加され、先頭に追加の入力とチェックボックスのリストのサポートが付属しています。

エラー、警告、および成功のような状態は、フォームコントロールの種類ごとに含まれています。も無効になり、コントロールのスタイルも含まれています。

フォームの4つのタイプ

ブートストラップは、一般的なWebフォームの4つのスタイルのためのシンプルなマークアップとスタイルを提供しています。

名前	クラス	説明
垂直(default)	`.form-vertical` (not required)	コントロールの上に積み重ねられ、左揃えのラベル
インライン	`.form-inline`	コンパクトなスタイルの左揃えのラベルとインラインブロックコントロール
検索	`.form-search`	典型的な検索の美学のために余分な丸みを帯びたテキスト入力
水平	`.form-horizontal`	コントロールと同じ行に左、右揃えのラベルをフロート

基本形

v2.0には、フォームのスタイルの軽量かつスマートなデフォルトを持っています。余分なマークアップがなく、単にフォームコントロール

<form class="well">
<label>ラベル名</label>
<input type="text" class="span3" placeholder="Type something…">
<span class="help-inline">関連付けられたヘルプテキスト!</span>
<label class="checkbox">
<input type="checkbox"> チェックする
</label>
<button type="submit" class="btn"> 送 信 </button>
</form>

検索フォーム

デフォルトWebKitのスタイルを反映して、ただ.form-searchを記述するだけで余分な丸い検索フィールドが追加されます。

<form class="well form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn"> 検 索 </button>
</form>

インライン

入力は始めるべきブロック・レベルです。ブロックレベルの.form-inline と .form-horizontal .form-inlineと.form-horizontalはインラインブロックの時に使用します。

<form class="well form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> 忘れた?
</label>
<button type="submit" class="btn">サインイン</button>
</form>

水平方向の形

ブートストラップがサポートするコントロール

テキスト入力

自由形式のテキストに加えて、任意のHTML5テキストベースの入力はこのように表示されます。

チェックボックス

オプション1はこれです。確認です。

セレクトリスト

マルチセレクト

ファイル入力

テキストエリア

マークアップ例

上記の例ではフォームのレイアウトを考えると、ここでは、最初の入力とコントロール群に関連付けられたマークアップです。.control-groupと.control-labelと.controls のすべてのスタイルが必要になります。

<form class="form-horizontal">
<fieldset>
<legend>テキスト項目</legend>
<div class="control-group">
<label class="control-label" for="input01">テキスト入力</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">補助説明</p>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">変更を保存する</button>
<button type="reset" class="btn">キャンセル</button>
</div>
</fieldset>
</form>

含まれるもの

すべてのデフォルトのフォームは私たちがサポートするコントロールは左に示します。ここで箇条書きリストは次のとおりです。

テキスト入力（テキスト/パスワード/電子メールetc）
チェックボックス
ラジオボタン
セレクト
マルチセレクト
ファイル入力
テキストエリア

v2.0の新しいデフォルト

v1.4まで、ブートストラップのデフォルト形式スタイルは水平レイアウトを使用しました。
ブートストラップ2で、任意の形式にするために、賢明で計量可能なデフォルトを持つためにその強制レイアウトを削除しました。

フォームコントロールの状態

フォーカス入力

編集不可の入力項目

ここに何か値を入れる

入力無効

チェック無効

これは無効なチェックボックス

入力の警告

何かが間違っている可能性があります

入力エラー

エラーを修正してください

成功した入力

OK!

選択成功

OK!

再設計されたブラウザの状態

ブートストラップは、ブラウザに支援された集中しdisabledの状態のためのスタイルを特色とします。
私たちはデフォルトWebkitoutlineを削除し、:focusの場所でbox-shadowを適用します、

フォームのバリデーション

さらに、それは、エラー、警告および成功のための確認スタイルを含んでいます。
使用するためには、周囲の.control-groupにエラー・クラスを加えてください。

<div class="control-group error">
<label class="control-label" for="inputError">入力エラー</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">エラーを修正してください</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">成功した入力</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">OK!</span>
</div>
</div>

拡張フォームコントロール

入力サイズ

入力サイズをグリッドシステムの.span*クラスと同じものを使用。

代替えサイズ

また、コントロールの種類.input-miniから.input-xxlargeまでを利用できます。（例えば、inputvsselectを変化させるために対応するCSSスタイルをグリッドにマッピングされない静的クラスに使用することができます）

前に付加テキスト

ここではいくつかのヘルプ·テキストがある

追加されたテキスト

.00

ここでは詳細なヘルプ·テキストがある

インラインチェックボックス

1 2 3

チェックボックス

オプション1はこれである、それは素晴らしいことだ、なぜ含まれていることを確認していること、であるオプション2は、フォームの結果にチェックを含めることができますオプション3 CAN-はい、あなたは、それが、また、フォームの結果でチェックし、含まれると推測

Note: ラベルははるかに大きいのクリック領域とより使いやすいフォームのすべてのオプションを囲みます。

ラジオボタン

オプション1はこれである、それは素晴らしいことだ、なぜ含まれていることを確認していること、であるオプション2は、何か他のものであることができ、それを選択すると、オプション1の選択を解除します。

先頭＆後方に追加

入力項目で、予め決められているマークや数字を先頭もしくは後方に表示させておくことができます。
例えば、ツイッター・ユーザー名のための@マーク、あるいは財源用$マークや数字などです。

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

v1.4まで、ブートストラップは、をチェックボックスとラジオボタンのまわりの余分な積み重ねをしました。
実はこれは繰り返すだけの単純な問題です。<label class="checkbox">で<input type="checkbox">をくくれば良いです。

インラインのチェックボックスおよびラジオボタンも
任意の.checkboxあるいは.radioに.inlineをただ加えてください。そうすれば、完了です。

<div class="control-group">
<label class="control-label" for="inlineCheckboxes">インラインチェックボックス</label>
<div class="controls">
<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>
</div>
</div>

インラインフォームと追加/プリペンド

プリペンドを使用するかあるいはインラインの形式に入力を追加するためには、必ずスペースなしで、同じラインに.add-onとinputを置いてください。

フォームのヘルプ·テキスト

インラインのヘルプ·テキストが含まれ、フォーム入力用のヘルプテキストを追加するには入力要素の後にspan class="help-inline"かヘルプテキストのブロックの場合はp class="help-block"になります。

<div class="control-group">
<label class="control-label" for="prependedInput">前に付加テキスト</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">@</span>
<input class="span2" id="prependedInput" size="16" type="text">
</div>
<p class="help-block">ここではいくつかのヘルプ·テキストがある</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="appendedInput">追加されたテキスト</label>
<div class="controls">
<div class="input-append">
<input class="span2" id="appendedInput" size="16" type="text">
<span class="add-on">.00</span>
</div>
<p class="help-block">ここでは詳細なヘルプ·テキストがある</p>
</div>
</div>

ボタン	クラス	説明
Default	`.btn`	グラデーションを持つ標準灰色のボタン
Primary	`.btn-primary`	青色グラデーションボタン。主なアクションを識別
Info	`.btn-info`	水色グラデーションボタン。デフォルトのスタイルへの代替として使用
Success	`.btn-success`	緑色グラデーションボタン。成功や積極的な行動を示します。
Warning	`.btn-warning`	オレンジグラデーションボタン。注意ボタン
Danger	`.btn-danger`	赤色グラデーションボタン。危険なまたは負の作用を示します。
Inverse	`.btn-inverse`	代替え濃灰色グラデーションボタン(意味的な行為か使用に結び付けられなかった)

ボタンのアクション

ハイパーリンクがオブジェクトに使用されていることになっている一方、ボタンは単にアクションに使用されるべきです。

例えば、「ダウンロード」はボタンであるべきです。その一方で「最近の活動」はリンクであるべきです。ボタン・スタイルは.btnクラスを応用で、何でもに適用することができます。単に<a> and <button> 要素にこれらを適用することが可能です

ブラウザ互換性

IE9は、角丸上の背景グラデーションしません。したがって、適応外としました。関連して、IE9 jankifiesは.button要素を修正できないのでテキストシャドウを不能にしました。

複数のサイズ

大きいサイズから小さいサイズまでを設定できます。 .btn-large（大）、.btn-small（小）、 .btn-mini （ミニ）クラスを追加すれば出来ます。

無効の状態

無効なボタンについては、.disabledクラスを <button>要素や<a>要素に追加すれば可能です。

主要リンクリンク

注目! ユーティリティークラスとして .disabled使いますが、似ている.activeの接頭語は不要です。

複数の要素はひとつのクラスでボタンが生成できます

<a>、<button>、<input>要素はひとつの.btnクラスで簡単にボタンが生成します。

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

ベスト・プラクティスとして、マッチング、クロスブラウザのレンダリングを確保するコンテキストの要素に一致するようにしてみてください。 input、<input type="submit">ボタンのようになります

icon-glass
icon-music
icon-search
icon-envelope
icon-heart
icon-star
icon-star-empty
icon-user
icon-film
icon-th-large
icon-th
icon-th-list
icon-ok
icon-remove
icon-zoom-in
icon-zoom-out
icon-off
icon-signal
icon-cog
icon-trash
icon-home
icon-file
icon-time
icon-road
icon-download-alt
icon-download
icon-upload
icon-inbox
icon-play-circle
icon-repeat
icon-refresh
icon-list-alt
icon-lock
icon-flag
icon-headphones
icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode

icon-tag
icon-tags
icon-book
icon-bookmark
icon-print
icon-camera
icon-font
icon-bold
icon-italic
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-list
icon-indent-left
icon-indent-right
icon-facetime-video
icon-picture
icon-pencil
icon-map-marker
icon-adjust
icon-tint
icon-edit
icon-share
icon-check
icon-move
icon-step-backward
icon-fast-backward
icon-backward
icon-play
icon-pause
icon-stop
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-left
icon-chevron-right

icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-info-sign
icon-screenshot
icon-remove-circle
icon-ok-circle
icon-ban-circle
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-down
icon-share-alt
icon-resize-full
icon-resize-small
icon-plus
icon-minus
icon-asterisk
icon-exclamation-sign
icon-gift
icon-leaf
icon-fire
icon-eye-open
icon-eye-close
icon-warning-sign
icon-plane
icon-calendar
icon-random
icon-comment
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal

注目！ アイコンのクラス名はCSSの:after属性によって表示されています。このドキュメントでは、マウスオーバーすると明るい赤背景色を示し、アイコンをハイライトします。

CSSスプライトで構築

すべての一枚づつアイコン画像を参照するよりもスプライトを利用シたほうが効率的です。複数のアイコン画像を1つの画像ファイルにして配置して背景画像として参照します。これはTwitter.comでより利用している方法と同じです。

多くの他のコンポーネントと同じように、適切に絞り込んだアイコンネームはすべての.icon-アイコンクラスは接頭辞が付きます。他のツールとの競合を避けるのに役立ちます。

私たちがドキュメント中でここでリンクとクレジットを提供する限り、Glyphiconsは、私たちのオープン・ソース・ツールキット中のHalflingsのアイコンセットの使用許可をいただきました。あなたのプロジェクトで同じことを考慮してください。

使い方

V2.0.1では、すべてのアイコンのタグは<i>要素を使用することにしました。しかし、それらのケースは共有される接頭辞クラスのみにしておきません、。

<i class="icon-search"></i>

黒アイコンを反転した白アイコンも利用可能なクラススタイルがあります

<i class="icon-search icon-white"></i>

アイコンは120種類あります。<i>タグにアイコンクラス名を追加するだけです。そうすれば、セットされます。このドキュメントにsprites.lessの中の、や上記に記したリストをご参照ください。

使用ケース

アイコン群は素晴らしいです。しかしどこで使いますか？いくつかの例を紹介します。

サイドバーのナビゲーション用のビジュアルとして
純粋なアイコン駆動型ナビゲーション
ボタンのアクションの意味を伝えるに役立つ
を持つユーザの宛先にコンテキストを共有するためのリンク

どこにでも置くことができます<i>タグは、アイコンを置くことができます。

例

ナビゲーションツールバーのボタン、ボタングループにそれらを使用するか、フォームの入力を付加していました。

Refresh Checkout Delete

Comment Settings More Info

ボタングループ

1つの合成コンポーネントとして多数のボタンをともに連結するボタン・グループが使用できます。一連の<a> もしくは <button>要素で構築してください

さらにセットを組み合わせることができます。より複雑なプロジェクトのために<div class="btn-toolbar">の中に<div class="btn-group">記述します

マークアップ例

ここに、アンカー・タグ・ボタンで構築された標準ボタン・グループをHTMLでの記述方法があります:

<div class="btn-group">
<a class="btn" href="#">1</a>
<a class="btn" href="#">2</a>
<a class="btn" href="#">3</a>
</div>

そして多数のグループ用のツールバーでの使用方法:

<div class="btn-toolbar">
<div class="btn-group">
  ...
</div>
</div>

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

ラジオボタンのような1つのボタンだけが選択した状態にすることができます、あるいは複数選択可能のチェックボックスのような動きができます。詳しくはJavascriptドキュメントをご覧下さい。

注目

ボタン・グループ用のCSSは個別のファイル、button-groups.lessにあります。

ボタンのドロップダウン

内に配置することにより、ドロップダウンメニューをトリガするために任意のボタンを使用してください。.btn-groupと適切なメニューのマークアップを提供しています。

マークアップ例

ボタングループと同様に、我々のマークアップは通常のボタンのマークアップを使用していますが、しかしスタイルを洗練し、かつブートストラップのdropdown jQuery pluginを使用しています。

<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>

分離したドロップダウンボタン

ボタン・グループ文体および値上げに基礎を置くと、私たちは容易に分離したボタンを作成することができます。分離したボタンは、左側に対する標準行為、および文脈上のリンクを備えた右側上のdropdownトグルを特色とします。

Example markup

我々は独立したドロップダウンをトリガーとして動作する第二ボタンのアクションを提供するために、通常のボタンのドロップダウンに展開します。

<div class="btn-group">
<a class="btn" href="#">Action</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>

軽量のデフォルト同じマークアップ、異なるクラス

強力な基底クラス

すべてのnavコンポーネントここにタブ(錠剤)、また.nav クラスによって同じベースのマークアップとスタイルを共有。

するときに使用する

タブやナビボタンは、コンテンツまたは関連するコンテンツのページ間をナビゲートセクションのために大きいです。

コンポーネントの整列

ナビゲーションリンクを整列させるためには、.pull-leftクラスか.pull-rightクラスを使用してください。両方のクラスは、指定された方向にCSSのfloatを追加します。

基本的なタブ

定期的に取る<ul>のリンクを追加し.nav-tabsタブを加えます。

<ul class="nav nav-tabs">
<li class="active">
<a href="#">Home</a>
</li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>

Basic pills

その同じHTMLをとってください。ただし、.nav-pillsを代わりに使用してください:

<ul class="nav nav-pills">
<li class="active">
<a href="#">Home</a>
</li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>

スタッカブル確認タブまたは垂直ナビボタン

'emをスタックする方法

タブやナビボタンは、デフォルトでは水平なので、2番目のクラスをそれらを垂直に積み重ね表示されるように、.nav-stackedクラスを追加。

積み上げタブ

<ul class="nav nav-tabs nav-stacked">
  ...
</ul>

スタックされたナビボタン

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

ドロップダウン高度なナビゲーション·コンポーネントの場合

豊富なメニューが簡単に

ブートストラップのタブおよびナビボタンのドロップダウンメニューは非常に容易で、ほんの少しのタグと軽量のjQuery pluginが必要です。

ブートストラップ中のドロップダウンの初期化についてのドキュメントを読むためにJavascriptページ上へでご覧になれます。

ドロップダウンのタブ

<ul class="nav nav-tabs">
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- links -->
</ul>
</li>
</ul>

ドロップダウンのナビボタン

<ul class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- links -->
</ul>
</li>
</ul>

ナビゲーションリストナビリストは単純な積み重ねられたサイドバーを構築します。

アプリケーションスタイルのナビゲーション

ナビリストは、OS Xの中のファインダのようなサイドバーの中で最も使用されるオプションのheaders.ナビリンクのグループを構築する、単純で容易な方法を提供します。

構造上、それらはタブとナビボタンと同じ中核ナビスタイルに構築されます。したがって、使用法とカスタマイゼーションは真直ぐです。

アイコン

さらに、ナビリストはアイコンを装備するのが簡単です。クラスを備えた適切な<i>タグを加えてください。そうすれば、セットされます

ナビリスト例

リンクのリストを取得して class="nav nav-list"クラスを追加:

<ul class="nav nav-list">
<li class="nav-header">
List header
</li>
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">Library</a>
</li>
...
</ul>

アイコン使用例

<i>タグでアイコンを使用した同じ例です。

<ul class="nav nav-list">
...
<li>
<a href="#">
<i class="icon-book"></i>
Library
</a>
</li>
...
</ul>

タブナビjavascriptを経由して生活にタブを持参

含まれるもの

タブを介してコンテンツを切り替えるためのシンプルなプラグインでの生活に、タブを持参してください。トップ（デフォルト）、右、下、左：ブートストラップは、4つのスタイルでtabbableタブを統合しています。

それらの間の変更は簡単であり、唯一のほとんどのマークアップを変更する必要があります。

タブナビ例

タブナビにするには、.nav-tabsクラスを持つ別のdivで.tabbableクラスをくくる

I'm in Section 1.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

カスタムjQueryプラグイン

すべてのタブナビは軽量のjQueryプラグインによって供給されます。JavaScriptをドキュメントページ上の生命にタブナビをもたらす方法の詳細についてをお読みください。

簡単なマーク例

タブバブルを使用して折り返しのdiv、一連のタブ、およびコンテンツのタブバブルペインのセットが必要になります。

<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
<li><a href="#2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>

任意の方向にタブバブル

下部タブ

HTMLの順序を反転し、下部にタブを配置するクラスを追加します。

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class="tabbable tabs-below">
<div class="tab-content">
...
</div>
<ul class="nav nav-tabs">
...
</ul>
</div>

左側のタブ

左側にタブを配置するクラスを入れ替えます。

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>

右側のタブ

右側にタブを配置するクラスを入れ替えます。

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class="tabbable tabs-right">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>

静的なナビゲーションバーの例

プロジェクト名、ナビゲーション、検索フォームの静的（トップに固定されていない）ナビゲーションバーの例を示します。

ナビバー足場

ナビゲーションバーは、静的または固定表示するためにもそれを構成する少数のdivをする必要があります。

<div class="navbar">
<div class="navbar-inner">
<div class="container">
 ...
</div>
</div>
</div>

固定ナビゲーションバ

ナビゲーションバーはトップ外側のdiv.navbar、ビューポートの上部に固定されたナビゲーションバーを作成するには、.navbar-fixed-topクラスを追加します。

<div class="navbar navbar-fixed-top">
  ...
</div>

また、CSSで<body>にパディング40px以上を追加することによって、それが引き起こすオーバーラップを考慮する必要があります。コアブートストラップCSSの後、任意の応答CSSの前にこれを追加してください。

ブランドネーム

あなたのブランドやプロジェクト名を表示するシンプルなリンクはアンカータグが必要です。

<a class="brand" href="#">
  Project name
</a>

検索フォーム

検索フォームは、formの.navbar-searchクラスでナビゲーションバーのカスタムスタイルを受け取ることができます。左右に置く場合は.pull-leftクラス（左）か .pull-rightクラス（右）で設置できます。

<form class="navbar-search pull-left">
<input type="text" class="search-query" placeholder="Search">
</form>

任意の応答変化

あなたのトップバー内のコンテンツの量に応じて、応答オプションを実装することをお勧めします。これを行うには、含んでいるdivにあなたのナビゲーションコンテンツをラップ.btn-navbarと、ナビゲーションバートグルボタンを.nav-collapse.collapse追加/p>

<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>

</div>
</div>
</div>

注目！応答ナビゲーションバーはプラグインが必要

ナビゲーションリンク

ナビゲーションの項目は順不同リストを介して追加することが簡単です。

<ul class="nav">
<li class="active">
<a href="#">Home</a>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

簡単に空のリスト項目と単純なクラスを使用してナビゲーションリンクに仕切りを追加することができます。単にリンクとの間でこれを追加します。:

<ul class="nav">
...
<li class="divider-vertical"></li>
...
</ul>

コンポーネントの整列

ナビゲーション、検索フォーム、またはテキストを整列使用します。.pull-left（左）か.pull-right（右）のユーティリティクラス。両方のクラスは、指定された方向にCSSのfloatを追加します。

ドロップダウンリストを追加

ナビにドロップダウンを追加するのはとても簡単ですが、javascriptプラグインが必要です

<ul class="nav">
<li class="dropdown">
<a href="#"
class="dropdown-toggle"
data-toggle="dropdown">
Account
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>

なぜそれらを使用する

パンくずナビゲーションは、アプリケーションやサイト内ではなく、主要なナビゲーション状況をユーザに示す方法として使用されます。
それらの使用をとても有効であるためにシンプルにしておいてください。

例

それは複数のページにわたって表示される場合があります。として示され、単一の例を示します。

マークアップ

HTML is your standard unordered list with links.

<ul class="breadcrumb">
<li>
<a href="#">Home</a> <span class="divider">/</span>
</li>
<li>
<a href="#">Library</a> <span class="divider">/</span>
</li>
<li class="active">
<a href="#">Data</a>
</li>
</ul>

マルチアイコンページネーション

するときに使用する

アプリと検索結果の表示に初期設定で公開になって、大きな触発され、超単純で最小限のスタイルページネーション。大きなブロックを簡単にスケーラブルで、見逃すことは困難である、大規模クリック領域を提供します。

ステートフルなページへのリンク

リンクはカスタマイズ可能で、正しいクラスを備えた多くの状況で動きます。クリック可能でないリンクは.disabledクラスを、そして現在のページでは.activeを使用します

柔軟な配置

改ページのリンクの配置を変更するには、2つのオプションのクラスのいずれかを追加します。.pagination-centeredクラスもしくは.pagination-rightクラス。

例

デフォルトのページネーションのコンポーネントは柔軟性があり、バリエーションの数で動作します。

マークアップ

<div>要素のページネーションクラスは, <ul>要素を使用します。

<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
<li class="active">
<a href="#">1</a>
</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>

ページャー迅速に前と次のリンクについて

ページャーについて

ページャー・コンポーネントは、ブログまたはマガジンのような単純なサイトのマークアップと軽量化にもスタイルを持つシンプルなページネーションを実装するためのリンクのセットです。

デフォルトの例

デフォルトでは、ページャーはセンタリングしています

<ul class="pager">
<li>
<a href="#">Previous</a>
</li>
<li>
<a href="#">Next</a>
</li>
</ul>

整列のリンク

また、両側に各リンクを位置合わせすることができます。

<ul class="pager">
<li class="previous">
<a href="#">&larr; Older</a>
</li>
<li class="next">
<a href="#">Newer &rarr;</a>
</li>
</ul>

ラベル	マークアップ
Default	`<span class="label">Default</span>`
Success	`<span class="label label-success">Success</span>`
Warning	`<span class="label label-warning">Warning</span>`
Important	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`

バッジについて

バッジが何らかの指標やカウントを表示するための、小型でシンプルなコンポーネントです。これらは一般的にMail.appのようなまたはプッシュ通知のための携帯アプリのメールクライアントで利用されます。

利用できるクラス

Name	Example	Markup
Default	1	`<span class="badge">1</span>`
Success	2	`<span class="badge badge-success">2</span>`
Warning	4	`<span class="badge badge-warning">4</span>`
Important	6	`<span class="badge badge-important">6</span>`
Info	8	`<span class="badge badge-info">8</span>`
Inverse	10	`<span class="badge badge-inverse">10</span>`

ヒーローユニット

ブートストラップは、サイト上のコンテンツを紹介するヒーローユニットと呼ばれる軽量、柔軟なコンポーネントを提供します。それは、マーケティングやコンテンツ重視のサイトに適しています。

マークアップ

div要素でコンテンツを包むように:

<div class="hero-unit">
<h1>Heading</h1>
<p>Tagline</p>
<p>
<a class="btn btn-primary btn-large">
Learn more
</a>
</p>
</div>

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

ページヘッダー

タイトルのh1が間隔を置くべき単純なシェル、およびページの内容のセグメント・セクション。small要素、同様に、他のコンポーネント(追加のスタイルを備えた)やh1のデフォルトを利用することができます。

<div class="page-header">
  <h1>Example page header</h1>
</div>

デフォルトサムネイル

デフォルトでは、ブートストラップのサムネイルは必要最小限のマークアップを使用してリンクされた画像を紹介するために設計されています。

高度なカスタマイズ

マークアップのビットと、それはサムネイルに見出し、段落、またはボタンのようにHTMLコンテンツの任意の種類を追加することも可能です。

サムネイルラベル

サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

Action Action
サムネイルラベル

サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

Action Action

サムネイルを使用方法

サムネイル（以前は.media-gridv1.4まで）のビデオや写真のグリッドは、画像の検索結果、小売製品、ポートフォリオ、および大いに多くのために最適です。彼らは、リンクまたは静的コンテンツにすることができます。

シンプルで柔軟なマークアップ

サムネイルのマークアップは単純です。必要なものはulの任意の数のli要素だけです。内容をラップするだけで少しのマークアップであらゆる種類のコンテンツを可能にし、また、柔軟です。

グリッドの列のサイズを使用しています

最後に、サムネイルのコンポーネントは、クラスのような既存のグリッドシステムを使用しています。.span2や.span3サムネイルの大きさの制御のためにします。

マークアップ

前述したように、サムネイルのために必要なマークアップは、とても簡単です。ここでデフォルトのセットアップを見てリンクされた画像は:

<ul class="thumbnails">
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
...
</ul>

サムネイルにカスタムHTMLコンテンツの場合、マークアップは若干変更されます。どこでも、ブロックレベルのコンテンツを許可するには、我々はスワップ<a>をするため<div> >のように：

<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
<h5>Thumbnail label</h5>
<p>Thumbnail caption right here...</p>
</div>
</li>
  ...
</ul>

他の例

使用可能な様々なグリッド·クラスとすべてのオプションを探る。また、ミックスと異なるサイズを一致させることができます。

軽量デフォルト

書き換えられた基底クラス

ブートストラップ2では、我々は、基本クラスを簡素化しました。.alertの代わりに.alert-messageが表示されます。また、最低限必要なマークアップには減少したちょうど外側の <div>や<p>はデフォルトでは必要ありません。

単一のアラートメッセージ

少ないコードでより耐久性のあるコンポーネントについて、我々は、ブロック、アラート、より多くのパディング、通常より多くのテキストが付属してメッセージの差別化を見て削除しました。クラスには、.alert-blockに変更されました。

javascriptで大きな行く

ブートストラップは、彼らが迅速かつ容易に却下することは、警告メッセージをサポートして偉大なjQueryプラグインが付属しています。

アラート例

あなたのメッセージと単純なクラスを持つdivのオプションの[閉じる]アイコンをラップします。

× 警告！ 自己チェック、あまりにも格好悪い。

<div class="alert">
<a class="close" data-dismiss="alert">×</a>
<strong>警告！</strong> 自己チェック, あまりにも格好悪い。
</div>

簡単に2つのオプションクラスを使用して標準の警告メッセージをパディングおよびテキストコントロール拡張した.alert-block見出しマッチングのために、.alert-heading。

警告！

自己チェック、あまりにも格好悪い！テストテストテストサンプルサンプルサンプルテストテストテストサンプルサンプルサンプルテストテストテストサンプルサンプルサンプル

<div class="alert alert-block">
<a class="close" data-dismiss="alert">×</a>
<h4 class="alert-heading">警告！</h4>
  自己チェック、あまりにも格好悪い...
</div>

文脈上の選択肢アラートの含蓄を変更するには、オプションクラスを追加

エラーや危険

× おおっと！ いくつかを変更して、再度送信してください。

<div class="alert alert-error">
  ...
</div>

成功

× よくやった！ あなたは成功し、この重要な警告メッセージを読んでください。

<div class="alert alert-success">
  ...
</div>

情報

× 気をつけろ！ この警告は、あなたの注意を必要とするが、それほど重要ではありません。

<div class="alert alert-info">
  ...
</div>

マークアップ例

基本

垂直方向のグラデーションデフォルトのプログレスバー。

<div class="progress">
<div class="bar" style="width: 60%;"></div>
</div>

縞模様

縞模様の効果を作成するために勾配を使用しています。

<div class="progress progress-info progress-striped">
<div class="bar" style="width: 20%;"></div>
</div>

アニメーション

縞模様の例とアニメーションそれを取る。

<div class="progress progress-danger progress-striped active">
<div class="bar" style="width: 40%;"></div>
</div>

オプションとブラウザのサポー

追加の色

プログレスバーは、同様のスタイルのボタンやアラートと同じクラス名の一部を利用しています。

.progress-info
.progress-success
.progress-danger

また、より少ないファイルをカスタマイズして独自の色とサイズをロールバックすることができます。

行動

動的にjavascriptを経由して幅を調整する場合は、プログレスバーは、CSS3のトランジションを使用するので、それがスムーズにサイズが変更されます。

.activeクラス使用した場合、.progress-stripedのプログレスバーが左から右にストライプをアニメートします。

ブラウザのサポート

プログレスバーがすべてのそれらの効果を達成するためにCSS3グラデーション、トランジション、アニメーションを使用しています。これらの機能は、Firefoxの古いバージョンやIE7-8それ以前のバージョンでサポートされていません。

Operaは、この時点ではアニメーションをサポートしていません。

ウェルズ

それをはめ込み効果を与えるために、要素の単純なエフェクトとしてよく使用してください。

見よ！でかした！

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

アイコンを閉じます。

モーダルウィンドウの警告のようなコンテンツを却下するための汎用閉じるアイコンを使用しています。

<button class="close">&times;</button>

IOSデバイスでのアンカーを使用する場合は、、クリックイベントのhref="#"をする必要があります。

<a class="close" href="#">&times;</a>

小見出し説明

サイドバーカラム

ツイッターブートストラップ概要機能紹介

どこでも、みんなのために設計されています。

すべてのクリエイターたちのために構築されました

すべてのスキルレベルに対応

クロスブラウザ

12列のグリッドシステム

対応設計

スタイルガイドドキュメント

成長ライブラリ

カスタムのjQueryプラグイン

LESS上に構築されたCSS

HTML5

CSS3

オープンソース

Twitter製作者

グローバルスタイルCSSリセット、タイポグラフィ,リンク

Requires HTML5 doctype

タイポグラフィとリンク

標準的なリセット

レイアウトWebページを作成するための基本的なテンプレート

固定レイアウト

可変レイアウト

グリッドシステム12カラムで940px

相殺グリッド

ネストカラムも可能です

応答の設計各種デバイスや解像度のメディアクエリ

サポートされているデバイス

何をすればよいか

メディアクエリの使い方

タイポグラフィ見出し、段落、リスト、および他のインラインタイプの要素

表記上のスケール

H1-見出し1

H2-見出し2

H3-見出し3

H4-見出し4

H5-見出し5

H6-見出し6

強調、アドレスおよび省略

codeの使用例

addressの使用例

abbr使用例

blockquote使用例

リスト

code使用例

ベーシック

Google Prettify

テーブル

テーブルオプション

1.デフォルトのテーブルスタイル

2. ゼブラストライプテーブル

3. ボーダーテーブル

4. コンデンステーブル

5. 全部込みテーブル

フォーム

柔軟なHTMLとCSS

4つのレイアウトが含まれている

コントロールの状態と

フォームの4つのタイプ

フォーム例 フォームコントロールを使用して、マークアップ方法を見てみる

基本形

検索フォーム

インライン

水平方向の形

マークアップ例

含まれるもの

v2.0の新しいデフォルト

再設計されたブラウザの状態

フォームのバリデーション

先頭＆後方に追加

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

インラインフォームと追加/プリペンド

フォームのヘルプ·テキスト

ボタン

ボタンのアクション

ブラウザ互換性

複数のサイズ

無効の状態

複数の要素はひとつのクラスでボタンが生成できます

アイコン Glyphiconsにより上品に提供されています

CSSスプライトで構築

フォーム例フォームコントロールを使用して、マークアップ方法を見てみる

ボタングループよりツールバーのような機能性のためにボタンを連結します。

ボタンのドロップダウンボタングループ上に構築されたコンテキストドロップダウンメニュー

ページャー迅速に前と次のリンクについて

バッジインジケータおよび未読件数