Symfoware

Symfowareについての考察blog

プログラマのためのBootstrap入門 その4 バッジとリスト

Bootstrapの使い方を勉強中です。
プログラマのためのBootstrap入門 その3 コンボボックス(ドロップダウン)

今回はバッジとリストについて調べてみます。

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



バッジ



最初、バッジ(Badges)って何だろう?と思ったのですが、
よくある例は「受信トレイ(10)」みたいに、数字などをちょっと強調表示する機能です。

spanタグのclassに「badge」を指定すればOK。

437_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.     <div style="height:100px"></div>
  13.     <a href="#">受信トレイ <span class="badge">10</span></a>
  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>







バッジを右寄せで表示



バッジを右寄せで表示したいときは、「pull-right」を指定します。

437_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.     <div><button type="button" class="btn btn-primary btn-lg btn-block">指定なし<span class="badge">42</span></button></div>
  13.     <div><button type="button" class="btn btn-primary btn-lg btn-block">pull-right<span class="badge pull-right">42</span></button></div>
  14.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  15.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  16. </body>
  17. </html>








リストグループ



ulとliで構成されたリストをオシャレに表示できます。
ulのclassに「list-group」
liのclassに「list-group-item」を指定します。

437_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="list-group">
  13.      <li class="list-group-item">ulのclassに</li>
  14.      <li class="list-group-item">list-group</li>
  15.      <li class="list-group-item">liのclassに</li>
  16.      <li class="list-group-item">list-group-item</li>
  17.      <li class="list-group-item">を指定</li>
  18.     </ul>
  19.     <ul>
  20.      <li>比較用</li>
  21.      <li>classに</li>
  22.      <li>何も</li>
  23.      <li>指定していない</li>
  24.      <li>場合</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>







リストとバッジの組み合わせ



リストとバッジを組み合わせてみます。

リストの場合は自動的にバッジが右寄せになります。
バッジに「pull-right」を指定する必要はありません。

437_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="list-group">
  13.      <li class="list-group-item">受信トレイ<span class="badge">14</span></li>
  14.      <li class="list-group-item">削除済<span class="badge">10</span></li>
  15.      <li class="list-group-item">返信<span class="badge">1</span></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>




バッジに「pull-left」を指定すると、文字の左側にバッジがつきました。

437_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.     <ul class="list-group">
  13.      <li class="list-group-item">受信トレイ<span class="badge pull-left">14</span></li>
  14.      <li class="list-group-item">削除済<span class="badge pull-left">10</span></li>
  15.      <li class="list-group-item">返信<span class="badge pull-left">1</span></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>








a hrefリンクをリスト表示



divのクラスに「list-group」
aのクラスに「list-group-item」
を指定すると、リンクをリストっぽく表示できます。

また、クラスに「active」を指定すると強調表示されます。

437_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="list-group">
  13.      <a href="#" class="list-group-item active">訪問中のページ</a>
  14.      <a href="#" class="list-group-item">リンク1</a>
  15.      <a href="#" class="list-group-item">リンク2</a>
  16.      <a href="#" class="list-group-item">リンク3</a>
  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>






リストの項目を使用不可に



リストの項目のクラスに「active」を指定すると強調表示されました。
「disabled」を指定すると、使用不可となります。

ul-liのリスト、リンクリスト共通です。

437_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="list-group">
  13.      <li class="list-group-item">ul-liのサンプル</li>
  14.      <li class="list-group-item disabled">ここは使用不可</li>
  15.      <li class="list-group-item active">ここはアクティブ</li>
  16.     </ul>
  17.     <div class="list-group">
  18.      <a href="#" class="list-group-item">リンクリストのサンプル</a>
  19.      <a href="#" class="list-group-item disabled">ここは使用不可</a>
  20.      <a href="#" class="list-group-item active">ここはアクティブ</a>
  21.     </div>
  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>









項目の強調表示



ボタンやラベルでは、「success」や「info」といったキーワードを指定して
強調表示することが出来ました。

プログラマのためのBootstrap入門 その2 ボタンとラベル

リストの項目も同様に


list-group-item-success
list-group-item-info
list-group-item-warning
list-group-item-danger




という指定で強調表示が可能です。

437_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.     <ul class="list-group">
  13.      <li class="list-group-item">未指定</li>
  14.      <li class="list-group-item list-group-item-success">list-group-item-success</li>
  15.      <li class="list-group-item list-group-item-info">list-group-item-info</li>
  16.      <li class="list-group-item list-group-item-warning">list-group-item-warning</li>
  17.      <li class="list-group-item list-group-item-danger">list-group-item-danger</li>
  18.     </ul>
  19.     
  20.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  21.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  22. </body>
  23. </html>






リスト項目のカスタマイズ




list-group-item-heading
list-group-item-text



というクラスを使用して、リスト項目に詳細表示を行うことができます。

437_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.     <ul class="list-group">
  13.      <a href="#" class="list-group-item active">
  14.         <h4 class="list-group-item-heading">リスト項目のタイトル</h4>
  15.         <p class="list-group-item-text">リスト項目の説明文</p>
  16.      </a>
  17.      <a href="#" class="list-group-item">
  18.         <h4 class="list-group-item-heading">リスト項目のタイトル2</h4>
  19.         <p class="list-group-item-text">リスト項目の説明文。適当に長い文字列を指定してみます。</p>
  20.      </a>
  21.      <a href="#" class="list-group-item">
  22.         <h4 class="list-group-item-heading">メールタイトル</h4>
  23.         <p class="list-group-item-text">本文の先頭30文字をプレビュー表示みたいな使い方</p>
  24.      </a>
  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(日) 14:17:34|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<プログラマのためのBootstrap入門 その5 タブ | ホーム | プログラマのためのBootstrap入門 その3 コンボボックス(ドロップダウン)>>

コメント

コメントの投稿


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

トラックバック

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