<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap</title>
<style type="text/css">
div.d1{
padding-top:70px;
}
</style>
</head>
<body>
<script src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap/3.3.6/bootstrap.min.css">
<script src="bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="d1" style="width:800px;margin:20px">
<nav class="navbar navbar-default navbar-fixed-top"><!--贴在顶部不会消失-->
<button class="btn btn-info">按钮1</button>
<button class="btn btn-success">按钮2</button>
<button class="btn btn-danger">按钮3</button>
</nav>
<div style="white-space:pre">
内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容
</div>
<nav class="navbar navbar-default navbar-static-top"><!--贴在顶部会消失-->
<button class="btn btn-info">按钮1</button>
<button class="btn btn-success">按钮2</button>
<button class="btn btn-danger">按钮3</button>
</nav>
<div style="white-space:pre">
内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容
</div>
<div style="white-space:pre">
内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容
</div>
<nav class="navbar navbar-default navbar-fixed-bottom"><!--贴在底部,不会消失-->
<div style="text-align:center">版权所有</div>
</nav>
</div>
</body>
</html>
bootstrap贴在顶部、底部
最新推荐文章于 2022-03-15 17:49:34 发布