Symfoware

Symfowareについての考察blog

プログラマのためのBootstrap入門 その5 タブ

Bootstrapの使い方を勉強中です。
プログラマのためのBootstrap入門 その4 バッジとリスト

今回はタブについて調べてみます。

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



タブ



タブ形式での表示は、ulとliを使用したリストを使用します。
ulのクラスに「nav nav-tabs」を指定すればOK。

liのクラスに「active」を指定すると、そこが選択状態として表示されます。

438_01.png


「role="tablist"」の指定はなくてもかまいません。


  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.     <ul class="nav nav-tabs" role="tablist">
  13.      <li class="active"><a href="#">Home</a></li>
  14.      <li><a href="#">Profile</a></li>
  15.      <li><a href="#">Messages</a></li>
  16.     </ul>
  17.     
  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>







選択肢を丸っぽく



タブの選択肢をボタンのように表示するには、
「nav-tabs」ではなく「nav-pills」を指定します。

438_02.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.     <ul class="nav nav-pills">
  13.      <li class="active"><a href="#">Home</a></li>
  14.      <li><a href="#">Profile</a></li>
  15.      <li><a href="#">Messages</a></li>
  16.     </ul>
  17.     
  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>







タブを縦並びで表示



横方向ではなく、縦方向に表示したい場合は「nav-stacked」を追加で指定します。

438_03.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.     <ul class="nav nav-pills nav-stacked">
  13.      <li class="active"><a href="#">Home</a></li>
  14.      <li><a href="#">Profile</a></li>
  15.      <li><a href="#">Messages</a></li>
  16.     </ul>
  17.     
  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>







幅いっぱいにタブを表示



「nav-justified」を指定すると、画面の幅いっぱいにタブを表示します。

438_04.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.     <ul class="nav nav-tabs">
  13.      <li class="active"><a href="#">通常表示</a></li>
  14.      <li><a href="#">Profile</a></li>
  15.      <li><a href="#">Messages</a></li>
  16.     </ul>
  17.     <ul class="nav nav-tabs nav-justified">
  18.      <li class="active"><a href="#">nav-justified</a></li>
  19.      <li><a href="#">Profile</a></li>
  20.      <li><a href="#">Messages</a></li>
  21.     </ul>
  22.     
  23.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  24.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  25. </body>
  26. </html>




画面サイズの小さいモバイル端末だと、nav-justifiedを指定すると
縦並びで表示されるようでした。

438_05.png




タブの選択肢を非活性に



タブの選択肢を非活性にするにはliのクラスに「disabled」を指定します。

438_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.     <ul class="nav nav-tabs">
  13.      <li class="active"><a href="#">active</a></li>
  14.      <li><a href="#">通常表示</a></li>
  15.      <li class="disabled"><a href="#">ここは使用できません</a></li>
  16.     </ul>
  17.     
  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>







タブとドロップダウンの組み合わせ



タブの選択肢にドロップダウンリストを使用してみます。
liの中にドロップダウンリストを定義すればOKです。
プログラマのためのBootstrap入門 その3 コンボボックス(ドロップダウン)

438_07.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.     <ul class="nav nav-tabs">
  13.      <li class="active"><a href="#">active</a></li>
  14.      <li><a href="#">通常表示</a></li>
  15.      <li class="dropdown">
  16.         <a class="dropdown-toggle" data-toggle="dropdown" href="#">
  17.          ドロップダウン <span class="caret"></span>
  18.          <ul class="dropdown-menu" role="menu">
  19.             <li><a href="#">ドロップダウン項目1</a></li>
  20.             <li><a href="#">ドロップダウン項目2</a></li>
  21.          </ul>
  22.         </a>
  23.         
  24.      </li>
  25.     </ul>
  26.     
  27.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  28.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  29. </body>
  30. </html>

関連記事

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

  1. 2014/08/03(日) 15:45:27|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<プログラマのためのBootstrap入門 その6 ナビゲーションバー | ホーム | プログラマのためのBootstrap入門 その4 バッジとリスト>>

コメント

コメントの投稿


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

トラックバック

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