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

دليل Bootstrap الأساسي

إضافة Bootstrap

مجموعة أزرار Bootstrap

تسمح مجموعة الأزرار بتعيين عدة أزرار في نفس السطر. عند الرغبة في تحديد مجموعة من الأزرار معًا، يكون ذلك مفيدًا. يمكنك القيام بذلك من خلال إضافة Bootstrap زر (Button) إضافة سلوكات إضافية للجافا سكريبت للاختيارات المتماثلة والاختيارات المزدوجة.

الجدول أدناه يلخص بعض الفئات المهمة التي توفرها Bootstrap لاستخدام مجموعات الأزرار:

الفئةالوصفمثال على الكود
.btn-groupهذه الفئة تستخدم لإنشاء مجموعة أساسية من الأزرار في .btn-group يوضع سلسلة من الفئات .btn الزر.
<div>
　　<button type="button">زر1</button>
　　　<button type="button">زر2</button>
</div>
.btn-toolbarهذه الفئة تساعد في دمج عدة <div> في <div> واحدة، عادةً للحصول على مكونات معقدة.
<div role="toolbar">
　　<div>...</div>
　　<div>...</div>
</div>
.btn-group-lg, .btn-group-sm, .btn-group-xsهذه الفئات يمكن تطبيقها على حجم مجموعة الأزرار بأكملها، وليس على كل زر.
<div>...</div>
<div>...</div>
<div>...</div>
.btn-group-verticalهذه الفئة تجعل مجموعة الأزرار تظهر متداخلة، وليس مستقيمة.
<div>
　　...
</div>

المجموعة الأساسية للأزرار

في هذا المثال، يتم عرض class المذكورة في الجدول أعلاه .btn-group الاستخدامًا:

مثالُ على الخط

<!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="btn-group">
	<button　type="button"　class="btn　btn-default">زر　1</button>
	<button　type="button"　class="btn　btn-default">زر　2</button>
	<button type="button" class="btn btn-default">الزر 3</button>
</div>
</body>
</html>
تجربة لمعرفة ‹/›

النتيجة كما يظهر أدناه:

لوحة أدوات الأزرار

في هذا المثال، يتم عرض class المذكورة في الجدول أعلاه .btn-toolbar الاستخدامًا:

مثالُ على الخط

<!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="btn-toolbar" role="toolbar">
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default">زر　1</button>
		<button　type="button"　class="btn　btn-default">زر　2</button>
		<button type="button" class="btn btn-default">الزر 3</button>
	</div>
	<div　class="btn-group">
		<button type="button" class="btn btn-default">الزر 4</button>
		<button type="button" class="btn btn-default">زر 5</button>
		<button type="button" class="btn btn-default">زر 6</button>
	</div>
	<div　class="btn-group">
		<button type="button" class="btn btn-default">زر 7</button>
		<button type="button" class="btn btn-default">زر 8</button>
		<button type="button" class="btn btn-default">زر 9</button>
	</div>
</div>
</body>
</html>
تجربة لمعرفة ‹/›

النتيجة كما يظهر أدناه:

حجم الأزرار

في هذا المثال، يتم عرض class المذكورة في الجدول أعلاه .btn-group-* الاستخدامًا:

مثالُ على الخط

<!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="btn-group btn-group-lg">
	<button type="button" class="btn btn-default">زر 1</button>
	<button type="button" class="btn btn-default">زر 2</button>
	<button type="button" class="btn btn-default">زر 3</button>
</div>
<div class="btn-group btn-group-sm">
	<button type="button" class="btn btn-default">زر 4</button>
	<button type="button" class="btn btn-default">زر 5</button>
	<button type="button" class="btn btn-default">زر 6</button>
</div>
<div class="btn-group btn-group-xs">
	<button type="button" class="btn btn-default">زر 7</button>
	<button type="button" class="btn btn-default">زر 8</button>
	<button　type="button"　class="btn　btn-default">زر　9</button>
</div>
</body>
</html>
تجربة لمعرفة ‹/›

النتيجة كما يظهر أدناه:

دمج

يمكنك دمج مجموعة زر داخل مجموعة زر أخرى، أي، داخل .btn-group مدمجة .btn-group عندما تريد دمج قائمة تنقل مع مجموعة من الأزرار، يتم استخدام هذا.

مثالُ على الخط

<!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="btn-group">
	<button　type="button"　class="btn　btn-default">زر　1</button>
	<button　type="button"　class="btn　btn-default">زر　2</button>
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">
			تنزيل
			<span　class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">رابط تنقل 1</a></li>
			<li><a href="#">رابط تنقل 2</a></li>
		</ul>
　　</div>
</div>
</body>
</html>
تجربة لمعرفة ‹/›

النتيجة كما يظهر أدناه:

مجموعاتُ الأزرارِ العمودية

في هذا المثال، يتم عرض class المذكورة في الجدول أعلاه .btn-group-vertical الاستخدامًا:

مثالُ على الخط

<!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="btn-group-vertical">
	<button　type="button"　class="btn　btn-default">زر　1</button>
	<button　type="button"　class="btn　btn-default">زر　2</button>
	<div　class="btn-group-vertical">
		<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">
			تنزيل
			<span　class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">رابط تنقل 1</a></li>
			<li><a href="#">رابط تنقل 2</a></li>
		</ul>
	</div>
</div>
</body>
</html>
تجربة لمعرفة ‹/›

النتيجة كما يظهر أدناه:

قائمة تنقل زر Bootstrapقائمة تنقل Bootstrap