<div class="progress">
<div class="progress-bar" role="progressbar"
style="width: 横幅の設定">
バーに表示するテキスト
</div>
</div>
progress-bar-default「progress-bar-」の後についている単語は、どこかで見たことがありますね? ボタンのスタイルなどで今まで使ったことがありました。progress-bar-○○というように表示する用途に関する単語をつければ、バーの色がそれに合わせて変わります。
progress-bar-success
progress-bar-info
progress-bar-warning
progress-bar-danger
progress-bar-stripedもう1つ、バーをストリップ表示(斜めの線が入ったもの)にするためのクラスも用意されています。class属性に、「progress-bar-striped」を追加することで、バーをストリップ表示にすることができます。
※リストが表示されない場合
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>
<< 前へ | 次へ >> |