Symfoware

Symfowareについての考察blog

プログラマのためのBootstrap入門 その3 コンボボックス(ドロップダウン)

Bootstrapの使い方を勉強中です。
プログラマのためのBootstrap入門 その2 ボタンとラベル

今回はコンボボックス(ドロップダウン)について調べてみます。

こちらを参考にしました。
http://getbootstrap.com/components/



コンボボックス(ドロップダウン)



コンボボックスはselectタグ使うんだろ?と思っていたら、
ボタンにリストをくっつける形で作られていました。

なるほど、こうすれば選択肢に表示する内容を自分で制御できますね。

436_01.png

436_02.png

htmlはこうなりました。


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12.     <div class="btn-group">
  13.      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  14.         ドロップダウン <span class="caret"></span>
  15.      </button>
  16.      <ul class="dropdown-menu" role="menu">
  17.         <li><a href="#">項目1</a></li>
  18.         <li><a href="#">項目2</a></li>
  19.         <li><a href="#">項目3</a></li>
  20.         <li class="divider"></li>
  21.         <li><a href="#">項目4</a></li>
  22.      </ul>
  23.     </div>
  24.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  25.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  26. </body>
  27. </html>





各タグの意味を知るため、ぎりぎりまで削ったサンプルはこうなりました。


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12.     <div class="btn-group">
  13.      <button type="button" class="btn btn-default" data-toggle="dropdown">ドロップダウン</button>
  14.      <ul class="dropdown-menu">
  15.         <li><a href="#">項目1</a></li>
  16.      </ul>
  17.     </div>
  18.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  19.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  20. </body>
  21. </html>





これでもちゃんとドロップダウンしてくれます。

436_03.png



必須となるのは、

・ボタンとリストをdivでくくり、囲ったdivに「btn-group」を指定する。

・ボタンに「data-toggle="dropdown"」を指定する。
これを指定しないと、ボタンを押してもドロップダウンが表示されません。

・ulに「class="dropdown-menu"」を指定する。
これを指定しないと、関連付けが行われず、最初からリストが表示されます。

436_04.png


これに加えて行ったほうが良いのが、

・ボタンに「dropdown-toggle」を指定する。
これを指定しないと、ボタンの右側のフチ取りが直角になる模様。

・「class="caret"」を持つspanをたす。
これが下矢印になる。






選択肢に説明文(ヘッダー)をつける



「class="dropdown-header"」を指定すれば、選択不能なヘッダーになります。

436_05.png


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12.     <div class="btn-group">
  13.      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  14.         ドロップダウン <span class="caret"></span>
  15.      </button>
  16.      <ul class="dropdown-menu" role="menu">
  17.         <li class="dropdown-header">上のほうの選択肢</li>
  18.         <li><a href="#">項目1</a></li>
  19.         <li><a href="#">項目2</a></li>
  20.         <li><a href="#">項目3</a></li>
  21.         <li class="divider"></li>
  22.         <li class="dropdown-header">下のほうの選択肢</li>
  23.         <li><a href="#">項目4</a></li>
  24.      </ul>
  25.     </div>
  26.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  27.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  28. </body>
  29. </html>








ドロップダウンメニューの一部をDisabled



「li」に「class="disabled"」を指定します。

436_06.png


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12.     <div class="btn-group">
  13.      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  14.         ドロップダウン <span class="caret"></span>
  15.      </button>
  16.      <ul class="dropdown-menu" role="menu">
  17.         <li><a href="#">項目1</a></li>
  18.         <li class="disabled"><a href="#">使えないよ</a></li>
  19.         <li><a href="#">項目3</a></li>
  20.         <li class="divider"></li>
  21.         <li><a href="#">項目4</a></li>
  22.      </ul>
  23.     </div>
  24.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  25.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  26. </body>
  27. </html>








項目と下矢印の間に線を入れる



436_07.png

ボタンを2つ作ります。
ひとつは項目名の表示だけ。
ふたつめに矢印のアイコンと、ドロップダウンメニュー表示の関連付けを設定。


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12.     <div class="btn-group">
  13.      <button type="button" class="btn btn-default">ドロップダウン</button>
  14.      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  15.         <span class="caret"></span>
  16.      </button>
  17.      <ul class="dropdown-menu" role="menu">
  18.         <li><a href="#">項目1</a></li>
  19.         <li><a href="#">項目2</a></li>
  20.         <li><a href="#">項目3</a></li>
  21.         <li class="divider"></li>
  22.         <li><a href="#">項目4</a></li>
  23.      </ul>
  24.     </div>
  25.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  26.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  27. </body>
  28. </html>






ドロップダウンのサイズを変更



ボタンなので、ボタンの大きさを変更するテクニックがそのまま使えます。
プログラマのためのBootstrap入門 その2 ボタンとラベル

btn-lg、btn-sm、btn-xsでサイズ変更。

436_08.png


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12.     <div class="btn-group">
  13.      <button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">
  14.          btn-lg<span class="caret"></span>
  15.      </button>
  16.      <ul class="dropdown-menu" role="menu">
  17.         <li><a href="#">項目1</a></li>
  18.      </ul>
  19.     </div>
  20.     
  21.     <div class="btn-group">
  22.      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  23.          通常<span class="caret"></span>
  24.      </button>
  25.      <ul class="dropdown-menu" role="menu">
  26.         <li><a href="#">項目1</a></li>
  27.      </ul>
  28.     </div>
  29.     
  30.     <div class="btn-group">
  31.      <button type="button" class="btn btn-default dropdown-toggle btn-sm" data-toggle="dropdown">
  32.          btn-sm<span class="caret"></span>
  33.      </button>
  34.      <ul class="dropdown-menu" role="menu">
  35.         <li><a href="#">項目1</a></li>
  36.      </ul>
  37.     </div>
  38.     
  39.     <div class="btn-group">
  40.      <button type="button" class="btn btn-default dropdown-toggle btn-xs"data-toggle="dropdown">
  41.          btn-xs<span class="caret"></span>
  42.      </button>
  43.      <ul class="dropdown-menu" role="menu">
  44.         <li><a href="#">項目1</a></li>
  45.      </ul>
  46.     </div>
  47.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  48.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  49. </body>
  50. </html>







上にポップアップさせたい



dropupを指定すると、上にポップアップするようになります。

436_09.png


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12.     <div style="height:100px"></div>
  13.     <div class="btn-group dropup">
  14.      <button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">
  15.          ドロップアップ<span class="caret"></span>
  16.      </button>
  17.      <ul class="dropdown-menu" role="menu">
  18.         <li><a href="#">項目1</a></li>
  19.         <li><a href="#">項目2</a></li>
  20.         <li><a href="#">項目3</a></li>
  21.      </ul>
  22.     </div>
  23.     
  24.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  25.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  26. </body>
  27. </html>

関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2014/08/02(土) 18:26:52|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<プログラマのためのBootstrap入門 その4 バッジとリスト | ホーム | プログラマのためのBootstrap入門 その2 ボタンとラベル>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1449-4e7c93c3
この記事にトラックバックする(FC2ブログユーザー)