Symfoware

Symfowareについての考察blog

プログラマのためのBootstrap入門 その7 アラート、プログレスバー、パンくずリスト

Bootstrapの使い方を勉強中です。
プログラマのためのBootstrap入門 その6 ナビゲーションバー

今回はアラート、プログレスバー、パンくずリストについて調べてみます。

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



アラート



文字列を強調して表示します。
divのクラスに「alert」を指定し、さらに「alert-success」などを指定。

指定可能なオプションは、ボタンなどと同様です。


alert-success
alert-info
alert-warning
alert-danger



440_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 class="alert" role="alert">未指定</div>
  13.     <div class="alert alert-success" role="alert">alert-success</div>
  14.     <div class="alert alert-info" role="alert">alert-info</div>
  15.     <div class="alert alert-warning" role="alert">alert-warning</div>
  16.     <div class="alert alert-danger" role="alert">alert-danger</div>
  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>






消せるアラート



一度確認したらバツボタンで非表示にしたい場合、最小構成はアラートのdivにボタンを定義。
ボタンのクラスに「data-dismiss="alert"」を指定します。

timesというエスケープがありますが、これで「×」という文字を表示しています。
これがバツボタンになります。
http://www.htmq.com/text/

440_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 class="alert alert-success">
  13.         <button type="button" data-dismiss="alert">
  14.             <span>×</span>
  15.         </button>
  16.         ボタンを押すと非表示
  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>





ボタンの縁取りをイケてる感じにして右寄せにするために、「close」を指定。

また、バツボタンの文字はただの表示用でい見が亡いため、aria-hiddenを指定するのが通みたいです。
aria-hiddenについて
これは指定していなくても動作に変化はありませんでした。

440_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.     <div class="alert alert-success">
  13.         <button type="button" data-dismiss="alert">
  14.             <span>×</span>
  15.         </button>
  16.         ボタンを押すと非表示
  17.     </div>
  18.     
  19.     <div class="alert alert-success">
  20.         <button type="button" data-dismiss="alert" class="close">
  21.             <span>×</span>
  22.         </button>
  23.         ボタンのスタイルに「close」指定
  24.     </div>
  25.     
  26.     <div class="alert alert-success" role="alert">
  27.         <button type="button" data-dismiss="alert" class="close">
  28.             <span aria-hidden="true">×</span>
  29.         </button>
  30.         ×のspanに「aria-hidden="true"」を指定
  31.     </div>
  32.     
  33.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  34.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  35. </body>
  36. </html>








アラート内にリンク設置



アラートの中に解決策へのリンクを配置したい場合。
aタグのクラスに「alert-link」を指定してやるとオシャレに表示されます。

440_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.     <div class="alert alert-warning">
  13.         警告が発生しています。解決策は<a href="#" class="alert-link">こちら(alert-linkあり)</a>。
  14.     </div>
  15.     
  16.     <div class="alert alert-warning">
  17.         警告が発生しています。解決策は<a href="#">こちら(alert-linkなし)</a>。
  18.     </div>
  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>







プログレスバー



プログレスバーの表示を試してみます。
サンプルでは、aria-valuenowと言ったタグが登場しますが、
最小限必要なのは、

クラスに「progress」を指定した親のdiv。
クラスに「progress-bar」を指定した子のdiv。ここに「width:xx%」で進捗を指定。

440_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.     <!-- サンプルの推奨 -->
  14.     <div class="progress">
  15.      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
  16.         <span class="sr-only">60% Complete</span>
  17.      </div>
  18.     </div>
  19.     <!-- 最小構成 -->
  20.     <div class="progress">
  21.      <div class="progress-bar" style="width: 60%;"></div>
  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>






プログレスバーに値を表示



何%進んでいるかプログレスバーに表示します。
普通にdivの中に文字を書けばOK。

440_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.     <!-- サンプルの推奨 -->
  14.     <div class="progress">
  15.      <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
  16.         60%
  17.         <span class="sr-only">60% Complete</span>
  18.      </div>
  19.     </div>
  20.     <!-- 最小構成 -->
  21.     <div class="progress">
  22.      <div class="progress-bar" style="width: 60%;">60%</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>







低い割合の表示



プログレスバーに表示する割合が低い時、aria-valuenowの指定が効いてきます。
ちゃんとaria-valuenowを指定していると文字が収まるように表示されました。

440_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.     <!-- サンプルの推奨 -->
  14.     <div class="progress">
  15.      <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
  16.         0%
  17.         <span class="sr-only">0% Complete</span>
  18.      </div>
  19.     </div>
  20.     <!-- 最小構成 -->
  21.     <div class="progress">
  22.      <div class="progress-bar" aria-valuenow="0" style="width: 0%;">0%</div>
  23.     </div>
  24.     
  25.     <!-- aria-valuenow指定なし -->
  26.     <div class="progress">
  27.      <div class="progress-bar" style="width: 0%;">0%</div>
  28.     </div>
  29.     
  30.     <!-- サンプルの推奨 -->
  31.     <div class="progress">
  32.      <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
  33.         2%
  34.         <span class="sr-only">2% Complete</span>
  35.      </div>
  36.     </div>
  37.     <!-- 最小構成 -->
  38.     <div class="progress">
  39.      <div class="progress-bar" aria-valuenow="2" style="width: 2%;">2%</div>
  40.     </div>
  41.     
  42.     <!-- aria-valuenow指定なし -->
  43.     <div class="progress">
  44.      <div class="progress-bar" style="width: 2%;">2%</div>
  45.     </div>
  46.     
  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>







複数プログレスバーの表示



複数のプログレスバーを表示してみます。
色の指定は、ボタンなどと同じく


progress-bar-success
progress-bar-info
progress-bar-warning
progress-bar-danger



で指定できます。

440_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.     <!-- サンプルの推奨 -->
  14.     <div class="progress">
  15.      <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
  16.         未指定<span class="sr-only">未指定</span>
  17.      </div>
  18.     </div>
  19.     <div class="progress">
  20.      <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
  21.         progress-bar-success<span class="sr-only">progress-bar-success</span>
  22.      </div>
  23.     </div>
  24.     <div class="progress">
  25.      <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
  26.         progress-bar-info<span class="sr-only">progress-bar-info</span>
  27.      </div>
  28.     </div>
  29.     <div class="progress">
  30.      <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
  31.         progress-bar-warning<span class="sr-only">progress-bar-warning</span>
  32.      </div>
  33.     </div>
  34.     <div class="progress">
  35.      <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
  36.         progress-bar-danger<span class="sr-only">progress-bar-danger</span>
  37.      </div>
  38.     </div>
  39.     <!-- 最小構成 -->
  40.     <div class="progress">
  41.      <div class="progress-bar" aria-valuenow="50" style="width: 50%;">
  42.         未指定
  43.      </div>
  44.     </div>
  45.     <div class="progress">
  46.      <div class="progress-bar progress-bar-success" aria-valuenow="50" style="width: 50%;">
  47.         progress-bar-success
  48.      </div>
  49.     </div>
  50.     <div class="progress">
  51.      <div class="progress-bar progress-bar-info" aria-valuenow="50" style="width: 50%;">
  52.         progress-bar-info
  53.      </div>
  54.     </div>
  55.     <div class="progress">
  56.      <div class="progress-bar progress-bar-warning" aria-valuenow="50" style="width: 50%;">
  57.         progress-bar-warning
  58.      </div>
  59.     </div>
  60.     <div class="progress">
  61.      <div class="progress-bar progress-bar-danger" aria-valuenow="50" style="width: 50%;">
  62.         progress-bar-danger
  63.      </div>
  64.     </div>
  65.     
  66.     
  67.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  68.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  69. </body>
  70. </html>







プログレスバーのストライプ表示



プログレスバーをストライプ表示したい場合は
「progress-bar-striped」を指定します。

440_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.     <!-- サンプルの推奨 -->
  14.     <div class="progress">
  15.      <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
  16.         未指定<span class="sr-only">未指定</span>
  17.      </div>
  18.     </div>
  19.     <div class="progress">
  20.      <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
  21.         progress-bar-success<span class="sr-only">progress-bar-success</span>
  22.      </div>
  23.     </div>
  24.     <!-- 最小構成 -->
  25.     <div class="progress">
  26.      <div class="progress-bar progress-bar-striped" aria-valuenow="50" style="width: 50%;">
  27.         未指定
  28.      </div>
  29.     </div>
  30.     <div class="progress">
  31.      <div class="progress-bar progress-bar-success progress-bar-striped" aria-valuenow="50" style="width: 50%;">
  32.         progress-bar-success
  33.      </div>
  34.     </div>
  35.     
  36.     
  37.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  38.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  39. </body>
  40. </html>







アニメーション



ストライプを動かしたい場合、ストライプ指定に加えてさらに「active」を指定します。
画像ではわかりませんが、うにうに動いています。

440_10.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.     <!-- サンプルの推奨 -->
  14.     <div class="progress">
  15.      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
  16.         ストライプアニメーション<span class="sr-only">ストライプアニメーション</span>
  17.      </div>
  18.     </div>
  19.     <!-- 最小構成 -->
  20.     <div class="progress">
  21.      <div class="progress-bar progress-bar-striped active" aria-valuenow="50" style="width: 50%;">
  22.         最小構成
  23.      </div>
  24.     </div>
  25.     
  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>







複数のプログレスバーを一つに表示



子のprogress-barを指定するdivを同じ親のdivに入れればOK。

440_11.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.     <!-- サンプルの推奨 -->
  14.     <div class="progress">
  15.      <div class="progress-bar" role="progressbar" style="width: 10%;">
  16.         <span class="sr-only">10% Complete</span>
  17.      </div>
  18.      <div class="progress-bar progress-bar-success" style="width: 20%;">
  19.         <span class="sr-only">20% Complete</span>
  20.      </div>
  21.      <div class="progress-bar progress-bar-warning" style="width: 30%;">
  22.         <span class="sr-only">30% Complete</span>
  23.      </div>
  24.     </div>
  25.     <!-- 最小構成 -->
  26.     <div class="progress">
  27.      <div class="progress-bar" role="progressbar" style="width: 10%;"></div>
  28.      <div class="progress-bar progress-bar-success" style="width: 20%;"></div>
  29.      <div class="progress-bar progress-bar-warning" style="width: 30%;"></div>
  30.     </div>
  31.     
  32.     
  33.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  34.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  35. </body>
  36. </html>







パンくずリスト(Breadcrumbs)



本文履歴の表示や、ディレクトリの今の階層を表示したい場合に使えます。
olやulのクラスに「breadcrumb」を指定します。

440_12.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.     <ol class="breadcrumb">
  14.      <li><a href="#">Home</a></li>
  15.      <li><a href="#">階層1</a></li>
  16.      <li><a href="#">階層1−1</a></li>
  17.      <li class="active">階層1−1−1</li>
  18.     </ol>
  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>



関連記事

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

  1. 2014/08/03(日) 18:58:21|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<プログラマのためのBootstrap入門 その8 テーブル | ホーム | プログラマのためのBootstrap入門 その6 ナビゲーションバー>>

コメント

コメントの投稿


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

トラックバック

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