Bootstrap4 基础教程

الأدوات الصغيرة في Bootstrap4 نافذة الإعلام في Bootstrap4

مراقبة التمرير في Bootstrap4

滚动监听(Scrollspy)插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。

如何创建滚动监听

以下示例演示了如何创建滚动监听：

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
　　<style>
　　body {
　　　　　　position: relative;　
　　}
　　</style>
</head>

　　
　　
　　　　<li class="nav-item">
　　　　　　Section　1
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#section2">قسم 2</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="#section3">قسم 3</a>
　　　　</li>
　　　　<li class="nav-item dropdown">
　　　　　　
　　　　　　　　Section　4
　　　　　　
　　　　　　<div class="dropdown-menu">
　　　　　　　　<a class="dropdown-item" href="#section41">رابط 1</a>
　　　　　　　　<a class="dropdown-item" href="#section42">رابط 2</a>
　　　　　　</div>
　　　　</li>
　　</ul>
</nav>

　　<h1>القسم 1</h1>
　　<p>جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير! جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير!</p>
　　<p>جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير! جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير!</p>
</div>

　　<h1>القسم 2</h1>
　　<p>جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير! جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير!</p>
　　<p>جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير! جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير!</p>
</div>

　　<h1>القسم 3</h1>
　　<p>جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير! جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير!</p>
　　<p>جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير! جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير!</p>
</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
　　<h1>المقطع 4 القائمة الفرعية 1</h1>
　　<p>جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير! جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير!</p>
　　<p>جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير! جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير!</p>
</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
　　<h1>المقطع 4 القائمة الفرعية 2</h1>
　　<p>جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير! جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير!</p>
　　<p>جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير! جرب تمرير هذا الجزء وانتظر النقر في القائمة التوجيهية أثناء التمرير!</p>
</div>
</body>
</html>

التحقق من التشغيل ‹/›

النتيجة بعد التشغيل كالتالي:

تفسير المثال

أضف data-spy="scroll" إلى العنصر الذي تريد مراقبة التمرير فيه (عادةً الجسم).

ثم أضف خاصية data-target، يكون قيمتها id أو class (.navbar) من القائمة التوجيهية. بهذا يمكن ربطها بالمنطقة القابلة للتمرير.

لاحظ الخاصية id على العنصر القابل للتمرير (<div id="section1">) يجب أن يتطابق مع خيار رابط القائمة التوجيهية (<a href="#section1">).

خيار data-offset يمكن استخدامه لتحديد موقع التمرير، وكمية التباعد من الأعلى بالبكسل. المبدئي هو 10 px.

تعيين التثبيت النسبي: استخدام data-spy="scroll" العنصر يجب أن يحتوي على CSS الإعداد يجب أن يتم تعيين الخاصية إلى "relative" حتى يعمل.

في هذا المثال تم تعيين مراقبة التمرير العمودي:

مثال

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
　　<style>
　　body {
　　　　　　position: relative;
　　}
　　ul.nav-pills {
　　　　　　top: 20px;
　　　　　　position: fixed;
　　}
　　div.col-8 div {
　　　　　　height: 500px;
　　}
　　</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="container-fluid">
　　<div class="row">
　　　　<nav class="col-sm-3 col-4" id="myScrollspy">
　　　　　　<ul class="nav nav-pills flex-column">
　　　　　　　　<li class="nav-item">
　　　　　　　　　　<a class="nav-link active" href="#section1">قسم 1</a>
　　　　　　　　</li>
　　　　　　　　<li class="nav-item">
　　　　　　　　　　<a class="nav-link" href="#section2">قسم 2</a>
　　　　　　　　</li>
　　　　　　　　<li class="nav-item">
　　　　　　　　　　<a class="nav-link" href="#section3">قسم 3</a>
　　　　　　　　</li>
　　　　　　　　<li class="nav-item dropdown">
　　　　　　　　　　<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">قسم 4</a>
　　　　　　　　　　<div class="dropdown-menu">
　　　　　　　　　　　　<a class="dropdown-item" href="#section41">رابط 1</a>
　　　　　　　　　　　　<a class="dropdown-item" href="#section42">رابط 2</a>
　　　　　　　　　　</div>
　　　　　　　　</li>
　　　　　　</ul>
　　　　</nav>
　　　　<div class="col-sm-9 col-8">
　　　　　　<div id="section1" class="bg-success">　　　　
　　　　　　　　<h1>القسم 1</h1>
　　　　　　　　<p>تجربة التمرير لهذا الجزء والنظر في قائمة التنقل عند التمرير!</p>
　　　　　　</div>
　　　　　　<div id="section2" class="bg-warning">　
　　　　　　　　<h1>القسم 2</h1>
　　　　　　　　<p>تجربة التمرير لهذا الجزء والنظر في قائمة التنقل عند التمرير!</p>
　　　　　　</div>　　　　　　　　
　　　　　　<div id="section3" class="bg-secondary">　　　　　　　　　
　　　　　　　　<h1>القسم 3</h1>
　　　　　　　　<p>تجربة التمرير لهذا الجزء والنظر في قائمة التنقل عند التمرير!</p>
　　　　　　</div>
　　　　　　<div id="section41" class="bg-danger">　　　　　　　　　
　　　　　　　　<h1>القسم 4-1</h1>
　　　　　　　　<p>تجربة التمرير لهذا الجزء والنظر في قائمة التنقل عند التمرير!</p>
　　　　　　</div>　　　　　　
　　　　　　<div id="section42" class="bg-info">　　　　　　　　　
　　　　　　　　<h1>القسم 4-2</h1>
　　　　　　　　<p>تجربة التمرير لهذا الجزء والنظر في قائمة التنقل عند التمرير!</p>
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>

التحقق من التشغيل ‹/›

النتيجة بعد التشغيل كالتالي:

الأدوات الصغيرة في Bootstrap4 نافذة الإعلام في Bootstrap4