منحصربه‌فرد یا کامپایل‌شده

پلاگین‌ها می‌توانند به‌صورت جدا (اگرچه بعضی از آن‌ها دارای نیازمندی‌هایی هستند) و یا یک‌جا با هم استفاده شوند. هم bootstrap.js و bootstrap.min.js شامل تمام پلاگین‌ها در یک فایل هستند.

خصوصیت‌های Data

شما می‌توانید به‌وسیلهٔ API بوت‌استرپ تمام پلاگین‌ها را حتی بدون نوشتن یک خط کد جاوااسکریپت استفاده کنید. کلاس زیر نخستین کلاس API بوت‌استرپ است و شما باید در هنگام استفاده از پلاگین، به این توجه داشته‌باشد.

همان‌طور که گفته شد، در برخی از مواقع بهتر است این ویژگی را خاموش کنیم. بنابراین ما ویژگی‌ای را آماده کرده‌ایم که آن را به‌راحتی می‌توانید غیرفعال کنید. فقط لازم است تابع off را با پارامتر `'data-api'` بر روی body فراخوانی کنید. مانند زیر:

$('body').off('.data-api')

همچنین شما می‌توانید پلاگین خاصی را با استفاده از نام پلاگین به عنوان فضای نام همراه با data-api استفاده کنید. مانند:

$('body').off('.alert.data-api')

API قابل برنامه‌ریزی

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

$(".btn.danger").button("toggle").addClass("fat")

تمام توایع باید یک شی از انتخاب‌ها را قبول کند، یک رشته که تابع خاصی را صدا می‌زند و یا هیچی (که شی با رفتار پیش‌فرض مقداردهی اولیه می‌شود):

$("#myModal").modal()                       // مقداردهی اولیه با پیش‌فرض‌ها
$("#myModal").modal({ keyboard: false })   // مقداردهی با انتخاب بدون صفحه کلید
$("#myModal").modal('show')                // مقداردهی و سپس فراخوانی تابع

همچنین هر پلاگین سازندهٔ خودش را با فراخوانی خصوصیت `Constructor` نمایش می‌دهد: $.fn.popover.Constructor. اگر شما یک شی از پلاگین خاصی را می‌خواهید بدست آورید، به‌صورت مستقیم از عنصرش آن را بخواهید: $('[rel=popover]').data('popover').

بدون تداخل

گاهی اوقات نیاز است که پلاگین‌های بوت‌استرپ را با دیگر چارچوب‌های رابط کاربری استفاده کرد. در این موارد تداخل فضای نام‌ها پیش می‌آید. اگر این اتفاق افتاد از .noConflict در پلاگینی که نیاز است، استفاده کنید.

var bootstrapButton = $.fn.button.noConflict() // به مقداری تخصیص داده شده، $.fn.button را برمی‌گرداند.
$.fn.bootstrapBtn = bootstrapButton            // به $.fn.button کارایی بوت‌استرپ را اعمال می‌کند.

رویدادها

بوت‌استرپ برای تمام پلاگین‌هایش رویدادهای خاص و واحدی را آماده کرده‌است. که به‌طور کلی آن‌ها به‌صورت مصدر و یا اسم مفعول می‌آیند. موقعی که از مصدر استفاده می‌شود (برای مثال: show) رویداد قرار است که اجرا شود و وقتی که به صورت اسم مفعول می‌آید (برای مثال: shown) رویداد زمانی اجرا می‌شود که آن عمل تمام شده‌باشد.

تمام رویدادهای مصدر قابلیت preventDefault را فراهم می‌کنند. که این ویژگی به این معناست که قابلیت پیش‌فرض را قبل از اجرا شدن این عمل خنثی می‌کند.

$('#myModal').on('show', function (e) {
    if (!data) return e.preventDefault() // اجازه نمی‌دهد که مُدال نمایش داده شود
})

درباهٔ انتقال‌ها

برای جلوهٔ بصری سادهٔ transition، فایل bootstrap-transition.js را یک‌بار در پروژهٔ خود قرار دهید. اگر شما از نسخهٔ کامپایل‌شده (یا فشرده‌شده) bootstrap.js استفاده می‌کنید نیاز به قرار دادن در پروژهٔ خود نیست، هم‌اکنون آن وجود دارد.

استفاده‌ها

چند نمونه از استفادهٔ این پلاگین:

• نمایش اسلایدی و یا محو شدن در مُدال‌ها
• محو شدن تب‌ها
• محو شدن اخطارها
• نمایش اسلایدی چرخ فلک

نمونه‌ها

مدال‌ها به‌صورت خطی هستند، اما اعلان‌هایی، قابل انعطاف با کمترین نیازمندی‌ها و دارای پیش‌فرض‌های هوشمند هستند.

نمونه‌ٔ ثابت

که مدال با تیتر و بدنه و مجموعه‌ای از عملیات در پایین آن را نمایش می‌دهد.

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>تیتر مدال</h3>
  </div>
  <div class="modal-body">
    <p>نمونه‌ای از محتویات…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">بستن</a>
    <a href="#" class="btn btn-primary">ذخیره تغییرات</a>
  </div>
</div>

نمایشی زنده

با کلیک کردن بر روی دکمه مدال نمایش داده می‌شود. این مدال از جلوهٔ بصری slide down و fade in از بالای صفحه به پایین استفاده می‌کند.

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">اجرای زنده مُدال</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">تیتر مدال</h3>
  </div>
  <div class="modal-body">
    <p>نمونه‌ای از محتویات…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">بستن</button>
    <button class="btn btn-primary">ذخیره تغییرات</button>
  </div>
</div>

استفاده

با استفاده از خصوصیت data

مدال را بدون نوشتن جاوااسکریپت فعال کنید. خصوصیت data-toggle="modal" بر روی یک کنترل‌کننده مانند دکمه به‌همراه خصوصیت data-target="#foo" یا href="#foo" که مشخص‌کنندهٔ متن مدال می‌باشد، قرار دهید.

<button type="button" data-toggle="modal" data-target="#myModal">اجرای مدال</button>

با استفاده از جاوااسکریپت

یک مدال را با استفاده از شناسهٔ myModal با یک خط جاوااسکریپت صدا بزنید:

$('#myModal').modal(انتخاب‌ها)

انتخاب‌ها

انتخاب‌ها می‌توانند به‌وسیلهٔ خصوصیات data و یا جاوااسکریپت فرستاده شوند. برای استفاده از خصوصیات data نام data- را به data-backdrop="" اضافه کنید.

<a data-toggle="modal" href="remote.html" data-target="#modal">کلیک کنید</a>

توابع

.modal(انتخاب‌ها)

محتویات خود را به عنوان مدال فعال کنید. انتخاب‌های اختیاری با استفاده از object را قبول می‌کند.

$('#myModal').modal({
  keyboard: false
})

.modal('تغییر وضعیت')

به‌صورت دستی مدال فعال و غیرفعال می‌کند.

$('#myModal').modal('toggle')

.modal('نمایش')

به‌صورت دستی مدال را باز می‌کند.

$('#myModal').modal('show')

.modal('مخفی')

به‌صورت دستی مدال را می‌بندد.

$('#myModal').modal('hide')

رویدادها

کلاس مدال بوت‌استرپ برای کارایی بیشتر چندین رویداد را از خود تولید می‌کند.

$('#myModal').on('hidden', function () {
  // انجام یک کاری…
})

نمونه‌ها

منوهای افتادنی را با این پلاگین ساده برای هرچیزی بسازید. چیزهایی مانند: نوار ناوبری، تب‌ها و پیل‌ها.

در داخل یک نوار ناوبری

در داخل تب‌ها

استفاده

با استفاده از خصوصیت data

data-toggle="dropdown" به یک پیوند یا دکمه برای تبدیل آن به یک افتادنی، اضافه کنید.

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">افتادنی</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

اگر آدرس‌ها مانند هم هستند از خصوصیت data-target به‌جای href="#" استفاده کنید.

<div class="dropdown">
  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="افتادنی" data-target="#" href="/page.html">
    Dropdown
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

با استفاده از جاوااسکریپت

افتادنی‌ها را به‌وسیلهٔ جاوااسکریپت صدا بزنید:

$('.dropdown-toggle').dropdown()

انتخاب‌ها

هیچی

توابع

$().dropdown('toggle')

یک api برنامه‌ریزی شده برای تغییر وضعیت منوها در نوار ناوبری و ناوبری‌های تبی.

نمونه در نوار ناوبری

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

استفاده

با استفاده از خصوصیت data

برای این‌که به راحتی رفتار اسکرول جاسوس را به نوار ناوبری اضافه کنید، data-spy="scroll" به عنصری که می‌خواهید جاسوسی کند (که اغلب اوقات، بدنه است) و data-target=".navbar" به عناصر ناوبری اضافه کنید.

<body data-spy="scroll" data-target=".navbar">...</body>

با استفاده از جاوااسکریپت

اسکرول جاسوس را با جاوااسکریپت فراخوانی کنید:

$('#navbar').scrollspy()

توابع

.scrollspy('به‌روزرسانی')

وقتی عنصر خاص در محتوا حذف یا اضافه می‌شود یا به عبارت دیگر عنصر خاصی در DOM اضافه یا حذف می‌شود باید با فراخوانی این تابع اسکرول جاسوس را به‌روز کنید:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
});

انتخاب‌ها

انتخاب‌ها می‌توانند از طریق خصوصیت data و یا توسط جاوااسکریپت فرستاده شوند. برای خصوصیت data نام انتخاب را به data- اضافه کنید. به عنوان مثال: data-offset="".

رویدادها

تب‌های نمونه

یک تب پویا و سریع برای تغییر بین چندین محتوای محلی ایجاد کنید. حتی می‌توانید این قابلیت را برای منوهای افتادنی نیز فعال کنید.

استفاده

قابلیت تب را با استفاده از جاوااسکریپت فعال کنید (هر تب باید به طور اختصاصی فعال شود):

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

شما می‌توانید هر تب را به‌طور اختصاصی از چندین روش فعال کنید:

$('#myTab a[href="#profile"]').tab('show'); // با استفاده از انتخاب نام
$('#myTab a:first').tab('show'); // با استفاده از تب نخست
$('#myTab a:last').tab('show'); // با استفاده از تب آخر
$('#myTab li:eq(2) a').tab('show'); // با استفاده از تب سوم - از صفر شروع شده‌است

نشانه‌گذاری

شما می‌توانید هر تب یا پیلی را بدون نوشتن کد جاوااسکریپت، فعال کنید. فقط نیاز است که data-toggle="tab" یا data-toggle="pill" را در عنصر اضافه کنید. کلاس‌های nav و nav-tabs برای عنصر ul، شیوه نمایش تبی بوت‌استرپ را فعال می‌کند.

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">صفحه اصلی</a></li>
  <li><a href="#profile" data-toggle="tab">پروفایل</a></li>
  <li><a href="#messages" data-toggle="tab">پیام‌ها</a></li>
  <li><a href="#settings" data-toggle="tab">تنظیمات</a></li>
</ul>

توابع

$().tab

عنصر و نگهدارنده محتویات تب را فعال می‌کند. تب باید data-target یا href را به یک عنصر در DOM اشاره دهد.

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">صفحه اصلی</a></li>
  <li><a href="#profile">پروفایل</a></li>
  <li><a href="#messages">پیام‌ها</a></li>
  <li><a href="#settings">تنظیمات</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

<script>
  $(function () {
    $('#myTab a:last').tab('show');
  })
</script>

رویدادها

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // تب فعال‌شده
  e.relatedTarget // تب قبلی
})

نمونه‌ها

برگرفته از پلاگین jQuery.tipsy که توسط «جیسون فریم» نوشته‌شده‌است، می‌باشد. بالنک‌ها نسخهٔ به‌روزشده آن است که مبتنی بر عکس نمی‌باشد و از پویانمایی‌ها و خصوصیت‌های data (برای local title storage) سی‌اس‌اس ۳ استفاده می‌کند.

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

بر روی پیوندهای زیر بروید تا آن‌ها را ببنید:

در چهار جهت

بالنک‌ها در گروهای دکمه‌ای

وقتی از بالنک‌ها و پوب‌ها در گروه‌های دکمه‌ای بوت‌استرپ استفاده می‌کنید، شما باید container مقداردهی کنید تا از اتفاق‌های جانبی جلوگیری کنید. (در زیر مستندسازی شده‌است)

استفاده

با استفاده از جاوااسکریپت بالنک را فعال کنید:

$('#example').tooltip(انتخاب‌ها)

انتخاب‌ها

انتخاب‌ها با استفاده از خصوصیت data یا جاوااسکریپت به تابع فرستاده می‌شود. برای خصوصیت data نام انتخاب خود را به data- اضافه کنید مانند data-animation="".

نشانه‌گذاری

<a href="#" data-toggle="tooltip" title="first tooltip">بیا این‌جا</a>

توابع

$().tooltip(انتخاب‌ها)

یک بالنک به عناصر انتخاب شده، می‌چسباند.

.tooltip('نمایش')

بالنک یک عنصر را نمایش می‌دهد.

$('#element').tooltip('show')

.tooltip('مخفی')

بالنک یک عنصر را مخفی می‌کند.

$('#element').tooltip('hide')

.tooltip('تغییر وضعیت')

بالنک یک عنصر را تغییر حالت می‌دهد.

$('#element').tooltip('toggle')

.tooltip('حذف')

بالنک یک عنصر را مخفی و حذف می‌کند.

$('#element').tooltip('destroy')

نمونه‌ها

یک محتوا را در کنار یک عنصر، در صورتی دارای اطلاعات اضافی باشد، به‌مانند آن‌چیزی که در آی‌پد وجود دارد، قرار می‌دهد. بر روی دکمه بروید تا پوب، تغییر حالت بدهد. پیش‌نیاز پوب بالنک است و باید آن را نیز قرار دهید.

پوب ثابت

چهار انتخاب وجود دارد: بالا، راست، پایین و چپ.

جاوااسکریپت هیچ کد نشانه‌گذاری، در هنگام تولید پوب تولید نمی‌کند و تمام محتویات را در داخل خصوصیت data قرار می‌دهد.

اجرای زنده

چهار جهت

استفاده

پوب‌ها را با استفاده جاوااسکریپت فعال کنید:

$('#example').popover(انتخاب‌ها)

انتخاب‌ها

انتخاب‌ها می‌توانند با خصوصیت data یا جاوااسکریپت فرستاده شوند. برای خصوصیت data نام انتخاب را به data- اضافه کنید، مانند data-animation="".

نشانه‌گذاری

برای بازدهی بهتر و سرعت بیشتر پوب‌ها و بالنک‌ها از data-apis می‌توان استفاده کرد. اگر شما می‌خواهید از آن‌ها استفاده کنید، فقط نیاز است که انتخاب‌گر را مشخص کنید.

توابع

$().popover(انتخاب‌ها)

یک پوب به عناصر انتخاب شده، می‌چسباند.

.popover('نمایش')

پوب یک عنصر را نمایش می‌دهد.

$('#element').popover('show')

.popover('مخفی')

پوب یک عنصر را مخفی می‌کند.

$('#element').popover('hide')

.popover('تغییر وضعیت')

پوب یک عنصر را تغییر حالت می‌دهد.

$('#element').popover('toggle')

.popover('حذف')

پوب یک عنصر را مخفی و حذف می‌کند.

$('#element').popover('destroy')

نمونه‌ای از اخطارها

دکمه حذف برای تمام پیام‌های اخطار توسط این پلاگین قرار می‌گیرد.

استفاده

پیام اخطار را توسط جاوااسکریپت فعال می‌کند:

$(".alert").alert()

نشانه‌گذاری

فقط نیاز است که data-dismiss="alert" را به دکمه اضافه کنید تا به‌صورت خودکار تبدیل به دکمهٔ بستن پیام اخطار شود.

<a class="close" data-dismiss="alert" href="#">&times;</a>

توابع

$().alert()

برای این‌که بتوان تمام پیام اخطار را باهم بست می‌توان از تابع زیر استفاده کرد. برای داشتن جلوهٔ بصری در هنگام بستن مطمئن شوید که کلاس‌های .fade و .in در آن‌ها وجود دارد.

.alert('بستن')

بستن یک اخطار.

$(".alert").alert('close')

رویدادها

کلاس اخطار بوت‌استرپ چندین رویداد در هنگام کار با اخطار از خود تولید می‌کند.

$('#my-alert').bind('closed', function () {
  // انجام یک‌کاری…
})

نمونه‌های استفاده

ایجاد دکمه‌های گروهی برای ساخت نوار ابزار و کارهای بسیاری دیگر که می‌توان با دکمه‌ها انجام داد.

نمایش وضعیت

برای این‌که یک دکمه وضعیت را نمایش دهد "در حال بارگذاری..."=data-loading-text را به آن اضافه کنید.

<button type="button" class="btn btn-primary" data-loading-text="در حال بارگذاری...">دانلود</button>

تغییر وضعیت یک‌حالته

برای تبدیل یک دکمه به حالت تغییر وضعیت یک‌حالته data-toggle="button" را به آن اضافه کنید.

<button type="button" class="btn btn-primary" data-toggle="button">تغییر وضعیت یک‌حالته</button>

Checkbox

برای تبدیل شدن دکمه به شیوه checkbox، خصوصیت data-toggle="buttons-checkbox" را به عنصری که کلاس آن btn-group است، اضافه کنید.

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="btn btn-primary">راست</button>
  <button type="button" class="btn btn-primary">وسط</button>
  <button type="button" class="btn btn-primary">چپ</button>
</div>

Radio

برای تبدیل شدن دکمه به شیوه radio، خصوصیت data-toggle="buttons-radio" را به عنصری که کلاس آن btn-group است، اضافه کنید.

<div class="btn-group" data-toggle="buttons-radio">
  <button type="button" class="btn btn-primary">راست</button>
  <button type="button" class="btn btn-primary">وسط</button>
  <button type="button" class="btn btn-primary">چپ</button>
</div>

استفاده

دکمه‌ها را از طریق جاوااسکریپت فعال می‌کند:

$('.nav-tabs').button()

نشانه‌گذاری

خصوصیات Data برای پلاگین دکمه جداناپذیر است. به نمونه‌های زیر توجه کنید:

انتخاب‌ها

هیچی

توابع

$().button('تغییر وضعیت')

با فشردن دکمه، تغییر وضعیت خواهد داد. شیوهٔ نمایش آن به حالتی تغییر خواهد کرد که فعال به‌نظر می‌رسد.

<button type="button" class="btn" data-toggle="button" >…</button>

$().button('در حال بارگذاری')

دکمه را درحالت بارگذاری قرار می‌دهد. دکمه غیرفعال می‌شود و متن دکمه به در حال بارگذاری تغییر می‌کند. متن در حال بارگذاری باید به‌وسیلهٔ خصوصیت data-loading-text به دکمه اضافه شود.

<button type="button" class="btn" data-loading-text="در حال بارگذاری..." >...</button>

$().button('بازنشانی')

وضعیت دکمه دوباره به‌حالت اول برمی‌گردد. متن به متن اصلی تغییر پیدا می‌کند.

$().button(رشته)

وضعیت به حالت اول تغییر می‌کند. متن به متن تعریف‌شده برای این تابع تغییر پیدا می‌کند.

<button type="button" class="btn" data-complete-text="finished!" >...</button>
<script>
  $('.btn').button('complete')
</script>

درباره

شیوه‌های نمایش پایه و انعطاف‌پذیر را برای پشتیبانی از اجزای فروریختنی مانند آکوردئون‌ها و ناوبری‌ها دریافت کنید.

* نیاز به پلاگین انتقال‌ها دارد.

نمونه‌ای از آکوردئون

از پلاگین فروریختنی برای ساخت یک ویدجت ساده استفاده کنید:

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        گروه فروریختنی شماره ۱
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        قوانین مربوط به نحوه بسته‌بندی یک بسته تغییر یافته...
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        گروه فروریختنی شماره ۲
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
         اغلب مجوزهای نرم‌افزار آزاد بر اساس کپی‌رایت می‌باشند...
      </div>
    </div>
  </div>
</div>
...

همچنین شما می‌توانید بدون نشانه‌گذاری آکوردئون از پلاگین استفاده کنید. یک دکمهٔ تغییر حالت بسازید که باز شدن و فرو ریختن یک عنصر دیگر را کنترل کند.

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
  فرورختن ساده
</button>

<div id="demo" class="collapse in"> … </div>

استفاده

با استفاده از خصوصیت data

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

برای اضافه‌کردن یک گروه از آکوردئون‌ها باید مانند دموی قبلی خصوصیت data-parent="#selector" را به آکوردئون اضافه کنید.

با استفاده از جاوااسکریپت

فعال کردن به‌صورت دستی:

$(".collapse").collapse()

انتخاب‌ها

انتخاب‌ها می‌توانند با استفاده از خصوصیت data و یا جاوااسکریپت فرستاده شود. برای خصوصیت data نام انتخاب را به data- اضافه کنید، مانند data-parent="".

توابع

.collapse(انتخاب‌ها)

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

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

.collapse('تغییر وضعیت')

باعث می‌شود یک عنصر فروریختنی نمایش داده شود و یا مخفی شود.

.collapse('نمایش')

یک عنصر فروریختنی را نمایش می‌دهد.

.collapse('مخفی')

یک عنصر فروریختنی را مخفی می‌کند.

رویدادها

کلاس فروریختنی بوت‌استرپ تعدادی رویداد از خود تولید می‌کند.

$('#myCollapsible').on('hidden', function () {
  // انجام یک‌کاری…
})

نمونه‌ای از چرخ فلک

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

نخستین برچسب بندانگشتی

کاخ، کوشک(فارسی) یا قصر(عربی) به محل اقامت خانواده سلطنتی، رئیس دولت، مقامات عالیرتبه و اشراف گفته میشود.

دومین برچسب بندانگشتی

کاخ، کوشک(فارسی) یا قصر(عربی) به محل اقامت خانواده سلطنتی، رئیس دولت، مقامات عالیرتبه و اشراف گفته میشود.

سومین برچسب بندانگشتی

کاخ، کوشک(فارسی) یا قصر(عربی) به محل اقامت خانواده سلطنتی، رئیس دولت، مقامات عالیرتبه و اشراف گفته میشود.

› ‹

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- 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>

استفاده

با استفاده از خصوصیت data

برای کنترل مکان قرارگیری چرخ فلک، از خصوصیت data استفاده کنید. data-slide کلیدواژه‌های prev یا next را قبول می‌کند که مکان قرارگیری اسلاید را براساس مکان قرارگیری جاری را تغییر می‌دهد. به data-slide-to هم می‌توان مکان قرارگیری اسلاید را فرستاد مانند data-slide-to="2". توجه کنید که مکان قرارگیری از 0 شروع می‌شود.

با استفاده از جاوااسکرپیت

چرخ فلک را دستی فراخوانی کنید:

$('.carousel').carousel()

انتخاب‌ها

انتخاب‌ها با استفاده از خصوصیت data و یا جاوااسکریپت فرستاده می‌شود. برای خصوصیت data نام انتخاب را به data- اضافه کنید، مانند data-interval="".

توابع

.carousel(انتخاب‌ها)

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

$('.carousel').carousel({
  interval: 2000
})

.carousel('چرخش')

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

.carousel('توقف')

چرخ فلک از دور زدن بر روی آیتم‌ها متوقف می‌شود.

.carousel(عدد)

چرخ فلک بر روی آیتم مشخص‌شده حرکت می‌کند (از صفر شروع می‌شود مانند آرایه).

.carousel('قبلی')

به آیتم قبلی بازمی‌گردد.

.carousel('بعدی')

به آیتم بعدی می‌رود.

رویدادها

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

نمونه

یک پلاگین پایه‌ای، ساده و قابل گسترش برای ایجاد کامل‌کنندهٔ نوشته بر روی هر ورودی متن فرم.

<input type="text" data-provide="typeahead">

You'll want to set autocomplete="off" to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.

استفاده

با استفاده از خصوصیت data

خصوصیت data را به یک عنصر اضافه کنید تا قابلیت کامل‌کننده نوشته را بدست آورد مانند مثال بالا.

با استفاده از جاوااسکریپت

کامل‌کننده نوشته را دستی فراخوانی کنید:

$('.typeahead').typeahead()

انتخاب‌ها

انتخاب‌ها با استفاده از خصوصیت data و یا جاوااسکریپت فرستاده می‌شود. برای خصوصیت data نام انتخاب را به data- اضافه کنید مانند data-source="".

توابع

.typeahead(انتخاب‌ها)

یک ورودی را به کامل‌کنندهٔ نوشته تجهیز می‌کند.

نمونه

زیرناوبری در سمت راست نمونه‌ای از نمایش زندهٔ پلاگین پیوست می‌باشد.

استفاده

با استفاده از خصوصیت data

برای تبدیل هر عنصری به یک پیوست، فقط نیاز است که data-spy="affix" به آن عنصر اضافه کنید. سپس جابه‌جایی‌ها را تعریف کنید که چه‌وقت عنصر فعال و غیرفعال شود.

<div data-spy="affix" data-offset-top="200">...</div>

با استفاده از جاوااسکریپت

پلاگین پیوست با استفاده از جاوااسکریپت فراخوانی کنید:

$('#navbar').affix()

انتخاب‌ها

انتخاب‌ها با استفاده از خصوصیت data و یا جاوااسکریپت فرستاده می‌شوند. برای خصوصیت data نام انتخاب را به data- اضافه کنید مانند data-offset-top="200".