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

دليل أساسي لBootstrap

إضافة مكونات Bootstrap

قائمة سقوط Bootstrap

سيتم التركيز في هذا الفصل على قائمة المنسدلة في Bootstrap. قائمة المنسدلة قابلة للتشغيل، وهي قائمة سياق تُعرض روابطها بشكل قائمة. يمكن تحقيق ذلك من خلال مكتبة JavaScript لقائمة المنسدلة (Dropdown) Bootstrap من خلال التفاعل来实现.

للإستخدام قائمة المنسدلة، يكفي في class .dropdown أضف قائمة منسدلة داخلها. يوضح المثال التالي أساس قائمة المنسدلة:

مثال عبر الإنترنت

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap مثال - قائمة منسدلة (Dropdowns)</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>
<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"　
			data-toggle="dropdown"
		الموضوع
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">تحليل البيانات</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">الاتصالات / الشبكة</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">رابط منفصل</a>
		</li>
	</ul>
</div>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يلي:

الخيارات

توجيه

من خلال .dropdown-menu أضف class .pull-right اتجاه قائمة المنسدلة إلى اليمين. يوضح المثال التالي ذلك:

مثال عبر الإنترنت

<!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>
<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"　
			data-toggle="dropdown">الموضوع
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu pull-right" role="menu"　
		aria-labelledby="dropdownMenu1">
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">تحليل البيانات</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">الاتصالات / الشبكة</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">رابط منفصل</a>
		</li>
	</ul>
</div>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يلي:

العنوان

يمكنك استخدام class dropdown-header أضف عنوانًا إلى منطقة علامة القائمة المنسدلة. يوضح المثال التالي ذلك:

مثال عبر الإنترنت

<!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>
<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"　
			data-toggle="dropdown"
		الموضوع
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation" class="dropdown-header">عنوان القائمة المنسدلة</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">تحليل البيانات</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">
				إتصالات البيانات/الشبكة
			</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation" class="dropdown-header">عنوان القائمة المنسدلة</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">رابط منفصل</a>
		</li>
	</ul>
</div>
</body>
</html>
اختبار لرؤية ‹/›

النتيجة كما يلي:

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

النوعالوصفمثال
.dropdownتحديد القائمة المنسدلة، القوائم المنسدلة مغطاة في .dropdownجرب الآن
.dropdown-menuإنشاء قائمة سقوطجرب الآن
.dropdown-menu-rightتعديل قائمة سقوط إلى اليمينجرب الآن
.dropdown-headerإضافة عنوان إلى قائمة سقوطجرب الآن
.dropupتحديد قائمة سقوط تنقلق لأعلىجرب الآن
.disabledالإعداد الممنوع في القائمة السقوطجرب الآن
.dividerخط الفصل في القائمة السقوطجرب الآن
مجموعات أزرار Bootstrapأيقونات النصوص Bootstrap (Glyphicons)