ボタングループ

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

のセットを に組み合わせ<div class="btn-group">て<div class="btn-toolbar">、より複雑なプロジェクトにすることもできます。

マークアップの例

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

複数のグループ用のツールバーを使用すると、次のようになります。

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

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

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

JavaScript を入手 »

注意喚起

ボタン グループの CSS は、別のファイル、button-groups.less にあります。

ボタンのドロップダウン

任意のボタンを使用してドロップダウン メニューをトリガーします。ドロップダウン メニューを 内に配置し.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>

分割ボタンのドロップダウン

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

マークアップの例

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

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

強力な基本クラス

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

なぜタブと丸薬

Bootstrap のタブとピルは<ul>、同じコア HTML であるリンクのリストに基づいて構築されています。クラスのみでタブまたはピルを交換します。

どちらのオプションも、コンテンツのサブセクションや関連コンテンツのページ間を移動するのに最適です。

基本タブ

通常<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 でのドロップダウンの初期化に関するドキュメントを読んでください。

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

• 家
• プロフィール
• 落ちる
  • アクション
  • 別のアクション
  • ここに何か他のものがあります
  • 別リンク

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

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

• 家
• プロフィール
• 落ちる
  • アクション
  • 別のアクション
  • ここに何か他のものがあります
  • 別リンク

<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>すれば、設定は完了です。

ナビリストの例

リンクのリストを取得して追加し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>

ナビゲーション バーをビューポートの上部に固定するには.navbar-fixed-top、最も外側の div に.navbar. CSS ではpadding-top: 40px;、<body>.

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

ブランド名

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

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

検索フォーム

検索フォームは、クラスを使用して navbar にカスタム スタイルを受け取ります.navbar-search。.pull-leftまたは.pull-right上に含めformて整列させます。

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

ドロップダウンの追加

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

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

JavaScript を入手 →

それらを使用する理由

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

例

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

• 家

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

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

マークアップ

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

<ulクラス= "ブレッドクラム" > 
  <リ>
    <a href = "#" >ホーム</a> <span class = "divider" > / </span>   
  </li>
  <リ>
    <a href = "#" >ライブラリ</a> <span class = "divider" > / </span>   
  </li>
  <liクラス= "アクティブ" > 
    <a href = "#" >データ</a> 
  </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 コンポーネントは、軽いマークアップとさらに軽いスタイルを使用した単純なページネーションの実装のためのリンクのセットです。ブログや雑誌などのシンプルなサイトに最適です。

デフォルトの例

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

• 前
• 次

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

デフォルトのサムネイル

デフォルトでは、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>デフォルトでは不要で、 outter だけです<div>。

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

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

JavaScript と相性抜群

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

プラグインを入手 »

アラートの例

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

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

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

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

エラーまたは危険

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

成功

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

情報

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

基本

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

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

ストライプ

グラデーションを使用してストライプ効果を作成します。

<div class = "progress 進捗情報 
     プログレスストライプ" >
  <divクラス= "バー" 
       スタイル= "幅: 20 %; " ></div> 
</div>

アニメーション

縞模様の例を取り上げてアニメーション化します。

<div class = "progress progress-danger 
     プログレスストライプアクティブ" >
  <divクラス= "バー" 
       スタイル= "幅: 40 %; " ></div> 
</div>

追加の色

プログレス バーは、スタイルが似ているボタンやアラートと同じクラス名の一部を使用します。

• .progress-info
• .progress-success
• .progress-danger

または、LESS ファイルをカスタマイズして、独自の色とサイズを作成することもできます。

行動

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

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

ブラウザのサポート

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

現在、Opera はアニメーションをサポートしていません。

ウェルズ

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

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

バッジ

要素にバッジを使用して、未読数を表示したり、単純なインジケーターとして使用したりします。

<span class = "バッジ" > 3 </div> 

閉じるアイコン

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

×

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