English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل الأساسيات لـ Bootstrap

مكتبات Bootstrap

مكتبة Bootstrap للتحكم في التمرير (Scrollspy)

مكتبة الاستماع إلى التمرير (Scrollspy) التي تحدث تلقائيًا النافذة التوجيهية بناءً على موقع شريط التمرير، إنها تحدث أساسًا بناءً على موقع شريط التمرير، إضافة إلى القائمة التوجيهية بناءً على موقع شريط التمرير. .active class.

إذا كنت ترغب في الاستعانة بمكتبة هذا المكون بشكل مستقل، فإنك بحاجة إلى استدعاء scrollspy.js، أو كما في نظرة عامة على مكتبات Bootstrap كما ذكر في الفصل bootstrap.js أو النسخة المضغوطة bootstrap.min.js。

الاستخدام

يمكنك إضافة سلوك الاستماع إلى التمرير إلى القائمة التوجيهية العلوية:

  • باستخدام خاصية dataإلى العنصر الذي تريد الاستماع إليه (عادةً هو الجسم) data-spy="scroll"ثم أضف إلى النافذة الموجودة .nav ID أو خاصية class للعنصر الوالدي للعنصر data-target، لضمان عمله بشكل صحيح، يجب أن تكون هناك عناصر مطابقة لـ ID أو class التي تريد الاستماع إليها في主体 الصفحة.

    <body data-spy="scroll" data-target=".navbar-example">
...
<div>
　　　　<ul>
　　　　　　　　...
　　　　</ul>
</div>
...
</body>

  • باستخدام JavaScript：يمكنك إجراء استدعاء الاستماع إلى التمرير باستخدام JavaScript، اختيار العنصر الذي تريد الاستماع إليه، ثم إجراء .scrollspy() دالة:

    $('body').scrollspy({ target: '.navbar-example' })

مثال على الخط

مثال أدناه يوضح كيفية استخدام مكتبة الاستماع إلى التمرير (Scrollspy) عبر خاصية data:

مثال على الخط

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - ملحق مراقبة التمرير (Scrollspy)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
	<div class="container-fluid">　
		<div class="navbar-header">
			<button　class="navbar-toggle"　type="button"　data-toggle="collapse"　
					data-target=".bs-js-navbar-scrollspy">
				<span　class="sr-only">تبديل التوجيه</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a　class="navbar-brand"　href="#">الاسم التعليمي</a>
		</div>
		<div　class="collapse　navbar-collapse　bs-js-navbar-scrollspy">
			<ul class="nav navbar-nav">
				<li><a href="#ios">iOS</a></li>
				<li><a　href="#svn">SVN</a></li>
				<li class="dropdown">
					<a　href="#"　id="navbarDrop1"　class="dropdown-toggle"　
					　　　data-toggle="dropdown">Java
						<b　class="caret"></b>
					</a>
					<ul　class="dropdown-menu"　role="menu"　
						aria-labelledby="navbarDrop1">
						<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
						<li><a href="#ejb" tabindex="-1">ejb</a></li>
						<li class="divider"></li>
						<li><a href="#spring" tabindex="-1">spring</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>　
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"　
	　style="height:200px;overflow:auto; position: relative;">
	<h4 id="ios">iOS</h4>
	<p>iOS هو نظام تشغيل الهاتف المحمول الذي طورته وأصدرته شركة Apple. تم إطلاقه لأول مرة في عام 2007 مع iPhone، iPod Touch و Apple</p>　
		TV. تمت توليد iOS من OS X، ويشاركان في الأساس Darvin. يتم استخدام نظام التشغيل OS X على أجهزة Apple، ويتم استخدام iOS كإصدار محمول من Apple.
	</p>
	<h4 id="svn">SVN</h4>
	<p>Apache Subversion، غالباً ما يتم اختصاره بـ SVN، هو نظام تحكم بال نسخ مفتوح المصدر. تم إنشاء Subversion من قبل شركة CollabNet في عام 2000. ولكن الآن قد أصبح مشروعًا لـ Apache Software Foundation، ولديه مجتمع كبير من المطورين والمستخدمين.
	</p>
	<h4 id="jmeter">jMeter</h4>
	<p>jMeter هو برنامج اختبار مفتوح المصدر. وهو تطبيق Java 100% نظيف، يُستخدم لاختبار التحميل والأداء.
	</p>
	<h4 id="ejb">EJB</h4>
	<p>Enterprise Java Beans (EJB) هي أرشيتكتور لتطوير تطبيقات شركات قوية وسريعة التوسع، وتتم استضافة هذه الأرشيتكتور على J2EE المتوافق مع خادم التطبيقات (مثل JBOSS، Web Logic وما إلى ذلك).
	</p>
	<h4 id="spring">Spring</h4>
	<p>يعد إطار Spring إطاراً مفتوح المصدر لمنصة Java، يقدم دعمًا شاملاً للبنية التحتية لتطوير تطبيقات Java قوية ومتقدمة.
	</p>
	<p>تم كتابة إطار Spring الأصلي بواسطة Rod Johnson، وأصدرته لأول مرة في يونيو 2003 تحت رخصة Apache 2.0.
	</p>
</div>
</body>
</html>
تجربة النظر في هذا الجزء وتحريكه للحصول على عرض قائمة التوجيه!

النتيجة كما ترون

الخيارات

تتاح هذه الخيارات من خلال خاصية البيانات باستخدام JavaScript. في الجدول التالي تمت ترجمة هذه الخيارات:

اسم الخيارنوع/قيمة افتراضيةاسم خاصية البياناتالوصف
التفاوترقم
قيمة افتراضية: 10		data-offsetعند حساب موقع التمرير، الفرق في البكسل من أعلى.

الطريقة

.scrollspy('refresh')عندما يتم استدعاء طريقة scrollspy باستخدام JavaScript، يجب عليك استدعاء .refresh الطريقة لتحديث DOM. هذا مفيد جدًا عند تغيير DOM (أي، عند إضافة أو إزالة بعض العناصر). إليك بنية استخدام هذه الطريقة.

$('[data-spy="scroll"]').each(function () {
　　var $spy = $(this).scrollspy('refresh')
});

مثال على الخط

في هذا المثال، يُظهر: .scrollspy('refresh') استخدام الطريقة:

مثال على الخط

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>مثال Bootstrap - طرق أداة التتبع في التمرير (Scrollspy) البرنامج المساعد</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav　id="myScrollspy"　class="navbar　navbar-default　navbar-static"　role="navigation">
	<div class="container-fluid">　
		<div class="navbar-header">
			<button　class="navbar-toggle"　type="button"　data-toggle="collapse"　
					data-target=".bs-js-navbar-scrollspy">
				<span　class="sr-only">تبديل التوجيه</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a　class="navbar-brand"　href="#">الاسم التعليمي</a>
		</div>
		<div　class="collapse　navbar-collapse　bs-js-navbar-scrollspy">
			<ul class="nav navbar-nav">
				<li　class="active"><a　href="#ios">iOS</a></li>
				<li><a　href="#svn">SVN</a></li>
				<li class="dropdown">
					<a　href="#"　id="navbarDrop1"　class="dropdown-toggle"　
					　　　data-toggle="dropdown">Java　
						<b　class="caret"></b>
					</a>
					<ul　class="dropdown-menu"　role="menu"　
						aria-labelledby="navbarDrop1">
						<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
						<li><a href="#ejb" tabindex="-1">ejb</a></li>
						<li class="divider"></li>
						<li><a href="#spring" tabindex="-1">spring</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0"　
	　style="height:200px;overflow:auto; position: relative;">
	<div class="section">
		<h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);">
			× إزالة هذا الجزء</a></small>
		</h4>
		<p>iOS هو نظام تشغيل الهاتف المحمول الذي طورته وأصدرته شركة Apple. تم إطلاقه لأول مرة في عام 2007 مع iPhone، iPod Touch و Apple</p>　
			TV. iOS تنحدر من OS X، وتتشارك في Darwin الأساسي. يتم استخدام نظام التشغيل OS X على أجهزة Apple، بينما iOS هو النسخة المحمولة لـ Apple.</p>
	</div>
	<div class="section">
		<h4 id="svn">SVN<small></small></h4>
		<p>Apache Subversion، المعروفة أيضًا بـ SVN، هي نظام إدارة إصدارات مفتوح المصدر. تم إنشاء Subversion من قبل شركة CollabNet في عام 2000. ولكنها أصبحت الآن مشروعًا لـ Apache Software Foundation، مما يعني أنها تحتوي على مجتمع كبير من المطورين والمستخدمين.</p>
	</div>
	<div class="section">
		<h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
			× إزالة هذا الجزء</a></small>
		</h4>
		<p>jMeter هو برنامج اختبار مفتوح المصدر. إنه تطبيق Java 100% خالٍ، يستخدم لاختبار التحميل أداء.</p>
	</div>
	<div class="section">
		<h4 id="ejb">EJB</h4>
		<p>Enterprise Java Beans (EJB) هو بنية تحتية لتطوير تطبيقات تجارية قوية ومتاحة على نطاق واسع، يتم نشرها على J2EE التي تتوافق مع خادم التطبيقات (مثل JBOSS، Web Logic، إلخ).</p>
	</div>
	<div class="section">
		<h4 id="spring">Spring</h4>
		<p>يقدم إطار Spring دعمًا كاملاً للبنية التحتية المطلوبة لتطوير تطبيقات Java قوية بسرعة.</p>
		<p>أولى إصدارات إطار Spring كانت مكتوبة من قبل Rod Johnson، وأصدرت لأول مرة في يونيو 2003 تحت رخصة Apache 2.0.</p>
	</div>
</div>
<script type="text/javascript">
	$(function() {
		removeSection = function(e) {
			$(".section").parents(e).remove();
			$('[data-spy="scroll"]').each(function () {
				var $spy = $(this).scrollspy('refresh')
				});
		}
		$("#myScrollspy").scrollspy();
});
</script>
</body>
</html>
تجربة النظر في هذا الجزء وتحريكه للحصول على عرض قائمة التوجيه!

النتيجة كما ترون

الحدث

في الجدول أدناه، يُظهر الحدث الذي سيُستخدم في التتبع في التمرير. يمكن استخدام هذه الأحداث كعوامل في الدوال.

الحدثالوصفمثال
activate.bs.scrollspyتُطلق هذه الحدث عند تفعيل مشروع جديد من خلال التتبع في التمرير.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
　　//　ت�行 بعض الأفعال...
});

مثال على الخط

في هذا المثال، يُظهر: activate.bs.scrollspy استخدام الحدث:

مثال على الخط

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>مثال Bootstrap - أداة التتبع في التمرير (Scrollspy) أحداث البرنامج المساعد</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav　id="myScrollspy"　class="navbar　navbar-default　navbar-static"　role="navigation">
	<div class="container-fluid">　
		<div class="navbar-header">
			<button　class="navbar-toggle"　type="button"　data-toggle="collapse"　
					data-target=".bs-js-navbar-scrollspy">
				<span　class="sr-only">تبديل التوجيه</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a　class="navbar-brand"　href="#">الاسم التعليمي</a>
		</div>
		<div　class="collapse　navbar-collapse　bs-js-navbar-scrollspy">
			<ul class="nav navbar-nav">
				<li　class="active"><a　href="#ios">iOS</a></li>
				<li><a　href="#svn">SVN</a></li>
				<li class="dropdown">
					<a　href="#"　id="navbarDrop1"　class="dropdown-toggle"　
					　　　data-toggle="dropdown">
						Java　<b　class="caret"></b>
					</a>
					<ul　class="dropdown-menu"　role="menu"　
						aria-labelledby="navbarDrop1">
						<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
						<li><a href="#ejb" tabindex="-1">ejb</a></li>
						<li class="divider"></li>
						<li><a href="#spring" tabindex="-1">spring</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0"　
	　style="height:200px;overflow:auto; position: relative;">
	<div class="section">
		<h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);">
			× إزالة هذا الجزء</a></small>
		</h4>
		<p>iOS هو نظام تشغيل الهاتف المحمول الذي طورته وأصدرته شركة Apple. تم إطلاقه لأول مرة في عام 2007 مع iPhone، iPod Touch و Apple</p>　
			TV. iOS تنحدر من OS X، وتتشارك في Darwin الأساسي. يتم استخدام نظام التشغيل OS X على أجهزة Apple، بينما iOS هو النسخة المحمولة لـ Apple.</p>
	</div>
	<div class="section">
		<h4 id="svn">SVN<small></small></h4>
		<p>Apache Subversion، المعروفة أيضًا بـ SVN، هي نظام إدارة إصدارات مفتوح المصدر. تم إنشاء Subversion من قبل شركة CollabNet في عام 2000. ولكنها أصبحت الآن مشروعًا لـ Apache Software Foundation، مما يعني أنها تحتوي على مجتمع كبير من المطورين والمستخدمين.</p>
	</div>
	<div class="section">
		<h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
			× إزالة هذا الجزء</a></small>
		</h4>
		<p>jMeter هو برنامج اختبار مفتوح المصدر. إنه تطبيق Java 100% خالٍ، يستخدم لاختبار التحميل أداء.</p>
	</div>
	<div class="section">
		<h4 id="ejb">EJB</h4>
		<p>Enterprise Java Beans (EJB) هو بنية تحتية لتطوير تطبيقات تجارية قوية ومتاحة على نطاق واسع، يتم نشرها على J2EE التي تتوافق مع خادم التطبيقات (مثل JBOSS، Web Logic، إلخ).</p>
	</div>
	<div class="section">
		<h4 id="spring">Spring</h4>
		<p>يقدم إطار Spring دعمًا كاملاً للبنية التحتية المطلوبة لتطوير تطبيقات Java قوية بسرعة.</p>
		<p>أولى إصدارات إطار Spring كانت مكتوبة من قبل Rod Johnson، وأصدرت لأول مرة في يونيو 2003 تحت رخصة Apache 2.0.</p>
	</div>
</div>
<span id="activeitem" style="color:red;"></span>
<script type="text/javascript">
	$(function() {
		removeSection = function(e) {
			$(".section").parents(e).remove();
			$('[data-spy="scroll"]').each(function () {
				var $spy = $(this).scrollspy('refresh')
				});
		}
		$("#myScrollspy").scrollspy();
		$('#myScrollspy').on('activate.bs.scrollspy', function () {
			var currentItem = $(".nav li.active > a").text();
			$("#activeitem").html("كنتم تشاهدون حاليًا - " + currentItem);
		});
});
</script>
</body>
</html>
تجربة النظر في هذا الجزء وتحريكه للحصول على عرض قائمة التوجيه!

النتيجة كما ترون

مزيد من الأمثلة

إنشاء مراقبة التمرير الأفقي

هذا المثال يوضح كيفية إنشاء مراقبة التمرير الأفقي:

مثال على الخط

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
		body {
			position: relative;　
		}
		#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
		#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
		#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
		#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
		#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
	</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>　　　　　　　　　　　　　　　　　　　　　　　　
			</button>
			<a class="navbar-brand" href="#">اسم الموقع</a>
		</div>
		<div>
			<div class="collapse navbar-collapse" id="myNavbar">
				<ul class="nav navbar-nav">
					<li><a href="#section1">المقطع 1</a></li>
					<li><a href="#section2">قسم 2</a></li>
					<li><a href="#section3">قسم 3</a></li>
					<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">المقطع 4 <span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="#section41">قسم 4-1</a></li>
							<li><a href="#section42">قسم 4-2</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</nav>　　　　
<div id="section1" class="container-fluid">
	<h1>قسم 1</h1>
	<p>جرب تمزيق هذا الجزء وأنت تشاهد لوحة التوجيه عند التمرير! جرب تمزيق هذا الجزء، وأنت تشاهد لوحة التوجيه عند التمرير!</p>
	<p>جرب تمزيق هذا الجزء وأنت تشاهد لوحة التوجيه عند التمرير! جرب تمزيق هذا الجزء، وأنت تشاهد لوحة التوجيه عند التمرير!</p>
	</div>
	<div id="section2" class="container-fluid">
		<h1>قسم 2</h1>
		<p>جرب تمزيق هذا الجزء وأنت تشاهد لوحة التوجيه عند التمرير! جرب تمزيق هذا الجزء، وأنت تشاهد لوحة التوجيه عند التمرير!</p>
		<p>جرب تمزيق هذا الجزء وأنت تشاهد لوحة التوجيه عند التمرير! جرب تمزيق هذا الجزء، وأنت تشاهد لوحة التوجيه عند التمرير!</p>
	</div>
	<div id="section3" class="container-fluid">
		<h1>القسم 3</h1>
		<p>جرب تمزيق هذا الجزء وأنت تشاهد لوحة التوجيه عند التمرير! جرب تمزيق هذا الجزء، وأنت تشاهد لوحة التوجيه عند التمرير!</p>
		<p>جرب تمزيق هذا الجزء وأنت تشاهد لوحة التوجيه عند التمرير! جرب تمزيق هذا الجزء، وأنت تشاهد لوحة التوجيه عند التمرير!</p>
	</div>
	<div id="section41" class="container-fluid">
		<h1>القسم 4 - القائمة الفرعية 1</h1>
		<p>جرب تمزيق هذا الجزء وأنت تشاهد لوحة التوجيه عند التمرير! جرب تمزيق هذا الجزء، وأنت تشاهد لوحة التوجيه عند التمرير!</p>
		<p>جرب تمزيق هذا الجزء وأنت تشاهد لوحة التوجيه عند التمرير! جرب تمزيق هذا الجزء، وأنت تشاهد لوحة التوجيه عند التمرير!</p>
	</div>
	<div id="section42" class="container-fluid">
		<h1>القسم 4 - القائمة الفرعية 2</h1>
		<p>جرب تمزيق هذا الجزء وأنت تشاهد لوحة التوجيه عند التمرير! جرب تمزيق هذا الجزء، وأنت تشاهد لوحة التوجيه عند التمرير!</p>
		<p>جرب تمزيق هذا الجزء وأنت تشاهد لوحة التوجيه عند التمرير! جرب تمزيق هذا الجزء، وأنت تشاهد لوحة التوجيه عند التمرير!</p>
</div>
</body>
</html>
تجربة النظر في هذا الجزء وتحريكه للحصول على عرض قائمة التوجيه!

كيفية إنشاء ماسح تمرير عمودي

توضيح كيفية إنشاء ماسح تمرير عمودي:

مثال على الخط

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>مثال Bootstrap</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
		body {
			position: relative;
		}
		ul.nav-pills {
			top: 20px;
			position: fixed;
		}
		div.col-sm-9 div {
			height: 250px;
			font-size: 28px;
		}
		#القسم1 {color: #fff; background-color: #1E88E5;}
		#القسم2 {color: #fff; background-color: #673ab7;}
		#القسم3 {color: #fff; background-color: #ff9800;}
		#القسم41 {color: #fff; background-color: #00bcd4;}
		#section42 {color: #fff; background-color: #009688;}
		@media screen and (max-width: 810px) {
			#section1, #section2, #section3, #section41, #section42 {
				margin-left: 150px;
			}
		}
	</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
	<div class="row">
		<nav class="col-sm-3" id="myScrollspy">
			<div class="container-fluid">　
			<div class="container-fluid">　
			<ul class="nav nav-pills nav-stacked">
				<li class="active"><a href="#section1">قسم 1</a></li>
				<li><a href="#section2">قسم 2</a></li>
				<li><a href="#section3">قسم 3</a></li>
				<li class="dropdown">
					<a class="dropdown-toggle" data-toggle="dropdown" href="#">قسم 4 <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#section41">قسم 4-1</a></li>
						<li><a href="#section42">قسم 4-2</a></li>　　　　　　　　　　　　　　　　　　　　　
					</ul>
				</li>
			</ul>
			</div>	
			</div>		
		</nav>
		<div class="col-sm-9">
			<div id="section1">　　　　
				<h1>قسم 1</h1>
				<p>جرب التمرير في هذا الجزء واطلع على قائمة التوجيه أثناء التمرير!</p>
			</div>
			<div id="section2">　
				<h1>قسم 2</h1>
				<p>جرب التمرير في هذا الجزء واطلع على قائمة التوجيه أثناء التمرير!</p>
			</div>　　　　　　　　
			<div id="section3">　　　　　　　　　
				<h1>القسم 3</h1>
				<p>جرب التمرير في هذا الجزء واطلع على قائمة التوجيه أثناء التمرير!</p>
			</div>
			<div id="section41">　　　　　　　　　
				<h1>القسم 4-1</h1>
				<p>جرب التمرير في هذا الجزء واطلع على قائمة التوجيه أثناء التمرير!</p>
			</div>　　　　　　
			<div id="section42">　　　　　　　　　
				<h1>القسم 4-2</h1>
				<p>جرب التمرير في هذا الجزء واطلع على قائمة التوجيه أثناء التمرير!</p>
			</div>
		</div>
	</div>
</div>
</body>
</html>
تجربة النظر في هذا الجزء وتحريكه للحصول على عرض قائمة التوجيه!
ملحق علامات الصفحة Bootstrapملحق قائمة منسدلة Bootstrap