足場に加えて、基本的な HTML 要素がスタイル設定され、拡張可能なクラスで強化されて、斬新で一貫したルック アンド フィールが提供されます。
タイポグラフィック グリッド全体は、variables.less ファイル内の 2 つの Less 変数に基づいています:@baseFontSizeと@baseLineHeight. 1 つ目は全体で使用されるベースの font-size で、2 つ目はベースの line-height です。
これらの変数といくつかの計算を使用して、すべてのタイプのマージン、パディング、および行の高さなどを作成します。
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.
を追加して、段落を目立たせ.leadます。
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
| エレメント | 使用法 | オプション |
|---|---|---|
<strong> |
重要なテキストのスニペットを強調するため | なし |
<em> |
テキストの断片を強勢で強調する場合 | なし |
<abbr> |
ホバー時に展開されたバージョンを表示するために略語と頭字語をラップします |
.initialism大文字の省略形には class を使用します。 |
<address> |
その最も近い祖先または作品全体の連絡先情報について | すべての行を次で終了してフォーマットを保持する<br> |
Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero、pharetra augue。
注: HTML5 では<b>とを自由に使用できますが、使用方法が少し変更されています。主に音声、技術用語などのためのものですが、追加の重要性を伝えることなく単語やフレーズを強調することを目的としています.<i><b><i>
<address>タグの使用例を 2 つ示します。
属性を持つ略語にtitleは、薄い点線の下枠があり、ホバーするとヘルプ カーソルが表示されます。これにより、ホバー時に何かが表示されるという特別な指示がユーザーに与えられます。
initialismクラスを略語に追加して、文字サイズをわずかに小さくして、タイポグラフィの調和を高めます。
HTMLは食パン以来最高のものです。
単語属性の省略形はattrです。
| エレメント | 使用法 | オプション |
|---|---|---|
<blockquote> |
別のソースからコンテンツを引用するためのブロックレベル要素 |
.pull-leftとクラス.pull-right |
<small> |
ユーザー向けの引用を追加するためのオプションの要素で、通常は作品のタイトルを持つ著者です | <cite>ソースのタイトルまたは名前の前後に を配置します |
ブロック引用を含めるには、HTML<blockquote>を引用としてラップします。ストレート クォートの場合は、 をお勧めします。<p>
ソースを引用するためのオプションの要素を含めると、スタイリングのためにその前に<small>em ダッシュが表示されます。—
- <ブロック引用>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 前のベネナティスを元に戻す整数。</p>
- <small>有名人</small>
- </blockquote>
デフォルトの引用符は、次のようにスタイル設定されています。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 前のベネナティスを元に戻す整数。
作品の中で有名な人
blockquote を右にフロートするには、次を追加しclass="pull-right"ます。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 前のベネナティスを元に戻す整数。
作品の中で有名な人
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
注意喚起！水平方向の説明リストでは、長すぎて左側の列に収まらない用語が切り捨てられます 修正text-overflow。狭いビューポートでは、デフォルトのスタック レイアウトに変更されます。
コードのインライン スニペットを でラップし<code>ます。
- たとえば、<code>セクション</ code >はインラインでラップする必要があります。
<pre>複数行のコードに使用します。適切にレンダリングするために、コード内の山かっこを必ずエスケープしてください。
<p>サンプル テキストはこちら...</p>
- <プレ>
- <p>サンプル テキストはこちら...</p>
- </プレ>
注:タグ内のコード<pre>はできるだけ左側に配置してください。すべてのタブをレンダリングします。
.pre-scrollableオプションで、最大高さ 350px を設定し、y 軸スクロールバーを提供するクラスを追加できます。
同じ<pre>要素を使用して、レンダリングを強化するための 2 つのオプション クラスを追加します。
- <p>サンプル テキストはこちら... </p>
- <pre class = "prettyprint
- 線数" >
- <p>サンプル テキストはこちら...</p>
- </プレ>
google-code-prettifyをダウンロードし、使用方法の readme を表示します。
| 鬼ごっこ | 説明 |
|---|---|
<table> |
表形式でデータを表示するためのラッピング要素 |
<thead> |
<tr>テーブル列にラベルを付けるためのテーブル ヘッダー行 ( ) のコンテナ要素 |
<tbody> |
<tr>テーブル本体のテーブル行のコンテナ要素 ( ) |
<tr> |
1 つの行に表示される一連のテーブル セル (<td>または) のコンテナ要素<th> |
<td> |
デフォルトのテーブル セル |
<th> |
列 (またはスコープと配置に応じて行) ラベル用の特別なテーブル セル <thead> |
<caption> |
テーブルが保持する内容の説明または要約。特にスクリーン リーダーに役立ちます |
- <テーブル>
- <スレッド>
- <tr>
- <番目> … </番目>
- <番目> … </番目>
- </tr>
- </スレッド>
- <本体>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </表>
| 名前 | クラス | 説明 |
|---|---|---|
| デフォルト | なし | スタイルなし、列と行のみ |
| 基本 | .table |
行間の横線のみ |
| ボーダー | .table-bordered |
角を丸くし、外枠を追加します |
| ゼブラストライプ | .table-striped |
奇数行 (1、3、5 など) に明るい灰色の背景色を追加します。 |
| 凝縮された | .table-condensed |
tdすべてのおよびth要素内で、縦方向のパディングを 8px から 4px に半分にカットします。 |
テーブルは、読みやすさを確保し、構造を維持するために、いくつかの境界線のみで自動的にスタイル設定されます。2.0 では、.tableクラスが必要です。
- <テーブルクラス= "テーブル" >
- …
- </表>
| # | ファーストネーム | 苗字 | ユーザー名 |
|---|---|---|---|
| 1 | マーク | オットー | @mdo |
| 2 | ジェイコブ | ソーントン | @太い |
| 3 | ラリー | 鳥 | @ツイッター |
.table-stripedクラスを追加するだけで、ゼブラ ストライプを追加して、テーブルを少し凝らせます。
注:ストライプ テーブルは:nth-childCSS セレクターを使用し、IE7 ～ IE8 では使用できません。
- <table class = "table table-striped" >
- …
- </表>
| # | ファーストネーム | 苗字 | ユーザー名 |
|---|---|---|---|
| 1 | マーク | オットー | @mdo |
| 2 | ジェイコブ | ソーントン | @太い |
| 3 | ラリー | 鳥 | @ツイッター |
審美的な目的で、テーブル全体に境界線を追加し、角を丸くします。
- <テーブルクラス= "テーブル テーブル罫線" >
- …
- </表>
| # | ファーストネーム | 苗字 | ユーザー名 |
|---|---|---|---|
| 1 | マーク | オットー | @mdo |
| マーク | オットー | @getbootstrap | |
| 2 | ジェイコブ | ソーントン | @太い |
| 3 | 鳥のラリー | @ツイッター | |
.table-condensedテーブル セルのパディングを半分 (8px から 4px) にカットするクラスを追加して、テーブルをよりコンパクトにします。
- <table class = "table table-condensed" >
- …
- </表>
| # | ファーストネーム | 苗字 | ユーザー名 |
|---|---|---|---|
| 1 | マーク | オットー | @mdo |
| 2 | ジェイコブ | ソーントン | @太い |
| 3 | 鳥のラリー | @ツイッター | |
使用可能なクラスのいずれかを利用して、さまざまな外観を実現するために、任意のテーブル クラスを自由に組み合わせてください。
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </表>
| フルネーム | |||
|---|---|---|---|
| # | ファーストネーム | 苗字 | ユーザー名 |
| 1 | マーク | オットー | @mdo |
| 2 | ジェイコブ | ソーントン | @太い |
| 3 | 鳥のラリー | @ツイッター | |
Bootstrap のフォームの最も優れた点は、マークアップでどのように作成しても、すべての入力とコントロールが見栄えがすることです。余分な HTML は必要ありませんが、必要な方のためにパターンを提供しています。
より複雑なレイアウトには、簡単なスタイリングとイベント バインディングのための簡潔でスケーラブルなクラスが付属しているため、すべてのステップでカバーされます。
Bootstrap では、次の 4 種類のフォーム レイアウトがサポートされています。
さまざまなタイプのフォーム レイアウトでは、マークアップにいくつかの変更が必要ですが、コントロール自体はそのままで同じように動作します。
Bootstrap のフォームには、input、textarea、select などのすべての基本フォーム コントロールのスタイルが含まれています。ただし、追加入力や先頭追加入力、チェックボックスのリストのサポートなど、多数のカスタム コンポーネントも付属しています。
フォーム コントロールの種類ごとに、エラー、警告、成功などの状態が含まれます。無効なコントロールのスタイルも含まれています。
Bootstrap は、一般的な Web フォームの 4 つのスタイルに簡単なマークアップとスタイルを提供します。
| 名前 | クラス | 説明 |
|---|---|---|
| 垂直 (デフォルト) | .form-vertical (必須ではありません) |
コントロールの上に積み重ねられた、左揃えのラベル |
| 列をなして | .form-inline |
コンパクト スタイルの左揃えのラベル コントロールとインライン ブロック コントロール |
| 探す | .form-search |
典型的な検索美学のための非常に丸みを帯びたテキスト入力 |
| 水平 | .form-horizontal |
コントロールと同じ行に左揃え、右揃えのラベルを配置する |
余分なマークアップのないスマートで軽量なデフォルト。
- <form class = "まあ" >
- <label>ラベル名</label>
- <input type = "text" class = "span3" placeholder = "何か入力…" >
- <span class = "help-block" >ここにブロック レベルのヘルプ テキストの例を示します。</span>
- <ラベルクラス= "チェックボックス" >
- <input type = "checkbox" >チェックアウト
- </ラベル>
- <button type = "submit" class = "btn" > Submit </button>
- </フォーム>
.form-searchフォームと.search-queryに追加しinputます。
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" >検索</button>
- </フォーム>
フォーム.form-inlineコントロールの垂直方向の配置と間隔を調整します。
- <form class = "well 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>
- </フォーム>
右側に表示されているのは、サポートされているすべての既定のフォーム コントロールです。箇条書きのリストは次のとおりです。
上記のフォーム レイアウトの例では、最初の入力およびコントロール グループに関連付けられたマークアップを次に示します。、.control-group、.control-labelおよび.controlsクラスはすべてスタイリングに必要です。
- <form class = "form-horizontal" >
- <フィールドセット>
- <legend>凡例テキスト</legend>
- <divクラス= "コントロール グループ" >
- <label class = "control-label" for = "input01" >テキスト入力</label>
- <divクラス= "コントロール" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" >ヘルプ テキストのサポート</p>
- </div>
- </div>
- </フィールドセット>
- </フォーム>
Bootstrap は、ブラウザーがサポートするフォーカスとdisabled状態のスタイルを特徴とします。デフォルトの Webkit を削除し、代わりに をoutline適用します。box-shadow:focus
また、エラー、警告、および成功の検証スタイルも含まれています。使用するには、周囲の にエラー クラスを追加します.control-group。
- <フィールドセット
- クラス= "コントロール グループ エラー" >
- …
- </フィールドセット>
入力グループ (追加または先頭に追加されたテキスト) は、入力のコンテキストを簡単に提供する方法を提供します。良い例としては、Twitter ユーザー名の @ 記号や財務の $ などがあります。
v1.4 までは、Bootstrap はチェックボックスとラジオをスタックするために追加のマークアップを必要としていました。<label class="checkbox">これで、をラップするを繰り返すだけの簡単なことです<input type="checkbox">。
インラインのチェックボックスとラジオもサポートされています。orに追加.inlineするだけで完了です。.checkbox.radio
インライン フォームで入力の先頭または追加を使用するには、必ずスペースを入れずに同じ行に.add-onandを配置してください。input
フォーム入力のヘルプ テキストを追加するには、input 要素の後にインライン ヘルプ テキスト<span class="help-inline">またはヘルプ テキスト ブロックを含めます。<p class="help-block">
すべてのアイコンを追加のリクエストにする代わりに、それらをスプライトにコンパイルしました。これは、CSS を使用して画像を配置する 1 つのファイル内の一連の画像background-positionです。これは、私たちが Twitter.com で使用している方法と同じであり、うまく機能しています。
すべてのアイコン クラスには.icon-、他のコンポーネントと同様に、適切な名前空間と範囲を指定するために がプレフィックスとして付けられます。これにより、他のツールとの競合を回避できます。
Glyphiconsは、ドキュメントにリンクとクレジットを提供する限り、オープンソース ツールキットでハーフリング セットを使用することを許可してくれました。プロジェクトで同じことを行うことを検討してください。
Bootstrap は<i>すべてのアイコンにタグを使用しますが、ケース クラスはなく、共有プレフィックスのみです。使用するには、次のコードをほぼ任意の場所に配置します。
- <i class = "icon-search" ></i>
反転した (白い) アイコンで使用できるスタイルもあり、1 つの追加クラスで準備できます。
- <i class = "icon-search icon-white" ></i>
アイコンには 140 のクラスから選択できます。<i>適切なクラスのタグを追加するだけで準備完了です。完全なリストは、sprites.lessまたはこのドキュメントのここにあります。
注意喚起！ボタンやナビゲーション リンクのように、テキストの文字列の横に使用する場合は、<i>タグの後に適切な間隔を空けるために必ずスペースを残してください。
アイコンは素晴らしいものですが、どこで使用するのでしょうか? ここにいくつかのアイデアがあります：
<i>基本的に、タグを配置できる場所にはどこでもアイコンを配置できます。
ボタン、ツールバーのボタン グループ、ナビゲーション、または先頭に追加されたフォーム入力で使用します。