دليل الأساس Bootstrap

وحدات التثبيت Bootstrap

إضافة شرائح العرض في Bootstrap إضافة أزرار Bootstrap

وحدة التثبيت Bootstrap (Collapse)

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

إذا كنت ترغب في الاستعانة بميزات الوحدة التثبيت بشكل منفرد، فعليك الاستعانة collapse.jsعلى أن تحتاج أيضًا إلى الاستعانة بها وحدة التثبيت Transition (الانتقال)أو، كما مراجعة وحدات التثبيت Bootstrap كما ذكر في الفصل، يمكنك الاستعانة bootstrap.js أو النسخة المضغوطة bootstrap.min.js.

يمكنك استخدام وحدة التثبيت (Collapse):

أنشئ مجموعة قابلة للتمدد أو لوحة التمدد (accordion)، كما يلي:

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

مثال

<!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="panel-group" id="accordion">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseOne">
					انقر عليّ للتوسيع، انقر مرة أخرى عليّ للطي. الجزء الأول
				</a>
			</h4>
		</div>
		<div id="collapseOne" class="panel-collapse collapse in">
			<div class="panel-body">
				لا شيء من الحيوان، الكفية، هيلفيتيكا، بيرة يدوية، عمل، ويس اندرسون　
				cred nesciunt sapiente ea proident. Ad vegan excepteur butcher　
				vice lomo.
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseTwo">
					انقر عليّ للتوسيع، انقر مرة أخرى عليّ للطي. الجزء الثاني
				</a>
			</h4>
		</div>
		<div id="collapseTwo" class="panel-collapse collapse">
			<div class="panel-body">
				لا شيء من الحيوان، الكفية، هيلفيتيكا، بيرة يدوية، عمل، ويس اندرسون　
				cred nesciunt sapiente ea proident. Ad vegan excepteur butcher　
				vice lomo.
			</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseThree">
					انقر عليّ للتوسيع، انقر مرة أخرى عليّ للطي. الجزء الثالث
				</a>
			</h4>
		</div>
		<div id="collapseThree" class="panel-collapse collapse">
			<div class="panel-body">
				لا شيء من الحيوان، الكفية، هيلفيتيكا، بيرة يدوية، عمل، ويس اندرسون　
				cred nesciunt sapiente ea proident. Ad vegan excepteur butcher　
				vice lomo.
			</div>
		</div>
	</div>
</div>
</body>
</html>

اختبار لمعرفة ‹/›

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

data-toggle="collapse" أضف رابطًا إلى العنصر الذي تريد توسيعه أو طويه.
href أو data-target تضيف خاصية إلى المكون الوالدي، والقيمة هي id.
data-parent تضيف خاصية id للوحة التمدد (Accordion) إلى رابط المكون الذي يتم فتحه أو تمدده.

إنشاء مكون تمدد بسيط بدون علامة Accordion، كما يلي:

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

مثال

<!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>
<button type="button" class="btn btn-primary" data-toggle="collapse"　
		data-target="#demo">
	مكون تمدد بسيط
</button>
<div id="demo" class="collapse in">
	لا شيء من الحيوان، الكفية، هيلفيتيكا، بيرة يدوية، عمل، ويس اندرسون　
	cred nesciunt sapiente ea proident. Ad vegan excepteur butcher　
	vice lomo.
</div>
</body>
</html>

اختبار لمعرفة ‹/›

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

كما ترونه في المثال، قمنا بإنشاء عنصر تمدد قابل للانحناء، على عكس لوحة التمدد (Accordion)، لم نضيف خاصية data-parent.

الاستخدام

الجدول التالي يوضح الصفات المستخدمة من قبل مكتبة التمدد (Collapse) لمعالجة التمدد والثني الشاق:

الصفات	الوصف	مثال
.collapse	إخفاء المحتوى.	تجربة
.collapse.in	عرض المحتوى.	تجربة
.collapsing	يتم إضافته عند بدء التدفق التراكمي، ويتم إزالته عند اكتمال التدفق التراكمي.

يمكنك استخدام مكتبة التمدد (Collapse) بطرقين:

باستخدام خاصية البياناتإضافة data-toggle="collapse" و data-target، وتوزيع تحكم العناصر القابلة للتمدد تلقائيًا.data-target الخصائص تقبل اختيار CSS وتطبق تأثير التمدد. تأكد من إضافة فئة إلى العنصر القابل للتمدد .collapse. إذا كنت ترغب في أن يكون مفتوحًا افتراضيًا، فأضف فئة إضافية .in.
لإضافة إدارة مجموعة مشابهة لقفل التمدد، يرجى إضافة خاصية البيانات data-parent="#selector".
باستخدام JavaScriptيمكن تشغيل طريقة collapse باستخدام JavaScript كما يلي:
```
$('.collapse').collapse()
```

الخيارات

بعض الخيارات يتم نقلها عبر خاصية البيانات أو JavaScript. الجدول التالي يوضح هذه الخيارات:

اسم الخيار	نوع/قيمة افتراضية	اسم الخاصية البياناتية	الوصف
parent	selector القيمة الافتراضية: false	data-parent	إذا تم تقديم مفتاح اختياري، عند عرض العنصر القابل للطي، سيتم إغلاق جميع العناصر القابلة للطي تحت العنصر الوالدي. هذا يشبه سلوك وحدة التجميع التقليدية (accordion) - هذا يعتمد على كلاس accordion-group.
toggle	boolean القيمة الافتراضية: true	data-toggle	التحويل إلى العنصر القابل للطي.

الطرق

فيما يلي بعض الطرق المفيدة لملحق الطي (Collapse):

الطرق	الوصف	مثال
الخيارات: .collapse(options)	جعل المحتوى نشطًا كعنصر قابل للطي. يقبل مفتاح options كامل.	$('#identifier').collapse({ 　　　　toggle: false })
تغيير العرض: .collapse('toggle')	تغيير العرض/الإخفاء للعنصر القابلة للطي.	$('#identifier').collapse('toggle')
إظهار: .collapse('show')	إظهار العنصر القابلة للطي.	$('#identifier').collapse('show')
إخفاء: .collapse('hide')	إخفاء العنصر القابلة للطي.	$('#identifier').collapse('hide')

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

فيما يلي أمثلة توضح استخدام الطريقة:

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

مثال

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - طرق إضافة (Collapse) الملحق</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="panel-group" id="accordion">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseOne">
					انقر لي لفتح، انقر لي لغلق. الجزء الأول -- طريقة hide
				</a>
			</h4>
		</div>
		<div id="collapseOne" class="panel-collapse collapse in">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice　
				lomo.
			</div>
		</div>
	</div>
	<div class="panel panel-success">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseTwo">
					انقر لي لفتح، انقر لي لغلق. الجزء الثاني -- طريقة show
				</a>
			</h4>
		</div>
		<div id="collapseTwo" class="panel-collapse collapse">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice　
				lomo.
			</div>
		</div>
	</div>
	<div class="panel panel-info">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseThree">
					انقر لي لفتح، انقر لي لغلق. الجزء الثالث -- طريقة toggle
				</a>
			</h4>
		</div>
		<div id="collapseThree" class="panel-collapse collapse">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice　
				lomo.
			</div>
		</div>
	</div>
	<div class="panel panel-warning">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseFour">
					انقر هنا للفتح، انقر مرة أخرى هنا للإنغلاق. الجزء الرابع -- طريقة options
				</a>
			</h4>
		</div>
		<div id="collapseFour" class="panel-collapse collapse">
			<div class="panel-body">
				Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred　
				nesciunt sapiente ea proident. Ad vegan excepteur butcher vice　
				lomo.
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function () { $('#collapseFour').collapse({
		toggle: false
	});});
	$(function () { $('#collapseTwo').collapse('show')});
	$(function () { $('#collapseThree').collapse('toggle')});
	$(function () { $('#collapseOne').collapse('hide')});
</script>　　
</body>
</html>

اختبار لمعرفة ‹/›

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

الحدث

يُقسم الجدول أدناه بالأحداث المستخدمة في مكتبة التقليل (Collapse) هذه. يمكن استخدام هذه الأحداث كمرشحات في الدوال.

الحدث	الوصف	مثال
show.bs.collapse	يتم إطلاق هذا الحدث بعد استدعاء طريقة show.	$('#identifier').on('show.bs.collapse', function () { 　　　　// تنفيذ بعض الأفعال... })
shown.bs.collapse	يتم إطلاق هذا الحدث عندما يصبح العنصر المنغلق مرئيًا للمستخدم (سيتم انتظار انتهاء تأثير التدرج CSS).	$('#identifier').on('shown.bs.collapse', function () { 　　　　// تنفيذ بعض الأفعال... })
hide.bs.collapse	يتم إطلاق هذا الحدث فور استدعاء طريقة مثال hide.	$('#identifier').on('hide.bs.collapse', function () { 　　　　// تنفيذ بعض الأفعال... })
hidden.bs.collapse	عندما يصبح العنصر المنغلق مخفيًا للمستخدم يتم إطلاق هذا الحدث (سيتم انتظار انتهاء تأثير التدرج CSS).	$('#identifier').on('hidden.bs.collapse', function () { 　　　　// تنفيذ بعض الأفعال... })

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

فيما يلي عرض للمثال الذي يوضح استخدام الحدث:

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

مثال

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - حدثات ملحق التقلص (Collapse)</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="panel-group" id="accordion">
	<div class="panel panel-info">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion"　
				　　　href="#collapseexample">
					انقر علىي لأتمكن من التوسع، انقر علىي مرة أخرى لأتمكن من الطي. --حدث عرض
				</a>
			</h4>
		</div>
		<div id="collapseexample" class="panel-collapse collapse">
			<div class="panel-body">
				لا شيء من الحيوان، الكفية، هيلفيتيكا، بيرة يدوية، عمل، ويس اندرسون　
				لا شيء يعلم، لا يعلم، يعلم، يعلم.　
				اللحم البقري النباتي باستثناء قاتل اللحوم، نقي، لومو.
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$((function () {}}　
		$('#collapseexample').on('show.bs.collapse', function () {
			alert('هاي، عندما يتم التوسع سيتم عرض هذا التحذير'));}
	});
</script>　
</body>
</html>

اختبار لمعرفة ‹/›

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

إضافة شرائح العرض في Bootstrap إضافة أزرار Bootstrap