Symfoware

Symfowareについての考察blog

プログラマのためのBootstrap入門 その9 パネルとWells

Bootstrapの使い方を勉強中です。
プログラマのためのBootstrap入門 その8 テーブル

今回はパネルとWellsについて調べてみます。

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



パネル



パネルを定義するには、divを2つ重ねます。
親のdivには「panel panel-default」
子のdivには「panel-body」
を指定すればOK。

442_01.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.     
  13.     <div class="panel panel-default">
  14.      <div class="panel-body">
  15.         ここがパネルに記載する本文    
  16.      </div>
  17.     </div>
  18.     
  19.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  20.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  21. </body>
  22. </html>







パネルにヘッダーをつける



パネルにヘッダーをつけて、タイトルを記載してみます。

ヘッダー用にネストしたdivを用意。
親のdivに「panel-heading」
子のdivに「panel-title」
を指定します。

442_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.     
  13.     <div class="panel panel-default">
  14.      <div class="panel-heading">
  15.         <div class="panel-title">
  16.          ここがパネルのタイトル
  17.         </div>
  18.      </div>
  19.     
  20.      <div class="panel-body">
  21.         ここがパネルに記載する本文    
  22.      </div>
  23.     </div>
  24.     
  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>







パネルにフッターをつける



divに「panel-footer」を指定すれば、フッターとして表示されます。

442_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.     
  13.     <div class="panel panel-default">
  14.      <div class="panel-body">
  15.         ここがパネルに記載する本文    
  16.      </div>
  17.     
  18.      <div class="panel-footer">フッターに表示される文</div>
  19.     </div>
  20.     
  21.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  22.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  23. </body>
  24. </html>







パネルに色をつける



ボタンやラベルと同様、規定の色を指定することができます。

指定できるのは


panel-primary
panel-success
panel-info
panel-warning
panel-danger



442_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.     
  13.     <div class="panel panel-default">
  14.      <div class="panel-heading">
  15.         <div class="panel-title">panel-default</div>
  16.      </div>
  17.      <div class="panel-body">ここがパネルに記載する本文</div>
  18.     </div>
  19.     
  20.     <div class="panel panel-primary">
  21.      <div class="panel-heading">
  22.         <div class="panel-title">panel-primary</div>
  23.      </div>
  24.      <div class="panel-body">ここがパネルに記載する本文</div>
  25.     </div>
  26.     
  27.     <div class="panel panel-success">
  28.      <div class="panel-heading">
  29.         <div class="panel-title">panel-success</div>
  30.      </div>
  31.      <div class="panel-body">ここがパネルに記載する本文</div>
  32.     </div>
  33.     
  34.     <div class="panel panel-info">
  35.      <div class="panel-heading">
  36.         <div class="panel-title">panel-info</div>
  37.      </div>
  38.      <div class="panel-body">ここがパネルに記載する本文</div>
  39.     </div>
  40.     
  41.     <div class="panel panel-warning">
  42.      <div class="panel-heading">
  43.         <div class="panel-title">panel-warning</div>
  44.      </div>
  45.      <div class="panel-body">ここがパネルに記載する本文</div>
  46.     </div>
  47.     
  48.     <div class="panel panel-danger">
  49.      <div class="panel-heading">
  50.         <div class="panel-title">panel-danger</div>
  51.      </div>
  52.      <div class="panel-body">ここがパネルに記載する本文</div>
  53.     </div>
  54.     
  55.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  56.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  57. </body>
  58. </html>







テーブルと組み合わせて使う



パネルにテーブルを表示したいときは、panel-bodyじゃなくて
テーブル単独でパネルに追加すると綺麗に表示されます。

442_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.     
  13.     <div class="panel panel-default">
  14.      <div class="panel-heading">
  15.         <div class="panel-title">パネルタイトル</div>
  16.      </div>
  17.      <div class="panel-body">ここがパネルに記載する本文</div>
  18.     
  19.      <table class="table table-condensed">
  20.         <thead>
  21.          <tr>
  22.             <th>#</th><th></th><th></th><th>指定</th>
  23.          </tr>
  24.         </thead>
  25.         <tbody>
  26.          <tr>
  27.             <td>1</td><td>西住</td><td>みほ</td><td>未指定</td>
  28.          </tr>
  29.          <tr>
  30.             <td>2</td><td>武部</td><td>沙織</td><td>active</td>
  31.          </tr>
  32.          <tr>
  33.             <td>3</td><td>五十鈴</td><td></td><td>success</td>
  34.          </tr>
  35.          <tr>
  36.             <td>4</td><td>秋山</td><td>優花里</td><td>info</td>
  37.          </tr>
  38.          <tr>
  39.             <td>5</td><td>冷泉</td><td>麻子</td><td>warning</td>
  40.          </tr>
  41.         </tbody>
  42.      </table>
  43.     </div>
  44.     
  45.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  46.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  47. </body>
  48. </html>







panel-headingとだけ組み合わせると、テーブルのタイトル風に
パネルのヘッダーを使用することができます。

442_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.     
  13.     <div class="panel panel-default">
  14.      <div class="panel-heading">テーブルのタイトル</div>
  15.      <table class="table">
  16.         <thead>
  17.          <tr>
  18.             <th>#</th><th></th><th></th><th>指定</th>
  19.          </tr>
  20.         </thead>
  21.         <tbody>
  22.          <tr>
  23.             <td>1</td><td>西住</td><td>みほ</td><td>未指定</td>
  24.          </tr>
  25.          <tr>
  26.             <td>2</td><td>武部</td><td>沙織</td><td>active</td>
  27.          </tr>
  28.          <tr>
  29.             <td>3</td><td>五十鈴</td><td></td><td>success</td>
  30.          </tr>
  31.          <tr>
  32.             <td>4</td><td>秋山</td><td>優花里</td><td>info</td>
  33.          </tr>
  34.          <tr>
  35.             <td>5</td><td>冷泉</td><td>麻子</td><td>warning</td>
  36.          </tr>
  37.         </tbody>
  38.      </table>
  39.     </div>
  40.     
  41.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  42.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  43. </body>
  44. </html>







リストと組み合わせて使う



テーブルと同様、リストと組み合わせて使うこともできます。

442_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.     
  13.     <div class="panel panel-default">
  14.      <div class="panel-heading">
  15.         <div class="panel-title">パネルタイトル</div>
  16.      </div>
  17.      <div class="panel-body">ここがパネルに記載する本文</div>
  18.     
  19.      <ul class="list-group">
  20.         <li class="list-group-item">西住 みほ</li>
  21.         <li class="list-group-item">武部 沙織</li>
  22.         <li class="list-group-item">五十鈴 華</li>
  23.         <li class="list-group-item">秋山 優花里</li>
  24.         <li class="list-group-item">冷泉 麻子</li>
  25.      </ul>
  26.     </div>
  27.     
  28.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  29.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  30. </body>
  31. </html>








Wells



なんと翻訳すればよいかわからないのですが、文を目立たせたいときに使うと良いかと。
blockquoteみたいな効果でしょうか。

divのクラスに「well」を指定すればOK。

442_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.     
  13.     <div class="well">ここに注目!</div>
  14.     
  15.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  16.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  17. </body>
  18. </html>





well-lgで大きく、well-smでちいさめに表示します。

442_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.     
  13.     <div class="well">ここに注目!(未指定)</div>
  14.     <div class="well well-lg">ここに注目!(well-lg)</div>
  15.     <div class="well well-sm">ここに注目!(well-sm)</div>
  16.     
  17.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  18.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  19. </body>
  20. </html>

関連記事

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

  1. 2014/08/03(日) 21:00:22|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<プログラマのためのBootstrap入門 その10 グリッドシステム | ホーム | プログラマのためのBootstrap入門 その8 テーブル>>

コメント

コメントの投稿


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

トラックバック

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