96's blog

WEBサイト制作科　６ヶ月コース

Twitter Bootstrap02

HTML 田中先生

8 プログレスバー

f:id:webtm2013:20131126101405p:image

HTML

<!DOCTYPE html>
<htmllang="ja">
  <head>
<title>Bootstrap 101 Template</title>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<linkhref="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>
<divclass="container"style="padding:20px;">
  <divclass="progress">
    <divclass="progress-bar progress-bar-primary"style="width:60%;"></div>
  </div>
  <divclass="progress progress-striped active">
    <divclass="progress-bar progress-bar-primary"style="width:60%;"></div>
  </div>
</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <scriptsrc="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <scriptsrc="js/bootstrap.min.js"></script>
  </body>
</html>

9 プログレスバー2

f:id:webtm2013:20131126101406p:image

HTML（<body>内のみ）

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

10 モーダルウィンドー

f:id:webtm2013:20131126101407p:image

HTML（<body>内のみ）

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

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

f:id:webtm2013:20131126102344p:image

HTML（<body>内のみ）

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

12 ラベルとパネル

f:id:webtm2013:20131126102345p:image

HTML（<body>内のみ）

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

13 タブパネル

f:id:webtm2013:20131126111419p:image

HTML（<body>内のみ）

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

 

14 ツールチップ

f:id:webtm2013:20131126111420p:image

HTML（<body>内のみ）

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

テンプレート

Bootswatch

StyleBootstrap

FLATSTRAP