ボタングループ

ボタン グループを使用して、複数のボタンを 1 つの複合コンポーネントとして結合します。一連の<a>または<button>要素でそれらを構築します。

ベストプラクティス

ボタン グループとツールバーを使用する場合は、次のガイドラインに従うことをお勧めします。

• 1 つのボタン グループ、<a>またはで常に同じ要素を使用します<button>。
• 同じボタン グループに異なる色のボタンを混在させないでください。
• テキストに加えて、またはテキストの代わりにアイコンを使用しますが、必要に応じて代替テキストとタイトル テキストを必ず含めてください。

ドロップダウン (以下を参照) を持つ関連するボタン グループは、個別に呼び出す必要があり、意図した動作を示すドロップダウン キャレットを常に含める必要があります。

デフォルトの例

アンカー タグ ボタンで構築された標準ボタン グループを HTML がどのように検索するかを次に示します。

<div class = "btn-group" > 
  <ボタンクラス= "btn" > 1 </ボタン> 
  <ボタンクラス= "btn" > 2 </ボタン> 
  <ボタンクラス= "btn" > 3 </ボタン> 
</div>

ツールバーの例

のセットをに結合<div class="btn-group">して<div class="btn-toolbar">、より複雑なコンポーネントを作成します。

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

チェックボックスとラジオのフレーバー

ボタン グループは、1 つのボタンのみをアクティブにできるラジオ、または任意の数のボタンをアクティブにできるチェックボックスとしても機能します。そのための Javascript ドキュメントを表示します。

JavaScript を入手 »

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

注意喚起！ドロップダウンのあるボタンは、適切にレンダリング.btn-groupするために、 内で個別にラップする必要があります。.btn-toolbar

概要と例

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

マークアップの例

ボタン グループと同様に、私たちのマークアップは通常のボタン マークアップを使用しますが、スタイルを改良し、Bootstrap のドロップダウン jQuery プラグインをサポートするためにいくつか追加しています。

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    アクション
    <span class = "キャレット" ></span> 
  </a>
  <ul class = "ドロップダウンメニュー" > 
    <!-- ドロップダウン メニュー リンク -->
  </ul>
</div>

すべてのボタン サイズに対応

ボタンのドロップダウンは任意のサイズで機能します。ボタンのサイズを.btn-large、.btn-small、またはに変更し.btn-miniます。

JavaScriptが必要です

ボタン ドロップダウンが機能するには、Bootstrap ドロップダウン プラグインが必要です。

モバイルなど、場合によっては、ドロップダウン メニューがビューポートの外側に拡張されます。配置を手動で解決するか、カスタム JavaScript で解決する必要があります。

概要と例

ボタン グループのスタイルとマークアップに基づいて、分割ボタンを簡単に作成できます。分割ボタンは、左側に標準アクション、右側にコンテキスト リンク付きのドロップダウン トグルを備えています。

サイズ

サイジングには、追加のボタン クラス.btn-mini、.btn-small、またはを使用します。.btn-large

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- ドロップダウン メニュー リンク -->
  </ul>
</div>

マークアップの例

通常のボタン ドロップダウンを拡張して、別のドロップダウン トリガーとして動作する 2 番目のボタン アクションを提供します。

<div class = "btn-group" > 
  <ボタンクラス= "btn" >アクション</ボタン> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "キャレット" ></span> 
  </ボタン>
  <ul class = "ドロップダウンメニュー" > 
    <!-- ドロップダウン メニュー リンク -->
  </ul>
</div>

ドロップアップ メニュー

ドロップダウン メニューは、1 つのクラスを の直接の親に追加することによって、ボトムアップで切り替えることもできます.dropdown-menu。の方向を反転し.caret、メニュー自体を再配置して、上からではなく下から上に移動します。

<div class = "btn-group ドロップアップ" > 
  <buttonクラス= "btn" >ドロップアップ</button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "キャレット" ></span> 
  </ボタン>
  <ul class = "ドロップダウンメニュー" > 
    <!-- ドロップダウン メニュー リンク -->
  </ul>
</div>

強力な基本クラス

ここにあるすべてのナビゲーション コンポーネント (タブ、ピル、リスト)は、クラスを通じて同じ基本マークアップとスタイルを共有します。.nav

いつ使用するか

タブとピルは、コンテンツのセクションや、関連するコンテンツのページ間を移動するのに最適です。

コンポーネントの配置

ナビゲーション リンクを整列するには、.pull-leftまたは.pull-rightユーティリティ クラスを使用します。どちらのクラスも、指定された方向に CSS フロートを追加します。

基本タブ

通常<ul>のリンクを取り、次を追加し.nav-tabsます。

• 家
• プロフィール
• メッセージ

<ul class = "nav nav-tabs" > 
  <liクラス= "アクティブ" > 
    <a href = "#" >ホーム</a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

基本的な丸薬

同じ HTML を使用しますが、.nav-pills代わりに次を使用します。

• 家
• プロフィール
• メッセージ

<ul class = "nav nav-pills" > 
  <liクラス= "アクティブ" > 
    <a href = "#" >ホーム</a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

積み重ねる方法

タブとピルはデフォルトで水平になっているため、2 つ目のクラス を追加するだけで、.nav-stacked垂直に積み上げられたように表示されます。

積み上げタブ

• 家
• プロフィール
• メッセージ

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

積み重ねられた丸薬

• 家
• プロフィール
• メッセージ

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

豊富なメニューを簡単に

Bootstrap のタブとピルのドロップダウン メニューは非常に簡単で、追加の HTML と軽量の jQuery プラグインを少し追加するだけで済みます。

Javascript ページに移動して、Bootstrap でのドロップダウンの初期化に関するドキュメントを読んでください。

ドロップダウンのあるタブ

• 家
• ヘルプ
• 落ちる
  • Action
  • Another action
  • Something else here
  • Separated link
• ドロップアップ
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <liクラス= "ドロップダウン" > 
    <a class = "dropdown-toggle" 
       data-toggle = "ドロップダウン"
       href = "#" >
        落ちる
        <b class = "キャレット" ></b> 
      </a>
    <ul class = "ドロップダウンメニュー" > 
      <!-- リンク -->
    </ul>
  </li>
</ul>

ドロップダウン付きの丸薬

• 家
• ヘルプ
• 落ちる
  • Action
  • Another action
  • Something else here
  • Separated link
• ドロップアップ
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pills" > 
  <liクラス= "ドロップダウン" > 
    <a class = "dropdown-toggle" 
       data-toggle = "ドロップダウン"
       href = "#" >
        落ちる
        <b class = "キャレット" ></b> 
      </a>
    <ul class = "ドロップダウンメニュー" > 
      <!-- リンク -->
    </ul>
  </li>
</ul>

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

ナビゲーション リストを使用すると、オプションのヘッダーを使用してナビゲーション リンクのグループを簡単に作成できます。OS X の Finder などのサイドバーで使用するのが最適です。

構造的には、タブやピルと同じコア ナビゲーション スタイルに基づいて構築されているため、使用とカスタマイズは簡単です。

アイコン付き

ナビリストにもアイコンを簡単に装備できます。クラスで適切なタグを追加<i>すれば、設定は完了です。

横仕切り

.divider次のように、 class で空のリスト項目を作成して、水平方向の仕切りを追加します。

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

ナビリストの例

リンクのリストを取得して追加しclass="nav nav-list"ます。

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    リスト ヘッダー
  </li>
  <liクラス= "アクティブ" > 
    <a href = "#" >ホーム</a> 
  </li>
  <リ>
    <a href = "#" >ライブラリ</a> 
  </li>
  ...
</ul>

アイコン付きの例

同じ例ですが、<i>アイコンのタグがあります。

<ul class = "nav nav-list" > 
  ...
  <リ>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      としょうかん
    </a>
  </li>
  ...
</ul>

含まれるもの

タブを介してコンテンツを切り替えるシンプルなプラグインを使用して、タブに命を吹き込みます。Bootstrap は、上 (デフォルト)、右、下、左の 4 つのスタイルのタブ可能なタブを統合します。

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

タブ可能な例

.nav-tabsタブをタブ可能にするには、別の div を classでラップします.tabbable。

カスタム jQuery プラグイン

すべてのタブ可能なタブは、軽量の jQuery プラグインによって強化されています。タブ可能なタブを有効にする方法については、javascript ドキュメント ページを参照してください。

JavaScript を入手 →

下部のタブ

HTMLの順番を入れ替えて、一番下にタブを配置するクラスを追加します。

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

左側のタブ

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

<divクラス= "タブ可能なタブ-左" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

右側のタブ

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

<div class = "タブ付きタブ-右" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

ナビゲーションバーの足場

navbar は、静的または固定表示用に適切に構造化するために、いくつかの div のみを必要とします。

<divクラス= "ナビゲーションバー" > 
  <div class = "navbar-inner" > 
    <divクラス= "コンテナ" > 
      ...
    </div>
  </div>
</div>

固定ナビゲーションバー

最も外側の div にクラスを追加して、ナビゲーション バーをビューポートの上部または下部に固定し.navbarます。

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

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

ナビゲーションバーを貼り付けるときは、その下の隠れた領域を考慮することを忘れないでください. に 40px 以上の apdding を追加し<body>ます。これは、コア Bootstrap CSS の後、オプションのレスポンシブ CSS の前に必ず追加してください。

ブランド名

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

<a class = "brand" href = "#" >  
  プロジェクト名
</a>

ナビゲーションバーのフォーム

ナビゲーションバー内でフォームを適切にスタイルおよび配置するには、以下に示すように適切なクラスを追加します。既定のフォームの場合は、適切に配置するために、または.navbar-formのいずれ.pull-leftかを含めます。.pull-right

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</フォーム>

よりカスタマイズされた検索フォームの場合.navbar-searchは、navbar で特殊なスタイルを受け取るクラスを追加します。

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

オプションのレスポンシブ バリエーション

トップバーのコンテンツの量によっては、レスポンシブ オプションを実装したい場合があります。これを行うには、nav コンテンツを含む div でラップし.nav-collapse.collapse、navbar トグル ボタン を追加します.btn-navbar。

<divクラス= "ナビゲーションバー" > 
  <div class = "navbar-inner" > 
    <div��ラス= "コンテナ" > 
 
      <!-- .btn-navbar は、折りたたまれたナビゲーション バー コンテンツのトグルとして使用されます -->
      <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>
 
      <!-- 表示したい場合は、必ずブランドをそのままにしておいてください -->
      <a class = "brand" href = "#" >プロジェクト名</a>  
 
      <!-- 940 ピクセル以下で隠したいものはすべてここに配置 -->
      <div class = "nav-collapse" > 
        <!-- .nav、.navbar-search、.navbar-form など -->
      </div>
 
    </div>
  </div>
</div>

ナビゲーション リンク

ナビゲーション アイテムは、順序付けられていないリストを介して簡単に追加できます。

<ul class = "nav" > 
  <liクラス= "アクティブ" > 
    <a href = "#" >ホーム</a> 
  </li>
  <li><a href = "#" >リンク</a></li> 
  <li><a href = "#" >リンク</a></li> 
</ul>

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

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

コンポーネントの配置

ナビゲーション、検索フォーム、またはテキストを配置するには、.pull-leftまたは.pull-rightユーティリティ クラスを使用します。どちらのクラスも、指定された方向に CSS フロートを追加します。

ドロップダウン メニューの追加

ナビゲーションにドロップダウンとドロップアップを追加するのは非常に簡単ですが、JavaScript プラグインを使用する必要があります。

<ul class = "nav" > 
  <liクラス= "ドロップダウン" > 
    <a href = "#" 
          class = "ドロップダウントグル"
          data-toggle = "ドロップダウン" >
          アカウント
          <b class = "キャレット" ></b> 
    </a>
    <ul class = "ドロップダウンメニュー" > 
      ...
    </ul>
  </li>
</ul>

JavaScript を入手 →

ナビゲーションバーのテキスト

適切な行送りと色のために、テキストの文字列を<p>タグで囲みます。

それらを使用する理由

ブレッドクラム ナビゲーションは、ユーザーがアプリまたはサイト内のどこにいるのかを示す方法として使用されますが、主要なナビゲーションには使用されません。最も効果的になるように、それらの使用はまばらで簡潔にしてください。

例

複数のページにまたがって表示される可能性のある単一の例。

• 家

• ホーム /
• としょうかん

• ホーム /
• 図書館 /
• データ

マークアップ

HTML は、リンク付きの標準的な順序なしリストです。

<ulクラス= "ブレッドクラム" > 
  <リ>
    <a href = "#" >ホーム</a> <span class = "divider" > / </span>   
  </li>
  <リ>
    <a href = "#" >ライブラリ</a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" >データ</li> 
</ul>

いつ使用するか

アプリや検索結果に最適な、Rdio にインスパイアされた非常に単純化された最小限のスタイルのページネーション。大きなブロックは見逃しにくく、簡単に拡張でき、大きなクリック領域を提供します。

ステートフル ページ リンク

リンクはカスタマイズ可能で、適切なクラスのさまざまな状況で機能します。.disabledクリックできないリンクと.active現在のページ。

柔軟な配置

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

例

デフォルトのページネーション コンポーネントは柔軟で、さまざまなバリエーションで機能します。

マークアップ

でラップされ<div>、ページネーションは単なる<ul>.

<divクラス= "ページネーション" > 
  <ul>
    <li><a href = "#" >前へ</a></li> 
    <liクラス= "アクティブ" > 
      <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 = "#" >次へ</a></li> 
  </ul>
</div>

ページャーについて

pager コンポーネントは、軽いマークアップとさらに軽いスタイルを使用した単純なページネーションの実装のための一連のリンクです。ブログや雑誌などのシンプルなサイトに最適です。

オプションの無効状態

ページャー リンクも.disabled、ページネーションの一般的なクラスを使用します。

デフォルトの例

デフォルトでは、ページャーはリンクを中央に配置します。

• 前
• 次

<ul class = "ポケットベル" > 
  <リ>
    <a href = "#" >前へ</a> 
  </li>
  <リ>
    <a href = "#" >次へ</a> 
  </li>
</ul>

位置合わせされたリンク

または、各リンクを左右に揃えることもできます。

• ← 古い
• 新しい→

<ul class = "ポケットベル" > 
  <li class = "previous" > 
    <a href = "#" > ← 古い</a> 
  </li>
  <liクラス= "次" > 
    <a href = "#" >新しい → </a> 
  </li>
</ul>

約

バッジは、インジケーターまたは何らかの種類のカウントを表示するための小さくて単純なコンポーネントです。これらは、Mail.app などの電子メール クライアントや、プッシュ通知用のモバイル アプリでよく見られます。

利用可能なクラス

Bootstrap は、ヒーロー ユニットと呼ばれる軽量で柔軟なコンポーネントを提供して、サイトのコンテンツを紹介します。マーケティングやコンテンツの多いサイトでうまく機能します。

マークアップ

divコンテンツを次のようにラップします。

<divクラス= "ヒーローユニット" > 
  <h1>見出し</h1>
  <p>キャッチフレーズ</p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      もっと詳しく知る
    </a>
  </p>
</div>

h1ページ上のコンテンツのセクションを適切に間隔を空けてセグメント化するための単純なシェル。h1のデフォルトのsmall, 要素だけでなく、他のほとんどのコンポーネント (追加のスタイルを使用)も利用できます。

<divクラス= "ページヘッダー" > 
  <h1>ページ ヘッダーの例</h1>
</div>

デフォルトのサムネイル

デフォルトでは、Bootstrap のサムネイルは、必要最小限のマークアップでリンクされた画像を表示するように設計されています。

高度にカスタマイズ可能

マークアップを少し追加するだけで、見出し、段落、ボタンなど、あらゆる種類の HTML コンテンツをサムネイルに追加できます。

• 

  サムネイル ラベル

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  アクション アクション

• 

  サムネイル ラベル

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  アクション アクション

サムネイルを使用する理由

サムネイル (以前.media-gridは v1.4 まで) は、写真やビデオのグリッド、画像検索結果、小売製品、ポートフォリオなどに最適です。リンクまたは静的コンテンツにすることができます。

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

サムネイル マークアップは単純です。ul任意の数のli要素を使用するだけで十分です。また、非常に柔軟で、コンテンツをラップするためのマークアップを少し追加するだけで、あらゆるタイプのコンテンツに対応できます。

グリッドの列サイズを使用

最後に、サムネイル コンポーネントは既存のグリッド システム クラス (.span2や など) を使用して.span3、サムネイルの寸法を制御します。

マークアップ

前述のように、サムネイルに必要なマークアップは軽くて簡単です。リンクされた画像のデフォルト設定は次のとおりです。

<ul class = "サムネイル" > 
  <li class = "span3" > 
    <a href = "#" class = "サムネイル" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

サムネイルのカスタム HTML コンテンツの場合、マークアップがわずかに変更されます。どこでもブロック レベルのコンテンツを許可するには、を次<a>の<div>ように交換します。

<ul class = "サムネイル" > 
  <li class = "span3" > 
    <divクラス= "サムネイル" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5>サムネイル ラベル</h5>
      <p>ここにサムネイルのキャプション... </p>
    </div>
  </li>
  ...
</ul>

その他の例

利用可能なさまざまなグリッド クラスを使用して、すべてのオプションを調べてください。また、異なるサイズを組み合わせて使用​​することもできます。

書き直された基底クラス

Bootstrap 2 では、基本クラスを簡素化しました:.alertの代わりに.alert-message. <p>また、最低限必要なマークアップを削減しました。デフォルトでは必要ありません。outerのみです<div>。

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

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

JavaScript と相性抜群

Bootstrap には、アラート メッセージをサポートする優れた jQuery プラグインが付属しており、アラート メッセージをすばやく簡単に閉じることができます。

プラグインを入手 »

アラートの例

シンプルなクラスを使用して、メッセージとオプションの閉じるアイコンを div にラップします。

<divクラス= "アラート" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <強い>警告！</strong>自分で確認してください。あなたはあまり格好良くありません。
</div>

.alert-block追加のパディングとテキスト コントロール、および.alert-heading一致する見出しの2 つのオプション クラスを使用して、標準のアラート メッセージを簡単に拡張します。

<divクラス= "アラート アラート ブロック" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <h4 class = "alert-heading" >警告! </h4> 
  自分で確認してください、あなたはそうではありません...
</div>

エラーまたは危険

<divクラス= "アラート アラート エラー" > 
  ...
</div>

成功

<divクラス= "アラート アラート-成功" > 
  ...
</div>

情報

<divクラス= "アラート アラート情報" > 
  ...
</div>

基本

垂直グラデーションのデフォルトの進行状況バー。

<divクラス= "進捗" > 
  <divクラス= "バー" 
       スタイル= "幅: 60 %; " ></div> 
</div>

ストライプ

グラデーションを使用して縞模様の効果を作成します (IE なし)。

<div class = "progress progress-striped" > 
  <divクラス= "バー" 
       スタイル= "幅: 20 %; " ></div> 
</div>

アニメーション

ストライプの例を取り上げてアニメーション化します (IE なし)。

<div class = "progress 進行状況ストライプ 
     アクティブ" >
  <divクラス= "バー" 
       スタイル= "幅: 40 %; " ></div> 
</div>

追加の色

プログレス バーは、一貫したスタイルを実現するために、同じボタン クラスとアラート クラスの一部を使用します。

縞模様のバー

単色と同様に、さまざまな縞模様のプログレス バーがあります。

行動

プログレス バーは CSS3 トランジションを使用しているため、javascript で幅を動的に調整すると、スムーズにサイズ変更されます。

.activeこのクラスを使用すると、.progress-stripedプログレス バーのストライプが左から右にアニメーション化されます。

ブラウザのサポート

プログレス バーは、CSS3 グラデーション、トランジション、およびアニメーションを使用して、すべての効果を実現します。これらの機能は、IE7-9 以前のバージョンの Firefox ではサポートされていません。

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

ウェルズ

要素に挿入効果を与える単純な効果としてウェルを使用します。

<divクラス= "まあ" > 
  ...
</div>

閉じるアイコン

モーダルやアラートなどのコンテンツを閉じるには、一般的な閉じるアイコンを使用します。

×

<a class = "close" > × </a>