collapse و carousel در بوت استرپ

Collapse

افزونه collapse تقسیم بندی در حال فروپاشی صفحه را آسان می کند. چه از آن برای ساخت ناوبری آکاردئونی یا جعبه محتوا استفاده کنید، آن را
گزینه های محتوای زیادی را امکان پذیر می کند.

مانند همه افزونه‌هایی که از Data API استفاده می‌کنند، می‌توانید همه نشانه‌گذاری‌های مورد نیاز را بدون آن اضافه کنید
نوشتن هر جاوا اسکریپت افزودن data-toggle=”collapse” و data-target به ele-
برای تخصیص خودکار کنترل یک عنصر جمع شونده. ویژگی data-target
یک انتخابگر CSS را برای اعمال جمع کردن می پذیرد. حتماً کلاس .collapse را به آن اضافه کنید
عنصر تاشو اگر می خواهید به طور پیش فرض باز شود، کلاس اضافی .in را اضافه کنید.
برای افزودن مدیریت گروه آکاردئونی مانند به یک کنترل جمع شونده، ویژگی داده را اضافه کنید
data-parent=”#selector”.
متد collapse را می توان با جاوا اسکریپت نیز فعال کرد:
$(“.collapse”).collapse()

متد ها

روش های زیر برای استفاده با عناصر جمع شونده مفید هستند
show:یک عنصر جمع شونده را نشان می دهد:
.collapse(‘show’)
hide : یک عنصر جمع شونده را پنهان می کند:
.collapse(‘hide’)
toggle : یک عنصر تاشو را به نمایش یا پنهان تغییر می دهد:
$(‘#myCollapsible’).collapse({
toggle: false
})
.collapse(‘toggle’)
options :محتوای شما را به عنوان یک عنصر جمع شونده فعال می کند. یک شی گزینه اختیاری را می پذیرد :
.collapse(options)

events

چهار رویداد وجود دارد که می‌توان آنها را با افزونه فروپاشی مرتبط کرد، که در شرح داده شده است :
show , hide , hidden, shown

Carousel

carousel در بوت استرپ روشی انعطاف پذیر و پاسخگو برای افزودن یک نوار لغزنده به شما است.
سایت. علاوه بر واکنش گرا بودن، محتوا به اندازه کافی انعطاف پذیر است تا تصاویر را امکان پذیر کند.
iframes، ویدیوها یا هر نوع محتوایی که ممکن است بخواهید.

<div id=”myCarousel” class=”carousel slide”>
<!– Carousel items –>
<div class=”carousel-inner”>
<div class=”active item”>…</div>
<div class=”item”>…</div>
<div class=”item”>…</div>
</div>
<!– Carousel nav –>
<a class=”carousel-control left” href=”#myCarousel” data-slide=”prev”>&lsaquo;</a>
<a class=”carousel-control right” href=”#myCarousel” data-slide=”next”>&rsaquo;</a>
</div>

برای پیاده سازی چرخ فلک، فقط باید کد را با نشانه گذاری بالا اضافه کنید. آنجا
نیازی به ویژگی های داده نیست، فقط توسعه ساده مبتنی بر کلاس است. شما می توانید به صورت دستی
با استفاده از کد زیر، چرخ فلک را با جاوا اسکریپت فراخوانی کنید.

options

options را می توان از طریق ویژگی های داده یا از طریق جاوا اسکریپت منتقل کرد

متد ها :

options : کروسل را با یک شی گزینه اختیاری راه‌اندازی می‌کند و شروع به چرخیدن در میان آیتم‌ها می‌کند:
$(‘.carousel’).carousel({
interval: 2000
})

cycle : از چپ به راست در میان آیتم های چرخ فلک می چرخد:
.carousel(‘cycle’)

pause : از چرخ و فلک ایتم ها جلوگیری می کند:
.carousel(‘pause’)

Number : چرخ فلک را به یک قاب خاص (بر اساس 0، شبیه به یک آرایه) چرخان:
.carousel(‘number’)

prev: چرخه به مورد قبلی:
.carousel(‘prev’)

next: چرخه به مورد بعدی:
.carousel(‘next’)

events :

چرخ فلک دارای دو رویداد است که می توان به آنها متصل شد : slide , slid