【Twitter Bootstrap】ドロップダウンボタン

Twitter Bootstrap、今回はドロップダウンボタンです。

-↓ソース---------------------------------------------------------------------------------------------------------

<div class="btn-group">

    <button class="btn">メニューから選んでね</button>

    <button class="btn dropdown-toggle" data-toggle="dropdown">

    <span class="caret"></span>

    </button>

    <ul class="dropdown-menu">

    <!-- dropdown menu links -->

    <li>Menu1</li>

    <li>Menu2</li>

    <li>Menu3</li>

    </ul>

</div>

----------------------------------------------------------------------------------------------------------

・DIV要素をbtn-groupクラスで囲む

・ボタン要素はbtnクラス、dropdown-toggleクラスで囲む

・また、ボタン要素にdata-toggle="dropdown"を追加

・UL要素にドロップダウンするリストを書く

という流れです。

ちなみに、SPAN要素はキャレット(三角形のマーク)を表します。

これを表示すると、以下のようになります。

 

 

なんと、シャドウまでついてます。

キャレットはあってもなくても大丈夫です。

また、以下のように3種類のサイズがあります。

 

 

サイズの指定はBUTTON要素に

・btn-mini

・btn-small

・btn-large

のいずれかのクラスを指定するだけです。

注意事項としては、2つあるBUTTON要素両方に指定しないと、サイズが違ってしまうことですね。

 

 

次回はタブについてやります。 

タグ：Twitter Bootstrap ドロップダウンボタン