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

إضافات Bootstrap

ملحق مراقبة التمريرBootstrap ملحق النافذة العدوانيةBootstrap

إضافة القائمة المنسدلة (Dropdown) لـ Bootstrap

قائمة منسدلة Bootstrap يشرح هذا الفصل القائمة المنسدلة ولكن لا يتناول الجزء التفاعلي، وسنتحدث في هذا الفصل عن تفاعل القائمة المنسدلة. باستخدام إضافة القائمة المنسدلة (Dropdown)، يمكنك إضافة قائمة منسدلة إلى أي عنصر (مثل قائمة التوجيه، أو الوسائط المتعددة، أو قائمة الكبسولة، أو الأزرار، وما إلى ذلك).

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

طريقة الاستخدام

يمكنك تغيير المحتوى المخفي لمكونات القائمة المنسدلة (Dropdown):

من خلال خصائص data：إضافة data-toggle="dropdown" للتغيير القائمة المنسدلة، كما يلي:

<div>
　　<a　data-toggle="dropdown"　href="#">مؤشر القائمة المنسدلة (Dropdown)</a>
　　<ul role="menu" aria-labelledby="dLabel">
　　　　...
　　</ul>
</div>

إذا كنت بحاجة إلى الحفاظ على روابطك كاملة (في حالة عدم تشغيل JavaScript في المتصفح)، استخدم data-target 属性代替 href="#"：

<div>
　　<a　id="dLabel"　role="button"　data-toggle="dropdown"　data-target="#"　href="/page.html">
　　　　قائمة التوسع (Dropdown) <span></span>
　　</a>
　　<ul role="menu" aria-labelledby="dLabel">
　　　　...
　　</ul>
</div>

من خلال JavaScriptلتمكين تشغيل قائمة التوسع عن طريق JavaScript، استخدم الطريقة التالية:
```
$('.dropdown-toggle').dropdown()
```

مثال آنلاین

داخل شريط التوجيه

في هذا المثال، يتم عرض استخدام قائمة التوسع داخل شريط التوجيه:

مثال آنلاین

مثال

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - شريط التوجيه الافتراضي</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 class="navbar navbar-default" role="navigation">
	<div class="container-fluid">　
	<div class="navbar-header">
		<a class="navbar-brand" href="#">موقع تعليم أساسي</a>
	</div>
	<div>
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">iOS</a></li>
			<li><a href="#">SVN</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					Java　
					<b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
					<li><a href="#">jmeter</a></li>
					<li><a href="#">EJB</a></li>
					<li><a href="#">تقرير Jasper</a></li>
					<li class="divider"></li>
					<li><a href="#">روابط منفصلة</a></li>
					<li class="divider"></li>
					<li><a href="#">روابط منفصلة أخرى</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
</nav>
</body>
</html>

الاختبار لرؤية‹/›

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

داخل علامات التبويب

في هذا المثال، يتم عرض استخدام قائمة التوسع داخل علامات التبويب:

مثال آنلاین

مثال

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - علامات التبويب مع قائمة التوسع</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>
<p>علامات التبويب مع قائمة التوسع</p>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">الصفحة الرئيسية</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			Java <span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="#">Swing</a></li>
			<li><a href="#">jMeter</a></li>
			<li><a href="#">EJB</a></li>
			<li class="divider"></li>
			<li><a href="#">روابط منفصلة</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

الاختبار لرؤية‹/›

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

الخيارات

لا توجد خيارات.

الطريقة

يوجد طريقة بسيطة لتشغيل أو إخفاء قائمة التوسع.

$().dropdown('toggle')

مثال آنلاین

في هذا المثال، يتم عرض استخدام طريقة قائمة التوسع (Dropdown) لـ مكتبة المكونات المدمجة:

مثال آنلاین

مثال

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>مثال Bootstrap - طريقة ملحق القائمة المنسدلة (Dropdown)</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 class="navbar navbar-default" role="navigation">
	<div class="container-fluid">　
	<div class="navbar-header">
		<a class="navbar-brand" href="#">موقع تعليم أساسي</a>
	</div>
	<div id="myexample">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">iOS</a></li>
			<li><a href="#">SVN</a></li>
			<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">جافا <b class="caret"></b></a></li>
				<ul class="dropdown-menu">
					<li><a id="action-1" href="#">مقياس</a></li>
					<li><a href="#">EJB</a></li>
					<li><a href="#">تقرير Jasper</a></li>
					<li class="divider"></li>
					<li><a href="#">روابط منفصلة</a></li>
					<li class="divider"></li>
					<li><a href="#">روابط منفصلة أخرى</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>	
</nav>
<script>
$(function(){
	// الافتراضي عرض
	$(".dropdown-toggle").dropdown('toggle');
});　
</script>
</body>
</html>

الاختبار لرؤية‹/›

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

ملحق مراقبة التمريرBootstrap ملحق النافذة العدوانيةBootstrap