|
|||||||||
bootstrap3 の変更点
#author("2017-07-05T02:20:50+00:00","default:pentacle","pentacle")
* テンプレ [#r81b79a5]
参考にさせていただきました。
http://qiita.com/zaburo/items/e5b8c51873b193bb1573
- 非レスポンシブ
- nav/footer 有り
最下位 footer をつけたい場合
http://blog.webcreativepark.net/sample/js/36/footerFixed.js
#pre{{
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SiteName</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="footerFixed.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#footer {
background-color: #aaa;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<!-- navbar -->
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<a href="" class="navbar-brand">SiteName</a>
</div>
<ul class="nav navbar-nav">
</ul>
</nav>
</div>
<div class="row" style="padding: 80px 0 0 0">
<div class="col-xs-4">left</div>
<div class="col-xs-4">middle</div>
<div class="col-xs-4">right</div>
</div>
<div class="row" style="padding: 80px 0 0 0">
<div class="col-xs-4">left</div>
<div class="col-xs-4">middle</div>
<div class="col-xs-4">right</div>
</div>
</div>
<!-- footer -->
<div id="footer">© 2017 ABC Corp inc.</div>
</body>
</html>
}}
|
|||||||||