Twitter Bootstrap02

HTML （田中先生）

8 プログレスバー


HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Bootstrap 101 Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
<div class="container" style="padding:20px;">
  <div class="progress">
    <div class="progress-bar progress-bar-primary" style="width:60%;"></div>
  </div>
  <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-primary" style="width:60%;"></div>
  </div>
</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

9 プログレスバー2


HTML（内のみ）

<div class="container" style="padding:20px;">
  <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info" style="width:40%;"></div>
    <div class="progress-bar progress-bar-primary" style="width:30%;"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%;"></div>
  </div>
</div>

10 モーダルウィンドー


HTML（内のみ）

<div class="container" style="padding:20px;">
  <a data-toggle="modal" href="#myModal" class="btn btn-primary">Show me!</a>
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
           <button class="close" data-dismiss="modal">&times;</button>
           <h4 class="modal-title">My Modal</h4>
         </div><!--modal header-->
         <div class="modal-body">こんにちは！</div>
         <div class="modal-footer">tanaka.com</div>
      </div><!--modal content-->
    </div><!--modal content-->
  </div><!--modal fade-->
</div><!-- container-->

11 パンくずリストとページネーション


HTML（内のみ）

<div class="container" style="padding:20px;">
  <ul class="breadcrumb">
    <li><a href="#">Top</a></li>
    <li><a href="#">Users</a></li>
    <li class="active">Member</li>
  </ul><!--breadcrumb-->
  <ul class="pagination">
    <li class="disabled"><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">壱</a></li>
    <li><a href="#">弐</a></li>
    <li><a href="#">参</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul><!--pagination-->
  <ul class="pager">
    <li class="previous"><a href="#">前へ</a></li>
    <li class="next"><a href="#">次へ</a></li>
  </ul>
</div><!--container-->

12 ラベルとパネル


HTML（内のみ）

<div class="container" style="padding:20px;">
  <p>Product A&nbsp;<span class="label label-primary">NEW!</span></p>
  <p>Inbox&nbsp;<span class="badge">5</span></p>
  <div class="alert alert-info">
    <button class="close" data-dismiss="alert">&times;</button>お知らせ！
  </div>
  <div class="panel panel-primary">
    <div class="panel-heading">
      <button class="close" data-dismiss="alert">&times;</button>お知らせ
    </div>
    <div class="panel-body">春物入荷しました！</div>
  </div>
</div><!--container-->

13 タブパネル


HTML（内のみ）

<div class="container" style="padding:20px;">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#about" data-toggle="tab">About</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="home">ホーム</div>
    <div class="tab-pane" id="about">アバウト</div>
  </div><!--tab content-->
</div><!--container-->

14 ツールチップ


HTML（内のみ）

<div class="container" style="padding:20px;">
<p><a href="#" data-toggle="tooltip" title="説明">this</a>and<a href="#" data-toggle="popover" title="説明" data-content="さらに説明">that</a></p>
</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
<script>
$(function(){
  $("[data-toggle=tooltip]").tooltip({
  placement:'bottom'
  });
  $("[data-toggle=popover]").popover({});
});
</script>

テンプレート

Bootswatch
StyleBootstrap
FLATSTRAP