ブートストラップ

ベースCSS

拡張可能なクラスでスタイル設定および強化された基本的な HTML 要素。

タイポグラフィ

見出し

すべての 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>

アライメント クラス

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

左揃えのテキスト。

中央揃えのテキスト。

右揃えのテキスト。

  1. <p class = "text-left" >左揃えのテキスト。</p> 
  2. <p class = "text-center" >中央揃えのテキスト。</p> 
  3. <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.

  1. <p class = "muted" > Fusce dapibus、tellus ac cursus commodo、tortor mauris nibh. </p> 
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <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] 
  1. <住所>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 フォルサム アベニュー、スイート 600 <br>
  4.   カリフォルニア州サンフランシスコ 94107 <br>
  5.   <abbr title = "電話" > P: </abbr> (123) 456-7890 
  6. </アドレス>
  7.  
  8. <住所>
  9.   <strong>氏名</strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </アドレス>

ブロッククオート

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

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

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

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

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

引用オプション

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

ソースの命名

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

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

ソースタイトルで有名な人 
  1. <ブロック引用>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。</p>
  3.   <small>有名人<cite title = "Source Title" > Source Title </cite></small> 
  4. </blockquote>

代替ディスプレイ

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

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

ソースタイトルで有名な人 
  1. <blockquote class = "プルライト" > 
  2.   ...
  3. </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
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

順序付けられました

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. マッサで整数痴漢ロレム
  4. プレチウム ニスル アリケのファシリシス
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <オール>
  2.   <li> ... </li>
  3. </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
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

列をなして

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

  • ロレム・イプサム
  • インゲンマメ
  • Nulla volutpat
  1. <ulクラス= "インライン" > 
  2.   <li> ... </li>
  3. </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. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </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. 
  1. <dl class = "dl-horizo​​ntal" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

注意喚起！水平方向の説明リストでは、長すぎて左側の列に収まらない用語が切り捨てられます 修正text-overflow。狭いビューポートでは、デフォルトのスタック レイアウトに変更されます。

コード

列をなして

コードのインライン スニペットを でラップし<code>ます。

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

基本ブロック

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

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

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

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

テーブル

デフォルトのスタイル

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

# ファーストネーム 苗字 ユーザー名
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 ラリー 鳥 @ツイッター 
  1. <テーブルクラス= "テーブル" > 
  2.   …
  3. </表>

オプションクラス

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

.table-striped

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

# ファーストネーム 苗字 ユーザー名
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 ラリー 鳥 @ツイッター 
  1. <table class = "table table-striped" > 
  2.   …
  3. </表>

.table-bordered

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

# ファーストネーム 苗字 ユーザー名
1 マーク オットー @mdo
マーク オットー @getbootstrap
2 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
  1. <テーブルクラス= "テーブル テーブル罫線" > 
  2.   …
  3. </表>

.table-hover

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

# ファーストネーム 苗字 ユーザー名
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
  1. <table class = "table table-hover" > 
  2.   …
  3. </表>

.table-condensed

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

# ファーストネーム 苗字 ユーザー名
1 マーク オットー @mdo
2 ジェイコブ ソーントン @太い
3 鳥のラリー @ツイッター 
  1. <table class = "table table-condensed" > 
  2.   …
  3. </表>

オプションの行クラス

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

クラス 説明
.success 成功または肯定的なアクションを示します。
.error 危険または潜在的に否定的な行動を示します。
.warning 注意が必要な可能性がある警告を示します。
.info デフォルトのスタイルの代替として使用されます。
# 製品 支払い済み 状態
1 TB - 毎月 2012/01/04 承認済み
2 TB - 毎月 2012/02/04 不承認
3 TB - 毎月 2012/03/04 保留中
4 TB - 毎月 2012/04/04 電話して確認 
  1. ...
  2.   < trクラス= "成功" >
  3.     <td> 1 < /td>
  4.     <td>TB - 毎月</ td >
  5.     <td> 2012 年1月4日< / td >
  6.     <td>承認済み</ td >
  7.   </ tr >
  8. ...

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

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

鬼ごっこ 説明
<table> 表形式でデータを表示するためのラッピング要素
<thead> <tr>テーブル列にラベルを付けるためのテーブル ヘッダー行 ( ) のコンテナ要素
<tbody> <tr>テーブル本体のテーブル行のコンテナ要素 ( )
<tr> 1 つの行に表示される一連のテーブル セル (<td>または) のコンテナ要素<th>
<td> デフォルトのテーブル セル
<th> 列 (またはスコープと配置に応じて行) ラベル用の特別なテーブル セル
<caption> テーブルが保持する内容の説明または要約。特にスクリーン リーダーに役立ちます 
  1. <テーブル>
  2.   <キャプション> ... </キャプション>
  3.   <スレッド>
  4.     <tr>
  5.       <番目> ... </番目>
  6.       <番目> ... </番目>
  7.     </tr>
  8.   </スレッド>
  9.   <本体>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </表>

フォーム

デフォルトのスタイル

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

伝説 ブロック レベルのヘルプ テキストの例はこちら。 
  1. <フォーム>
  2.   <フィールドセット>
  3.     <レジェンド>レジェンド</レジェンド>
  4.     <label>ラベル名</label>
  5.     <input type = "text" placeholder = "何か入力してください…" >  
  6.     <span class = "help-block" >ここにブロック レベルのヘルプ テキストの例を示します。</スパン> 
  7.     <ラベルクラス= "チェックボックス" > 
  8.       <input type = "checkbox" >チェックアウト 
  9.     </ラベル>
  10.     <button type = "submit" class = "btn" > Submit </button>  
  11.   </フィールドセット>
  12. </フォーム>

オプションのレイアウト

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

検索フォーム

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

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

インラインフォーム

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

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

横型

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

  • .form-horizontalフォームに追加
  • ラベルとコントロールをラップする.control-group
  • .control-labelラベルに追加
  • .controls関連するコントロールを適切に配置するためにラップします。
  1. <form class = "form-horizo​​ntal" > 
  2.   <divクラス= "コントロール グループ" > 
  3.     <label class = "control-label" for = "inputEmail" >メール</label>  
  4.     <divクラス= "コントロール" > 
  5.       <input type = "text" id = "inputEmail" placeholder = "Email" >   
  6.     </div>
  7.   </div>
  8.   <divクラス= "コントロール グループ" > 
  9.     <label class = "control-label" for = "inputPassword" >パスワード</label>  
  10.     <divクラス= "コントロール" > 
  11.       <input type = "password" id = "inputPassword" placeholder = "Password" >   
  12.     </div>
  13.   </div>
  14.   <divクラス= "コントロール グループ" > 
  15.     <divクラス= "コントロール" > 
  16.       <ラベルクラス= "チェックボックス" > 
  17.         <input type = "checkbox" >記憶する 
  18.       </ラベル>
  19.       <button type = "submit" class = "btn" >サインイン</button>  
  20.     </div>
  21.   </div>
  22. </フォーム>

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

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

入力

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

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

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

テキストエリア

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

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

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

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

デフォルト (スタック)


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

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

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

  1. <label class = "checkbox inline" > 
  2.   <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
  3. </ラベル>
  4. <label class = "checkbox inline" > 
  5.   <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
  6. </ラベル>
  7. <label class = "checkbox inline" > 
  8.   <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
  9. </ラベル>

セレクト

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


  1. <選択>
  2.   <オプション> 1 </オプション>
  3.   <オプション> 2 </オプション>
  4.   <オプション> 3 </オプション>
  5.   <オプション> 4 </オプション>
  6.   <オプション> 5 </オプション>
  7. </select>
  8.  
  9. <複数を選択= "複数" > 
  10.   <オプション> 1 </オプション>
  11.   <オプション> 2 </オプション>
  12.   <オプション> 3 </オプション>
  13.   <オプション> 4 </オプション>
  14.   <オプション> 5 </オプション>
  15. </select>

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

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

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

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

デフォルトのオプション

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

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "アドオン" > @ </span> 
  3.   <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput " type = "text" >   
  7.   <span class = "アドオン" > .00 </span> 
  8. </div>

組み合わせた

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

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

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

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

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton " type = "text" >   
  3.   <ボタンクラス= "btn"タイプ= "ボタン" >行け! </ボタン>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" >検索</button>  
  4.   <button class = "btn" type = "button" >オプション</button>  
  5. </div>

ボタンのドロップダウン

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  5.       アクション
  6.       <span class = "キャレット" ></span> 
  7.     </ボタン>
  8.     <ul class = "ドロップダウンメニュー" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       アクション
  5.       <span class = "キャレット" ></span> 
  6.     </ボタン>
  7.     <ul class = "ドロップダウンメニュー" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton" type = "text" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  4.       アクション
  5.       <span class = "キャレット" ></span> 
  6.     </ボタン>
  7.     <ul class = "ドロップダウンメニュー" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <入力クラス= "span2" id = "appendedPrependedDropdownButton "タイプ= "テキスト" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
  14.       アクション
  15.       <span class = "キャレット" ></span> 
  16.     </ボタン>
  17.     <ul class = "ドロップダウンメニュー" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

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

  1. <フォーム>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <入力タイプ= "テキスト" > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     <入力タイプ= "テキスト" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </フォーム>

検索フォーム

  1. <フォームクラス= "フォーム検索" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" >検索</button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" >検索</button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </フォーム>

サイズ変更の制御

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

ブロックレベル入力

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

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

相対的なサイズ

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >   
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >   
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >   
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

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

グリッドのサイジング

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

  1. <input class = "span1" type = "text" placeholder = ".span1" >   
  2. <input class = "span2" type = "text" placeholder = ".span2" >   
  3. <input class = "span3" type = "text" placeholder = ".span3" >   
  4. <select class = "span1" > 
  5.   ...
  6. </select>
  7. <select class = "span2" > 
  8.   ...
  9. </select>
  10. <select class = "span3" > 
  11.   ...
  12. </select>

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

  1. <divクラス= "コントロール" > 
  2.   <input class = "span5" type = "text" placeholder = ".span5" >   
  3. </div>
  4. <div class = "controls controls-row" > 
  5.   <input class = "span4" type = "text" placeholder = ".span4" >   
  6.   <input class = "span1" type = "text" placeholder = ".span1" >   
  7. </div>
  8. ...

編集不可能な入力

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

ここに価値がある 
  1. <span class = "input-xlarge uneditable-input" >ここに何らかの値</span>

フォーム アクション

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

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

ヘルプテキスト

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

インライン ヘルプ

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

ブロックヘルプ

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

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

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

入力フォーカス

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

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

無効な入力

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

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

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

無効な入力

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

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

検証状態

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

何か問題が発生した可能性があります
エラーを修正してください
ユーザー名が取られる
ウーフー！ 
  1. <divクラス= "コントロール グループの警告" > 
  2.   <label class = "control-label" for = "inputWarning" >警告付き入力</label>  
  3.   <divクラス= "コントロール" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" >問題が発生した可能性があります</span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "コントロール グループ エラー" > 
  10.   <label class = "control-label" for = "inputError" >エラーのある入力</label>  
  11.   <divクラス= "コントロール" > 
  12.     <input type = "text" id = "inputError" >  
  13.     <span class = "help-inline" >エラーを修正してください</span> 
  14.   </div>
  15. </div>
  16.  
  17. <divクラス= "コントロール グループ情報" > 
  18.   <label class = "control-label" for = "inputInfo" >情報付き入力</label>  
  19.   <divクラス= "コントロール" > 
  20.     <input type = "text" id = "inputInfo" >  
  21.     <span class = "help-inline" >ユーザー名は既に使用されています</span> 
  22.   </div>
  23. </div>
  24.  
  25. <divクラス= "コントロール グループの成功" > 
  26.   <label class = "control-label" for = "inputSuccess" >入力成功</label>  
  27.   <divクラス= "コントロール" > 
  28.     <input type = "text" id = "inputSuccess" >  
  29.     <span class = "help-inline" >ウーフー! </スパン> 
  30.   </div>
  31. </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

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Large ボタン</button>  
  3.   <button class = "btn btn-large" type = "button" >大きいボタン</button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" >デフォルトのボタン</button>  
  7.   <button class = "btn" type = "button" >デフォルトのボタン</button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" >小さいボタン</button>  
  11.   <button class = "btn btn-small" type = "button" >小さいボタン</button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" >ミニ ボタン</button>  
  15.   <button class = "btn btn-mini" type = "button" >ミニボタン</button>  
  16. </p>

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

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

無効状態

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

アンカー要素

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

プライマリ リンク リンク 

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

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

ボタン要素

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

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

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

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

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

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

画像

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

140×140 140×140 140×140 
  1. <img src = "..." class = "img-rounded" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." class = "img-ポラロイド" >

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

Glyphiconsのアイコン

アイコングリフ

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-です。使用するには、次のコードをほぼ任意の場所に配置します。

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

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

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

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

アイコンの例

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

ボタン

ボタン ツールバーのボタン グループ
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
ボタン グループのドロップダウン
ユーザー 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i>ユーザー</a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "ドロップダウンメニュー" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i>編集</a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i>削除</a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i>禁止</a></li>  
  8.     <li class = "divider" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i>管理者にする</a></li>  
  10.   </ul>
  11. </div>
ボタンのサイズ
星 星 星 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i>スター</a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i>スター</a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i>スター</a>

ナビゲーション

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

フォーム フィールド

  1. <divクラス= "コントロール グループ" > 
  2.   <label class = "control-label" for = "inputIcon" >メールアドレス</label>  
  3.   <divクラス= "コントロール" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>