ベースCSS

足場に加えて、基本的な 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.

h1. 見出し 1

h2. 見出し 2

h3. 見出し 3

h4. 見出し 4

h5. 見出し 5
h6. 見出し 6

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

エレメント 使用法 オプション
<strong> 重要なテキストのスニペットを強調するため なし
<em> テキストの断片を強勢で強調する場合 なし
<abbr> ホバー時に展開されたバージョンを表示するために略語と頭字語をラップします

title拡張テキストのオプション属性を含める

.initialism大文字の省略形には class を使用します。
<address> その最も近い祖先または作品全体の連絡先情報について すべての行を次で終了してフォーマットを保持する<br>

強調の使用

Fusce dapibustellus ac cursus commodotortor 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 つ示します。

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 電話
: (123) 456-7890
氏名
[email protected]

略語の例

属性を持つ略語にtitleは、薄い点線の下枠があり、ホバーするとヘルプ カーソルが表示されます。これにより、ホバー時に何かが表示されるという特別な指示がユーザーに与えられます。

initialismクラスを略語に追加して、文字サイズをわずかに小さくして、タイポグラフィの調和を高めます。

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

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

ブロッククオート

エレメント 使用法 オプション
<blockquote> 別のソースからコンテンツを引用するためのブロックレベル要素

citeソース URL の属性を追加

浮動オプションの使用.pull-leftとクラス.pull-right
<small> ユーザー向けの引用を追加するためのオプションの要素で、通常は作品のタイトルを持つ著者です <cite>ソースのタイトルまたは名前の前後に を配置します

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

ソースを引用するためのオプションの要素を含めると、スタイリングのためにその前に<small>em ダッシュが表示されます。&mdash;

  1. <ブロック引用>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 前のベネナティスを元に戻す整数。</p>
  3. <small>有名人</small>
  4. </blockquote>

ブロック引用の例

デフォルトの引用符は、次のようにスタイル設定されています。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 前のベネナティスを元に戻す整数。

作品の中で有名な人

blockquote を右にフロートするには、次を追加しclass="pull-right"ます。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 前のベネナティスを元に戻す整数。

作品の中で有名な人

リスト

順不同

<ul>

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

  • 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

順序付けられました

<ol>

  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

説明

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

横の説明

<dl class="dl-horizontal">

説明リスト
説明リストは、用語を定義するのに最適です。
ユースモッド
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.

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

列をなして

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

  1. たとえば<code>セクション</ code >インラインでラップする必要があります

基本ブロック

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

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

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

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

Googleプリティファイ

同じ<pre>要素を使用して、レンダリングを強化するための 2 つのオプション クラスを追加します。

  1. <p>サンプル テキストはこちら... </p>
  1. <pre class = "prettyprint
  2. 線数" >
  3. <p>サンプル テキストはこちら...</p>
  4. </プレ>

google-code-prettifyをダウンロードし、使用方法の readme を表示します。

表のマークアップ

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

テーブル オプション

名前 クラス 説明
デフォルト なし スタイルなし、列と行のみ
基本 .table 行間の横線のみ
ボーダー .table-bordered 角を丸くし、外枠を追加します
ゼブラストライプ .table-striped 奇数行 (1、3、5 など) に明るい灰色の背景色を追加します。
凝縮された .table-condensed tdすべてのおよびth要素内で、縦方向のパディングを 8px から 4px に半分にカットします。

例の表

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

テーブルは、読みやすさを確保し、構造を維持するために、いくつかの境界線のみで自動的にスタイル設定されます。2.0 では、.tableクラスが必要です。

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

2. 縞模様のテーブル

.table-stripedクラスを追加するだけで、ゼブラ ストライプを追加して、テーブルを少し凝らせます。

注:ストライプ テーブルは:nth-childCSS セレクターを使用し、IE7 ~ IE8 では使用できません。

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

3.縁取りテーブル

審美的な目的で、テーブル全体に境界線を追加し、角を丸くします。

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

4. 要約表

.table-condensedテーブル セルのパディングを半​​分 (8px から 4px) にカットするクラスを追加して、テーブルをよりコンパクトにします。

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

5.すべてを組み合わせてください!

使用可能なクラスのいずれかを利用して、さまざまな外観を実現するために、任意のテーブル クラスを自由に組み合わせてください。

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

柔軟な HTML と CSS

Bootstrap のフォームの最も優れた点は、マークアップでどのように作成しても、すべての入力とコントロールが見栄えがすることです。余分な HTML は必要ありませんが、必要な方のためにパターンを提供しています。

より複雑なレイアウトには、簡単なスタイリングとイベント バインディングのための簡潔でスケーラブルなクラスが付属しているため、すべてのステップでカバーされます。

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

Bootstrap では、次の 4 種類のフォーム レイアウトがサポートされています。

  • 垂直 (デフォルト)
  • 探す
  • 列をなして
  • 水平

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

制御状態など

Bootstrap のフォームには、input、textarea、select などのすべての基本フォーム コントロールのスタイルが含まれています。ただし、追加入力や先頭追加入力、チェックボックスのリストのサポートなど、多数のカスタム コンポーネントも付属しています。

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

4種類のフォーム

Bootstrap は、一般的な Web フォームの 4 つのスタイルに簡単なマークアップとスタイルを提供します。

名前 クラス 説明
垂直 (デフォルト) .form-vertical (必須ではありません) コントロールの上に積み重ねられた、左揃えのラベル
列をなして .form-inline コンパクト スタイルの左揃えのラベル コントロールとインライン ブロック コントロール
探す .form-search 典型的な検索美学のための非常に丸みを帯びたテキスト入力
水平 .form-horizontal コントロールと同じ行に左揃え、右揃えのラベルを配置する

フォーム コントロールのみを使用し、追加のマークアップを使用しないサンプル フォーム

基本形

余分なマークアップのないスマートで軽量なデフォルト。

ブロック レベルのヘルプ テキストの例はこちら。

  1. <form class = "まあ" >
  2. <label>ラベル名</label>
  3. <input type = "text" class = "span3" placeholder = "何か入力…" >
  4. <span class = "help-block" >ここにブロック レベルのヘルプ テキストの例を示します。</span>
  5. <ラベルクラス= "チェックボックス" >
  6. <input type = "checkbox" >チェックアウト
  7. </ラベル>
  8. <button type = "submit" class = "btn" > Submit </button>
  9. </フォーム>

検索フォーム

.form-searchフォームと.search-queryに追加しinputます。

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

インラインフォーム

フォーム.form-inlineコントロールの垂直方向の配置と間隔を調整します。

  1. <form class = "well form-inline" >
  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. </フォーム>

横型

右側に表示されているのは、サポートされているすべての既定のフォーム コントロールです。箇条書きのリストは次のとおりです。

  • テキスト入力 (テキスト、パスワード、メールなど)
  • チェックボックス
  • 無線
  • 選択する
  • 複数選択
  • ファイル入力
  • テキストエリア

フリーフォーム テキストに加えて、HTML5 テキストベースの入力はすべてそのように表示されます。

マークアップの例

上記のフォーム レイアウトの例では、最初の入力およびコントロール グループに関連付けられたマークアップを次に示します。、.control-group.control-labelおよび.controlsクラスはすべてスタイリングに必要です。

  1. <form class = "form-horizo​​ntal" >
  2. <フィールドセット>
  3. <legend>凡例テキスト</legend>
  4. <divクラス= "コントロール グループ" >
  5. <label class = "control-label" for = "input01" >テキスト入力</label>
  6. <divクラス= "コントロール" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" >ヘルプ テキストのサポート</p>
  9. </div>
  10. </div>
  11. </フィールドセット>
  12. </フォーム>

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

Bootstrap は、ブラウザーがサポートするフォーカスとdisabled状態のスタイルを特徴とします。デフォルトの Webkit を削除し、代わりに をoutline適用します。box-shadow:focus


フォームの検証

また、エラー、警告、および成功の検証スタイルも含まれています。使用するには、周囲の にエラー クラスを追加します.control-group

  1. <フィールドセット
  2. クラス= "コントロール グループ エラー" >
  3. </フィールドセット>
ここに価値がある
何か問題が発生した可能性があります
エラーを修正してください
ウーフー!
ウーフー!

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

入力の先頭と末尾に追加

入力グループ (追加または先頭に追加されたテキスト) は、入力のコンテキストを簡単に提供する方法を提供します。良い例としては、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">

.span*入力サイズには、グリッド システムの同じクラスを使用します。

また、グリッドにマップしない静的クラスを使用したり、レスポンシブ CSS スタイルに適応したり、さまざまなタイプのコントロール ( inputvs.selectなど) を考慮したりすることもできます。

@

ここにいくつかのヘルプテキストがあります

.00
その他のヘルプ テキストはこちら
$ .00

注:クリック領域を大幅に拡大し、より使いやすいフォームにするために、すべてのオプションをラベルで囲みます。

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

アクションのボタン

慣習として、ボタンはアクションにのみ使用し、ハイパーリンクはオブジェクトに使用する必要があります。たとえば、「ダウンロード」はボタン、「最近のアクティビティ」はリンクにする必要があります。

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

クロスブラウザの互換性

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

複数のサイズ

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


無効状態

無効なボタンの場合、.disabledリンクにクラスを追加し、要素にdisabled属性を追加します。<button>

プライマリ リンク リンク

注意喚起!.disabledここでは共通クラスと同様にユーティリティ クラスとして使用する.activeため、接頭辞は必要ありません。

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

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

リンク
  1. <a class = "btn" href = "" >リンク</a>
  2. <ボタンクラス= "btn"タイプ= "送信" >
  3. ボタン
  4. </ボタン>
  5. <入力クラス= "btn"タイプ= "ボタン"
  6. = "入力" >
  7. <input class = "btn" type = "submit"
  8. = "送信" >

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

  • アイコングラス
  • アイコン音楽
  • アイコン検索
  • アイコン封筒
  • アイコンハート
  • アイコンスター
  • アイコンスター空
  • アイコンユーザー
  • アイコンフィルム
  • 大きいアイコン
  • アイコン番目
  • アイコン番目のリスト
  • アイコン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
  • アイコン地球儀
  • アイコンレンチ
  • アイコンタスク
  • アイコンフィルター
  • アイコンブリーフケース
  • アイコンフルスクリーン

スプライトとして構築

すべてのアイコンを追加のリクエストにする代わりに、それらをスプライトにコンパイルしました。これは、CSS を使用して画像を配置する 1 つのファイル内の一連の画像background-positionです。これは、私たちが Twitter.com で使用している方法と同じであり、うまく機能しています。

すべてのアイコン クラスには.icon-、他のコンポーネントと同様に、適切な名前空間と範囲を指定するために がプレフィックスとして付けられます。これにより、他のツールとの競合を回避できます。

Glyphiconsは、ドキュメントにリンクとクレジットを提供する限り、オープンソース ツールキットでハーフリング セットを使用することを許可してくれました。プロジェクトで同じことを行うことを検討してください。

使い方

Bootstrap は<i>すべてのアイコンにタグを使用しますが、ケース クラスはなく、共有プレフィックスのみです。使用するには、次のコードをほぼ任意の場所に配置します。

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

反転した (白い) アイコンで使用できるスタイルもあり、1 つの追加クラスで準備できます。

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

アイコンには 140 のクラスから選択できます。<i>適切なクラスのタグを追加するだけで準備完了です。完全なリストは、sprites.lessまたはこのドキュメントのここにあります。

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

ユースケース

アイコンは素晴らしいものですが、どこで使用するのでしょうか? ここにいくつかのアイデアがあります:

  • サイドバー ナビゲーションのビジュアルとして
  • 純粋にアイコン駆動のナビゲーションの場合
  • アクションの意味を伝えるボタン
  • ユーザーの目的地に関するコンテキストを共有するためのリンク付き

<i>基本的に、タグを配置できる場所にはどこでもアイコンを配置できます。

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