در این جلسه از دوره آموزش بوت استرپ به بررسیCOLLAPSE در بوت استرپ می پردازیم.
COLLAPSE در بوت استرپ :
پلاگین Collapse در بوت استرپ زمانی کاربرد دارد که بخواهیم بخشی از متن مخفی شود و تا زمانی که روی آن کلیک نشده است به کاربرنمایش داده نشود.پلاگین collapse در بوت استرپ به صورت پیش فرض تعریف شده است.زمانی که روی دکمه کلیک می شود بخش مخفی متن به کاربر نمایش داده می شود.
<div class="container">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
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)یک id قرار داده شده است و کلاس collapse به آن اعمال شده است.
- برای کنترل (نمایش و عدم نمایش ) محتوا “data-toggle = “collapse به دکمه اضافه شده است.
- از id که قبلا برای لایه تعریف شده است(“id=”#demo) استفاده شده و با استفاده از خصوصیت “data-target=”#demo دکمه به محتوای قابل انعطاف متصل شده است.
- می توان از لینک (تگ a ) هم به جای دکمه استفاده کردکه در ادامه برای آن مثال خواهیم زد.
- برای تگ <a>از ویژگی href به جای مشخصه data-target استفاده کنید.
استفاده از تگ A برای COLLAPSE :
در مثال زیر به جای استفاده از تگ button از تگ a استفاده شده است.
<div class="container">
<h2>Simple Collapsible</h2>
<a href="#demo" class="btn btn-info" data-toggle="collapse">Simple collapsible</a>
<div id="demo" class="collapse">
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>خروجی هیچ تفاوتی با عکس های بالا ندارد تنها روش ایجاد آن متفاوت است.
به صورت پیش فرض محتوا پنهان است اما می توانید از کلاس collapse in استفاده کنید تا محتوا به صورت پیش فرض نمایش داده شود.
<div class="container">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse in">
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>
زمانی که کلیک می کنید محتوا مخفی می شود.
نحوه اعمال کلاس COLLAPSE به پنل های بوت استرپ :
- در بوت استرپ می توان کلاس collapse را به پنل های بوت استرپ اعمال کرد.
- پنل های بوت استرپ به صورت پیش فرض به کاربر نمایش داده می شوند.
- می توان از این کلاس استفاده کرد و به صورت پیش فرض آنها را مخفی کرد.
- کاربر تنها زمانی می تواندمحتوای پنل را مشاهده کندکه روی آن کلیک کند.به مثال زیر دقت کنید.
<div class="container">
<h2>Collapsible Panel</h2>
<p>Click on the collapsible panel to open and close it.</p>
<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>
</div>تا زمانی که کلیک نشود محتوا نمایش داده نمی شود.
زمانی که روی پنل کلیک شود محتوای پنل برای کاربر نمایش داده می شود.
نحوه اعمال کلاس COLLAPSE به گروه های لیست در بوت استرپ :
- در بوت استرپ می توان کلاس collapse را به گروه های لیست در بوت استرپ اعمال کرد.
- گروه های لیست در بوت استرپ به صورت پیش فرض به کاربر نمایش داده می شوند.
- می توان از Collapse در بوت استرپ استفاده کرد و به صورت پیش فرض آنها را مخفی کرد.
- کاربر تنها زمانی می تواندمحتوای گروه های لیست را مشاهده کندکه روی آن کلیک کند.به مثال زیر دقت کنید.
<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>زمانی که کاربر روی گروه های لیست کلیک می کند محتوای آن نمایش داده می شود.
منوهای آکاردئونی (فرو ریزنده) :
منو های آکاردئونی در بوت استرپ زمانی کاربرد دارند که بخواهید حجم زیادی از محتوا را در فضای کمی قراردهید.در مثال های قبل درمورد پلاگین collapse مثال های متعددی زده شدو با آن آشنا شدید.منوهای آکاردئونی را می توان با استفاده از این پلاگین در بوت استرپ ایجاد کرد.در مثال زیر نخوه ایجاد منوهای آکاردئونی در بوت استرپ توضیح داده شده است.
نکته : بدون استفاده از جاوا اسکریپت توسط طراح و فقط با پلاگین collapse در بوت استرپ این کار انجام می شود.
<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>
