فردی یا تالیفی

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

ویژگی های داده

شما می توانید از تمام پلاگین های بوت استرپ صرفاً از طریق API نشانه گذاری بدون نوشتن یک خط جاوا اسکریپت استفاده کنید. این اولین API کلاس بوت استرپ است و باید در هنگام استفاده از یک پلاگین اولین مورد توجه شما باشد.

گفته می شود، در برخی شرایط ممکن است مطلوب باشد که این عملکرد خاموش شود. بنابراین، ما همچنین توانایی غیرفعال کردن API ویژگی داده را با جدا کردن همه رویدادها در فضای نام بدنه با «data-api» ارائه می‌کنیم. به نظر می رسد این است:

$ ( "بدن" ). خاموش ( '.data-api' )

از طرف دیگر، برای هدف قرار دادن یک پلاگین خاص، فقط نام افزونه را به عنوان فضای نام به همراه فضای نام data-api مانند زیر وارد کنید:

$ ( "بدن" ). خاموش ( '.alert.data-api' )

API برنامه‌ای

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

$ ( ".btn.danger" ). دکمه ( "تغییر" ). addClass ( "چربی" )

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

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

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

بدون درگیری

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

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

مناسبت ها

بوت استرپ رویدادهای سفارشی را برای اکثر اقدامات منحصر به فرد افزونه فراهم می کند. به طور کلی، این ها به صورت مصدر و ماضی می آیند - که در آن مصدر (مثل show) در شروع یک رویداد تحریک می شود، و شکل ماضی آن (مصدر) shownپس از اتمام یک عمل، ماشه است.

همه رویدادهای نامحدود عملکرد PreventDefault را ارائه می دهند. این امکان را فراهم می کند تا اجرای یک عمل قبل از شروع آن متوقف شود.

$ ( '#myModal' ). on ( 'show' , function ( e ) {   
    اگر (! داده ) e را برگرداند . preventDefault () // نمایش مدال را متوقف می کند   
})

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

برای افکت های انتقال ساده، یک بار bootstrap-transition.js را در کنار سایر فایل های JS قرار دهید. اگر از bootstrap.js کامپایل‌شده (یا کوچک‌شده) استفاده می‌کنید ، نیازی به گنجاندن این نیست - قبلاً وجود دارد.

موارد استفاده کنید

چند نمونه از افزونه انتقال:

• لغزش یا محو شدن در مدال
• محو شدن برگه ها
• محو شدن هشدارها
• شیشه های چرخ فلک کشویی

مثال ها

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

مثال ثابت

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

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </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>

نسخه ی نمایشی زنده

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

<!-- دکمه راه اندازی modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > راه‌اندازی حالت نمایشی </a>    
 
<!-- معین -->
<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-toggle="modal"روی یک عنصر کنترلر، مانند یک دکمه، به همراه یک data-target="#foo"یا href="#foo"برای هدف قرار دادن یک مدال خاص برای جابجایی تنظیم کنید.

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

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

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

$ ( '#myModal' ). معین ( گزینه ها )

گزینه ها

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

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

مواد و روش ها

.modal(گزینه ها)

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

$ ( '#myModal' ). معین ({
  صفحه کلید : نادرست 
})

.modal ('تغییر')

به صورت دستی یک مودال را تغییر می دهد.

$ ( '#myModal' ). معین ( "تغییر" )

.modal('show')

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

$ ( '#myModal' ). معین ( "نمایش" )

.modal ("پنهان کردن")

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

$ ( '#myModal' ). معین ( "پنهان کردن" )

مناسبت ها

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

$ ( '#myModal' ). on ( 'مخفی' , تابع () {   
  // کاری بکنید…
})

مثال ها

با این افزونه ساده، منوهای کشویی را به تقریباً هر چیزی اضافه کنید، از جمله نوار ناوبری، تب ها و قرص ها.

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

درون برگه ها

استفاده

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

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>

برای دست نخورده نگه داشتن URL ها، از data-targetویژگی به جای href="#".

<div class = "Dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    کشویی
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria- labelledby = "dLabel" >   
    ...
  </ul>
</div>

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

کشویی ها را از طریق جاوا اسکریپت فراخوانی کنید:

$ ( '.dropdown-toggle' ). کشویی ()

گزینه ها

هیچ یک

مواد و روش ها

$().dropdown('toggle')

یک api برنامه‌ریزی برای تغییر منوها برای یک نوار ناوبری مشخص یا ناوبری برگه‌دار.

مثال در نوار ناوبری

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

استفاده

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

برای اینکه به راحتی رفتار اسکرول‌اسپی را به ناوبری نوار بالای خود اضافه کنید، کافیست data-spy="scroll"عنصری را که می‌خواهید از آن جاسوسی کنید (به طور معمول این بدنه است) اضافه کنید و data-target=".navbar"انتخاب کنید از کدام ناوبری استفاده کنید. شما می خواهید از scrollspy با یک .navجزء استفاده کنید.

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

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

فراخوانی scrollspy از طریق جاوا اسکریپت:

$ ( '#navbar' ). طومار ()

مواد و روش ها

.scrollspy ('Refresh')

هنگام استفاده از scrollspy همراه با افزودن یا حذف عناصر از DOM، باید متد Refresh را به این صورت فراخوانی کنید:

$ ( '[data-spy="scroll"]' ). هر ( تابع () {  
  var $spy = $ ( این ). scrollspy ( "بازخوانی" )
})؛

گزینه ها

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

مناسبت ها

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

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

استفاده

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

$ ( '#myTab a' ). کلیک کنید ( تابع ( e ) {  
  ه . preventDefault ();
  $ ( این ). تب ( 'نمایش' )؛
})

شما می توانید برگه های فردی را به چند روش فعال کنید:

$ ( '#myTab a[href="#profile"]' ). تب ( 'نمایش' )؛ // برگه را با نام انتخاب کنید 
$ ( '#myTab a:first' ). تب ( 'نمایش' )؛ // برگه اول را انتخاب کنید 
$ ( '#myTab a:last' ). تب ( 'نمایش' )؛ // آخرین برگه را انتخاب کنید 
$ ( '#myTab li:eq(2) a' ). تب ( 'نمایش' )؛ // برگه سوم را انتخاب کنید (صفر شده) 

نشانه گذاری

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

<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 فعال" 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>
 
<اسکریپت>
  $ ( تابع () {  
    $ ( '#myTab a:last' ). تب ( 'نمایش' )؛
  })
</script>

مناسبت ها

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

مثال ها

با الهام از پلاگین عالی jQuery.tipsy نوشته شده توسط Jason Frame. راهنمای ابزار یک نسخه به روز شده است که به تصاویر متکی نیست، از CSS3 برای انیمیشن ها و از ویژگی های داده برای ذخیره سازی عنوان محلی استفاده می کند.

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

برای دیدن نکات ابزار، نشانگر را روی پیوندهای زیر نگه دارید:

چهار جهت

نکات ابزار در گروه های ورودی

هنگام استفاده از راهنمای ابزار و پاپاور با گروه های ورودی Bootstrap، باید گزینه container(مستند شده در زیر) را برای جلوگیری از عوارض جانبی ناخواسته تنظیم کنید.

استفاده

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

$ ( '#example' ). راهنمای ابزار ( گزینه ها )

گزینه ها

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

نشانه گذاری

<a href = "#" data-toggle = "tooltip" title = "اولین نکته ابزار" > نشانگر را روی من نگه دارید </a>   

مواد و روش ها

$().tooltip(گزینه ها)

یک کنترل کننده راهنمای راهنمای ابزار را به مجموعه عناصر متصل می کند.

.tooltip('show')

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

$ ( '#element' ). راهنمای ابزار ( "نمایش" )

.tooltip ('پنهان کردن')

راهنمای ابزار یک عنصر را پنهان می کند.

$ ( '#element' ). راهنمای ابزار ( "پنهان کردن" )

.tooltip('toggle')

راهنمای ابزار یک عنصر را تغییر می دهد.

$ ( '#element' ). راهنمای ابزار ( "تغییر" )

.tooltip ("تخریب")

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

$ ( '#element' ). راهنمای ابزار ( "تخریب" )

مثال ها

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

پاپاور استاتیک

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

هیچ نشانه‌گذاری نشان داده نمی‌شود که پاپاورها از جاوا اسکریپت و محتوای درون یک dataویژگی ایجاد می‌شوند.

نسخه ی نمایشی زنده

چهار جهت

استفاده

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

$ ( '#example' ). پاپاور ( گزینه ها )

گزینه ها

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

نشانه گذاری

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

مواد و روش ها

$().popover(گزینه ها)

پاپاورها را برای یک مجموعه عناصر راه اندازی می کند.

.popover('show')

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

$ ( '#element' ). پاپاور ( "نمایش" )

.popover ("پنهان کردن")

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

$ ( '#element' ). پاپاور ( "پنهان کردن" )

.popover ('تغییر')

پاپاور عناصر را تغییر می دهد.

$ ( '#element' ). پاپاور ( "تغییر" )

.popover ("ویران کردن")

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

$ ( '#element' ). پاپاور ( "تخریب" )

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

با این افزونه قابلیت رد کردن را به همه پیام‌های هشدار اضافه کنید.

استفاده

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

$ ( ".alert" ). هشدار ()

نشانه گذاری

فقط data-dismiss="alert"به دکمه بستن خود اضافه کنید تا به طور خودکار عملکرد بسته هشدار ارائه شود.

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

مواد و روش ها

$().alert()

همه هشدارها را با عملکرد نزدیک بسته بندی می کند. برای اینکه هشدارها در هنگام بسته شدن متحرک شوند، مطمئن شوید که کلاس .fadeو .inکلاس قبلاً برای آنها اعمال شده است.

.alert ('close')

یک هشدار را می بندد.

$ ( ".alert" ). هشدار ( "بستن" )

مناسبت ها

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

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

استفاده های مثال

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

دولتی

data-loading-text="Loading..."برای استفاده از حالت بارگذاری روی دکمه، اضافه کنید.

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

ضامن تکی

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

<button type = "button" class = "btn btn-primary" data-toggle = "button" > تعویض تکی </button>   

چک باکس

data-toggle="buttons-checkbox"برای تغییر حالت چک باکس در گروه btn اضافه کنید.

<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>

رادیو

data-toggle="buttons-radio"برای تغییر سبک رادیویی در گروه btn اضافه کنید.

<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('toggle')

وضعیت فشار را تغییر می دهد. به دکمه ظاهری می دهد که فعال شده است.

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

$().button('بارگیری')

وضعیت دکمه را روی بارگیری تنظیم می کند - دکمه را غیرفعال می کند و متن را با متن بارگیری می کند. بارگذاری متن باید روی عنصر دکمه با استفاده از ویژگی داده تعریف شود data-loading-text.

<button type = "button" class = "btn" data-loading-text = "loading stuff..." > ... </button>    

$().button('reset')

حالت دکمه را بازنشانی می کند - متن را به متن اصلی تغییر می دهد.

دکمه (رشته) $()

حالت دکمه را بازنشانی می‌کند - متن را به هر حالت متنی تعریف‌شده با داده مبادله می‌کند.

<button type = "button" class = "btn" data-complete-text = "تمام شد!" > ... </button>    
<اسکریپت>
  $ ( '.btn' ). دکمه ( "کامل" )
</script>

در باره

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

* باید افزونه Transitions گنجانده شود.

نمونه آکاردئون

با استفاده از افزونه collapse، یک ویجت ساده به سبک آکاردئونی ساختیم:

<div class = "accordion" id = "accordion2" >  
  <div class = "گروه آکاردئون" > 
    <div class = "Accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        مورد گروه تاشو شماره 1
      </a>
    </div>
    <div id = "collapseOne" class = "جمع شدن بدن آکاردئون در" >  
      <div class = "آکاردئون-داخلی" > 
        کلیشه انیمه پاریاتور...
      </div>
    </div>
  </div>
  <div class = "گروه آکاردئون" > 
    <div class = "Accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        مورد گروه تاشو شماره 2
      </a>
    </div>
    <div id = "collapseTwo" class = "کاهش بدن آکاردئون" >  
      <div class = "آکاردئون-داخلی" > 
        کلیشه انیمه پاریاتور...
      </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-toggle="collapse"فقط کافیست یک عنصر و یک عنصر را اضافه کنید data-targetتا به طور خودکار کنترل یک عنصر جمع شونده را اختصاص دهید. این data-targetویژگی یک انتخابگر css را برای اعمال collapse می پذیرد. حتماً کلاس collapseرا به عنصر جمع شونده اضافه کنید. اگر می‌خواهید به‌طور پیش‌فرض باز شود، کلاس اضافی را اضافه کنید in.

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

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

فعال کردن دستی با:

$ ( ".collapse" ). سقوط ()

گزینه ها

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

مواد و روش ها

.collapse(گزینه ها)

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

$ ( '#myCollapsible' ). فرو ریختن ({
  جابجایی : نادرست 
})

.collapse ('تغییر')

یک عنصر جمع شونده را به نمایش یا پنهان تغییر می دهد.

.collapse('show')

یک عنصر جمع شونده را نشان می دهد.

.collapse ('پنهان کردن')

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

مناسبت ها

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

$ ( '#myCollapsible' ). on ( 'مخفی' , تابع () {   
  // کاری بکنید…
})

نمونه چرخ فلک

نمایش اسلاید زیر یک پلاگین و مؤلفه عمومی را برای عبور از عناصری مانند چرخ فلک نشان می دهد.

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

Cras justo odio، dapibus ac facilisis in، egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultrices vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "اسلاید چرخ فلک" >  
  <ol class = "نشانگرهای چرخ فلک" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "فعال" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- آیتم های چرخ فلک -->
  <div class = "چرخ و فلک داخلی" > 
    <div class = "اقلام فعال" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- چرخ فلک ناو -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

استفاده

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

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

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

تماس دستی چرخ فلک با:

$ ( '. چرخ فلک' ). چرخ فلک ()

گزینه ها

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

مواد و روش ها

چرخ فلک (گزینه‌ها)

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

$ ( '. چرخ فلک' ). چرخ فلک ({
  فاصله زمانی : 2000 
})

چرخ فلک ("چرخه")

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

چرخ فلک ("مکث")

چرخ و فلک را از چرخاندن وسایل جلوگیری می کند.

چرخ فلک (شماره)

چرخ فلک را به یک فریم خاص (بر اساس 0، شبیه به یک آرایه) چرخه می کند.

چرخ فلک ('قبلی')

چرخه به مورد قبلی.

چرخ فلک ("بعدی")

چرخه به مورد بعدی.

مناسبت ها

کلاس چرخ فلک Bootstrap دو رویداد را برای اتصال به عملکرد چرخ و فلک نشان می دهد.

مثال

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

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

باید تنظیم کنید autocomplete="off"تا از ظاهر شدن منوهای پیش‌فرض مرورگر در منوی کشویی Bootstrap جلوگیری کنید.

استفاده

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

همانطور که در مثال بالا نشان داده شده است، ویژگی های داده را برای ثبت یک عنصر با قابلیت تایپ سر اضافه کنید.

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

تایپ را به صورت دستی با استفاده از:

$ ( '.typeahead' ). سر تایپ ()

گزینه ها

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

مواد و روش ها

.typeahead(گزینه ها)

یک ورودی را با یک تایپ راه اندازی می کند.

مثال

پیمایش فرعی سمت چپ یک نسخه نمایشی زنده از افزونه affix است.

استفاده

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

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

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

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

فراخوانی افزونه affix از طریق جاوا اسکریپت:

$ ( '#navbar' ). الصاق ()

گزینه ها

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