h1, h2, p, img, ul{
margin:0;
}
body {
font-family: Arial, Verdana, sans-serif;
margin:0 auto;
width: 95%;
}
#header {
background: red;
}
#footer {
background: green;
}
#container {
}
#main {
background: orange;
}
#sub {
background: yellow;
}
#footerNavLink{
float: right;
}
#headerNav ul {
list-style: none;
overflow: hidden;
}
#headerNav li {
float: left;
width: 33%;
text-align: center;
}
img {
max-width: 100%;
}
.movie {
position: relative;
height: 0;
padding-top: 56.25%;
}
iframe {
height: 100%;
position: absolute;
left:0;
top:0;
width:100%;
}
/* スマホ */
#headerNav{
display: none;
}
/* タブレット */
@media screen and (min-width: 480px){
#footerNavLink {
display: none;
}
#headerNav{
display: block;
}
#footerNav {
display: none;
}
}
/* PC */
@media screen and (min-width: 768px){
#container {
overflow: hidden;
}
#main {
float: left;
width: 78.0612245%;
}
#sub {
float: right;
width: 20.4081633%;
}
}
Bootstrap tooltip, popover
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Bootstrap Practice</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="padding:20px 0">
<p><a href="#" data-toggle="tooltip" title="説明">this</a> and <a href="#" data-toggle="popover" title="説明" data-content="さらに説明">that</a>.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function(){
$("[data-toggle=tooltip]").tooltip({
placement: 'bottom'
});
$("[data-toggle=popover]").popover();
});
</script>
</body>
</html>
Bootstrap クリッカブルタブメニュー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Bootstrap Practice</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="padding:20px 0">
<ul class="nav nav-tabs" style="margin-bottom:15px">
<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">aboutだよ</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap modalウィンドウ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Bootstrap Practice</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="padding:20px 0">
<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">×</button>
<h4 class="modal-title">my modal</h4>
</div>
<div class="modal-body">
こんにちは！
</div>
<div class="modal-footer">
<button class="btn btn-primary">OK!</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap progress-bar
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Bootstrap Practice</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="padding:20px 0">
<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-info" style="width:60%"></div>
</div>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" style="width:30%"></div>
<div class="progress-bar progress-bar-primary" style="width:20%"></div>
<div class="progress-bar progress-bar-warning" style="width:10%"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap label, badge, alert, pannel
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Bootstrap Practice</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="padding:20px 0">
<p>product a <span class="label label-primary">NEW!</span></p>
<p>Inbox <span class="badge">5</span></p>
<p>Inbox <span class="badge"></span></p>
<div class="alert alert-info">
<button class="close" data-dismiss="alert">×</button>
おしらせ
</div>
<div class="panel panel-primary">
<div class="panel-heading">
お知らせ
</div>
<div class="panel-body">
こんにちは！
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap navbar レスポンシブル対応
トグルボタンを追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Bootstrap Practice</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".target">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">Hello world</a>
</div>
<div class="collapse navbar-collapse target">
<ul class="nav navbar-nav">
<li class="active"><a href="">link1</a></li>
<li><a href="">link2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="">link3</a></li>
</ul>
</div>
</nav>
<div class="container" style="padding:20px 0">
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap navbar
ヘッダー固定はnavbar-fixed-topのclassを追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Bootstrap Practice</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="">Hello world</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="">link1</a></li>
<li><a href="">link2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="">link3</a></li>
</ul>
</nav>
<div class="container" style="padding:20px 0">
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
bootstrap パン屑、pagination、pager
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Bootstrap Practice</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="padding:20px 0">
<ul class="breadcrumb">
<li><a href="">Home</a></li>
<li><a href="">User</a></li>
<li class="active">@walking</li>
</ul>
<ul class="pagination">
<li class="disabled"><a href="">«:</a></li>
<li class="active"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">»:</a></li>
</ul>
<ul class="pager">
<li class="previous"><a href="">前へ</a></li>
<li class="next"><a href="">次へ</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap dropdown menu
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Bootstrap Practice</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="padding:20px 0">
<div class="btn-group">
<button class="btn btn-primary">Action </span>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="">Action</a></li>
<li><a href="">Action</a></li>
<li class="divider"></li>
<li><a href="">Action</a></li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
