|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8" />
|
|
|
<title>快速定位</title>
|
|
|
<base href="/" />
|
|
|
<link rel="icon" type="image/png" href="favicon.png" />
|
|
|
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
|
|
|
<link rel="stylesheet" href="css/app.css" />
|
|
|
<script src="/plugs/holder/holder.min.js"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="sticky-top">
|
|
|
<img class="sticky-top" src="holder.js/100px100?theme=sky&text=黏着在顶部" alt="" />
|
|
|
</div>
|
|
|
<div class="card mt-3">
|
|
|
<div class="card-header .bg-dark-subtle">
|
|
|
<strong>快速定位: </strong>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
利用这些工具类快速设置元素的位置
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="card mt-3">
|
|
|
<div class="card-header .bg-dark-subtle">
|
|
|
<strong>固定在顶部: </strong>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
将一个元素固定在视口（viewport）的顶部且边缘对齐。使用之前请确保你充分了解了该定位对你的项目所带来的影响。你可能还需要添加额外的 CSS。
|
|
|
<div class="fixed-top">
|
|
|
<img src="holder.js/100x50?theme=sky&text=固定在顶部" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="card mt-3">
|
|
|
<div class="card-header .bg-dark-subtle">
|
|
|
<strong>固定在底部: </strong>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
将一个元素固定在视口（viewport）的底部且边缘对齐。使用之前请确保你充分了解了该定位对你的项目所带来的影响。你可能还需要添加额外的 CSS。
|
|
|
<div class="fixed-bottom">
|
|
|
<img src="holder.js/100x50?theme=sky&text=固定在底部" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="card mt-3">
|
|
|
<div class="card-header .bg-dark-subtle">
|
|
|
<strong>黏着在顶部 sticky: </strong>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
当页面滚动并经过某个元素之后，该元素被固定在视口（viewport）的顶部且边缘对齐。
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="card mt-3">
|
|
|
<div class="card-header .bg-dark-subtle">
|
|
|
<strong>黏着在底部 sticky: </strong>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
当页面滚动并经过某个元素之后，该元素被固定在视口（viewport）的顶部且边缘对齐。
|
|
|
<img class="card-body" data-src="holder.js/100px500?outline=yes">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="card mt-3">
|
|
|
<div class="card-header .bg-dark-subtle">
|
|
|
<strong>黏着在底部-响应式: </strong>
|
|
|
</div>
|
|
|
<div class="card-body">
|
|
|
支持响应式
|
|
|
<div class="sticky-sm-bottom">当视口（viewport）是 SM (small) 或更宽的尺寸时，黏着在视口（viewport）的底部</div>
|
|
|
<div class="sticky-md-bottom">当视口（viewport）是 MD (medium) 或更宽的尺寸时，黏着在视口（viewport）的底部</div>
|
|
|
<div class="sticky-lg-bottom">当视口（viewport）是 LG (large) 或更宽的尺寸时，黏着在视口（viewport）的底部</div>
|
|
|
<div class="sticky-xl-bottom">当视口（viewport）是 XL (extra-large) 或更宽的尺寸时，黏着在视口（viewport）的底部</div>
|
|
|
<div class="sticky-xxl-bottom">当视口（viewport）是 XXL (extra-extra-large) 或更宽的尺寸时，黏着在视口（viewport）的底部</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="sticky-bottom">
|
|
|
<img src="holder.js/100px100?theme=lava&text=黏着在底部" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script src="jquery/jquery-3.6.4.min.js"></script>
|
|
|
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
|
<script src="js/app.js"></script>
|
|
|
</body>
|
|
|
</html> |