BootStrap3 StyleGuide

Bootstrap3 のスタイルガイドです。

書式指定系

見出し

ページの見出し、英名は「heading」。

ページの見出し、英名は「heading」。

ページの見出し、英名は「heading」。

ページの見出し、英名は「heading」。

ページの見出し、英名は「heading」。

ページの見出し、英名は「heading」。

              
                <h1 class="h1">ページの見出し、英名は「heading」。</h1>
                <h1 class="h2">ページの見出し、英名は「heading」。</h1>
                <h1 class="h3">ページの見出し、英名は「heading」。</h1>
                <h1 class="h4">ページの見出し、英名は「heading」。</h1>
                <h1 class="h5">ページの見出し、英名は「heading」。</h1>
                <h1 class="h6">ページの見出し、英名は「heading」。</h1>
              
            

セカンダリテキスト

ページの見出し、 英名は「heading」。

ページの見出し、 英名は「heading」。

ページの見出し、 英名は「heading」。

ページの見出し、 英名は「heading」。

ページの見出し、 英名は「heading」。

ページの見出し、 英名は「heading」。

              
                <h1 class="h1">ページの見出し、<small>英名は「heading」。</small></h1>
                <h1 class="h2">ページの見出し、<small>英名は「heading」。</small></h1>
                <h1 class="h3">ページの見出し、<small>英名は「heading」。</small></h1>
                <h1 class="h4">ページの見出し、<small>英名は「heading」。</small></h1>
                <h1 class="h5">ページの見出し、<small>英名は「heading」。</small></h1>
                <h1 class="h6">ページの見出し、<small>英名は「heading」。</small></h1>
              
            

行揃え

左揃え

中央揃え

右揃え

              
                <p class="text-left">左揃え</p>
                <p class="text-center">中央揃え</p>
                <p class="text-right">右揃え</p>
              
            

テキスト色

◆ ノーマルテキスト色 黒色(#000)/ノーマルなテキストリンク色

◆テキストバリエーション色[muted]・・灰色(#777)/クラス名:text-muted(リンク色指定なし)

◆重要色[primary]・・青色(#428bca)/クラス名:text-primary

◆成功色[success]・・緑色(#5cb85c)/クラス名:text-success

◆情報色[info]・・明度の低い青色(#5bc0de)/クラス名:text-info

◆警告色[warning]・・黄色(#fc18e3)/クラス名:text-warning

◆危険色[danger]・・明度の低い赤色(#a94442)/クラス名:text-danger

              
                <p>◆ ノーマルテキスト色 黒色(#000)/<a href="*">ノーマルなテキストリンク色</a></p>
                <p class="text-muted">◆テキストバリエーション色[muted]・・灰色(#777)/クラス名:text-muted(リンク色指定なし)</p>
                <p class="text-primary">◆重要色[primary]・・青色(#428bca)/クラス名:<a href="*" class="text-primary">text-primary</a></p>
                <p class="text-success">◆成功色[success]・・緑色(#5cb85c)/クラス名:<a href="text-success">text-success</a></p>
                <p class="text-info">◆情報色[info]・・明度の低い青色(#5bc0de)/クラス名:<a href="*" class="text-info">text-info</a></p>
                <p class="text-warning">◆警告色[warning]・・黄色(#fc18e3)/クラス名:<a href="*" class="text-warning">text-warning</a></p>
                <p class="text-danger">◆危険色[danger]・・明度の低い赤色(#a94442)/クラス名:<a href="*" class="text-danger">text-danger</a></p>
              
            

背景色

◆重要色[primary]・・青色(#428bca)/クラス名:bg-primary

◆成功色[success]・・緑色(#5cb85c)/クラス名:bg-success

◆情報色[info]・・明度の低い青色(#5bc0de)/クラス名:bg-info

◆警告色[warning]・・黄色(#fc18e3)/クラス名:bg-warning

◆危険色[danger]・・明度の低い赤色(#a94442)/クラス名:bg-danger

              
                <p class="bg-primary">◆重要色[primary]・・青色(#428bca)/クラス名:<a href="*" class="bg-primary">bg-primary</a></p>
                <p class="bg-success">◆成功色[success]・・緑色(#5cb85c)/クラス名:<a href="bg-success">bg-success</a></p>
                <p class="bg-info">◆情報色[info]・・明度の低い青色(#5bc0de)/クラス名:<a href="*" class="bg-info">bg-info</a></p>
                <p class="bg-warning">◆警告色[warning]・・黄色(#fc18e3)/クラス名:<a href="*" class="bg-warning">bg-warning</a></p>
                <p class="bg-danger">◆危険色[danger]・・明度の低い赤色(#a94442)/クラス名:<a href="*" class="bg-danger">bg-danger</a></p>
              
            

画像埋め込み

画像
              
                <img src="" alt="画像" class="img-responsive">
              
            

動画埋め込み

              
                
                  <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-items" src="https://www.youtube.com/embed/XXX " </iframe>
                  </div>
                
                
                  <div class="embed-responsive embed-responsive-4by3">
                    <iframe class="embed-responsive-items" src="https://www.youtube.com/embed/XXX " </iframe>
                  </div>
                
              
            

リスト

  • リスト項目
  • リスト項目
    • リスト項目
    • リスト項目
    • リスト項目
    • リスト項目
    • リスト項目
  • リスト項目
  • リスト項目
  • リスト項目
              
                
                  <ul class="list-unstyled">
                    <li>リスト項目</li>
                    <li> リスト項目
                    <ul>
                      <li>リスト項目</li>
                      <li>リスト項目</li>
                      <li>リスト項目</li>
                      <li>リスト項目</li>
                      <li>リスト項目</li>
                    </ul>
                    </li>
                    <li>リスト項目</li>
                    <li>リスト項目</li>
                    <li>リスト項目</li>
                  </ul>
                
              
            

リストのインライン化(横に並べる)

  • 東京本店
  • 札幌本店
  • 神奈川本店
  • 名古屋本店
  • 大阪本店
  • 福岡本店
              
                
                  <ul class="list-inline">
                    <li>東京本店</li>
                    <li>札幌本店</li>
                    <li>神奈川本店</li>
                    <li>名古屋本店</li>
                    <li>大阪本店</li>
                    <li>福岡本店</li>
                  </ul>
                
              
            

テーブル

部屋No. 部屋タイプ 定員 喫煙 料金[円]
501 ツイン 2 12,800
502 ツイン 2 不可 10,800
601 ツイン 2 12,800
701 ツイン 2 不可 20,800
702 ツイン 2 不可 20,800
              
                
                  <table class="table table-striped table-bordered table-hover table-condesed table-responsive">
                    <thead>
                      <tr>
                        <th>部屋No.</th>
                        <th>部屋タイプ</th>
                        <th>定員</th>
                        <th>喫煙</th>
                        <th>料金[円]</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>501</td>
                        <td>ツイン</td>
                        <td>2</td>
                        <td>可</td>
                        <td class="text-right">12,800</td>
                      </tr>
                      <tr>
                        <td>502</td>
                        <td>ツイン</td>
                        <td>2</td>
                        <td>不可</td>
                        <td class="text-right">10,800</td>
                      </tr>
                      <tr>
                        <td>601</td>
                        <td>ツイン</td>
                        <td>2</td>
                        <td class="text-info">可</td>
                        <td class="text-right">12,800</td>
                      </tr>
                      <tr class="warning">
                        <td>701</td>
                        <td>ツイン</td>
                        <td>2</td>
                        <td>不可</td>
                        <td class="text-right">20,800</td>
                      </tr>
                      <tr class="danger">
                        <td>702</td>
                        <td>ツイン</td>
                        <td>2</td>
                        <td>不可</td>
                        <td class="text-right">20,800</td>
                      </tr>
                    </tbody>
                  </table>
                
              
            

フォーム基本

              
                
                  <form action="">
                    <div class="form-group">
                      <label for="exampleInputEmail1">メールアドレス</label>
                      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="メールアドレス" require>
                    </div>
                    <div class="form-group">
                      <label for="exampleInputPassword1">パスワード</label>
                      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="パスワード" require>
                    </div>
                    <div class="checkbox">
                      <label>
                        <input type="checkbox">ログイン状態を維持する
                      </label>
                    </div>
                    <button type="submit" class="btn btn-default">ログイン</button>
                  </form>
                
              
            

フォームサイズ指定

              
                <input type="text" class="form-control input-lg" placeholder=".input-lg">
                <input type="text" class="form-control" placeholder="Default input">
                <input type="text" class="form-control input-sm" placeholder=".input-sm">
                
                <div class="row">
                  <div class="col-xs-2">
                    <input type="text" class="form-control" placeholder=".col-xs-2">
                  </div>
                  <div class="col-xs-3">
                    <input type="text" class="form-control" placeholder=".col-xs-3">
                  </div>
                  <div class="col-xs-4">
                    <input type="text" class="form-control" placeholder=".col-xs-4">
                  </div>
                </div>
                
              
            

ブロック系

ジャンボトロン

Bootstrapgeek.biz

Bootstrapgeek.bizは、Webデザイナー、WebディレクターのためのTips&学習サイトです。

3分でわかる
bootstrapマスター講座

              
                
                  <div class="jumbotron">
                    <div class="container">
                      <h1>Bootstrapgeek.biz</h1>
                      <p>Bootstrapgeek.bizは、Webデザイナー、WebディレクターのためのTips&学習サイトです。</p>
                      <p><a href="" class="btn btn-danger btn-lg">3分でわかる<br>bootstrapマスター講座</a></p>
                    </div>
                  </div>
                
              
            

囲み記事

wellの使用方法 ※<p>にも使える

特に注目させたいコンテンツやコラムなどに使用します。なお、HTML要素ではなく、"well"は、bootstrap用語です。

wellの使用方法 ※<p>にも使える

特に注目させたいコンテンツやコラムなどに使用します。なお、HTML要素ではなく、"well"は、bootstrap用語です。

wellの使用方法 ※<p>にも使える

特に注目させたいコンテンツやコラムなどに使用します。なお、HTML要素ではなく、"well"は、bootstrap用語です。

              
                
                  <div class="well well-lg">
                    <h4>wellの使用方法 ※&lt;p&gt;にも使える</h4>
                    <p>
                      特に注目させたいコンテンツやコラムなどに使用します。
                      なお、HTML要素ではなく、"well"は、bootstrap用語です。
                    </p>
                  </div>
                
                
                  <div class="well">
                    <h4>wellの使用方法 ※&lt;p&gt;にも使える</h4>
                    <p>
                      特に注目させたいコンテンツやコラムなどに使用します。
                      なお、HTML要素ではなく、"well"は、bootstrap用語です。
                    </p>
                  </div>
                
                
                  <div class="well well-sm">
                    <h4>wellの使用方法 ※&lt;p&gt;にも使える</h4>
                    <p>
                      特に注目させたいコンテンツやコラムなどに使用します。
                      なお、HTML要素ではなく、"well"は、bootstrap用語です。
                    </p>
                  </div>
                
              
            

サムネール

西洋の城

西洋の城

軍事的な要塞もしくは貴族の住家として、中世に建てられた城が今でも数多く現存しています。 その中にはホテルとして利用されている城もあり、場内を見学するだけでなく、宿泊や食事を楽しめる場合もあります。

日本の城

日本の城

大名や藩主の住居であり、政治的、軍事的な拠点としての役割を果たしてきた日本の城は、 その多くが戦争、火災、天災により失われています。天守閣が当時のまま現存している城は 数えるほどしかありません。

              
                
                  <div class="row">
                    <div class="col-xs-12 col-sm-6">
                      <div class="thumbnail">
                        <img src="http://placehold.jp/150x150.png" class="img-responsive" alt="西洋の城">
                        <div class="caption">
                          <h3>西洋の城</h3>
                          <p>
                            軍事的な要塞もしくは貴族の住家として、中世に建てられた城が今でも数多く現存しています。
                            その中にはホテルとして利用されている城もあり、場内を見学するだけでなく、宿泊や食事を楽しめる場合もあります。
                          </p>
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                      <div class="thumbnail">
                        <img src="http://placehold.jp/150x150.png" class="img-responsive" alt="日本の城">
                        <div class="caption">
                          <h3>日本の城</h3>
                          <p>
                            大名や藩主の住居であり、政治的、軍事的な拠点としての役割を果たしてきた日本の城は、
                            その多くが戦争、火災、天災により失われています。
                            天守閣が当時のまま現存している城は 数えるほどしかありません。
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                
              
            

メディアオブジェクト

世界の絶景:死ぬまでに見たい風景10

世界の絶景:死ぬまでに見たい風景10

スコットランドの北にあるこの島は、かつては住民がいた小さな村があったが、 第二次大戦中、イギリス政府が特に炭疽菌生物兵器を開発、試験するために接収した。

現在文明から隔離された原始風景

現在文明から隔離された原始風景

北ヨーロッパの最北中、644キロの地点にあり、スヴァールバル群島最南端の島、 ホッキョクグマが生息していたため、クマ島という名で知られているが、 どこからアプローチするにしても速い。

未開の文化・アルダマン地方

未開の文化・アルダマン地方

スミス・アイランドの西32キロ、面積72平方キロの緑の森生い茂るベンガル湾の島、 人も近づけないため、まだ未発見の新種生物が多く生存していると思われる。

              
                
                  <div class="media">
                    <a href="#" class="media-left">
                      <img src="http://placehold.jp/150x150.png" class="img-rounded" alt="世界の絶景:死ぬまでに見たい風景10">
                    </a>
                    <div class="media-body">
                      <h3 class="media-heading">世界の絶景:死ぬまでに見たい風景10</h3>
                      <p>
                        スコットランドの北にあるこの島は、かつては住民がいた小さな村があったが、
                        第二次大戦中、イギリス政府が特に炭疽菌生物兵器を開発、試験するために接収した。
                      </p>
                    </div>
                  </div>
                
                
                  <div class="media">
                    <a href="#" class="media-left">
                      <img src="http://placehold.jp/150x150.png" class="img-rounded" alt="現在文明から隔離された原始風景">
                    </a>
                    <div class="media-body">
                      <h3 class="media-heading">現在文明から隔離された原始風景</h3>
                      <p>
                        北ヨーロッパの最北中、644キロの地点にあり、スヴァールバル群島最南端の島、
                        ホッキョクグマが生息していたため、クマ島という名で知られているが、
                        どこからアプローチするにしても速い。
                      </p>
                    </div>
                  </div>
                
                
                  <div class="media">
                    <a href="#" class="media-left">
                      <img src="http://placehold.jp/150x150.png" class="img-rounded" alt="未開の文化・アルダマン地方">
                    </a>
                    <div class="media-body">
                      <h3 class="media-heading">未開の文化・アルダマン地方</h3>
                      <p>
                        スミス・アイランドの西32キロ、面積72平方キロの緑の森生い茂るベンガル湾の島、
                        人も近づけないため、まだ未発見の新種生物が多く生存していると思われる。
                      </p>
                    </div>
                  </div>
                
              
            

メディアリスト

  • 世界の絶景:死ぬまでに見たい風景10

    世界の絶景:死ぬまでに見たい風景10

    スコットランドの北にあるこの島は、かつては住民がいた小さな村があったが、 第二次大戦中、イギリス政府が特に炭疽菌生物兵器を開発、試験するために接収した。

    現在文明から隔離された原始風景

    現在文明から隔離された原始風景

    北ヨーロッパの最北中、644キロの地点にあり、スヴァールバル群島最南端の島、 ホッキョクグマが生息していたため、クマ島という名で知られているが、 どこからアプローチするにしても速い。

    未開の文化・アルダマン地方

    未開の文化・アルダマン地方

    スミス・アイランドの西32キロ、面積72平方キロの緑の森生い茂るベンガル湾の島、 人も近づけないため、まだ未発見の新種生物が多く生存していると思われる。

              
                
                  <ul class="media-list">
                    <li class="media">
                      <a href="#" class="media-left">
                        <img src="http://placehold.jp/150x150.png" class="img-rounded" alt="世界の絶景:死ぬまでに見たい風景10">
                      </a>
                      <div class="media-body">
                        <h3 class="media-heading">世界の絶景:死ぬまでに見たい風景10</h3>
                        <p>
                          スコットランドの北にあるこの島は、かつては住民がいた小さな村があったが、
                          第二次大戦中、イギリス政府が特に炭疽菌生物兵器を開発、試験するために接収した。
                        </p>

                        <div class="media">
                          <a href="#" class="media-left">
                            <img src="http://placehold.jp/150x150.png" class="img-rounded" alt="現在文明から隔離された原始風景">
                          </a>
                          <div class="media-body">
                            <h3 class="media-heading">現在文明から隔離された原始風景</h3>
                            <p>
                              北ヨーロッパの最北中、644キロの地点にあり、スヴァールバル群島最南端の島、
                              ホッキョクグマが生息していたため、クマ島という名で知られているが、
                              どこからアプローチするにしても速い。
                            </p>
                          </div>
                        </div>

                        <div class="media">
                          <a href="#" class="media-left">
                            <img src="http://placehold.jp/150x150.png" class="img-rounded" alt="未開の文化・アルダマン地方">
                          </a>
                          <div class="media-body">
                            <h3 class="media-heading">未開の文化・アルダマン地方</h3>
                            <p>
                              スミス・アイランドの西32キロ、面積72平方キロの緑の森生い茂るベンガル湾の島、
                              人も近づけないため、まだ未発見の新種生物が多く生存していると思われる。
                            </p>
                          </div>
                        </div>

                      </div>
                    </li>
                  </ul>
                
              
            

パネル

パネルのヘッダー
パネルの内容
パネルのヘッダー(panel-primary)
パネルの内容
パネルのヘッダー(panel-success)
パネルの内容
パネルのヘッダー(panel-info)
パネルの内容
パネルのヘッダー(panel-warning)
パネルの内容
パネルのヘッダー(panel-danger)
パネルの内容
              
                
                  <div class="panel">
                    <div class="panel-heading">
                      パネルのヘッダー
                    </div>
                    <div class="panel-body">
                      パネルの内容
                    </div>
                  </div>
                

                
                  <div class="panel panel-primary">
                    <div class="panel-heading">
                      パネルのヘッダー(panel-primary)
                    </div>
                    <div class="panel-body">
                      パネルの内容
                    </div>
                  </div>
                

                
                  <div class="panel panel-success">
                    <div class="panel-heading">
                      パネルのヘッダー(panel-success)
                    </div>
                    <div class="panel-body">
                      パネルの内容
                    </div>
                  </div>
                

                
                  <div class="panel panel-info">
                    <div class="panel-heading">
                      パネルのヘッダー(panel-info)
                    </div>
                    <div class="panel-body">
                      パネルの内容
                    </div>
                  </div>
                

                
                  <div class="panel panel-warning">
                    <div class="panel-heading">
                      パネルのヘッダー(panel-warning)
                    </div>
                    <div class="panel-body">
                      パネルの内容
                    </div>
                  </div>
                

                
                  <div class="panel panel-danger">
                    <div class="panel-heading">
                      パネルのヘッダー(panel-danger)
                    </div>
                    <div class="panel-body">
                      パネルの内容
                    </div>
                  </div>
                
              
            

アラート

              
                
                  <div class="alert" role="alert">
                    <strong>alert</strong>
                  </div>
                
                
                  <div class="alert alert-success" role="alert">
                    <strong>success</strong> :成功しました系メッセージ
                  </div>
                
                  
                    <div class="alert alert-info" role="alert">
                      <strong>info</strong> :お知らせ系メッセージ
                    </div>
                  
                
                  <div class="alert alert-warning" role="alert">
                    <strong>warning</strong> :警告系メッセージ
                  </div>
                
                
                  <div class="alert alert-danger" role="alert">
                    <strong>danger</strong> :最重要系メッセージ
                  </div>
                
                
                  <div class="alert alert-warning alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="閉じる">
                      <span aria-hidden="true">×</span>
                    </button>
                    <strong>warning</strong> :このメッセージは閉じることができます。
                  </div>
                
              
            

センターブロック

ページの見出し
サブ見出し:英名は「heading」

HTML5(エイチティーエムエル・ファイブ)は、 HTMLの5回めに当たる大幅な改訂版である。

HTML5 はWHATWG によって2004年に定められたWeb Applications1.0 にWeb Forms 2.0 を取り入れたものが W3Cの専門委員会に採用され、W3Cより2008年1月22日にドラフト(草案)が発表され、2014年10月28日に勧告された[1]。 2016年にHTML5.1 が勧告される予定。

改訂の主要目的のひとつとして人間にも読解可能でコンピュータやデバイスにも矛盾せず読解されるとともに 最新のマルチメディアをサポートする言語に向上することである。

beautiful-landscape
              
                
                  <div class="center-block" style="width: 60%;">
                    <h1 class="h1">
                      ページの見出し<br>
                      サブ見出し:英名は「heading」
                    </h1>
                    <p class="text-left">
                      HTML5(エイチティーエムエル・ファイブ)は、...
                    </p>
                    <p>
                      HTML5 はWHATWG によって2004年に定められた...
                    </p>
                    <p>
                      改訂の主要目的のひとつとして...
                    </p>
                  </div>
                  
                  <img src="" class="center-block" style="max-width: 60%;" alt="beautiful-landscape">
              
            

オフセット

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
              
                
                  <div class="container-fluid">
                    <div class="row">
                      <div class="col-md-4 bg-primary">
                        .col-md-4
                      </div>
                      <div class="col-md-4 col-md-offset-4 bg-primary">
                        .col-md-4 .col-md-offset-4
                      </div>
                    </div><!-- row -->
                    <div class="row">
                      <div class="col-md-3 col-md-offset-3 bg-info">
                        .col-md-3 .col-md-offset-3
                      </div>
                      <div class="col-md-3 col-md-offset-3 bg-info">
                        .col-md-3 .col-md-offset-3
                      </div>
                    </div><!-- row -->
                    <div class="row">
                      <div class="col-md-6 col-md-offset-3 bg-danger">
                        .col-md-6 .col-md-offset-3
                      </div>
                    </div><!-- row -->
                  </div><!-- container-fluid -->
                
                

                
              
            

Webアイコン系

グリフアイコン

  • glyphicon glyphicon-asterisk

  • glyphicon glyphicon-plus

  • glyphicon glyphicon-euro

  • glyphicon glyphicon-eur

  • glyphicon glyphicon-minus

  • glyphicon glyphicon-cloud

  • glyphicon glyphicon-envelope

  • glyphicon glyphicon-pencil

  • glyphicon glyphicon-glass

  • glyphicon glyphicon-music

  • glyphicon glyphicon glyphicon-search

  • glyphicon glyphicon-heart

  • glyphicon glyphicon-star

  • glyphicon glyphicon-star-empty

  • glyphicon glyphicon-user

  • glyphicon glyphicon-film

  • glyphicon glyphicon-th-large

  • glyphicon glyphicon-th

  • glyphicon glyphicon-th-list

  • glyphicon glyphicon-ok

  • glyphicon glyphicon-remove

  • glyphicon glyphicon-zoom-in

  • glyphicon glyphicon-zoom-out

  • glyphicon glyphicon-off

  • glyphicon glyphicon-signal

  • glyphicon glyphicon-cog

  • glyphicon glyphicon-trash

  • glyphicon glyphicon-home

  • glyphicon glyphicon-file

  • glyphicon glyphicon-time

  • glyphicon glyphicon-road

  • glyphicon glyphicon-download-alt

  • glyphicon glyphicon-download

  • glyphicon glyphicon-upload

  • glyphicon glyphicon-inbox

  • glyphicon glyphicon-play-circle

  • glyphicon glyphicon-repeat

  • glyphicon glyphicon-refresh

  • glyphicon glyphicon-list-alt

  • glyphicon glyphicon-lock

  • glyphicon glyphicon-flag

  • glyphicon glyphicon-headphones

  • glyphicon glyphicon-volume-off

  • glyphicon glyphicon-volume-down

  • glyphicon glyphicon-volume-up

  • glyphicon glyphicon-qrcode

  • glyphicon glyphicon-barcode

  • glyphicon glyphicon-tag

  • glyphicon glyphicon-tags

  • glyphicon glyphicon-book

  • glyphicon glyphicon-bookmark

  • glyphicon glyphicon-print

  • glyphicon glyphicon-camera

  • glyphicon glyphicon-font

  • glyphicon glyphicon-bold

  • glyphicon glyphicon-italic

  • glyphicon glyphicon-text-height

  • glyphicon glyphicon-text-width

  • glyphicon glyphicon-align-left

  • glyphicon glyphicon-align-center

  • glyphicon glyphicon-align-right

  • glyphicon glyphicon-align-justify

  • glyphicon glyphicon-list

  • glyphicon glyphicon-indent-left

  • glyphicon glyphicon-indent-right

  • glyphicon glyphicon-facetime-video

  • glyphicon glyphicon-picture

  • glyphicon glyphicon-map-marker

  • glyphicon glyphicon-adjust

  • glyphicon glyphicon-tint

  • glyphicon glyphicon-edit

  • glyphicon glyphicon-share

  • glyphicon glyphicon-check

  • glyphicon glyphicon-move

  • glyphicon glyphicon-step-backward

  • glyphicon glyphicon-fast-backward

  • glyphicon glyphicon-backward

  • glyphicon glyphicon-play

  • glyphicon glyphicon-pause

  • glyphicon glyphicon-stop

  • glyphicon glyphicon-forward

  • glyphicon glyphicon-fast-forward

  • glyphicon glyphicon-step-forward

  • glyphicon glyphicon-eject

  • glyphicon glyphicon-chevron-left

  • glyphicon glyphicon-chevron-right

  • glyphicon glyphicon-plus-sign

  • glyphicon glyphicon-minus-sign

  • glyphicon glyphicon-remove-sign

  • glyphicon glyphicon-ok-sign

  • glyphicon glyphicon-question-sign

  • glyphicon glyphicon-info-sign

  • glyphicon glyphicon-screenshot

  • glyphicon glyphicon-remove-circle

  • glyphicon glyphicon-ok-circle

  • glyphicon glyphicon-ban-circle

  • glyphicon glyphicon-arrow-left

  • glyphicon glyphicon-arrow-right

  • glyphicon glyphicon-arrow-up

  • glyphicon glyphicon-arrow-down

  • glyphicon glyphicon-share-alt

  • glyphicon glyphicon-resize-full

  • glyphicon glyphicon-resize-small

  • glyphicon glyphicon-exclamation-sign

  • glyphicon glyphicon-gift

  • glyphicon glyphicon-leaf

  • glyphicon glyphicon-fire

  • glyphicon glyphicon-eye-open

  • glyphicon glyphicon-eye-close

  • glyphicon glyphicon-warning-sign

  • glyphicon glyphicon-plane

  • glyphicon glyphicon-calendar

  • glyphicon glyphicon-random

  • glyphicon glyphicon-comment

  • glyphicon glyphicon-magnet

  • glyphicon glyphicon-chevron-up

  • glyphicon glyphicon-chevron-down

  • glyphicon glyphicon-retweet

  • glyphicon glyphicon-shopping-cart

  • glyphicon glyphicon-folder-close

  • glyphicon glyphicon-folder-open

  • glyphicon glyphicon-resize-vertical

  • glyphicon glyphicon-resize-horizontal

  • glyphicon glyphicon-hdd

  • glyphicon glyphicon-bullhorn

  • glyphicon glyphicon-bell

  • glyphicon glyphicon-certificate

  • glyphicon glyphicon-thumbs-up

  • glyphicon glyphicon-thumbs-down

  • glyphicon glyphicon-hand-right

  • glyphicon glyphicon-hand-left

  • glyphicon glyphicon-hand-up

  • glyphicon glyphicon-hand-down

  • glyphicon glyphicon-circle-arrow-right

  • glyphicon glyphicon-circle-arrow-left

  • glyphicon glyphicon-circle-arrow-up

  • glyphicon glyphicon-circle-arrow-down

  • glyphicon glyphicon-globe

  • glyphicon glyphicon-wrench

  • glyphicon glyphicon-tasks

  • glyphicon glyphicon-filter

  • glyphicon glyphicon-briefcase

  • glyphicon glyphicon-fullscreen

  • glyphicon glyphicon-dashboard

  • glyphicon glyphicon-paperclip

  • glyphicon glyphicon-heart-empty

  • glyphicon glyphicon-link

  • glyphicon glyphicon-phone

  • glyphicon glyphicon-pushpin

  • glyphicon glyphicon-usd

  • glyphicon glyphicon-gbp

  • glyphicon glyphicon-sort

  • glyphicon glyphicon-sort-by-alphabet

  • glyphicon glyphicon-sort-by-alphabet-alt

  • glyphicon glyphicon-sort-by-order

  • glyphicon glyphicon-sort-by-order-alt

  • glyphicon glyphicon-sort-by-attributes

  • glyphicon glyphicon-sort-by-attributes-alt

  • glyphicon glyphicon-unchecked

  • glyphicon glyphicon-expand

  • glyphicon glyphicon-collapse-down

  • glyphicon glyphicon-collapse-up

  • glyphicon glyphicon-log-in

  • glyphicon glyphicon-flash

  • glyphicon glyphicon-log-out

  • glyphicon glyphicon-new-window

  • glyphicon glyphicon-record

  • glyphicon glyphicon-save

  • glyphicon glyphicon-open

  • glyphicon glyphicon-saved

  • glyphicon glyphicon-import

  • glyphicon glyphicon-export

  • glyphicon glyphicon-send

  • glyphicon glyphicon-floppy-disk

  • glyphicon glyphicon-floppy-saved

  • glyphicon glyphicon-floppy-remove

  • glyphicon glyphicon-floppy-save

  • glyphicon glyphicon-floppy-open

  • glyphicon glyphicon-credit-card

  • glyphicon glyphicon-transfer

  • glyphicon glyphicon-cutlery

  • glyphicon glyphicon-header

  • glyphicon glyphicon-compressed

  • glyphicon glyphicon-earphone

  • glyphicon glyphicon-phone-alt

  • glyphicon glyphicon-tower

  • glyphicon glyphicon-stats

  • glyphicon glyphicon-sd-video

  • glyphicon glyphicon-hd-video

  • glyphicon glyphicon-subtitles

  • glyphicon glyphicon-sound-stereo

  • glyphicon glyphicon-sound-dolby

  • glyphicon glyphicon-sound-5-1

  • glyphicon glyphicon-sound-6-1

  • glyphicon glyphicon-sound-7-1

  • glyphicon glyphicon-copyright-mark

  • glyphicon glyphicon-registration-mark

  • glyphicon glyphicon-cloud-download

  • glyphicon glyphicon-cloud-upload

  • glyphicon glyphicon-tree-conifer

  • glyphicon glyphicon-tree-deciduous

  • glyphicon glyphicon-cd

  • glyphicon glyphicon-save-file

  • glyphicon glyphicon-open-file

  • glyphicon glyphicon-level-up

  • glyphicon glyphicon-copy

  • glyphicon glyphicon-paste

  • glyphicon glyphicon-alert

  • glyphicon glyphicon-equalizer

  • glyphicon glyphicon-king

  • glyphicon glyphicon-queen

  • glyphicon glyphicon-pawn

  • glyphicon glyphicon-bishop

  • glyphicon glyphicon-knight

  • glyphicon glyphicon-baby-formula

  • glyphicon glyphicon-tent

  • glyphicon glyphicon-blackboard

  • glyphicon glyphicon-bed

  • glyphicon glyphicon-apple

  • glyphicon glyphicon-erase

  • glyphicon glyphicon-hourglass

  • glyphicon glyphicon-lamp

  • glyphicon glyphicon-duplicate

  • glyphicon glyphicon-piggy-bank

  • glyphicon glyphicon-scissors

  • glyphicon glyphicon-bitcoin

  • glyphicon glyphicon-btc

  • glyphicon glyphicon-xbt

  • glyphicon glyphicon-yen

  • glyphicon glyphicon-jpy

  • glyphicon glyphicon-ruble

  • glyphicon glyphicon-rub

  • glyphicon glyphicon-scale

  • glyphicon glyphicon-ice-lolly

  • glyphicon glyphicon-ice-lolly-tasted

  • glyphicon glyphicon-education

  • glyphicon glyphicon-option-horizontal

  • glyphicon glyphicon-option-vertical

  • glyphicon glyphicon-menu-hamburger

  • glyphicon glyphicon-modal-window

  • glyphicon glyphicon-oil

  • glyphicon glyphicon-grain

  • glyphicon glyphicon-sunglasses

  • glyphicon glyphicon-text-size

  • glyphicon glyphicon-text-color

  • glyphicon glyphicon-text-background

  • glyphicon glyphicon-object-align-top

  • glyphicon glyphicon-object-align-bottom

  • glyphicon glyphicon-object-align-horizontal

  • glyphicon glyphicon-object-align-left

  • glyphicon glyphicon-object-align-vertical

  • glyphicon glyphicon-object-align-right

  • glyphicon glyphicon-triangle-right

  • glyphicon glyphicon-triangle-left

  • glyphicon glyphicon-triangle-bottom

  • glyphicon glyphicon-triangle-top

  • glyphicon glyphicon-console

  • glyphicon glyphicon-superscript

  • glyphicon glyphicon-subscript

  • glyphicon glyphicon-menu-left

  • glyphicon glyphicon-menu-right

  • glyphicon glyphicon-menu-down

  • glyphicon glyphicon-menu-up

ボタン、ツールバーのボタングループ、ナビゲーション、フォーム入力の前、に使います。

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

CSSナビゲーション系

ナビバー

              
                
                  <nav class="navbar navbar-default">
                    <div class="container-fluid">
                      <div class="navbar-header">
                        <button class="navbar-toggle" data-toggle="collapse" data-target="#mainNav">
                          <span class="sr-only">Toggle navigation</span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                          <span class="icon-bar"></span>
                        </button>
                        <a href="#" class="navbar-brand">Designup.jp</a>
                      </div>
                      <div class="collapse navbar-collapse" id="mainNav">
                        <!-- 各ナビゲーションメニュー -->
                        <ul class="nav navbar-nav">
                          <!-- 通常のリンク -->
                          <li class="active"><a href="#">Link</a></li>
                          <li><a href="#">Link</a></li>
                          <!-- ドロップダウンメニュー -->
                          <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                              Dropdown <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                              <li><a href="#">Action</a></li>
                              <li><a href="#">Another action</a></li>
                              <li><a href="#">Something else here</a></li>
                              <li class="divider"></li>
                              <li><a href="#">Separated link</a></li>
                              <li class="divider"></li>
                              <li><a href="#">One more separated link</a></li>
                            </ul>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </nav>
                
              
            

ボタン

<button>要素のボタン

<a>要素のボタン

Default Primary Success Info Warning Danger Link

ボタンのサイズ

アイコン埋め込み(a要素)

Home News Photo Mail

btn-block

Block level button (a tug)
              
                
                  <h4>&lt;button&gt;要素のボタン</h4>
                  <button class="btn btn-default">Default</button>
                  <button class="btn btn-primary">Primary</button>
                  <button class="btn btn-success">Success</button>
                  <button class="btn btn-info">Info</button>
                  <button class="btn btn-warning">Warning</button>
                  <button class="btn btn-danger">Danger</button>
                  <button class="btn btn-link">Link</button>
                
                
                  <h4>&lt;a&gt;要素のボタン</h4>
                  <a href="#" class="btn btn-default">Default</a>
                  <a href="#" class="btn btn-primary">Primary</a>
                  <a href="#" class="btn btn-success">Success</a>
                  <a href="#" class="btn btn-info">Info</a>
                  <a href="#" class="btn btn-warning">Warning</a>
                  <a href="#" class="btn btn-danger">Danger</a>
                  <a href="#" class="btn btn-link">Link</a>
                
                
                  <h4>ボタンのサイズ</h4>
                  <button class="btn btn-primary btn-lg">Large Button</button>
                  <button class="btn btn-primary">Default Button</button>
                  <button class="btn btn-primary btn-sm">Small Button</button>
                  <button class="btn btn-primary btn-xs">Extra Small Button</button>
                
                
                  <h4>アイコン埋め込み(a要素)</h4>
                  <a href="#" class="btn btn-default btn-lg">
                    <span class="glyphicon glyphicon-home"></span> Home
                  </a>
                  <a href="#" class="btn btn-primary btn-lg">
                    <span class="glyphicon glyphicon-list-alt"></span> News
                  </a>
                  <a href="#" class="btn btn-success btn-lg">
                    <span class="glyphicon glyphicon-camera"></span> Photo
                  </a>
                  <a href="#" class="btn btn-info btn-lg">
                    <span class="glyphicon glyphicon-envelope"></span> Mail
                  </a>
                
                
                  <h4>btn-block</h4>
                  <button class="btn btn-primary btn-lg btn-block">
                    Block level button (button tug)
                  </button>
                  <a class="btn btn-primary btn-lg btn-block">
                    Block level button (a tug)
                  </a>
                
              
            

ボタングループ

ボタングループ・サイズ

Large
Default
Small
Extra Small
              
                
                  <div class="btn-group">
                    <a href="#" class="btn btn-primary">Primary</a>
                    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                      <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Action</a></li>
                      <li><a href="#">Another action</a></li>
                      <li><a href="#">Something else here</a></li>
                      <li class="divider"></li>
                      <li><a href="#">Separated link</a></li>
                    </ul>
                  </div>
                
                
                  <h4>ボタングループ・サイズ</h4>
                  <h5>Large</h5>
                  <div class="btn-group btn-group-lg">
                    <button type="button" class="btn btn-primary">Left</button>
                    <button type="button" class="btn btn-primary">Middle</button>
                    <button type="button" class="btn btn-primary">Right</button>
                  </div>
                  <h5>Default</h5>
                  <div class="btn-group">
                    <button type="button" class="btn btn-primary">Left</button>
                    <button type="button" class="btn btn-primary">Middle</button>
                    <button type="button" class="btn btn-primary">Right</button>
                  </div>
                  <h5>Small</h5>
                  <div class="btn-group btn-group-sm">
                    <button type="button" class="btn btn-primary">Left</button>
                    <button type="button" class="btn btn-primary">Middle</button>
                    <button type="button" class="btn btn-primary">Right</button>
                  </div>
                  <h5>Extra Small</h5>
                  <div class="btn-group btn-group-xs">
                    <button type="button" class="btn btn-primary">Left</button>
                    <button type="button" class="btn btn-primary">Middle</button>
                    <button type="button" class="btn btn-primary">Right</button>
                  </div>
                
              
            

ページネーション

pagination-lg

paginationのみ

pagination-sm

              
                
                  <div class="text-center">
                    <h4>pagination-lg</h4>
                    <ul class="pagination pagination-lg">
                      <li class="disabled"><span>&laquo;</span></li>
                      <li class="active"><span>1</span></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="#">&raquo;</a></li>
                    </ul>
                  </div>
                
                
                  <div class="text-center">
                    <h4>paginationのみ</h4>
                    <ul class="pagination">
                      <li class="disabled"><span>&laquo;</span></li>
                      <li class="active"><span>1</span></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="#">&raquo;</a></li>
                    </ul>
                  </div>
                
                
                  <div class="text-center">
                    <h4>pagination-sm</h4>
                    <ul class="pagination pagination-sm">
                      <li class="disabled"><span>&laquo;</span></li>
                      <li class="active"><span>1</span></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="#">&raquo;</a></li>
                    </ul>
                  </div>
                
              
            

リストグループ

              
                
                  <ul class="list-group">
                    <li class="list-group-item"><a href="#">東京</a></li>
                    <li class="list-group-item"><a href="#">神奈川県</a></li>
                    <li class="list-group-item active"><span>千葉県</span></li>
                    <li class="list-group-item"><a href="#">埼玉県</a></li>
                  </ul>
                
              
            

JSナビゲーション系

ドロップダウン

              
                
                  <ul class="nav navbar-nav">
                    <li class="dropdown">
                      <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                        <span class="glyphicon glyphicon-list-alt"></span>
                        親メニュー
                        <span class="caret"></span>
                      </a>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href=""><span class="glyphicon glyphicon-list-alt"></span> 小メニュー</a></li>
                        <li><a href=""><span class="glyphicon glyphicon-list-alt"></span> 小メニュー</a></li>
                        <li><a href=""><span class="glyphicon glyphicon-list-alt"></span> 小メニュー</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">
                          <span class="glyphicon glyphicon-list-alt"></span> 小メニューdisabled
                        </li>
                        <li class="dropdown-header">
                          <span class="glyphicon glyphicon-list-alt"></span> 小メニューdisabled
                        </li>
                        <li class="dropdown-header">
                          <span class="glyphicon glyphicon-list-alt"></span> 小メニューdisabled
                        </li>
                      </ul>
                    </li>
                  </ul>
                
              
            

モーダルダイアログ

              
                
                  <button class="btn btn-primary" data-target="#holiday-oct" data-toggle="modal">今月の休業日</button>
                
                
                  <div class="modal fade" id="holiday-oct">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                            <span class="sr-only">閉じる</span>
                          </button>
                          <h4 class="modal-title">2015年8月の休業日</h4>
                          <div class="modal-body">
                            8月の定休日は、<br>
                            <b>2日、9日、16日、23日、30日</b>
                            (毎週木曜日)<br>
                            また、店舗改装のため、<b>8月13~15日</b>は臨時休業させていただきます。<br>
                            皆様にはご迷惑おかけしますが、何卒よろしくお願いします。
                          </div>
                          <div class="modal-footer">
                            <p>boot dining 渋谷店</p>
                            <button class="btn btn-primary btn-sm" data-dismiss="modal">閉じる</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                
              
            

タブ

毎週火曜日 生ビール半額!

恒例の生ビール半額Dayを今週も開催。 仕事を早めに切り上げて、 たのしいひとときを「boot dining」でリーズナブルにお楽しみください。
半額タイム17:30 ~ 19:30

Boot st. ライブ! 2.24

高田馬場を中心に活動するラッパー「Boot st.」のライブを開催。 当店で働く山口もスペシャルゲストとして参加する予定です。

開演 20:30~

ライブチャージ 無料

にんじん 料理教室

にんじんを使った料理やお菓子を作ってみよう! 復習用にレシピを記した小冊子も配布いたします。 時間 15:00 ~ 17:30
参加料 (大人)1,500円、(子供)800円

              
                
                  <ul class="nav nav-tabs">
                    <li class="active"><a href="#21tue" data-toggle="tab">21(火)</a></li>
                    <li><a href="#24fri" data-toggle="tab">24(金)</a></li>
                    <li><a href="#25sat" data-toggle="tab">25(土)</a></li>
                  </ul>
                
                
                  <div class="tab-content">
                    <div class="tab-pane active" id="21tue">
                      <h3>毎週火曜日 生ビール半額!</h3>
                      <p>
                        恒例の生ビール半額Dayを今週も開催。<br class="hidden-xs">
                        仕事を早めに切り上げて、<br class="hidden-xs">
                        たのしいひとときを「boot dining」でリーズナブルにお楽しみください。
                        <br>
                        <b>半額タイム</b>17:30 ~ 19:30
                      </p>
                    </div>
                    <div class="tab-pane" id="24fri">
                      <h3>Boot st. ライブ! 2.24</h3>
                      <p>
                        高田馬場を中心に活動するラッパー「Boot st.」のライブを開催。<br class="hidden-xs">
                        当店で働く山口もスペシャルゲストとして参加する予定です。<br><br>
                        <b>開演</b> 20:30~<br><br> <b>ライブチャージ</b> 無料
                      </p>
                    </div>
                    <div class="tab-pane" id="25sat">
                      <h3>にんじん 料理教室</h3>
                      <p>
                        にんじんを使った料理やお菓子を作ってみよう!<br class="hidden-xs">
                        復習用にレシピを記した小冊子も配布いたします。
                        <b>時間</b> 15:00 ~ 17:30 <br>
                        <b>参加料</b> (大人)1,500円、(子供)800円
                      </p>
                    </div>
                  </div>
                
              
            

アコーディオン

恒例の生ビール半額Dayを今週も開催。 仕事を早めに切り上げて、 楽しいひとときを「boot dining」でリーズナブルにお楽しみください。

半額タイム 17:30 ~ 19:30
高田馬場を中心に活動するラッパー「Boot st.」のライブを開催。 当店で働く山口もスペシャルゲストとして参加する予定です。

開演 20:30 ~
ライブチャージ 無料
にんじんを使った料理やお菓子を作ってみよう! 復習用にレシピを記した小冊子も配布いたします。

時間 15:00 ~ 17:30
参加料 (大人)1,500円、(子供)800円
              
                
                  <div class="panel-group" id="ac1">
                    <!-- 1番目のパネル -->
                    <div class="panel">
                      <div class="panel-heading">
                        <h3 class="panel-title">
                          <a data-toggle="collapse" data-parent="#ac1" href="#ac-panel-21tue">
                            10/21(火) 生ビール半額!
                          </a>
                        </h3>
                      </div>
                      <!-- in で開いとく -->
                      <div id="ac-panel-21tue" class="panel-collapse collapse in">
                        <div class="panel-body">
                          恒例の生ビール半額Dayを今週も開催。
                          <br class="hidden-xs"> 仕事を早めに切り上げて、
                          <br class="hidden-xs"> 楽しいひとときを「boot dining」でリーズナブルにお楽しみください。
                          <br>
                          <br>
                          <b>半額タイム</b> 17:30 ~ 19:30
                        </div>
                      </div>
                    </div>

                    <!-- 2番目のパネル -->
                    <div class="panel panel-primary">
                      <div class="panel-heading">
                        <h3 class="panel-title">
                          <a data-toggle="collapse" data-parent="#ac1" href="#ac-panel-24fri">
                            10/24(金) Boot st. ライブ!
                          </a>
                        </h3>
                      </div>
                      <div id="ac-panel-24fri" class="panel-collapse collapse">
                         <div class="panel-body">
                           高田馬場を中心に活動するラッパー「Boot st.」のライブを開催。<br class="hidden-xs">
                           当店で働く山口もスペシャルゲストとして参加する予定です。<br><br>
                           <b>開演</b> 20:30 ~<br><b>ライブチャージ</b> 無料
                         </div>
                      </div>
                    </div>

                    <!-- 3番目のパネル -->
                   <div class="panel panel-info">
                     <div class="panel-heading">
                       <h3 class="panel-title">
                         <a data-toggle="collapse" data-parent="#ac1" href="#ac-panel-25sat">
                           10/25(土) にんじん料理教室
                         </a>
                       </h3>
                     </div>
                     <div id="ac-panel-25sat" class="panel-collapse collapse">
                       <div class="panel-body">
                         にんじんを使った料理やお菓子を作ってみよう! <br class="hidden-xs">
                         復習用にレシピを記した小冊子も配布いたします。<br><br>
                         <b>時間</b> 15:00 ~ 17:30<br><b>参加料</b> (大人)1,500円、(子供)800円
                       </div>
                     </div>
                   </div>
                 </div><!-- dvi.panel-group -->
               
              
            

ツールチップ

              

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top
</button>


<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right
</button>


<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom
</button>


<button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left
</button>

              
            

ポップバー

data-trigger="click"

data-trigger="hover"

data-trigger="focus"

              
<h4>data-trigger="click"</h4>
  <div class="btn-group">
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" title="title Top" data-placement="top" data-content="content top">
      Click Top
    </button>
    <button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" title="title Right" data-placement="right" data-content="content right">
      Click Right
    </button>
    <button type="button" class="btn btn-info" data-container="body" data-toggle="popover" title="title Bottom" data-placement="bottom" data-content="content bottom">
      Click Bottom
    </button>
    <button type="button" class="btn btn-danger" data-container="body" data-toggle="popover" title="title Left" data-placement="left" data-content="content left">
      Click Left
    </button>
  </div>

  <h4>data-trigger="hover"</h4>
  <div class="btn-group">
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" title="title Top" data-placement="top" data-content="content top" data-trigger="hover">
      Hover Top
    </button>
    <button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" title="title Right" data-placement="right" data-content="content right" data-trigger="hover">
      Hover Right
    </button>
    <button type="button" class="btn btn-info" data-container="body" data-toggle="popover" title="title Bottom" data-placement="bottom" data-content="content bottom" data-trigger="hover">
      Hover Bottom
    </button>
    <button type="button" class="btn btn-danger" data-container="body" data-toggle="popover" title="title Left" data-placement="left" data-content="content left" data-trigger="hover">
      Hover Left
    </button>
  </div>

  <h4>data-trigger="focus"</h4>
  <div>
    <input type="text" data-container="body" data-toggle="popover" title="title Top" data-placement="top" data-content="content top" data-trigger="focus">
    <input type="text" data-container="body" data-toggle="popover" title="title Right" data-placement="right" data-content="content right" data-trigger="focus">
    <input type="text" data-container="body" data-toggle="popover" title="title Bottom" data-placement="bottom" data-content="content bottom" data-trigger="focus">
    <input type="text" data-container="body" data-toggle="popover" title="title Left" data-placement="left" data-content="content left" data-trigger="focus">
  </div>