انهيار Bootstrap
أساسي قابل للطي
تعد العناصر القابلة للطي مفيدة عندما تريد إخفاء كمية كبيرة من المحتوى وإظهارها:
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
مثال
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
شرح المثال
تشير .collapseالفئة إلى عنصر قابل للطي (<div> في مثالنا) ؛ هذا هو المحتوى الذي سيتم عرضه أو إخفاؤه بنقرة زر واحدة.
للتحكم في (إظهار / إخفاء) المحتوى القابل للطي ، أضف data-toggle="collapse"السمة إلى <a> أو عنصر <button>. ثم أضف data-target="#id"السمة لتوصيل الزر بالمحتوى القابل للطي (<div id = "demo">).
ملاحظة: بالنسبة لعناصر <a> ، يمكنك استخدام hrefالسمة بدلاً من data-target
السمة:
مثال
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
بشكل افتراضي ، يتم إخفاء المحتوى القابل للطي. ومع ذلك ، يمكنك إضافة .inالفصل لإظهار المحتوى افتراضيًا:
مثال
<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>
لوحة قابلة للطي
Panel Body
يوضح المثال التالي لوحة قابلة للطي:
مثال
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
مجموعة قائمة قابلة للطي
- One
- Two
- Three
يظهر ما يلي لوحة قابلة للطي مع مجموعة قائمة بداخلها:
مثال
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
الأكورديون
الألم في حد ذاته مهم ، لكن الألم يزداد عن طريق عملية شد الدهون ، لكنني أعطيها الوقت لخفضها حتى أقوم ببعض الأعمال الرائعة والألم. لغرض الوصول إلى الحد الأدنى ، يجب على من منا ممارسة أي وظيفة باستثناء الاستفادة من العواقب المترتبة على ذلك.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
يوضح المثال التالي أكورديونًا بسيطًا من خلال توسيع مكون اللوحة.
ملاحظة: استخدم data-parentالسمة للتأكد من إغلاق جميع العناصر القابلة للطي ضمن العنصر الرئيسي المحدد عند عرض أحد العناصر القابلة للطي.
مثال
<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="#collapse1">
Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div>
استكمال مرجع طي التمهيد
للحصول على مرجع كامل لجميع خيارات الانهيار والأساليب والأحداث ، انتقل إلى مرجع Bootstrap JS Collapse .