آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

مثال 

روی دکمه های زیر کلیک کنید تا عنصر دیگری را از طریق تغییرات کلاس نمایش دهید و پنهان کنید:

1-collapse. پنهان کردن مطالب

2-collapsing. در طول گذراندن استفاده می شود

3-collapse.show. محتوا را نمایش می دهد

شما می توانید یک لینک با ویژگی href یا یک دکمه با ویژگی data-target. استفاده کنید. در هر دو مورد، "data-toggle = "collapse مورد نیاز است.

 

 <p> <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> Link with href </a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-target </button> </p> <div class="collapse" id="collapseExample"> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div>

 

اهداف چندگانه

<button> یا <a> می توانید عناصر چندگانه را با اشاره به آنها با انتخابگر جی کوئری در href یا attribute data-target. نشان دهید و پنهان کنید. چندین <button> یا <a> میتوانند یک عنصر را نشان دهند و پنهان کنند اگر هر کدام آن را با ویژگی href یا data-target. خود ارجاع دهند.

 <p> <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button> </p> <div class="row"> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample1"> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div> </div> <div class="col"> <div class="collapse multi-collapse" id="multiCollapseExample2"> <div class="card card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </div> </div> </div>

 

Accordion example

با استفاده از جزء کارت، می توانید رفتار سقوط پیش فرض را برای ایجاد آکوردئون گسترش دهید.

 

 <div id="accordion"> <div class="card"> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </button> </h5> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </button> </h5> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h5 class="mb-0"> <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </button> </h5> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion"> <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> </div> </div> </div>

 

دسترس پذیری

اطمینان حاصل کنید که aria-expanded به عنصر کنترل اضافه کنید. این ویژگی به صراحت وضعیت فعلی عنصر قابل جابجایی مرتبط با کنترل را برای نمایش خوانندگان و تکنولوژی های مشابه کمک می کند. اگر عنصر کشویی بسته به طور پیش فرض، ویژگی در عنصر کنترل باید مقدار "aria-expanded = "false باشد. اگر عنصر collapsible را به طور پیش فرض با استفاده از کلاس نمایش تنظیم کرده باشید، به جای آن aria-expanded = "true را در کنترل قرار دهید. پلاگین به طور خودکار این ویژگی را بر روی کنترل بر اساس اینکه آیا عنصر کشویی باز شده یا بسته شده (یا از طریق جاوا اسکریپت یا به این دلیل که کاربر یک عنصر کنترل دیگر را نیز به یک عنصر کلاهبرداری مرتبط متصل شده است) غیر فعال کرده است یا نه. اگر عنصر HTML عنصر کنترل یک دکمه نیست (مثلا <a> یا <div>)، attribute role = "button" باید به عنصر اضافه شود.

اگر عنصر کنترلی شما یک عنصر قابل کشف را هدف قرار می دهد - یعنی ویژگی مربوط به هدف داده به یک شناسه اشاره می کند - شما باید عنصر کنترل aria را به عنصر کنترل اضافه کنید، حاوی شناسه عنصر کشویی. خوانندگان صفحه نمایش مدرن و فن آوری های مشابهی از این ویژگی استفاده می کنند تا کاربران بتوانند میانبرهای اضافی را برای هدایت به طور مستقیم به عنصر کشویی استفاده کنند.

 

استفاده 

پلاگین فروپاشی با استفاده از چند کلاس برای رسیدگی به سنگین آسانسور:

1-collapse.محتوای را پنهان می کند

2-collapse.show. محتوا را نشان می دهد

3-collapsing. هنگامی که انتقال شروع می شود، اضافه می شود و بعد از اتمام حذف می شود

این کلاس ها را می توان در _transitions.scss یافت.

 

از طریق ویژگی های داده 

فقط اضافه کردن "data-toggle = "collapse و یک به data-target. عنصر به طور خودکار کنترل یک یا چند عنصر قابل کشف را اختصاص دهید. خصیصه data-target. یک انتخابگر CSS برای اعمال شدن سقوط به اطمینان حاصل کنید که سقوط کلاس را به عنصر کشویی اضافه کنید. اگر می خواهید آن را به طور پیش فرض باز کنید، نمایش کلاس های اضافی را اضافه کنید.

برای افزودن مدیریت گروه گروه آکوردئون به یک منطقه قابل انعطاف، "data attribute data-parent = # selector" را اضافه کنید. برای دیدن این در عمل به نسخه ی نمایشی مراجعه کنید.

 

از طریق جاوا اسکریپت

به صورت دستی با:

 

 $('.collapse').collapse()

 

گزینه ها

گزینه ها می توانند از طریق ویژگی های داده یا جاوا اسکریپت منتقل شوند. برای ویژگی های داده، نام گزینه را به داده اضافه کنید، همانطور که در data-parent = "".

Name Type Default Description
parent selector | jQuery object | DOM element false If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the card class). The attribute has to be set on the target collapsible area.
toggle boolean true Toggles the collapsible element on invocation

 

متدها

.collapse(options)

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

 $('#myCollapsible').collapse({ toggle: false })

 

.collapse('show')

عنصر کشویی را نشان می دهد. قبل از اینکه عنصر کشویی واقع شده نشان داده شود، به تماس دهنده می رسد

.collapse('hide')

پنهان کردن عنصر کشویی. قبل از اینکه عنصر کشویی پنهان شود، به تماس گیرنده می رسد

.collapse('dispose')

سقوط یک عنصر را از بین می برد.

 

مناسبت ها 

کلاس فروپاشی بوت استرپ چندین رویداد را برای دسترسی به قابلیت های فروپاشی نمایش می دهد. "

Event Type Description
show.bs.collapse This event fires immediately when the show instance method is called.
shown.bs.collapse This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.collapse This event is fired immediately when the hide method has been called.
hidden.bs.collapse This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).

 

 $('#myCollapsible').on('hidden.bs.collapse', function () { // do something… })