例

リンクのリストを表示するための切り替え可能なコンテキスト メニュー。ドロップダウン JavaScript プラグインでインタラクティブになりました。

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" >アクション</a></li>  
  <li><a tabindex = "-1" href = "#" >別のアクション</a></li>  
  <li><a tabindex = "-1" href = "#" >その他</a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" >別リンク</a></li>  
</ul>

マークアップ

ドロップダウン メニューだけを見ると、必要な HTML は次のとおりです。.dropdownドロップダウンのトリガーとドロップダウン メニューを、または を宣言する別の要素でラップする必要がありますposition: relative;。後はメニューを作るだけです。

<divクラス= "ドロップダウン" > 
  <!-- ドロップダウンを切り替えるリンクまたはボタン -->
  <ul class = "dropdown -menu" role = "menu" aria- labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" >アクション</a></li>  
    <li><a tabindex = "-1" href = "#" >別のアクション</a></li>  
    <li><a tabindex = "-1" href = "#" >その他</a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" >別リンク</a></li>  
  </ul>
</div>

オプション

メニューを右に揃えて、ドロップダウンの追加レベルを含めます。

メニューの整列

ドロップダウン メニューを右揃え.pull-rightにするには、aに追加します。.dropdown-menu

<ul class = "dropdown -menu pull-right" role = "menu" aria- labelledby = "dLabel" >   
  ...
</ul>

無効なメニュー オプション

リンクを無効にするには、ドロップダウンに を追加.disabledします。<li>

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" >通常のリンク</a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" >無効なリンク</a></li>   
  <li><a tabindex = "-1" href = "#" >別のリンク</a></li>  
</ul>

ドロップダウンのサブメニュー

OS X のようにホバー時に表示される追加レベルのドロップダウン メニューを追加し、いくつかの簡単なマークアップを追加します。自動スタイル設定のために、既存のドロップダウン メニューの.dropdown-submenuいずれかに追加します。li

<ul class = "dropdown -menu" role = "menu" aria- labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" >その他のオプション</a>  
    <ul class = "ドロップダウンメニュー" > 
      ...
    </ul>
  </li>
</ul>

例

2 つの基本的なオプションと、より具体的な 2 つのバリエーション。

シングルボタングループ

一連のボタンを.btninでラップし.btn-groupます。

<div class = "btn-group" > 
  <button class = "btn" >左</button> 
  <ボタンクラス= "btn" >ミドル</button> 
  <button class = "btn" >右</button> 
</div>

複数のボタン グループ

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

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

縦ボタングループ

ボタンのセットを水平ではなく垂直に積み重ねて表示します。

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

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

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

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

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

概要と例

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

<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 で解決する必要があります。

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

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

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

サイズ

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

<div class = "btn-group" > 
  <buttonクラス= "btn btn-mini" >アクション</button> 
  <button class = "btn btn-mini 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

基本タブ

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

無効状態

任意のナビゲーション コンポーネント (タブ、ピル、またはリスト) については、灰色のリンクとホバー効果なし.disabledを追加します。ただし、属性を削除しない限り、リンクはクリック可能のままです。または、カスタム JavaScript を実装して、これらのクリックを防止することもできます。href

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" >ホーム</a></li>  
  ...
</ul>

コンポーネントの配置

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

積み重ね可能

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

積み上げタブ

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

積み重ねられた丸薬

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

ドロップダウン

少し余分な HTML とドロップダウン JavaScript プラグインを使用してドロップダウン メニューを追加します。

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

<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 などのサイドバーで使用するのが最適です。

ナビリストの例

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

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

ノートnav リスト内でネストするにはclass="nav nav-list"、ネストされたを含めます<ul>。

横仕切り

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

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

タブ可能なナビゲーション

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

タブ可能な例

タブをタブ可能にするには、すべてのタブに一意の ID を持つ を作成し、.tab-paneそれらを でラップします.tab-content。

<div class = "tabbable" > <!-- 左右のタブにのみ必要 -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" >セクション 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" >セクション 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <divクラス= "タブ ペイン アクティブ" id = "tab1" >  
      <p>私はセクション 1 にいます。</p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p>どうも、私はセクション 2 にいます。 </p>
    </div>
  </div>
</div>

タブのフェードイン

タブをフェードインするには、.fadeそれぞれに を追加します.tab-pane。

jQueryプラグインが必要

すべてのタブ可能なタブは、軽量の jQuery プラグインによって強化されています。タブ可能なタブを有効にする方法については、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>

基本ナビゲーションバー

まず、ナビゲーション バーは静的 (上部に固定されていません) であり、プロジェクト名と基本的なナビゲーションのサポートが含まれています。.containerサイトとコンテンツの幅を設定する内の任意の場所に配置します。

<divクラス= "ナビゲーションバー" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" >タイトル</a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" >ホーム</a></li>  
      <li><a href = "#" >リンク</a></li> 
      <li><a href = "#" >リンク</a></li> 
    </ul>
  </div>
</div>

Navbar コンポーネント

ブランド

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

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

ナビゲーション リンク

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

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

フォーム

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

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

検索フォーム

よりカスタマイズされた検索フォームについては、navbar の特殊なスタイルの入力にとを追加.navbar-searchします。form.search-query

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

コンポーネントの配置

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

ドロップダウンの使用

少しのマークアップとドロップダウン JavaScript プラグインを使用して、ナビゲーションにドロップダウンとドロップアップを追加します。

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

マークアップの詳細とドロップダウンの呼び出しに関する情報については、JavaScript ドロップダウンのドキュメントを参照してください。

文章

要素内のテキスト文字列を で囲みます.navbar-text。通常は、<p>適切な行送りと色のためにタグで囲みます。

オプションの表示バリエーション

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

上に固定

. .navbar-fixed-top_ padding_ <body>_ これは、コア Bootstrap CSS の後、オプションのレスポンシブ CSS の前に必ず追加してください。

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

下に固定

代わりに追加.navbar-fixed-bottomします。

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

固定トップ ナビゲーション バー

を追加して、ページとともにスクロールする全幅のナビゲーション バーを作成します.navbar-static-top。クラスとは異なり、 の.navbar-fixed-topパディングを変更する必要はありませんbody。

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

レスポンシブ ナビゲーションバー

折りたたみレスポンシブ ナビゲーション バーを実装するには、ナビゲーション バーのコンテンツをそれを含む div でラップし、.nav-collapse.collapseナビゲーション バーの切り替えボタン を追加します.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>  
 
      <!-- 940px 以下で非表示にしたいものはすべてここに配置 -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav、.navbar-search、.navbar-form など -->
      </div>
 
    </div>
  </div>
</div>

反転変動

を追加して、ナビゲーション バーの外観を変更します.navbar-inverse。

<div class = "navbar navbar-inverse" > 
  ...
</div>

例

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

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

標準のページネーション

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

<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 = "#" > 5 </a></li> 
    <li><a href = "#" >次へ</a></li> 
  </ul>
</div>

オプション

無効状態とアクティブ状態

リンクはさまざまな状況に合わせてカスタマイズできます。.disabledクリックできないリンクに使用し.active、現在のページを示します。

<divクラス= "ページネーション" > 
  <ul>
    <li class = "disabled" ><a href = "#" > « </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

オプションで、スパンのアクティブまたは無効なアンカーを交換して、意図したスタイルを維持しながらクリック機能を削除できます。

<divクラス= "ページネーション" > 
  <ul>
    <li class = "disabled" ><スパン> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

サイズ

ページネーションを大きくしたり小さくしたりしたいですか？追加.pagination-largeのサイズについては、、、.pagination-smallまたはを追加します。.pagination-mini

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<divクラス= "ページネーション" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

アライメント

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

<div class = "pagination pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

ページャ

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

デフォルトの例

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

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

位置合わせされたリンク

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

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

オプションの無効状態

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

<ul class = "ポケットベル" > 
  <li class = "以前の無効" > 
    <a href = "#" > ← 古い</a> 
  </li>
  ...
</ul>

ラベル

バッジ

簡単に折りたためます

実装を簡単にするために、:emptyコンテンツが存在しない場合、ラベルとバッジは (CSS のセレクターを介して) 単純に折りたたまれます。

ヒーローユニット

サイトの重要なコンテンツを紹介する軽量で柔軟なコンポーネント。マーケティングやコンテンツの多いサイトでうまく機能します。

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

ページヘッダー

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

<divクラス= "ページヘッダー" > 
  <h1>ページ ヘッダーの例<small>ヘッダーのサブテキスト</small></h1>
</div>

デフォルトのサムネイル

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

高度にカスタマイズ可能

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

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

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

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

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

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

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

マークアップ

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

<ul class = "サムネイル" > 
  <li class = "span4" > 
    <a href = "#" class = "サムネイル" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "サムネイル" > 
  <li class = "span4" > 
    <divクラス= "サムネイル" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3>サムネイル ラベル</h3>
      <p>サムネイルのキャプション... </p>
    </div>
  </li>
  ...
</ul>

その他の例

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

デフォルトのアラート

.alert基本的な警告アラート メッセージには、任意のテキストとオプションの閉じるボタンをラップします。

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

ボタンを閉じる

モバイル Safari およびモバイル オペラ ブラウザーでは、data-dismiss="alert"属性に加えて、タグhref="#"を使用するときにアラートを却下するためにが必要です。<a>

<a href = "#" class = "close" data-dismiss = "alert" > × </a>   

<button>または、ドキュメントで選択した data 属性を持つ要素を使用することもできます。を使用する場合は、フォームを<button>含める必要があります。含めtype="button"ないと、フォームが送信されない場合があります。

<button type = "button" class = "close" data-dismiss = "alert" > × </ボタン>   

JavaScript でアラートを無視する

アラート jQuery プラグインを使用して、アラートをすばやく簡単に破棄します。

オプション

より長いメッセージの場合は、アラート ラッパーの上部と下部のパディングを追加して増やします.alert-block。

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

文脈上の選択肢

オプションのクラスを追加して、アラートの意味を変更します。

エラーまたは危険

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

成功

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

情報

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

例とマークアップ

基本

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

<divクラス= "進捗" > 
  <div class = "bar" style = " width : 60 %; " ></div>   
</div>

ストライプ

グラデーションを使用してストライプ効果を作成します。IE7-8 では使用できません。

<div class = "progress progress-striped" > 
  <div class = "bar" style = " width : 20 %; " ></div>   
</div>

アニメーション

を追加.activeし.progress-stripedて、ストライプを右から左にアニメーション化します。IE のすべてのバージョンで使用できるわけではありません。

<div class = "progress progress-striped active" > 
  <div class = "bar" style = " width : 40 %; " ></div>   
</div>

積み上げ

複数のバーを同じ.progressものに配置して積み重ねます。

<divクラス= "進捗" > 
  <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
</div>

オプション

追加の色

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

<div class = "progress progress-info" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-success" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

縞模様のバー

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning progress-striped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

ブラウザのサポート

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

Internet Explorer 10 および Opera 12 より前のバージョンは、アニメーションをサポートしていません。

さまざまなタイプのコンポーネント (ブログ コメント、ツイートなど) を構築するための抽象オブジェクト スタイルで、テキスト コンテンツの横に左揃えまたは右揃えの画像を配置します。

デフォルトの例

デフォルトのメディアでは、コンテンツ ブロックの左または右にメディア オブジェクト (画像、ビデオ、オーディオ) を配置できます。

メディアの見出し

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputate の前庭, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ファウシバスのドネクラシニア・コンゲ・フェリス。

メディアの見出し

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputate の前庭, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ファウシバスのドネクラシニア・コンゲ・フェリス。

メディアの見出し

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vulputate の前庭, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ファウシバスのドネクラシニア・コンゲ・フェリス。

<divクラス= "メディア" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <divクラス= "メディア本体" > 
    <h4 class = "media-heading" >メディアの見出し</h4> 
    ...
 
    <!-- ネストされたメディア オブジェクト -->
    <divクラス= "メディア" > 
      ...
    </div>
  </div>
</div>

メディア一覧

少しマークアップを追加すると、リスト内でメディアを使用できます (コメント スレッドや記事リストに役立ちます)。

<ul class = "media-list" > 
  <liクラス= "メディア" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <divクラス= "メディア本体" > 
      <h4 class = "media-heading" >メディアの見出し</h4> 
      ...
 
      <!-- ネストされたメディア オブジェクト -->
      <divクラス= "メディア" > 
        ...
     </div>
    </div>
  </li>
</ul>

ウェルズ

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

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

オプションクラス

2 つのオプションの修飾子クラスを使用して、パディングと丸みを帯びた角を制御します。

<div class = "十分に大きい" > 
  ...
</div>

<div class = "まあまあ小さい" > 
  ...
</div>

閉じるアイコン

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

<ボタンクラス= "閉じる" > × </ボタン> 

アンカーを使用する場合、iOS デバイスではhref="#"for click イベントが必要です。

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

ヘルパー クラス

小さな表示または動作の微調整のためのシンプルで焦点を絞ったクラス。

.プルレフト

要素を左にフロート

class = "プルレフト"

. プル-左{
  フロート:左;
}

.プルライト

要素を右にフロート

クラス= "プルライト"

. プル-右{
  フロート:右;
}

.ミュート

要素の色を#999

クラス= 「ミュート」

. ミュート{
  色: #999; 
}

.clearfix

float任意の要素をクリア

クラス= "クリアフィックス"

. クリアフィックス{
  *ズーム: 1 ; 
  &:前に、
  &: {の後
    表示:テーブル;
    内容: 「」; 
  }
  &: {の後
    クリア:両方;
  }
}