بوت استرپ

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

اکنون با 12 پلاگین سفارشی جی کوئری ، اجزای Bootstrap را زنده کنید.

پلاگین های جی کوئری ده ها پلاگین بوت استرپ برای شروع کار

سر بالا! همه پلاگین های جاوا اسکریپت به آخرین نسخه جی کوئری نیاز دارند.

Modals bootstrap-modal.js

درباره مدال ها

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

دریافت فایل

مثال ثابت

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

×

سربرگ معین

یک بدن خوب…

نزدیک ذخیره تغییرات

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

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

حالت دمو را راه اندازی کنید

با استفاده از bootstrap-modal

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

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

گزینه ها

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

نشانه گذاری

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

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

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > راه اندازی Modal </a>    
  1. <div class = "modal" id = "myModal" >  
  2.   <div class = "modal-header" > 
  3.     <a class = "close" data-dismiss = "modal" > × </a>  
  4.     <h3> سرصفحه معین </h3>
  5.   </div>
  6.   <div class = "modal-body" > 
  7.     <p> یک بدن خوب… </p>
  8.   </div>
  9.   <div class = "modal-footer" > 
  10.     <a href = "#" class = "btn" > بستن </a>  
  11.     <a href = "#" class = "btn btn-primary" > ذخیره تغییرات </a>  
  12.   </div>
  13. </div>
سر بالا! اگر می‌خواهید مودال شما در داخل و خارج متحرک شود، فقط یک .fadeکلاس به .modalعنصر اضافه کنید (برای مشاهده عملی آن به نسخه نمایشی مراجعه کنید) و bootstrap-transition.js را در آن قرار دهید.

مواد و روش ها

.modal(گزینه ها)

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

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

.modal ('تغییر')

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

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

.modal('show')

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

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

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

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

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

مناسبت ها

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

رویداد شرح
نشان می دهد این رویداد بلافاصله پس از showفراخوانی متد نمونه فعال می شود.
نشان داده شده این رویداد زمانی اجرا می‌شود که مدال برای کاربر قابل مشاهده باشد (منتظر می‌شود تا انتقال‌های css تکمیل شود).
پنهان شدن این رویداد بلافاصله پس از hideفراخوانی متد نمونه فعال می شود.
پنهان شده است این رویداد زمانی فعال می‌شود که مدال از کاربر مخفی شود (منتظر کامل شدن انتقال‌های css می‌ماند). 
  1. $ ( '#myModal' ). on ( 'مخفی' , تابع () {   
  2.   // کاری بکنید…
  3. })

ScrollSpy bootstrap-scrollspy.js

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

دریافت فایل

نوار ناوبری مثال با اسکرول‌اسپی

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

@چربی

ساق های تبلیغاتی کیتار، برانچ id art party dolor labore. Pitchfork yr enim lo-fi قبل از اینکه qui را به فروش برسانند. حقوق دوچرخه Tumblr مزرعه به میز هر چه باشد. ژاکت کش باف پشمی انیم کفیه کارلوس. غرفه عکس Velit seitan mcsweeney 3 wolf moon irure. ژاکت کازبی شلوارک جین لومو، ویلیامزبورگ هودی مینیم کی که احتمالاً نام آنها را نشنیده اید و صندوق ژاکت کش باف پشمی culpa biodiesel زیبایی وس اندرسون. نیهیل خالکوبی accusamus، cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

اسکیت بورد سبیل ونیام مارفا، ریش چنگال چنگال مخملی. فریگان ریش aliqua cupidatat mcsweeney's vero. Cupidatat چهار لوکو نیسی، ea helvetica nulla carles. کامیون مواد غذایی ژاکت کازبی خالکوبی شده، وینیل quis non freegan Mcsweeney's. Lo-fi وس اندرسون +1 sartorial. کارلز ورزش غیر زیبایی شناختی quis gentrify. بروکلین adipisicing craft beer vice keytar deserunt.

یکی

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. حقوق دوچرخه لومو adipisicing banh mi، velit ea sunt سطح بعدی لوکاور قهوه تک اصل در magna veniam. وینیل با شناسه عمر بالا، پارک اکو نتیجه کوئیس آلیکیپ بان می چنگال. Vero VHS آدیپیسینگ است. کیف پیام رسان DIY Minim Consectetur nisi. Cred ex in، iphone delectus consectetur fanny pack.

دو

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

وبلاگ Keytar twee، culpa messenger bag marfa هر کامیون غذای دلکتوس. Sapiente synth id assumenda. کنایه‌ای کلیشه‌ای Locavore sed helvetica، رعد و برق‌هایی که احتمالاً در مورد آن‌ها نشنیده‌اید، نتیجه هودی بدون گلوتن lo-fi fap aliquip هستند. Labore elit placeat قبل از اینکه به فروش برسند، تری ریچاردسون proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. ژاکت کش باف پشمی کاردیگان بیر سیتن آماده ویت. VHS chambray laboris tempor veniam. Anim mollit minim commodo ulamco thundercats.

با استفاده از bootstrap-scrollspy.js

از طریق جاوا اسکریپت با scrollspy تماس بگیرید:

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

نشانه گذاری

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

  1. <body data-spy = "scroll" > ... </body>
سر بالا! پیوندهای نوار ناوبری باید دارای اهداف شناسایی قابل حل باشند. به عنوان مثال، <a href="#home">home</a>باید با چیزی در dom مطابقت داشته باشد مانند <div id="home"></div>.

گزینه ها

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

برگه های قابل تغییر bootstrap-tab.js

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

دریافت فایل

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

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

جین خام احتمالاً در مورد آنها شورت جین آستین نشنیده اید. Nesciunt tofu stumptown aliqua، پاکسازی استاد مصنوعی یکپارچهسازی با سیستمعامل. سبیل کلیشه تمپور، ویلیامزبورگ کارلوس وگان هلوتیکا. Reprehenderit قصاب رترو keffiyeh dreamcatcher synth. ژاکت کازبی eu banh mi، qui irure تری ریچاردسون سابق مرکب. Aliquip placeat salvia cillum iphone. Seitan aliquip quis ژاکت کش باف پشمی پوشاک آمریکایی، قصاب voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

با استفاده از bootstrap-tab.js

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

  1. $ ( '#myTab' ). برگه ( "نمایش" )

نشانه گذاری

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

  1. <ul class = "nav nav-tabs" > 
  2.   <li><a href = "#home" data-toggle = "tab" > صفحه اصلی </a></li>  
  3.   <li><a href = "#profile" data-toggle = "tab" > نمایه </a></li>  
  4.   <li><a href = "#messages" data-toggle = "tab" > پیام‌ها </a></li>  
  5.   <li><a href = "#settings" data-toggle = "tab" > تنظیمات </a></li>  
  6. </ul>

مواد و روش ها

تب $().

یک عنصر برگه و محفظه محتوا را فعال می کند. برگه باید دارای «data-target» یا «href» باشد که گره کانتینری در dom را هدف قرار می دهد.

  1. <ul class = "nav nav-tabs" > 
  2.   <li class = "active" ><a href = "#home" > صفحه اصلی </a></li>  
  3.   <li><a href = "#profile" > نمایه </a></li> 
  4.   <li><a href = "#messages" > پیام‌ها </a></li> 
  5.   <li><a href = "#settings" > تنظیمات </a></li> 
  6. </ul>
  7.  
  8. <div class = "tab-content" > 
  9.   <div class = "tab-pane فعال" id = "home" > ... </div>  
  10.   <div class = "tab-pane" id = "profile" > ... </div>  
  11.   <div class = "tab-pane" id = "messages" > ... </div>  
  12.   <div class = "tab-pane" id = "settings" > ... </div>  
  13. </div>
  14.  
  15. <اسکریپت>
  16.   $ ( تابع () {  
  17.     $ ( '.tabs a:last' ). برگه ( "نمایش" )
  18.   })
  19. </script>

مناسبت ها

رویداد شرح
نشان می دهد این رویداد در نمایش برگه فعال می شود، اما قبل از اینکه برگه جدید نشان داده شود. از event.targetو event.relatedTargetبرای هدف قرار دادن برگه فعال و برگه فعال قبلی (در صورت موجود بودن) استفاده کنید.
نشان داده شده این رویداد پس از نمایش یک برگه در نمایش برگه فعال می شود. از event.targetو event.relatedTargetبرای هدف قرار دادن برگه فعال و برگه فعال قبلی (در صورت موجود بودن) استفاده کنید. 
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'shown' , function ( e ) {   
  2.   ه . هدف // تب فعال شده
  3.   ه . relatedTarget // تب قبلی
  4. })

راهنمای ابزار bootstrap-tooltip.js

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

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

دریافت فایل

مثال استفاده از Tooltips

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

شلوارهای چسبان سطح بعدی کفیه که احتمالا اسمش را نشنیده اید. غرفه عکس ریش خام جین لترپرس وگان کیسه پیام رسان stumptown. سیتان مزرعه تا میز، پوشاک آمریکایی 8 بیتی کینوا پایدار فیکس مک‌سوئینی دارای یک مجلسی وینیل تری ریچاردسون است. استامپ تاون ریش، ژاکت کش باف پشمی بانه می لومو تندرکت. توفو بیودیزل ویلیامزبورگ مارفا، چهار لوکو مک‌سوئینی پاکسازی وگان شامبری. یک صنعت‌گر واقعا کنایه‌آمیز، با هر کیتار، منظره‌ای از مزرعه تا میز بانکی آستین توییتر ، قهوه جین تک اصل فریگان کرد خام را مدیریت می‌کند.

با استفاده از bootstrap-tooltip.js

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

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

گزینه ها

نام نوع پیش فرض شرح
انیمیشن بولی درست است، واقعی یک انتقال محو شدن css به راهنمای ابزار اعمال کنید
تعیین سطح رشته | تابع 'بالا' نحوه قرار دادن راهنمای ابزار - بالا | پایین | چپ | درست
انتخابگر رشته نادرست اگر انتخابگر ارائه شود، اشیاء راهنمای ابزار به اهداف مشخص شده واگذار می شوند.
عنوان رشته | عملکرد '' اگر تگ «title» وجود نداشته باشد، مقدار عنوان پیش‌فرض
ماشه رشته شناور راهنمای ابزار چگونه راه اندازی می شود - شناور | تمرکز | کتابچه راهنمای
تاخیر انداختن شماره | هدف - شی 0

تاخیر در نمایش و پنهان کردن راهنمای ابزار (ms)

اگر شماره ای ارائه شود، تاخیر برای هر دو پنهان/نمایش اعمال می شود

ساختار شیء عبارت است از:delay: { show: 500, hide: 100 }
سر بالا! گزینه‌هایی برای راهنمایی‌های ابزار مجزا می‌توانند از طریق استفاده از ویژگی‌های داده مشخص شوند.

نشانه گذاری

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

  1. <a href = "#" rel = "tooltip" title = "first tooltip" > نشانگر را روی من نگه دارید </a>

مواد و روش ها

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

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

.tooltip('show')

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

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

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

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

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

.tooltip('toggle')

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

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

Popovers bootstrap-popover.js

درباره پاپاورها

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

* نیاز به راهنمای ابزار دارد

دریافت فایل

مثال شناور پاپاور

ماوس را روی دکمه نگه دارید تا پاپاور فعال شود.

شناور برای پاپاور

با استفاده از bootstrap-popover.js

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

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

گزینه ها

نام نوع پیش فرض شرح
انیمیشن بولی درست است، واقعی یک انتقال محو شدن css به راهنمای ابزار اعمال کنید
تعیین سطح رشته | تابع 'درست' نحوه قرار دادن پاپاور - بالا | پایین | چپ | درست
انتخابگر رشته نادرست اگر انتخابگر ارائه شود، اشیاء راهنمای ابزار به اهداف مشخص شده واگذار می شوند
ماشه رشته شناور راهنمای ابزار چگونه راه اندازی می شود - شناور | تمرکز | کتابچه راهنمای
عنوان رشته | عملکرد '' اگر ویژگی «title» وجود نداشته باشد، مقدار عنوان پیش‌فرض
محتوا رشته | عملکرد '' مقدار محتوای پیش‌فرض اگر ویژگی «داده محتوای» وجود نداشته باشد
تاخیر انداختن شماره | هدف - شی 0

تاخیر در نمایش و پنهان کردن پاپاور (ms)

اگر شماره ای ارائه شود، تاخیر برای هر دو پنهان/نمایش اعمال می شود

ساختار شیء عبارت است از:delay: { show: 500, hide: 100 }
سر بالا! گزینه‌های مربوط به پاپاورهای فردی را می‌توان با استفاده از ویژگی‌های داده مشخص کرد.

نشانه گذاری

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

مواد و روش ها

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

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

.popover('show')

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

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

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

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

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

.popover ('تغییر')

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

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

پیام های هشدار bootstrap-alert.js

درباره هشدارها

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

دانلود

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

افزونه هشدارها روی پیام‌های هشدار معمولی کار می‌کند و پیام‌ها را مسدود می‌کند.

× گواکامول مقدس! بهتر است خودتان را بررسی کنید، شما خیلی خوب به نظر نمی رسید.
×

آه ضربه محکم و ناگهانی! شما یک خطا دریافت کردید!

این و آن را تغییر دهید و دوباره امتحان کنید. Duis mollis، est non commodo luctus، nisi erat porttitor ligula، eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

این اقدام را انجام دهید یا این کار را انجام دهید

با استفاده از bootstrap-alert.js

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

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

نشانه گذاری

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

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

مواد و روش ها

$().alert()

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

.alert ('close')

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

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

مناسبت ها

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

رویداد شرح
بستن این رویداد بلافاصله پس از closeفراخوانی متد نمونه فعال می شود.
بسته این رویداد زمانی فعال می شود که هشدار بسته شده باشد (منتظر می شود تا انتقال های css تکمیل شود). 
  1. $ ( '#my-alert' ). bind ( 'closed' , function () {   
  2.   // کاری بکنید…
  3. })

دکمه‌ها bootstrap-button.js

در باره

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

دریافت فایل

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

از افزونه دکمه ها برای وضعیت ها و جابجایی ها استفاده کنید.

دولتی
ضامن تکی
چک باکس
رادیو

با استفاده از bootstrap-button.js

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

  1. $ ( '.tabs' ). دکمه ()

نشانه گذاری

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

  1. <!-- اضافه کردن data-toggle="button" برای فعال کردن تغییر روی یک دکمه -->
  2. <button class = "btn" data-toggle = "button" > تعویض تکی </button>  
  3.  
  4. <!-- اضافه کردن data-toggle="buttons-checkbox" برای تغییر سبک چک باکس در btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >  
  6.   <button class = "btn" > چپ </button> 
  7.   <button class = "btn" > وسط </button> 
  8.   <button class = "btn" > راست </button> 
  9. </div>
  10.  
  11. <!-- افزودن data-toggle="buttons-radio" برای تغییر سبک رادیویی در گروه btn -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >  
  13.   <button class = "btn" > چپ </button> 
  14.   <button class = "btn" > وسط </button> 
  15.   <button class = "btn" > راست </button> 
  16. </div>

مواد و روش ها

$().button('toggle')

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

سر بالا! data-toggleبا استفاده از ویژگی می توانید تغییر خودکار یک دکمه را فعال کنید .
  1. <button class = "btn" data-toggle = "button" > … </button>

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

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

  1. <button class = "btn" data-loading-text = "loading stuff..." > ... </button>
سر بالا! فایرفاکس در طول بارگذاری صفحه به حالت غیرفعال باقی می ماند . یک راه حل برای این استفاده از autocomplete="off".

$().button('reset')

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

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

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

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

bootstrap-collapse.js را جمع کنید

در باره

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

دریافت فایل

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

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

مورد گروه تاشو شماره 1
انیمیشن پاریاتور کلیشه ای reprehenderit، enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. کامیون مواد غذایی کینوا nesciunt laborum eiusmod. برانچ 3 wolf moon tempor, sunt aliqua یک پرنده را روی آن قرار داد ماهی مرکب قهوه تک اصل nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. تبلیغ وگان استثنائور قصاب معاون لومو. شلوار ساق occaecat آبجو دستی مزرعه به میز، جین خام زیبایی شناسی مصنوعی، شما احتمالاً در مورد آنها accusamus labore VHS پایدار نشنیده اید.
مورد گروه تاشو شماره 2
انیمیشن پاریاتور کلیشه ای reprehenderit، enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. کامیون مواد غذایی کینوا nesciunt laborum eiusmod. برانچ 3 wolf moon tempor, sunt aliqua یک پرنده را روی آن قرار داد ماهی مرکب قهوه تک اصل nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. تبلیغ وگان استثنائور قصاب معاون لومو. شلوار ساق occaecat آبجو دستی مزرعه به میز، جین خام زیبایی شناسی مصنوعی، شما احتمالاً در مورد آنها accusamus labore VHS پایدار نشنیده اید.
مورد گروه تاشو شماره 3
انیمیشن پاریاتور کلیشه ای reprehenderit، enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. کامیون مواد غذایی کینوا nesciunt laborum eiusmod. برانچ 3 wolf moon tempor, sunt aliqua یک پرنده را روی آن قرار داد ماهی مرکب قهوه تک اصل nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. تبلیغ وگان استثنائور قصاب معاون لومو. شلوار ساق occaecat آبجو دستی مزرعه به میز، جین خام زیبایی شناسی مصنوعی، شما احتمالاً در مورد آنها accusamus labore VHS پایدار نشنیده اید.

با استفاده از bootstrap-collapse.js

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

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

گزینه ها

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

نشانه گذاری

data-toggle="collapse"فقط کافیست یک عنصر و یک عنصر را اضافه کنید data-targetتا به طور خودکار کنترل یک عنصر جمع شونده را اختصاص دهید. این data-targetویژگی یک انتخابگر css را برای اعمال collapse می پذیرد. حتماً کلاس collapseرا به عنصر جمع شونده اضافه کنید. اگر می‌خواهید به‌طور پیش‌فرض باز شود، کلاس اضافی را اضافه کنید in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  2.   تاشو ساده
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > … </div>
سر بالا! برای افزودن مدیریت گروه آکاردئونی مانند به یک کنترل جمع شونده، ویژگی داده را اضافه کنید data-parent="#selector". برای مشاهده عملکرد به نسخه ی نمایشی مراجعه کنید.

مواد و روش ها

.collapse(گزینه ها)

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

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

.collapse ('تغییر')

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

.collapse('show')

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

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

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

مناسبت ها

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

رویداد شرح
نشان می دهد این رویداد بلافاصله پس از showفراخوانی متد نمونه فعال می شود.
نشان داده شده این رویداد زمانی فعال می‌شود که یک عنصر جمع‌کردن برای کاربر قابل مشاهده باشد (منتظر تکمیل انتقال‌های css می‌ماند).
پنهان شدن این رویداد بلافاصله پس از hideفراخوانی متد اجرا می شود.
پنهان شده است این رویداد زمانی فعال می شود که یک عنصر collapse از کاربر پنهان شده باشد (منتظر تکمیل انتقال css می شود). 
  1. $ ( '#myCollapsible' ). on ( 'مخفی' , تابع () {   
  2.   // کاری بکنید…
  3. })

Typeahead bootstrap-typeahead.js

در باره

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

دریافت فایل

مثال

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

با استفاده از bootstrap-typeahead.js

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

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

گزینه ها

نام نوع پیش فرض شرح
منبع آرایه [ ] منبع داده برای پرس و جو در برابر.
موارد عدد 8 حداکثر تعداد موارد برای نمایش در منوی کشویی.
همسان عملکرد مورد غیر حساس روش مورد استفاده برای تعیین اینکه آیا یک پرس و جو با یک آیتم مطابقت دارد یا خیر. یک آرگومان واحد را می‌پذیرد که در itemمقابل آن کوئری را آزمایش کند. با پرس و جو فعلی دسترسی پیدا کنید this.query. trueاگر پرس و جو مطابقت دارد، یک Boolean برگردانید .
مرتب کننده عملکرد تطابق دقیق،
حساس به حروف کوچک، بزرگ و
کوچک		 روش مورد استفاده برای مرتب سازی نتایج تکمیل خودکار. یک آرگومان واحد را می پذیرد itemsو محدوده نمونه تایپ را دارد. ارجاع به درخواست فعلی با this.query.
هایلایتر عملکرد تمام موارد منطبق بر پیش فرض را برجسته می کند روش مورد استفاده برای برجسته کردن نتایج تکمیل خودکار. یک آرگومان واحد را می پذیرد itemو محدوده نمونه تایپ را دارد. باید html را برگرداند.

نشانه گذاری

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

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

مواد و روش ها

.typeahead(گزینه ها)

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