Collapse
محتویات
پنهان شونده (به انگلیسی: Collapsible) ساده
Collapsibleها برای زمانی که بخواهید حجم زیادی از اطلاعات را پنهان یا آشکار کنید، مفید هستند:[۱]
ساخت نمونه مثال این بخش در دست اقدام است.
مثال
1 <button data-toggle="collapse" data-target="#demo">Collapsible</button>
2
3 <div id="demo" class="collapse">
4 Lorem ipsum dolor text....
5 </div>
توضیح مثال
کلاس .collapse یک عنصر پنهان شدنی را نشان می‌دهد (یک تگ <div> در مثال ما)؛ این محتوایی است که با کلیک برروی یک کلید آشکار یا پنهان می شود.
برای کنترل (آشکار/پنهان کردن) محتوای پنهان شدنی، ویژگی data-toggle="collapse" را به یک عنصر <a> یا <button> اضافه کنید. سپس ویژگی data-target="#id" را برای اتصال کلید به محتوای پنهان شدنی به کار ببرید (<div id="demo">).
href بجای ویژگی data-target استفاده کنید:مثال
1 <a href="#demo" data-toggle="collapse">Collapsible</a>
2
3 <div id="demo" class="collapse">
4 Lorem ipsum dolor text....
5 </div>
بطور پیش فرض، محتوای پنهان شدنی، پنهان است. با این حال می‌توان کلاس .in را برای نشان داده محتوا بطور پیش فرض اضافه کنید:
مثال
1 <div id="demo" class="collapse in">
2 Lorem ipsum dolor text....
3 </div>
پنل پنهان شدنی
ساخت نمونه مثال این بخش در دست اقدام است.
مثال زیر یک پنل پنهان شدنی را نشان می‌دهد:
مثال
1 <div class="panel-group">
2 <div class="panel panel-default">
3 <div class="panel-heading">
4 <h4 class="panel-title">
5 <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
6 </h4>
7 </div>
8 <div id="collapse1" class="panel-collapse collapse">
9 <div class="panel-body">Panel Body</div>
10 <div class="panel-footer">Panel Footer</div>
11 </div>
12 </div>
13 </div>
گروه لیست پنهان شدنی
ساخت نمونه مثال این بخش در دست اقدام است.
مثال زیر یک پنل پنهان شدنی با گروه لیست داخلش را نشان می‌دهد:
مثال
1 <div class="panel-group">
2 <div class="panel panel-default">
3 <div class="panel-heading">
4 <h4 class="panel-title">
5 <a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
6 </h4>
7 </div>
8 <div id="collapse1" class="panel-collapse collapse">
9 <ul class="list-group">
10 <li class="list-group-item">One</li>
11 <li class="list-group-item">Two</li>
12 <li class="list-group-item">Three</li>
13 </ul>
14 <div class="panel-footer">Footer</div>
15 </div>
16 </div>
17 </div>
آکاردئون (به انگلیسی: Accordion)
ساخت نمونه مثال این بخش در دست اقدام است.
مثال زیر آکاردئون ساده ای را توسط گسترش مؤلفه پنل نشان می‌دهد.
data-parent برای تضمین اینکه همهٔ عناصر پنهان شدنی تحت والد خاص بسته خواهند شد استفاده می‌شود.مثال
1 <div class="panel-group" id="accordion">
2 <div class="panel panel-default">
3 <div class="panel-heading">
4 <h4 class="panel-title">
5 <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
6 Collapsible Group 1</a>
7 </h4>
8 </div>
9 <div id="collapse1" class="panel-collapse collapse in">
10 <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
11 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
12 minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
13 commodo consequat.</div>
14 </div>
15 </div>
16 <div class="panel panel-default">
17 <div class="panel-heading">
18 <h4 class="panel-title">
19 <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
20 Collapsible Group 2</a>
21 </h4>
22 </div>
23 <div id="collapse2" class="panel-collapse collapse">
24 <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
25 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
26 minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
27 commodo consequat.</div>
28 </div>
29 </div>
30 <div class="panel panel-default">
31 <div class="panel-heading">
32 <h4 class="panel-title">
33 <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
34 Collapsible Group 3</a>
35 </h4>
36 </div>
37 <div id="collapse3" class="panel-collapse collapse">
38 <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
39 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
40 minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
41 commodo consequat.</div>
42 </div>
43 </div>
44 </div>
مرجع کامل Collapse بوت استرپ
منابع آموزشی