libro
www.tuyano.com
初心者のためのBootstrap入門

Bootstrapの入力コンポーネント (5/6)

作成:2017-03-04 08:32
更新:2017-03-04 08:32

■プログレスバー

全体の進行状況などを表すのに用いられるのが、プログレスバーです。横長のバーで、進行の度合いに合わせてバーが伸びていくものですね。ファイルのコピーなど、あらゆるシーンで使われています。

このプログレスバーも、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-success
progress-bar-info
progress-bar-warning
progress-bar-danger
「progress-bar-」の後についている単語は、どこかで見たことがありますね？　ボタンのスタイルなどで今まで使ったことがありました。progress-bar-○○というように表示する用途に関する単語をつければ、バーの色がそれに合わせて変わります。


・ストリップ表示
progress-bar-striped
もう１つ、バーをストリップ表示（斜めの線が入ったもの）にするためのクラスも用意されています。class属性に、「progress-bar-striped」を追加することで、バーをストリップ表示にすることができます。

更に、class属性に「active」を追加することで、ストリップ表示をアニメーションさせることができます。

では、これも利用例を下に掲載しておきましょう。ここでは３つのプログレスバーを表示させています。真ん中のものはグリーンに、下のものは赤く表示され、更に一番下のバーはストリップ表示でアニメーションします。

※プログラムリストが表示されない場合

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>
※関連コンテンツ

「初心者のためのBootstrap入門」に戻る