Bootstrapでインタラクティブ！ Componentsの使い方まとめ

2013-06-28

Webデザインで大変お世話になっているbootstrap。すでに手放せない状態になっている方もいるのではないでしょうか！？

この記事では前回のBootstrapで簡単webデザイン BaseCSSの使い方まとめに引き続きcomponentsの使い方を紹介していきます。Webデザインだけでなく、Webアプリでもバンバン使っていけるコンポーネントが揃っているのでこちらも是非使いこなしてみてください。

この記事は古いバージョンのものです。Bootstrap3の使い方はこちら

Bootstrapインタラクティブ！ドロップダウンメニュー

それではさっそくいきましょう。まずはナビゲーションバーなどでよく使うドロップダウンメニューです。

このコンポーネントは２つのパーツに別れています。１つはメニューを展開するためのボタン、２つめはメニュー部分。ボタンの方はbuttonタグやaタグにdropdown-toggleをつければOK。メニューの方はulのclassにdropdown-menuをつけるだけ。

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active" style="list-style:none">
      <a href="#tabf1" data-toggle="tab">Demo</a>
    </li>
    <li style="list-style:none">
      <a href="#tabf2" data-toggle="tab">Code</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tabf1">
      <!-- ボタン部分 -->
      <p>ボタン部分</p>
      <button class="btn dropdown-toggle" data-toggle="dropdown" href="#">ボタンだけ 
        <span class="caret"></span>
      </button>
      <br class="margin-top-middle">
      <!-- メニュー部分 -->
      <p>メニュー部分</p>
      <div class="dropdown clearfix">
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
          <li>
            <a tabindex="-1" href="#">本</a>
          </li>
          <li>
            <a tabindex="-1" href="#">DVD</a>
          </li>
          <li>
            <a tabindex="-1" href="#">ミュージック</a>
          </li>
          <li class="divider"></li>
          <li>
            <a tabindex="-1" href="#">
              <i class="icon-music"></i>アイコン付き
            </a>
          </li>
        </ul>
      </div>
      <br class="margin-top-middle">
      <!-- 合わせたもの -->
      <p>メニューとボタン</p>
      <div class="btn-group">
        <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">ボタン 
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li>
            <a tabindex="-1" href="#">本</a>
          </li>
          <li>
            <a tabindex="-1" href="#">DVD</a>
          </li>
          <li>
            <a tabindex="-1" href="#">ミュージック</a>
          </li>
          <li class="divider"></li>
          <li>
            <a tabindex="-1" href="#">
              <i class="icon-music"></i>アイコン付き
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="tab-pane" id="tabf2">[html] 
      &lt;!-- ボタン部分 --&gt;
      &lt;p&gt;ボタン部分&lt;/p&gt;
      &lt;button class=&quot;btn dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; href=&quot;#&quot;&gt;ボタンだけ 
        &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;!-- メニュー部分 --&gt;
      &lt;p&gt;メニュー部分&lt;/p&gt;
      &lt;div class=&quot;dropdown clearfix&quot;&gt;
        &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot; aria-labelledby=&quot;dropdownMenu&quot; style=&quot;display: block; position: static; margin-bottom: 5px; *width: 180px;&quot;&gt;
          &lt;li&gt;
            &lt;a tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;本&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;DVD&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;ミュージック&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
          &lt;li&gt;
            &lt;a tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;
              &lt;i class=&quot;icon-music&quot;&gt;&lt;/i&gt;アイコン付き
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- 合わせたもの --&gt;
      &lt;p&gt;メニューとボタン&lt;/p&gt;
      &lt;div class=&quot;btn-group&quot;&gt;
        &lt;button class=&quot;btn btn-inverse dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;ボタン 
          &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;ul class=&quot;dropdown-menu&quot;&gt;
          &lt;li&gt;
            &lt;a tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;本&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;DVD&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;ミュージック&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
          &lt;li&gt;
            &lt;a tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;
              &lt;i class=&quot;icon-music&quot;&gt;&lt;/i&gt;アイコン付き
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;[/html] 
    </div>
  </div>
</div>

Bootstrapでインタラクティブ！タブナビゲーション

次はタブを使ったナビゲーション。タブをクリックすると画面遷移なしに内容が切り替わるもので、webアプリのメニュー切り替えなどにも使われてますね。この記事でDemoとCodeを切り替えるのに使ってるのもこのタブナビゲーションです。

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active" style="list-style:none">
      <a href="#tabg1" data-toggle="tab">Demo</a>
    </li>
    <li style="list-style:none">
      <a href="#tabg2" data-toggle="tab">Code</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tabg1">
      <!-- デフォルト状態 -->
      <p>デフォルト</p>
      <div class="tabbable">
        <ul class="nav nav-tabs">
          <li class="active">
            <a href="#taba1" data-toggle="tab">タブ　１</a>
          </li>
          <li>
            <a href="#taba2" data-toggle="tab">タブ　２</a>
          </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="taba1">
            <p>タブ１の中身</p>
          </div>
          <div class="tab-pane" id="taba2">
            <p>タブ２の中身</p>
          </div>
        </div>
      </div>
      <br class="margin-top-middle">
      <!-- タブの位置 -->
      <p>横にタブ</p>
      <div class="tabbable tabs-left">
        <ul class="nav nav-tabs">
          <li class="active">
            <a href="#tabc1" data-toggle="tab">タブ　１</a>
          </li>
          <li>
            <a href="#tabc2" data-toggle="tab">タブ　２</a>
          </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="tabc1">
            <p>classにtabs-leftをつけるだけでOK</p>
          </div>
          <div class="tab-pane" id="tabc2">
            <pre><code>&lt;!-- 左付き --&gt;
&lt;div class=&quot;tabbable tabs-left&quot;&gt;

&lt;!-- 右付き --&gt;
&lt;div class=&quot;tabbable tabs-right&quot;&gt;

&lt;!-- 下付き --&gt;
&lt;div class=&quot;tabbable tabs-below&quot;&gt;</code></pre>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="tabg2">[html] 
      &lt;!-- デフォルト状態 --&gt;
      &lt;p&gt;デフォルト&lt;/p&gt;
      &lt;div class=&quot;tabbable&quot;&gt;
        &lt;ul class=&quot;nav nav-tabs&quot;&gt;
          &lt;li class=&quot;active&quot;&gt;
            &lt;a href=&quot;#taba1&quot; data-toggle=&quot;tab&quot;&gt;タブ　１&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;#taba2&quot; data-toggle=&quot;tab&quot;&gt;タブ　２&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class=&quot;tab-content&quot;&gt;
          &lt;div class=&quot;tab-pane active&quot; id=&quot;taba1&quot;&gt;
            &lt;p&gt;タブ１の中身&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;tab-pane&quot; id=&quot;taba2&quot;&gt;
            &lt;p&gt;タブ２の中身&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- タブの位置 --&gt;
      &lt;p&gt;横にタブ&lt;/p&gt;
      &lt;div class=&quot;tabbable tabs-left&quot;&gt;
        &lt;ul class=&quot;nav nav-tabs&quot;&gt;
          &lt;li class=&quot;active&quot;&gt;
            &lt;a href=&quot;#tabc1&quot; data-toggle=&quot;tab&quot;&gt;タブ　１&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;#tabc2&quot; data-toggle=&quot;tab&quot;&gt;タブ　２&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class=&quot;tab-content&quot;&gt;
          &lt;div class=&quot;tab-pane active&quot; id=&quot;tabc1&quot;&gt;
            &lt;p&gt;classにtabs-leftをつけるだけでOK&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;tab-pane&quot; id=&quot;tabc2&quot;&gt;
            &lt;pre&gt;&lt;code&gt;&amp;lt;!-- 左付き --&amp;gt;
&amp;lt;div class=&amp;quot;tabbable tabs-left&amp;quot;&amp;gt;

&amp;lt;!-- 右付き --&amp;gt;
&amp;lt;div class=&amp;quot;tabbable tabs-right&amp;quot;&amp;gt;

&amp;lt;!-- 下付き --&amp;gt;
&amp;lt;div class=&amp;quot;tabbable tabs-below&amp;quot;&amp;gt;&lt;/code&gt;&lt;/pre&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;[/html] 
    </div>
  </div>
</div>

Bootstrapでインタラクティブ！　Navbarの使い方

bootstrapのナビゲーションバーはレスポンシブ対応なので画面サイズによって見た目が切り替わります。モバイル向けやwebアプリの場合はなかなか重宝する機能。ただ横向きのみなので、YouTubeのようにサイドに置けるナビもあるとさらに良いです。こちらは今後に期待。

基本的な使い方はulのリストをdiv.navbar>div.navbar-innerで囲むだけ。レスポンシブ仕様のものはリストを展開するボタンをつけたりちょっと複雑になってます。

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active" style="list-style:none">
      <a href="#tabh1" data-toggle="tab">Demo</a>
    </li>
    <li style="list-style:none">
      <a href="#tabh2" data-toggle="tab">Code</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tabh1">
      <!-- デフォルト -->
      <p>デフォルト</p>
      <div class="navbar">
        <div class="navbar-inner">
          <a class="brand" href="#">タイトル</a>
          <ul class="nav">
            <li class="active" style="list-style:none">
              <a href="#">Home</a>
            </li>
            <li style="list-style:none">
              <a href="#">Link1</a>
            </li>
            <li style="list-style:none">
              <a href="#">Link2</a>
            </li>
            <li class="dropdown" style="list-style:none">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">DropDown 
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                <li>
                  <a tabindex="-1" href="#">Action</a>
                </li>
                <li>
                  <a tabindex="-1" href="#">Another action</a>
                </li>
                <li>
                  <a tabindex="-1" href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a tabindex="-1" href="#">Separated link</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <br class="margin-top-middle">
      <!-- レスポンシブバージョン -->
      <p>レスポンシブ版</p>
      <div class="navbar">
        <div class="navbar-inner">
          <div class="container">
            <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".navbar-responsive-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </a>
            <a class="brand" href="#">Title</a>
            <div class="nav-collapse navbar-responsive-collapse collapse" style="height: 0px;">
              <ul class="nav">
                <li class="active" style="list-style:none">
                  <a href="#">Home</a>
                </li>
                <li style="list-style:none">
                  <a href="#">Link</a>
                </li>
                <li style="list-style:none">
                  <a href="#">Link</a>
                </li>
                <li class="dropdown" style="list-style:none">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 
                    <b class="caret"></b>
                  </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 class="nav-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
              </ul>
              <form class="navbar-search pull-left" action="">
                <input type="text" class="search-query span3" placeholder="Search">
              </form>
              <ul class="nav pull-right">
                <li style="list-style:none">
                  <a href="#">Link</a>
                </li>
                <li class="divider-vertical" style="list-style:none"></li>
                <li class="dropdown" style="list-style:none">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 
                    <b class="caret"></b>
                  </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>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="tabh2">[html] 
      &lt;!-- デフォルト --&gt;
      &lt;p&gt;デフォルト&lt;/p&gt;
      &lt;div class=&quot;navbar&quot;&gt;
        &lt;div class=&quot;navbar-inner&quot;&gt;
          &lt;a class=&quot;brand&quot; href=&quot;#&quot;&gt;タイトル&lt;/a&gt;
          &lt;ul class=&quot;nav&quot;&gt;
            &lt;li class=&quot;active&quot;&gt;
              &lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href=&quot;#&quot;&gt;Link1&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href=&quot;#&quot;&gt;Link2&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;dropdown&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;DropDown 
                &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;
              &lt;/a&gt;
              &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot; aria-labelledby=&quot;dropdownMenu&quot;&gt;
                &lt;li&gt;
                  &lt;a tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
                &lt;li&gt;
                  &lt;a tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Separated link&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- レスポンシブバージョン --&gt;
      &lt;p&gt;レスポンシブ版&lt;/p&gt;
      &lt;div class=&quot;navbar&quot;&gt;
        &lt;div class=&quot;navbar-inner&quot;&gt;
          &lt;div class=&quot;container&quot;&gt;
            &lt;a class=&quot;btn btn-navbar collapsed&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-responsive-collapse&quot;&gt;
              &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
              &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
              &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
            &lt;/a&gt;
            &lt;a class=&quot;brand&quot; href=&quot;#&quot;&gt;Title&lt;/a&gt;
            &lt;div class=&quot;nav-collapse navbar-responsive-collapse collapse&quot; style=&quot;height: 0px;&quot;&gt;
              &lt;ul class=&quot;nav&quot;&gt;
                &lt;li class=&quot;active&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;dropdown&quot;&gt;
                  &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;Dropdown 
                    &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;
                  &lt;/a&gt;
                  &lt;ul class=&quot;dropdown-menu&quot;&gt;
                    &lt;li&gt;
                      &lt;a href=&quot;#&quot;&gt;Action&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                      &lt;a href=&quot;#&quot;&gt;Another action&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                      &lt;a href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
                    &lt;li class=&quot;nav-header&quot;&gt;Nav header&lt;/li&gt;
                    &lt;li&gt;
                      &lt;a href=&quot;#&quot;&gt;Separated link&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                      &lt;a href=&quot;#&quot;&gt;One more separated link&lt;/a&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
              &lt;form class=&quot;navbar-search pull-left&quot; action=&quot;&quot;&gt;
                &lt;input type=&quot;text&quot; class=&quot;search-query span2&quot; placeholder=&quot;Search&quot;&gt;
              &lt;/form&gt;
              &lt;ul class=&quot;nav pull-right&quot;&gt;
                &lt;li&gt;
                  &lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;divider-vertical&quot;&gt;&lt;/li&gt;
                &lt;li class=&quot;dropdown&quot;&gt;
                  &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;Dropdown 
                    &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;
                  &lt;/a&gt;
                  &lt;ul class=&quot;dropdown-menu&quot;&gt;
                    &lt;li&gt;
                      &lt;a href=&quot;#&quot;&gt;Action&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                      &lt;a href=&quot;#&quot;&gt;Another action&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                      &lt;a href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
                    &lt;li&gt;
                      &lt;a href=&quot;#&quot;&gt;Separated link&lt;/a&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;!-- /.nav-collapse --&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- /navbar-inner --&gt;
      &lt;/div&gt;[/html] 
    </div>
  </div>
</div>

Bootstrapでインタラクティブ！　サムネイルの使い方

次はサムネイル。画像のみを表示するタイプと、タイトルや抜粋などインデックスっぽい使い方ができるものがある。

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active" style="list-style:none">
      <a href="#tabi1" data-toggle="tab">Demo</a>
    </li>
    <li style="list-style:none">
      <a href="#tabi2" data-toggle="tab">Code</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tabi1">
      <!-- 画像のみのサムネイル -->
      <p>画像のみ</p>
      <ul class="thumbnails">
        <li class="span3" style="list-style:none">
          <a href="#" class="thumbnail">
            <img src="http://tetra-themes.com/wp-content/uploads/2013/06/png1.png" alt="png" width="300" height="200" class="alignnone size-full wp-image-1254" style="margin:0"/>
          </a>
        </li>
        <li class="span3" style="list-style:none">
          <a href="#" class="thumbnail">
            <img src="http://tetra-themes.com/wp-content/uploads/2013/06/png1.png" alt="png" width="300" height="200" class="alignnone size-full wp-image-1254" style="margin:0"/>
          </a>
        </li>
      </ul>
      <br class="margin-top-middle">
      <!-- 画像とタイトルなど -->
      <p>画像とタイトルなど</p>
      <ul class="thumbnails">
        <li class="span3" style="list-style:none">
          <div class="thumbnail">
            <img src="http://tetra-themes.com/wp-content/uploads/2013/06/png1.png" alt="png" width="300" height="200" class="alignnone size-full wp-image-1254" style="margin:0"/>
            <h3>ここにタイトル</h3>
            <p>サムネイルのキャプションなどをここに入れる</p>
            <p>
              <button class="btn btn-primary">More</button>
            </p>
          </div>
        </li>
        <li class="span3" style="list-style:none">
          <div class="thumbnail">
            <img src="http://tetra-themes.com/wp-content/uploads/2013/06/png1.png" alt="png" width="300" height="200" class="alignnone size-full wp-image-1254" style="margin:0"/>
            <h3>ここにタイトル</h3>
            <p>サムネイルのキャプションなどをここに入れる</p>
            <p>
              <button class="btn btn-primary">More</button>
            </p>
          </div>
        </li>
      </ul>
    </div>
    <div class="tab-pane" id="tabi2">[html] 
      &lt;!-- 画像のみのサムネイル --&gt;
      &lt;p&gt;画像のみ&lt;/p&gt;
      &lt;ul class=&quot;thumbnails&quot;&gt;
        &lt;li class=&quot;span3&quot;&gt;
          &lt;a href=&quot;#&quot; class=&quot;thumbnail&quot;&gt;
            &lt;img data-src=&quot;holder.js/300x200&quot; alt=&quot;&quot;&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;span3&quot;&gt;
          &lt;a href=&quot;#&quot; class=&quot;thumbnail&quot;&gt;
            &lt;img data-src=&quot;holder.js/300x200&quot; alt=&quot;&quot;&gt;
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;!-- 画像とタイトルなど --&gt;
      &lt;p&gt;画像とタイトルなど&lt;/p&gt;
      &lt;ul class=&quot;thumbnails&quot;&gt;
        &lt;li class=&quot;span3&quot;&gt;
          &lt;div class=&quot;thumbnail&quot;&gt;
            &lt;img data-src=&quot;holder.js/300x200&quot; alt=&quot;&quot;&gt;
            &lt;h3&gt;ここにタイトル&lt;/h3&gt;
            &lt;p&gt;サムネイルのキャプションなどをここに入れる&lt;/p&gt;
            &lt;p&gt;
              &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;More&lt;/a&gt;
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class=&quot;span3&quot;&gt;
          &lt;div class=&quot;thumbnail&quot;&gt;
            &lt;img data-src=&quot;holder.js/300x200&quot; alt=&quot;&quot;&gt;
            &lt;h3&gt;ここにタイトル&lt;/h3&gt;
            &lt;p&gt;サムネイルのキャプションなどをここに入れる&lt;/p&gt;
            &lt;p&gt;
              &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;More&lt;/a&gt;
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;[/html] 
    </div>
  </div>
</div>

Bootstrapでインタラクティブ！　アラートの使い方

フォームの入力ミスやアップロード完了などユーザーにレスポンスを返す場面で使えるアラート。クローズボタンも付いてるので結構使えそうなコンポーネントになってます。

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active" style="list-style:none">
      <a href="#tabj1" data-toggle="tab">Demo</a>
    </li>
    <li style="list-style:none">
      <a href="#tabj2" data-toggle="tab">Code</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tabj1">
      <!-- アラートの色いろいろ -->
      <p>アラート色いろ</p>
      <div class="alert">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>Warning!</strong>Best check yo self, you're not looking too good.
</div>
<div class="alert alert-error">
  <button type="button" class="close" data-dismiss="alert">×</button><strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<div class="alert alert-success">
  <button type="button" class="close" data-dismiss="alert">×</button><strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info">
  <button type="button" class="close" data-dismiss="alert">×</button><strong>Heads up!</strong> This alert needs your attention, but it's not super important.
      </div>
    </div>
    <div class="tab-pane" id="tabj2">[html] 
      &lt;!-- アラートの色いろいろ --&gt;
      &lt;p&gt;アラート色いろ&lt;/p&gt;
      &lt;!-- 黄色 --&gt;
      &lt;div class=&quot;alert&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot;&gt;&amp;times;&lt;/button&gt;
        &lt;strong&gt;Warning!&lt;/strong&gt;Best check yo self, you&#039;re not looking too good.
&lt;/div&gt;


&lt;bd48c0dc3c8160b9ea26770d090a9793 /&gt;
&lt;div class=&quot;alert alert-error&quot;&gt;
  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot;&gt;×&lt;/button&gt;
  &lt;strong&gt;Oh snap!&lt;/strong&gt; Change a few things up and try submitting again.
&lt;/div&gt;

&lt;719cd546f6b485e30496bb0a4d16e870 /&gt;
&lt;div class=&quot;alert alert-success&quot;&gt;
  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot;&gt;×&lt;/button&gt;
  &lt;strong&gt;Well done!&lt;/strong&gt; You successfully read this important alert message.
&lt;/div&gt;

&lt;d4f3bd7ab29c794406f0139db7b11098 /&gt;
&lt;div class=&quot;alert alert-info&quot;&gt;
  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;alert&quot;&gt;×&lt;/button&gt;
  &lt;strong&gt;Heads up!&lt;/strong&gt; This alert needs your attention, but it&#039;s not super important.
      &lt;/div&gt;[/html] 
    </div>
  </div>
</div>

Bootstrapでインタラクティブ！　Progress bars

ローディング画面や達成率などを表示するのに使えるプログレスバー。こちらも各色揃って、ストライプ柄やローディング中のものなどいろいろあります。

<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active" style="list-style:none">
      <a href="#tabk1" data-toggle="tab">Demo</a>
    </li>
    <li style="list-style:none">
      <a href="#tabk2" data-toggle="tab">Code</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tabk1">
      <!-- プログレスバーいろいろ -->
      <p>見た目いろいろ</p>
      <!-- ノーマル -->
      <div class="progress">
        <div class="bar" style="width: 60%;"></div>
      </div>
      <!-- ストライプ -->
      <div class="progress progress-striped">
        <div class="bar" style="width: 20%;"></div>
      </div>
      <!-- ロード中 -->
      <div class="progress progress-striped active">
        <div class="bar" style="width: 40%;"></div>
      </div>
      <!-- スタック -->
      <div class="progress">
        <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>
      <br class="margin-top-middle">
      <!-- カラー -->
      <p>カラーいろいろ</p>
      <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>
    <div class="tab-pane" id="tabk2">[html] 
      &lt;!-- プログレスバーいろいろ --&gt;
      &lt;p&gt;見た目いろいろ&lt;/p&gt;
      &lt;!-- ノーマル --&gt;
      &lt;div class=&quot;progress&quot;&gt;
        &lt;div class=&quot;bar&quot; style=&quot;width: 60%;&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- ストライプ --&gt;
      &lt;div class=&quot;progress progress-striped&quot;&gt;
        &lt;div class=&quot;bar&quot; style=&quot;width: 20%;&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- ロード中 --&gt;
      &lt;div class=&quot;progress progress-striped active&quot;&gt;
        &lt;div class=&quot;bar&quot; style=&quot;width: 40%;&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- スタック --&gt;
      &lt;div class=&quot;progress&quot;&gt;
        &lt;div class=&quot;bar bar-success&quot; style=&quot;width: 35%;&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;bar bar-warning&quot; style=&quot;width: 20%;&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;bar bar-danger&quot; style=&quot;width: 10%;&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- カラー --&gt;
      &lt;p&gt;カラーいろいろ&lt;/p&gt;
      &lt;!-- 青 --&gt;
      &lt;div class=&quot;progress progress-info&quot;&gt;
        &lt;div class=&quot;bar&quot; style=&quot;width: 20%&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- 緑 --&gt;
      &lt;div class=&quot;progress progress-success&quot;&gt;
        &lt;div class=&quot;bar&quot; style=&quot;width: 40%&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- 黄 --&gt;
      &lt;div class=&quot;progress progress-warning&quot;&gt;
        &lt;div class=&quot;bar&quot; style=&quot;width: 60%&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- 赤 --&gt;
      &lt;div class=&quot;progress progress-danger&quot;&gt;
        &lt;div class=&quot;bar&quot; style=&quot;width: 80%&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;[/html] 
    </div>
  </div>
</div>