見出し

すべての HTML 見出しを使用<h1>でき<h6>ます。

h1. 見出し 1

h2. 見出し 2

h3. 見出し 3

h4. 見出し 4

h5. 見出し 5

h6. 見出し 6

ボディコピー

Bootstrap のグローバルデフォルトfont-sizeは14pxで、aline-heightは20pxです。これは、<body>およびすべての段落に適用されます。さらに、<p>(段落) には、行の高さの半分 (デフォルトでは 10px) の下余白が与えられます。

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

Cum sociis natoque penatibus et magnis dis parturient montes, nasceturridiculus 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クラス= "リード" > ... </p>

より少ないもので構築

タイポグラフィスケールは、 variables.lessの 2 つの LESS 変数に基づいて@baseFontSizeいます@baseLineHeight。1 つ目は全体で使用されるベースのフォントサイズで、2 つ目はベースの行の高さです。これらの変数といくつかの簡単な計算を使用して、すべてのタイプのマージン、パディング、および行の高さなどを作成します。それらをカスタマイズすると、Bootstrap が適応します。

強調

HTML のデフォルトの強調タグを軽量スタイルで利用します。

`<small>`

インラインまたはテキストブロックの強調を解除するには、小さいタグを使用します。

このテキスト行は細字として扱われることを意図しています。

<p> <small>このテキスト行は細字として扱われることを意図しています。</小> </p>

大胆な

より重いフォントウェイトでテキストのスニペットを強調します。

次のテキストスニペットは太字で表示されます。

<strong>太字で表示</strong>

斜体

テキストのスニペットを斜体で強調します。

次のテキストのスニペットは、イタリック体のテキストとして表示されます。

<em>斜体テキストとしてレンダリング</em>

注意喚起！<b>と<i>HTML5 で自由に使用してください。主に音声、技術用語などのためのものですが、<b>追加の重要性を伝えることなく単語やフレーズを強調することを目的としています.<i>

アライメントクラス

テキスト配置クラスを使用して、テキストをコンポーネントに簡単に再配置します。

左揃えのテキスト。

中央揃えのテキスト。

右揃えのテキスト。

<p class = "text-left" >左揃えのテキスト。</p> 
<p class = "text-center" >中央揃えのテキスト。</p> 
<p class = "text-right" >右揃えのテキスト。</p>

強調クラス

いくつかの強調ユーティリティクラスを使用して、色で意味を伝えます。

Fusce dapibus、tellus ac cursus commodo、tortor mauris nibh。

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam。Pellentesque ornare sem lacinia quam venenatis.

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

<p class = "muted" > Fusce dapibus、tellus ac cursus commodo、tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

略語

<abbr>ホバー時に展開されたバージョンを表示するための、略語と頭字語の HTML 要素の様式化された実装。属性を持つ略語にtitleは、薄い点線の下の境界線があり、ホバーするとヘルプカーソルが表示され、ホバーすると追加のコンテキストが提供されます。

`<abbr>`

略語の長いホバーで展開されたテキストの場合は、title属性を含めます。

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

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

`<abbr class="initialism">`

.initialism若干小さいフォントサイズの省略形に追加します。

HTMLは食パン以来最高のものです。

<abbr title = "HyperText マークアップ言語" class = "initialism" > HTML </abbr>

住所

最寄りの先祖または作品全体の連絡先情報を提示します。

`<address>`

すべての行を<br>.

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

フルネーム
[email protected]

<住所>
  <strong> Twitter, Inc. </strong><br>
  795 フォルサム アベニュー、スイート 600 <br>
  カリフォルニア州サンフランシスコ 94107 <br>
  <abbr title = "電話" > P: </abbr> (123) 456-7890 
</アドレス>
 
<住所>
  <strong>氏名</strong><br>
  <a href = "mailto:#" > [email protected] </a> 
</アドレス>

ブロッククオート

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

デフォルトのブロック引用

引用符としてHTMLをラップ<blockquote>します。ストレートクォートの場合は、をお勧めします。<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。

<ブロック引用>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。</p>
</blockquote>

引用オプション

標準的なブロック引用の単純なバリエーションのスタイルとコンテンツの変更。

ソースの命名

<small>ソースを識別するためのタグを追加します。ソース作品の名前をで囲み<cite>ます。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。
ソースタイトルで有名な人

<ブロック引用>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。</p>
  <small>有名人<cite title = "Source Title" > Source Title </cite></small> 
</blockquote>

代替ディスプレイ

.pull-rightフロートされた、右揃えのブロック引用に使用します。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。
ソースタイトルで有名な人

<blockquote class = "プルライト" > 
  ...
</blockquote>

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
マッサで整数痴漢ロレム
プレチウムニスルアリケのファシリシス
Nulla volutpat aliquam velit
- インゲンマメ 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>

順序付けられました

順序が明示的に重要なアイテムのリスト。

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
マッサで整数痴漢ロレム
プレチウムニスルアリケのファシリシス
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<オール>
  <li> ... </li>
</ol>

スタイルなし

list-styleリスト項目のデフォルトと左パディングを削除します(直接の子のみ)。

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
マッサで整数痴漢ロレム
プレチウムニスルアリケのファシリシス
Nulla volutpat aliquam velit
- インゲンマメ 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 = "unstyled" > 
  <li> ... </li>
</ul>

列をなして

すべてのリスト項目を 1 行に配置しinline-block、若干のパディングを行います。

ロレム・イプサム
インゲンマメ
Nulla volutpat

<ulクラス= "インライン" > 
  <li> ... </li>
</ul>

説明

関連する説明を含む用語のリスト。

説明リスト: 説明リストは、用語を定義するのに最適です。
ユースモッド: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
マレスアダポルタ: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

横の説明

用語と説明を<dl>並べて並べます。

説明リスト: 説明リストは、用語を定義するのに最適です。
ユースモッド: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
マレスアダポルタ: 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>ます。

たとえば、 <section>インラインとしてラップする必要があります。

たとえば、<コード> & lt ; セクション& gt ;</コード>はインラインとしてラップする必要があります。

基本ブロック

<pre>複数行のコードに使用します。適切にレンダリングするために、コード内の山かっこを必ずエスケープしてください。

<p>サンプル テキストはこちら...</p>

<プレ>
  <p>サンプル テキストはこちら...</p>
</プレ>

注意喚起！タグ内のコード<pre>はできるだけ左側に配置してください。すべてのタブをレンダリングします。

.pre-scrollableオプションで、最大高さ 350px を設定し、y 軸スクロールバーを提供するクラスを追加できます。

デフォルトのスタイル

基本的なスタイリング (軽いパディングと水平方向の仕切りのみ) の場合、基本クラス.tableを anyに追加します<table>。

#	ファーストネーム	苗字	ユーザー名
1	マーク	オットー	@mdo
2	ジェイコブ	ソーントン	@太い
3	ラリー	鳥	@ツイッター

<テーブルクラス= "テーブル" > 
  …
</表>

オプションクラス

.table次のクラスのいずれかを基本クラスに追加します。

`.table-striped`

CSS セレクター (IE7-8 では使用できません) を使用し<tbody>て、テーブル行にゼブラストライプを追加します。:nth-child

#	ファーストネーム	苗字	ユーザー名
1	マーク	オットー	@mdo
2	ジェイコブ	ソーントン	@太い
3	ラリー	鳥	@ツイッター

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

`.table-bordered`

テーブルに境界線と丸みを帯びた角を追加します。

#	ファーストネーム	苗字	ユーザー名
1	マーク	オットー	@mdo
1	マーク	オットー	@getbootstrap
2	ジェイコブ	ソーントン	@太い
3	鳥のラリー		@ツイッター

<テーブルクラス= "テーブル テーブル罫線" > 
  …
</表>

`.table-hover`

内の表の行でホバー状態を有効にします<tbody>。

#	ファーストネーム	苗字	ユーザー名
1	マーク	オットー	@mdo
2	ジェイコブ	ソーントン	@太い
3	鳥のラリー		@ツイッター

<table class = "table table-hover" > 
  …
</表>

`.table-condensed`

セルのパディングを半分にして、テーブルをよりコンパクトにします。

#	ファーストネーム	苗字	ユーザー名
1	マーク	オットー	@mdo
2	ジェイコブ	ソーントン	@太い
3	鳥のラリー		@ツイッター

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

オプションの行クラス

コンテキストクラスを使用して、テーブルの行に色を付けます。

クラス	説明
`.success`	成功または肯定的なアクションを示します。
`.error`	危険または潜在的に否定的な行動を示します。
`.warning`	注意が必要な可能性がある警告を示します。
`.info`	デフォルトのスタイルの代替として使用されます。

#	製品	支払い済み	状態
1	TB - 毎月	2012/01/04	承認済み
2	TB - 毎月	2012/02/04	不承認
3	TB - 毎月	2012/03/04	保留中
4	TB - 毎月	2012/04/04	電話して確認

...
  < trクラス= "成功" >
    <td> 1 < /td>
    <td>TB - 毎月</ td >
    <td> 2012 年1月4日< / td >
    <td>承認済み</ td >
  </ tr >
...

サポートされている表のマークアップ

サポートされているテーブル HTML 要素とその使用方法のリスト。

鬼ごっこ	説明
`<table>`	表形式でデータを表示するためのラッピング要素
`<thead>`	`<tr>`テーブル列にラベルを付けるためのテーブルヘッダー行 ( ) のコンテナ要素
`<tbody>`	`<tr>`テーブル本体のテーブル行のコンテナ要素 ( )
`<tr>`	1 つの行に表示されるテーブルセルのセット (`<td>`または) のコンテナ要素`<th>`
`<td>`	デフォルトのテーブルセル
`<th>`	列 (またはスコープと配置に応じて行) ラベル用の特別なテーブルセル
`<caption>`	テーブルが保持する内容の説明または要約。特にスクリーンリーダーに役立ちます

<テーブル>
  <キャプション> ... </キャプション>
  <スレッド>
    <tr>
      <番目> ... </番目>
      <番目> ... </番目>
    </tr>
  </スレッド>
  <本体>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</表>

デフォルトのスタイル

個々のフォームコントロールはスタイルを受け取ります<form>が、マークアップに必要な基本クラスや大幅な変更はありません。フォームコントロールの上に積み重ねられた、左揃えのラベルになります。

<フォーム>
  <フィールドセット>
    <レジェンド>レジェンド</レジェンド>
    <label>ラベル名</label>
    <input type = "text" placeholder = "何か入力してください…" >  
    <span class = "help-block" >ここにブロック レベルのヘルプ テキストの例を示します。</スパン> 
    <ラベルクラス= "チェックボックス" > 
      <input type = "checkbox" >チェックアウト 
    </ラベル>
    <button type = "submit" class = "btn" > Submit </button>  
  </フィールドセット>
</フォーム>

オプションのレイアウト

Bootstrap には、一般的なユースケース用の 3 つのオプションのフォームレイアウトが含まれています。

検索フォーム

特別に丸みを帯びたテキスト入力のため.form-searchに、フォームと.search-queryに追加します。<input>

<フォームクラス= "フォーム検索" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" >検索</button>  
</フォーム>

インラインフォーム

.form-inlineコンパクトなレイアウトのために、左揃えのラベルとインラインブロックコントロールを追加します。

<フォームクラス= "フォームインライン" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Password" >   
  <ラベルクラス= "チェックボックス" > 
    <input type = "checkbox" >記憶する 
  </ラベル>
  <button type = "submit" class = "btn" >サインイン</button>  
</フォーム>

横型

ラベルを右揃えにして左にフロートさせて、コントロールと同じ行に表示します。デフォルトのフォームからのほとんどのマークアップ変更が必要:

.form-horizontalフォームに追加
ラベルとコントロールをラップする.control-group
.control-labelラベルに追加
.controls関連するコントロールを適切に配置するためにラップします。

<form class = "form-horizontal" > 
  <divクラス= "コントロール グループ" > 
    <label class = "control-label" for = "inputEmail" >メール</label>  
    <divクラス= "コントロール" > 
      <input type = "text" id = "inputEmail" placeholder = "Email" >   
    </div>
  </div>
  <divクラス= "コントロール グループ" > 
    <label class = "control-label" for = "inputPassword" >パスワード</label>  
    <divクラス= "コントロール" > 
      <input type = "password" id = "inputPassword" placeholder = "Password" >   
    </div>
  </div>
  <divクラス= "コントロール グループ" > 
    <divクラス= "コントロール" > 
      <ラベルクラス= "チェックボックス" > 
        <input type = "checkbox" >記憶する 
      </ラベル>
      <button type = "submit" class = "btn" >サインイン</button>  
    </div>
  </div>
</フォーム>

サポートされているフォームコントロール

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

入力

最も一般的なフォームコントロール、テキストベースの入力フィールド。すべての HTML5 タイプのサポートが含まれます: text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel、color。

type指定されたを常に使用する必要があります。

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

テキストエリア

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

<テキストエリア行= "3" ></テキストエリア>

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

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

デフォルト (スタック)

<ラベルクラス= "チェックボックス" > 
  <入力タイプ= "チェックボックス"値= "" >  
  オプション 1 はこれとあれです。なぜそれが優れているのかを必ず含めてください。
</ラベル>
 
<ラベルクラス= "ラジオ" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1"をチェック>     
  オプション 1 はこれとあれです。なぜそれが優れているのかを必ず含めてください。
</ラベル>
<ラベルクラス= "ラジオ" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  オプション 2 は別のものにすることができ、それを選択するとオプション 1 の選択が解除されます
</ラベル>

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

.inlineコントロールの一連のチェックボックスまたはラジオにクラスを追加して、同じ行に表示します。

<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</ラベル>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</ラベル>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
</ラベル>

セレクト

��フォルトのオプションを使用するか、a を指定しmultiple="multiple"て複数のオプションを一度に表示します。

<選択>
  <オプション> 1 </オプション>
  <オプション> 2 </オプション>
  <オプション> 3 </オプション>
  <オプション> 4 </オプション>
  <オプション> 5 </オプション>
</select>
 
<複数を選択= "複数" > 
  <オプション> 1 </オプション>
  <オプション> 2 </オプション>
  <オプション> 3 </オプション>
  <オプション> 4 </オプション>
  <オプション> 5 </オプション>
</select>

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

Bootstrap には、既存のブラウザコントロールに加えて、他の便利なフォームコンポーネントが含まれています。

先頭および末尾に追加される入力

テキストベースの入力の前後にテキストまたはボタンを追加します。selectここでは要素がサポートされていないことに注意してください。

デフォルトのオプション

.add-onanおよび aninputを 2 つのクラスのいずれかでラップして、テキストを入力の前または後に追加します。

<div class = "input-prepend" > 
  <span class = "アドオン" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput " type = "text" >   
  <span class = "アドオン" > .00 </span> 
</div>

組み合わせた

クラスとの 2 つのインスタンスの両方を使用して.add-on、入力の先頭と末尾に追加します。

<div class = "input-prepend input-append" > 
  <span class = "アドオン" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  <span class = "アドオン" > .00 </span> 
</div>

テキストの代わりにボタン

<span>with textの代わりに、 aを使用し.btnてボタン (または 2 つ) を入力に添付します。

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton " type = "text" >   
  <ボタンクラス= "btn"タイプ= "ボタン" >行け! </ボタン>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons " type = "text" >   
  <button class = "btn" type = "button" >検索</button>  
  <button class = "btn" type = "button" >オプション</button>  
</div>

ボタンのドロップダウン

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      アクション
      <span class = "キャレット" ></span> 
    </ボタン>
    <ul class = "ドロップダウンメニュー" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      アクション
      <span class = "キャレット" ></span> 
    </ボタン>
    <ul class = "ドロップダウンメニュー" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "text" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      アクション
      <span class = "キャレット" ></span> 
    </ボタン>
    <ul class = "ドロップダウンメニュー" > 
      ...
    </ul>
  </div>
  <入力クラス= "span2" id = "appendedPrependedDropdownButton "タイプ= "テキスト" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      アクション
      <span class = "キャレット" ></span> 
    </ボタン>
    <ul class = "ドロップダウンメニュー" > 
      ...
    </ul>
  </div>
</div>

セグメント化されたドロップダウングループ

<フォーム>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    <入力タイプ= "テキスト" > 
  </div>
  <div class = "input-append" > 
    <入力タイプ= "テキスト" > 
    <div class = "btn-group" > ... </div> 
  </div>
</フォーム>

検索フォーム

<フォームクラス= "フォーム検索" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" >検索</button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" >検索</button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</フォーム>

サイズ変更の制御

.input-largeクラスを使用して、入力をグリッド列のサイズに合わせたり、相対サイズ変更クラスを使用したりし.span*ます。

ブロックレベル入力

または要素をブロックレベル要素のように動作させます<input>。<textarea>

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

相対的なサイズ

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

注意喚起！将来のバージョンでは、ボタンのサイズに合わせてこれらの相対入力クラスの使用を変更する予定です。たとえば.input-large、入力のパディングとフォントサイズを増やします。

グリッドのサイジング

グリッド列の同じサイズに一致する入力に使用.span1します。.span12

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
<select class = "span1" > 
  ...
</select>
<select class = "span2" > 
  ...
</select>
<select class = "span3" > 
  ...
</select>

1 行に複数のグリッド入力がある場合は、修飾子クラスを使用し.controls-rowて適切な間隔を設定します。空白を折りたたむために入力をフロートし、適切なマージンを設定し、フロートをクリアします。

<divクラス= "コントロール" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "controls controls-row" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

編集不可能な入力

実際のフォームマークアップを使用しないと編集できないフォームでデータを表示します。

<span class = "input-xlarge uneditable-input" >ここに何らかの値</span>

フォームアクション

アクション (ボタン) のグループでフォームを終了します。内に配置する.form-actionsと、ボタンはフォームコントロールに合わせて自動的にインデントされます。

<divクラス= "フォーム アクション" > 
  <button type = "submit" class = "btn btn-primary" >変更を保存</button>  
  <button type = "button" class = "btn" >キャンセル</button>  
</div>

ヘルプテキスト

フォームコントロールの周囲に表示されるヘルプテキストのインラインおよびブロックレベルのサポート。

インラインヘルプ

<input type = "text" ><span class = "help-inline" >インライン ヘルプ テキスト</span>

ブロックヘルプ

<input type = "text" ><span class = "help-block" >新しい行に分割され、1 行を超える場合がある長いヘルプ テキストのブロック。</スパン>

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

フォームコントロールとラベルに関する基本的なフィードバック状態で、ユーザーまたは訪問者にフィードバックを提供します。

入力フォーカス

outline一部のフォームコントロールのデフォルトスタイルを削除box-shadowし、代わりにを適用します:focus。

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "これはフォーカスされています..." >

無効な入力

を使用して、デフォルトのブラウザー機能を介して入力をスタイルします:invalid。を指定し、フィールドがオプションでない場合は属性typeを追加し、 (該当する場合) を指定します。requiredpattern

CSS 疑似セレクターがサポートされていないため、これは Internet Explorer 7 ～ 9 のバージョンでは使用できません。

<input class = "span3" type = "email"必須>

無効な入力

入力に属性を追加してdisabled、ユーザー入力を防ぎ、わずかに異なる外観をトリガーします。

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "ここで入力を無効にしました..."無効>

検証状態

Bootstrap には、エラー、警告、情報、および成功メッセージの検証スタイルが含まれています。使用するには、周囲のに適切なクラスを追加します.control-group。

<divクラス= "コントロール グループの警告" > 
  <label class = "control-label" for = "inputWarning" >警告付き入力</label>  
  <divクラス= "コントロール" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" >問題が発生した可能性があります</span> 
  </div>
</div>
 
<div class = "コントロール グループ エラー" > 
  <label class = "control-label" for = "inputError" >エラーのある入力</label>  
  <divクラス= "コントロール" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" >エラーを修正してください</span> 
  </div>
</div>
 
<divクラス= "コントロール グループ情報" > 
  <label class = "control-label" for = "inputInfo" >情報付き入力</label>  
  <divクラス= "コントロール" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" >ユーザー名は既に使用されています</span> 
  </div>
</div>
 
<divクラス= "コントロール グループの成功" > 
  <label class = "control-label" for = "inputSuccess" >入力成功</label>  
  <divクラス= "コントロール" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" >ウーフー! </スパン> 
  </div>
</div>

デフォルトのボタン

ボタンスタイルは、.btnクラスが適用されているものすべてに適用できます。ただし、通常は、最適なレンダリングのためにこれらを<a>および要素のみに適用する必要があります。<button>

ボタン	クラス=""	説明
	`btn`	グラデーション付きの標準的な灰色のボタン
	`btn btn-primary`	特別な視覚的重みを提供し、一連のボタンの主要なアクションを識別します
	`btn btn-info`	デフォルトのスタイルの代替として使用
	`btn btn-success`	成功または肯定的なアクションを示します
	`btn btn-warning`	このアクションには注意が必要であることを示します
	`btn btn-danger`	危険または潜在的に否定的な行動を示します
	`btn btn-inverse`	セマンティックアクションまたは使用に関連付けられていない代替の濃い灰色のボタン
	`btn btn-link`	ボタンの動作を維持しながらリンクのように見せることで、ボタンを強調しない

クロスブラウザの互換性

IE9 では、丸みを帯びた角の背景グラデーションがトリミングされないため、削除します。関連して、IE9 は無効化buttonされた要素をジャンクし、テキストを灰色にレンダリングし、修正できない厄介なテキストシャドウを表示します。

ボタンのサイズ

より大きなボタンまたはより小さなボタンが好きですか? 追加.btn-largeのサイズについては、、、.btn-smallまたはを追加します。.btn-mini

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Large ボタン</button>  
  <button class = "btn btn-large" type = "button" >大きいボタン</button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" >デフォルトのボタン</button>  
  <button class = "btn" type = "button" >デフォルトのボタン</button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" >小さいボタン</button>  
  <button class = "btn btn-small" type = "button" >小さいボタン</button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" >ミニ ボタン</button>  
  <button class = "btn btn-mini" type = "button" >ミニボタン</button>  
</p>

を追加して、ブロックレベルのボタン (親の全幅にわたるボタン) を作成します.btn-block。

<button class = "btn btn-large btn-block btn-primary" type = "button" >ブロック レベル ボタン</button>  
<button class = "btn btn-large btn-block" type = "button" >ブロック レベル ボタン</button>

無効状態

ボタンを 50% フェードバックして、クリックできないように見せます。

アンカー要素

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

プライマリリンクリンク

<a href = "#" class = "btn btn-large btn-primary disabled" >プライマリ リンク</a>  
<a href = "#" class = "btn btn-large disabled" >リンク</a>

注意喚起！.disabledここでは共通クラスと同様にユーティリティクラスとして使用する.activeため、接頭辞は必要ありません。また、このクラスは美学専用です。ここでリンクを無効にするには、カスタム JavaScript を使用する必要があります。

ボタン要素

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

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" >プライマリ ボタン</button>   
<button type = "button" class = "btn btn-large" disabled >ボタン</button>

1 つのクラス、複数のタグ

、、または要素で.btnクラスを使用します。<a><button><input>

<a class = "btn" href = "" >リンク</a>  
<button class = "btn" type = "submit" >ボタン</button>  
<input class = "btn" type = "button" value = "Input" >   
<input class = "btn" type = "submit" value = "submit " >

ベストプラクティスとして、コンテキストの要素を一致させて、クロスブラウザーレンダリングが一致するようにしてください。がある場合は、ボタンinputにを使用します。<input type="submit">

クラスを<img>要素に追加して、任意のプロジェクトでイメージのスタイルを簡単に設定します。

<img src = "..." class = "img-rounded" >  
<img src = "..." class = "img-circle" >  
<img src = "..." class = "img-ポラロイド" >

注意喚起！ .img-rounded.img-circleサポートがないため、IE7-8 では動作しませんborder-radius。

アイコングリフ

Glyphiconsが提供する、スプライト形式の 140 個のアイコン。ダークグレー (デフォルト) と白で利用できます。

アイコングラス
アイコン音楽
アイコン検索
アイコン封筒
アイコンハート
アイコンスター
アイコンスター空
アイコンユーザー
アイコンフィルム
大きいアイコン
アイコン番目
アイコン番目のリスト
アイコンOK
アイコン削除
アイコン拡大
アイコンズームアウト
アイコンオフ
アイコン信号
アイコン歯車
アイコンのゴミ箱
アイコンホーム
アイコンファイル
アイコンタイム
アイコン道路
アイコンダウンロード-alt
アイコンダウンロード
アイコンアップロード
アイコン受信トレイ
アイコンプレイサークル
アイコンリピート
アイコン更新
アイコンリスト代替
アイコンロック
アイコンフラグ
アイコン-ヘッドフォン
アイコン音量オフ
アイコン音量ダウン
アイコンボリュームアップ
アイコン-qrcode
アイコンバーコード
アイコンタグ
アイコンタグ
アイコンブック
アイコンブックマーク
アイコンプリント
アイコンカメラ
アイコンフォント
アイコン太字
アイコンイタリック
アイコンテキストの高さ
アイコンテキスト幅
アイコン左揃え
icon-align-center
アイコン整列右
icon-align-justify
アイコンリスト
アイコンインデント左
アイコンインデント右
アイコン-facetime-ビデオ
アイコン画像
アイコン鉛筆
アイコンマップマーカー
アイコン調整
アイコンの色合い
アイコン編集
アイコンシェア
アイコンチェック
アイコン移動
アイコンステップバックワード
アイコン早戻し
アイコン後方
アイコンプレイ
アイコン一時停止
アイコンストップ
アイコン転送
アイコン早送り
アイコンステップフォワード
アイコンイジェクト
アイコン-シェブロン-左
アイコン-シェブロン-右
アイコンプラス記号
アイコンマイナス記号
アイコン削除サイン
アイコン OK サイン
アイコン質問記号
アイコン情報サイン
アイコンスクリーンショット
アイコン削除サークル
アイコン OK サークル
アイコン禁止サークル
アイコン矢印左
アイコン矢印右
アイコン矢印アップ
アイコン矢印ダウン
アイコン共有代替
アイコンリサイズフル
アイコンリサイズ小
アイコンプラス
アイコンマイナス
アイコン-アスタリスク
アイコン感嘆符
アイコンギフト
アイコンリーフ
アイコンファイア
アイコンアイオープン
アイコン-目を閉じる
アイコン警告サイン
アイコン平面
アイコンカレンダー
アイコンランダム
アイコンコメント
アイコンマグネット
アイコンシェブロンアップ
アイコン-シェブロン-ダウン
アイコンリツイート
アイコンショッピングカート
アイコン-フォルダ-閉じる
アイコンフォルダを開く
アイコン-サイズ変更-垂直
アイコン-サイズ変更-水平
アイコン HDD
アイコン拡声器
アイコンベル
アイコン証明書
アイコンサムズアップ
アイコン・サムズダウン
アイコン右
アイコンハンド左
アイコンハンドアップ
アイコンハンドダウン
icon-circle-arrow-right
icon-circle-arrow-left
アイコンサークル矢印アップ
icon-circle-arrow-down
アイコン地球儀
アイコンレンチ
アイコンタスク
アイコンフィルター
アイコンブリーフケース
アイコンフルスクリーン

グリフィコンの帰属

Glyphicons Halflings は通常無料では利用できませんが、Bootstrap と Glyphicons の作成者との間の取り決めにより、開発者は無料で利用できるようになりました。感謝の気持ちを込めて、 Glyphiconsに戻るオプションのリンクを可能な限り含めてください。

使い方

すべてのアイコンには<i>、一意のクラスのタグが必要で、接頭辞はicon-です。使用するには、次のコードをほぼ任意の場所に配置します。

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

反転 (白) アイコン用のスタイルも用意されており、クラスを 1 つ追加して用意されています。このクラスは、ナビゲーションリンクとドロップダウンリンクのホバー状態とアクティブ状態に具体的に適用されます。

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

注意喚起！ボタンやナビゲーションリンクのように、テキストの文字列の横に使用する場合は、<i>タグの後に適切な間隔を空けるために必ずスペースを残してください。

アイコンの例

ボタン、ツールバーのボタングループ、ナビゲーション、または前に追加されたフォーム入力で使用します。

ボタン

ボタンツールバーのボタングループ

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  </div>
</div>

ボタングループのドロップダウン

ユーザー

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i>ユーザー</a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "ドロップダウンメニュー" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i>編集</a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i>削除</a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i>禁止</a></li>  
    <li class = "divider" ></li> 
    <li><a href = "#" ><i class = "i" ></i>管理者にする</a></li>  
  </ul>
</div>

ボタンのサイズ

星星星

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i>スター</a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i>スター</a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i>スター</a>

<ul class = "nav nav-list" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i>ホーム</a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i>ライブラリ</a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i>アプリケーション</a></li>  
  <li><a href = "#" ><i class = "i" ></i>その他</a></li>  
</ul>

フォームフィールド

<divクラス= "コントロール グループ" > 
  <label class = "control-label" for = "inputIcon" >メールアドレス</label>  
  <divクラス= "コントロール" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

タイポグラフィ

見出し

h1. 見出し 1

h2. 見出し 2

h3. 見出し 3

h4. 見出し 4

h5. 見出し 5

h6. 見出し 6

ボディコピー

リードボディコピー

より少ないもので構築

強調

<small>

大胆な

斜体

アライメント クラス

強調クラス

略語

<abbr>

<abbr class="initialism">

住所

<address>

ブロッククオート

デフォルトのブロック引用

引用オプション

ソースの命名

代替ディスプレイ

リスト

順不同

順序付けられました

スタイルなし

列をなして

説明

横の説明

コード

列をなして

基本ブロック

テーブル

デフォルトのスタイル

オプションクラス

.table-striped

.table-bordered

.table-hover

.table-condensed

オプションの行クラス

サポートされている表のマークアップ

フォーム

デフォルトのスタイル

オプションのレイアウト

検索フォーム

インラインフォーム

横型

サポートされているフォーム コントロール

入力

テキストエリア

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

デフォルト (スタック)

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

セレクト

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

先頭および末尾に追加される入力

デフォルトのオプション

組み合わせた

テキストの代わりにボタン

ボタンのドロップダウン

セグメント化されたドロップダウン グループ

検索フォーム

サイズ変更の制御

ブロックレベル入力

相対的なサイズ

グリッドのサイジング

編集不可能な入力

フォーム アクション

ヘルプテキスト

インライン ヘルプ

ブロックヘルプ

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

入力フォーカス

無効な入力

無効な入力

`<small>`

アライメントクラス

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`

サポートされているフォームコントロール

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

セグメント化されたドロップダウングループ

フォームアクション

インラインヘルプ

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

ボタンツールバーのボタングループ

ボタングループのドロップダウン

フォームフィールド