قابلیت collapse در بوت استرپ

بازدید: 371 بازدید

از قابلیت collapse میتوانید برای مخفی کردن بخشی از محتوا در وب سایت خود استفاده کنید.

اینکار معمولا هنگامی که مطالب ما طولانی میشوند و صفحه وب سایت اسکرول میخورد انجام میشود.

وقتی که میخواهید قسمتی از محتوا را پنهان کنید و با کلیک روی آن محتوا نمایش داده شود از کلاس collapse استفاده کنید.

با عرض سلامت خدمت شما همراهان عزیز وب سایت پرنیان طرح

در این مطلب میخواهیم کلاس collapse در بوت استرپ را به شما آموزش دهیم.

از این قابلیت هنگامی که میخواهیم بخشی از محتوا را در حالت مخفی نگه داریم و یا دوباره نمایش دهیم استفاده میکنیم.

Basic Collapsible:

از کلاس collapse وقتی که محتوای زیادی داریم میتوان استفاده کرد در نمونه زیر یک کلاس collapse ساده را برای شما مثال زده ایم.

با کلیک روی دکمه متن را مخفی کنید و یا نشان دهید.

مثال:

[php]

<button type=”button” class=”btn btn-primary” 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>

[/php]

در تصویر زیر دکمه ی کلاس collapse را مشاهده کنید:

simple collapse

نکته :

محتوای داخل کلاس collapse به طور پیش فرض به صورت مخفی است برای نمایش محتوا به صورت پیش فرض از کلاس show استفاده نمایید.

برای توضیح کامل تر به مثال زیر توجه کنید.

مثال:

[php]

<div class=”container”>
<h2>Show Collapsible Content By Default</h2>
<p>Add the show class next to the collapse class to show the content by default.</p>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type=”button” class=”btn btn-primary” data-toggle=”collapse” data-target=”#demo”>Simple collapsible</button>
<div id=”demo” class=”collapse show”>
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>

[/php]

تصویر مثال بالا را بینید:

show collapse

Accordion :

Accordion ها گروهی از پنل ها هستند که از آنها برای مخفی نمودن چندین محتوا به صورت گروهی استفاده میکنیم.

و از کلاس data-parent. برای اینکه مطمئن شویم در یک لحظه فقط یک محتوای مخفی شده را نمایش دهد.

برای توضیح بیشتر مثال زیر را ببینید.

مثال:

[php]

<div class=”container”>
<h2>Accordion Example</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div id=”accordion”>
<div class=”card”>
<div class=”card-header”>
<a class=”card-link” data-toggle=”collapse” href=”#collapseOne”>
Collapsible Group Item #1
</a>
</div>
<div id=”collapseOne” class=”collapse show” data-parent=”#accordion”>
<div class=”card-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=”card”>
<div class=”card-header”>
<a class=”collapsed card-link” data-toggle=”collapse” href=”#collapseTwo”>
Collapsible Group Item #2
</a>
</div>
<div id=”collapseTwo” class=”collapse” data-parent=”#accordion”>
<div class=”card-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=”card”>
<div class=”card-header”>
<a class=”collapsed card-link” data-toggle=”collapse” href=”#collapseThree”>
Collapsible Group Item #3
</a>
</div>
<div id=”collapseThree” class=”collapse” data-parent=”#accordion”>
<div class=”card-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>
</div>

[/php]

تصویر مثال بالا را مشاهده کنید:

دسته بندی آموزش bootstrap
اشتراک گذاری
مقالات مرتبط

دیدگاهتان را بنویسید

سبد خرید

هیچ محصولی در سبد خرید نیست.