back
Bootstrapの入力コンポーネント (5/6)
■プログレスバー
全体の進行状況などを表すのに用いられるのが、プログレスバーです。横長のバーで、進行の度合いに合わせてバーが伸びていくものですね。ファイルのコピーなど、あらゆるシーンで使われています。
このプログレスバーも、Bootstrapではオリジナルのインターフェイスとして用意されています。これは以下のような形で記述します。
プログレスバーは、２つの<div>によって構築されます。外側の<div>がプログレスバー全体の背景となるもので、class="progress"を指定しておきます。
そして内側の<div>がバーの部分となるもので、これはclass="progress-bar" role="progressbar"を指定しておきます。内側のバーの長さは、widthスタイルで指定します。例えば、style="width:50%;"とすれば、全体の半分の長さのバーが表示されます。
プログレスバーでは、バーの表示に関するクラスが幾つか用意されています。まず、バーの表示色に関するものです。
・バーの色設定
・ストリップ表示
更に、class属性に「active」を追加することで、ストリップ表示をアニメーションさせることができます。
では、これも利用例を下に掲載しておきましょう。ここでは３つのプログレスバーを表示させています。真ん中のものはグリーンに、下のものは赤く表示され、更に一番下のバーはストリップ表示でアニメーションします。
このプログレスバーも、Bootstrapではオリジナルのインターフェイスとして用意されています。これは以下のような形で記述します。
<div class="progress">
<div class="progress-bar" role="progressbar"
style="width: 横幅の設定">
バーに表示するテキスト
</div>
</div>
プログレスバーは、２つの<div>によって構築されます。外側の<div>がプログレスバー全体の背景となるもので、class="progress"を指定しておきます。
そして内側の<div>がバーの部分となるもので、これはclass="progress-bar" role="progressbar"を指定しておきます。内側のバーの長さは、widthスタイルで指定します。例えば、style="width:50%;"とすれば、全体の半分の長さのバーが表示されます。
プログレスバーでは、バーの表示に関するクラスが幾つか用意されています。まず、バーの表示色に関するものです。
・バーの色設定
progress-bar-default「progress-bar-」の後についている単語は、どこかで見たことがありますね？ ボタンのスタイルなどで今まで使ったことがありました。progress-bar-○○というように表示する用途に関する単語をつければ、バーの色がそれに合わせて変わります。
progress-bar-success
progress-bar-info
progress-bar-warning
progress-bar-danger
・ストリップ表示
progress-bar-stripedもう１つ、バーをストリップ表示（斜めの線が入ったもの）にするためのクラスも用意されています。class属性に、「progress-bar-striped」を追加することで、バーをストリップ表示にすることができます。
更に、class属性に「active」を追加することで、ストリップ表示をアニメーションさせることができます。
では、これも利用例を下に掲載しておきましょう。ここでは３つのプログレスバーを表示させています。真ん中のものはグリーンに、下のものは赤く表示され、更に一番下のバーはストリップ表示でアニメーションします。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <script src="./js/jquery-3.1.1.min.js"></script> <script src="./js/bootstrap.min.js"></script> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap-theme.min.css"> </head> <body > <div class="container"> <div class="row"> <div class="col-md-12"> <div class="page-header"> <h1>コンテンツの表示</h1> <h2 >Progress Bar</h2> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 35%;"> 35% </div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" style="width: 65%;"> 65% </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" style="width: 95%;"> 95% </div> </div> </div> </div> </div> </body> </html>
| << 前へ | 次へ >> |