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

دليل أساسي لـ Bootstrap4

قائمة التوسع في Bootstrap4

عندما يضع المستخدم فأرة الماوس فوق أو ينقر على العنصر التشغيلي، عادةً ما يستخدم قائمة منسدلة داخل عنوان التوجيه لعرض قائمة من الروابط ذات الصلة. 您可以使用Bootstrap下拉插件向几乎所有内容（如链接，按钮或按钮组，导航栏，选项卡和药丸导航等）添加可切换的下拉菜单（即单击打开和关闭），而无需编写任何JavaScript代码。

Bootstrap4 下拉菜单依赖于 popper.min.js。

下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。

<!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>
</head>
<body>
<div class="container">
　　<h2>下拉菜单</h2>
　　<p>.dropdown　类用来指定一个下拉菜单。</p>
　　<p>.dropdown-menu　类来设置实际下拉菜单。</p>
　　<p>我们可以使用一个按钮或链接来打开下拉菜单，　按钮或链接需要添加　.dropdown-toggle　和　data-toggle="dropdown"　属性。</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<div　class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary　dropdown-toggle"　data-toggle="dropdown">
　　　　　　زر القائمة المنسدلة
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">رابط 1</a>
　　　　　　<a class="dropdown-item" href="#">رابط 2</a>
　　　　　　<a　class="dropdown-item"　href="#">رابط 3</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
التحقق من التشغيل ‹/›

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

示例解析

.dropdown 类用来指定一个下拉菜单。

我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。

<div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类。

我们也可以在 <a> 标签中使用：

<!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>
</head>
<body>
<div class="container">
	<div　class="dropdown">
	　　<a　class="btn　btn-secondary　dropdown-toggle"　href="#"　role="button"　id="dropdownMenuLink"　data-toggle="dropdown"　aria-haspopup="true"　aria-expanded="false">
		Dropdown　link
	　　</a>
	　　<div　class="dropdown-menu"　aria-labelledby="dropdownMenuLink">
		<a class="dropdown-item" href="#">فعل</a>
		<a class="dropdown-item" href="#">فعل آخر</a>
		<a class="dropdown-item" href="#">شيء آخر هنا</a>
	　　</div>
	</div>
</div>
</body>
</html>
التحقق من التشغيل ‹/›

下拉菜单中的分割线

.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线：

<!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>
</head>
<body>
<div class="container">
　　<h2>下拉菜单中</h2>
　　<p>.dropdown-divider　类用于在下拉菜单中创建一个水平的分割线：</p>
　　<div　class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary　dropdown-toggle"　data-toggle="dropdown">
　　　　　　زر القائمة المنسدلة
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">رابط 1</a>
　　　　　　<a class="dropdown-item" href="#">رابط 2</a>
　　　　　　<a　class="dropdown-item"　href="#">رابط 3</a>
　　　　　　<div class="dropdown-divider"></div>
　　　　　　<a　class="dropdown-item"　href="#">رابط آخر</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
التحقق من التشغيل ‹/›

下拉菜单中的标题

.dropdown-header 类用于在下拉菜单中添加标题：

<!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>
</head>
<body>
<div class="container">
　　<h2>下拉菜单中</h2>
　　<p>.dropdown-header　类用于在下拉菜单中添加标题：</p>
　　<div　class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary　dropdown-toggle"　data-toggle="dropdown">
　　　　　　زر القائمة المنسدلة
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<h5　class="dropdown-header">Dropdown　header</h5>
　　　　　　<a class="dropdown-item" href="#">رابط 1</a>
　　　　　　<a class="dropdown-item" href="#">رابط 2</a>
　　　　　　<a　class="dropdown-item"　href="#">رابط 3</a>
　　　　　　<h5　class="dropdown-header">Dropdown　header</h5>
　　　　　　<a　class="dropdown-item"　href="#">رابط آخر</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
التحقق من التشغيل ‹/›

الخيارات المتاحة والخيارات الممنوعة في القائمة المنسدلة

.active تظهر خيار القائمة المنسدلة بوضوح (تضيف خلفية زرقاء).

لإيقاف تشغيل خيار القائمة المنسدلة، يمكنك استخدام الصفة .disabled.

<!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>
</head>
<body>
<div class="container">
　　<h2>下拉菜单</h2>
　　<p>تضيف الصفة .active إلى خيار القائمة المنسدلة تظهر الخيار بوضوح (تضيف خلفية زرقاء).</p>
　　<p>لإيقاف تشغيل خيار القائمة المنسدلة، يمكنك استخدام الصفة .disabled.</p>
　　<div　class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary　dropdown-toggle"　data-toggle="dropdown">
　　　　　　زر القائمة المنسدلة
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">عادي</a>
　　　　　　<a　class="dropdown-item　active"　href="#">مفعّل</a>
　　　　　　<a　class="dropdown-item　disabled"　href="#">م禁ع</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
التحقق من التشغيل ‹/›

تحديد موقف القائمة المنسدلة

إذا أردنا أن تكون قائمة المنسدلة متحاذية إلى اليمين، يمكننا إضافة 　.dropdown-menu-right 　الصفة بعد صفة .dropdown-menu في العنصر.

<!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>
</head>
<body>
<div class="container">
　　<h2>下拉菜单</h2>
　　<p>إذا أردنا أن تكون قائمة المنسدلة متحاذية إلى اليمين، يمكننا إضافة 　.dropdown-menu-right 　الصفة بعد صفة .dropdown-menu في العنصر.</p>
　　<div　class="dropdown">
　　　　<button　type="button"　class="btn　btn-primary　dropdown-toggle"　data-toggle="dropdown">
　　　　　　زر القائمة المنسدلة
　　　　</button>
　　　　<div　class="dropdown-menu　dropdown-menu-right">
　　　　　　<a class="dropdown-item" href="#">رابط 1</a>
　　　　　　<a class="dropdown-item" href="#">رابط 2</a>
　　　　　　<a　class="dropdown-item"　href="#">رابط 3</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
التحقق من التشغيل ‹/›

إعداد اتجاه انطلاق القائمة المنسدلة

اتجاه انطلاق القائمة المنسدلة افتراضيًا هو إلى الأسفل، ولكن يمكننا أيضًا تعيين اتجاه آخر.

تحديد اتجاه انطلاق القائمة المنسدلة إلى اليمين

إذا كنت ترغب في إطلاق القائمة المنسدلة إلى اليمين، يمكنك إضافة 　"dropright" 　الصفة إلى عنصر div:

<!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>
</head>
<body>
<div class="container">
　　<h2>下拉菜单</h2>
　　<p>　.dropright　类用于设置下拉菜单向右弹出：</p><br>
　　<!--　Default　dropright　button　-->
	<div　class="btn-group　dropright">
	　　<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropright
	　　</button>
	　　<div class="dropdown-menu">
		<!-- روابط قائمة المنسدلة -->
		<a class="dropdown-item" href="#">فعل</a>
　　　　　　　　<a class="dropdown-item" href="#">فعل آخر</a>
　　　　　　　　<a class="dropdown-item" href="#">شيء آخر هنا</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item" href="#">رابط منفصل</a>
　　　　　　　　</div>
	</div>
	<!--　Split　dropright　button　-->
	<div　class="btn-group　dropright">
	　　<button type="button" class="btn btn-secondary">
		Split dropright
	　　</button>
	　　<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle Dropright</span>
	　　</button>
	　　<div class="dropdown-menu">
		<!-- روابط قائمة المنسدلة -->
		　<a class="dropdown-item" href="#">فعل</a>
　　　　　　　　<a class="dropdown-item" href="#">فعل آخر</a>
　　　　　　　　<a class="dropdown-item" href="#">شيء آخر هنا</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item" href="#">رابط منفصل</a>
	　　</div>
	</div>
</div>
</body>
</html>
التحقق من التشغيل ‹/›

تحديد القائمة المنسدلة التي تنسدل لأعلى

إذا كنت ترغب في عرض القائمة المنسدلة لأعلى، يمكنك إضافة "dropup" إلى عنصر div:

<!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>
</head>
<body>
<div class="container">
　　　　<h2>下拉菜单</h2>
　　　　<p> .dropup 类用于设置下拉菜单向上弹出：</p><br><br><br><br><br><br><br><br>
　　<!-- Default dropup button -->
　　　　<div class="btn-group dropup">
　　　　<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
　　　　　　　　Dropup
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　　　<!-- روابط قائمة المنسدلة -->
　　　　　　　　<a class="dropdown-item" href="#">فعل</a>
　　　　　　　　<a class="dropdown-item" href="#">فعل آخر</a>
　　　　　　　　<a class="dropdown-item" href="#">شيء آخر هنا</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item" href="#">رابط منفصل</a>
　　　　</div>
　　　　</div>
　　　　
　　　　<!-- Split dropup button -->
　　　　<div class="btn-group dropup">
　　　　<button type="button" class="btn btn-secondary">
　　　　　　　　Split dropup
　　　　</button>
　　　　<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
　　　　　　　　<span class="sr-only">Toggle Dropdown</span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　　　<!-- روابط قائمة المنسدلة -->
　　　　　　　　<a class="dropdown-item" href="#">فعل</a>
　　　　　　　　<a class="dropdown-item" href="#">فعل آخر</a>
　　　　　　　　<a class="dropdown-item" href="#">شيء آخر هنا</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item" href="#">رابط منفصل</a>
　　　　</div>
　　　　</div>
</div>
</body>
</html>
التحقق من التشغيل ‹/›

تحديد القائمة المنسدلة التي تنسدل إلى اليسار

إذا كنت ترغب في عرض القائمة المنسدلة لأعلى، يمكنك إضافة "dropleft" إلى عنصر div:

<!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>
</head>
<body>
<div class="container" style="text-align:center;">
　　<h2>下拉菜单</h2>
　　<p> .dropleft 类用于设置下拉菜单向左弹出：</p><br>
　　<!-- Default dropleft button -->
	<div class="btn-group dropleft">
	　　<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropleft
	　　</button>
	　　<div class="dropdown-menu">
		<!-- روابط قائمة المنسدلة -->
		<a class="dropdown-item" href="#">فعل</a>
　　　　　　　　<a class="dropdown-item" href="#">فعل آخر</a>
　　　　　　　　<a class="dropdown-item" href="#">شيء آخر هنا</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item" href="#">رابط منفصل</a>
	　　</div>
	</div>
<br><br><br>
	<!-- Split dropleft button -->
	<div class="btn-group dropleft">
	　　<button type="button" class="btn btn-secondary">
		Split dropleft
	　　</button>
	　　<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">تغيير اليسار</span>
	　　</button>
	　　<div class="dropdown-menu">
		<!-- روابط قائمة المنسدلة -->
		<a class="dropdown-item" href="#">فعل</a>
　　　　　　　　<a class="dropdown-item" href="#">فعل آخر</a>
　　　　　　　　<a class="dropdown-item" href="#">شيء آخر هنا</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item" href="#">رابط منفصل</a>
	　　</div>
	</div>
</div>
</body>
</html>
التحقق من التشغيل ‹/›

إعداد قائمة منسدلة في الزر

يمكننا إضافة قائمة منسدلة في الأزرار:

<!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>
</head>
<body>
<div class="container">
　　<h2>قائمة النزول داخل الزر</h2>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">أساسي</button>
　　　　<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">رابط 1</a>
　　　　　　<a class="dropdown-item" href="#">رابط 2</a>
　　　　</div>
　　</div>
　　
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-secondary">ثانوي</button>
　　　　<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">رابط 1</a>
　　　　　　<a class="dropdown-item" href="#">رابط 2</a>
　　　　</div>
　　</div>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-success">نجاح</button>
　　　　<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">رابط 1</a>
　　　　　　<a class="dropdown-item" href="#">رابط 2</a>
　　　　</div>
　　</div>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-info">معلومات</button>
　　　　<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">رابط 1</a>
　　　　　　<a class="dropdown-item" href="#">رابط 2</a>
　　　　</div>
　　</div>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-warning">تحذير</button>
　　　　<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">رابط 1</a>
　　　　　　<a class="dropdown-item" href="#">رابط 2</a>
　　　　</div>
　　</div>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-danger">خطر</button>
　　　　<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">رابط 1</a>
　　　　　　<a class="dropdown-item" href="#">رابط 2</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
التحقق من التشغيل ‹/›

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

الطي في Bootstrap4البطاقات في Bootstrap4