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

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

مثال ثابت

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

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

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

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

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

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

گزینه ها

نشانه گذاری

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

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

<a class = "btn" data-toggle = "modal" href = "#myModal" > راه اندازی Modal </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> سرصفحه معین </h3>
  </div>
  <div class = "modal-body" > 
    <p> یک بدن خوب… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > بستن </a>   
    <a href = "#" class = "btn btn-primary" > ذخیره تغییرات </a>  
  </div>
</div>

مواد و روش ها

.modal(گزینه ها)

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

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

.modal ('تغییر')

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

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

.modal('show')

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

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

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

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

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

مناسبت ها

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

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

درباره کشویی ها

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

مثال ها

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

• لینک منظم
• کشویی
  • Action
  • Another action
  • Something else here
  • Separated link
• کشویی 2
  • Action
  • Another action
  • Something else here
  • Separated link
• کشویی 3
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

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

نشانه گذاری

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

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > پیوند معمولی </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      کشویی
      <b class = "caret" ></b> 
    </a>
    <ul class = "Dropdown-menu" > 
      <li><a href = "#" > اقدام </a></li> 
      <li><a href = "#" > اقدام دیگری </a></li> 
      <li><a href = "#" > چیز دیگری در اینجا </a></li> 
      <li class = "تقسیم کننده" </li> 
      <li><a href = "#" > پیوند جدا شده </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li class = "کشویی" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      کشویی
      <b class = "caret" ></b> 
    </a>
    <ul class = "Dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

مواد و روش ها

$().dropdown()

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

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

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

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

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

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

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

نشانه گذاری

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

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

مواد و روش ها

.scrollspy ('Refresh')

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

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

گزینه ها

مناسبت ها

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

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

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

• صفحه اصلی
• مشخصات
• کشویی
  • @fat
  • @mdo

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

برگه‌های 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و به برگه ، استایل برگه بوت استرپ اعمال می شود.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. Tooltips نسخه به روز شده ای است که به تصاویر متکی نیست، از css3 برای انیمیشن ها و از ویژگی های داده برای ذخیره عنوان محلی استفاده می کند.

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

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

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

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

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

گزینه ها

نشانه گذاری

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

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

مواد و روش ها

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

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

.tooltip('show')

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

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

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

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

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

.tooltip('toggle')

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

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

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

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

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

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

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

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

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

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

گزینه ها

نشانه گذاری

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

مواد و روش ها

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

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

.popover('show')

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

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

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

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

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

.popover ('تغییر')

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

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

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

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

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

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

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

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

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

نشانه گذاری

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

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

مواد و روش ها

$().alert()

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

.alert ('close')

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

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

مناسبت ها

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

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

در باره

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

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

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

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

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

$ ( '.nav-tabs' ). دکمه ()

نشانه گذاری

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

<!-- اضافه کردن data-toggle="button" برای فعال کردن تغییر روی یک دکمه -->
<button class = "btn" data-toggle = "button" > تعویض تکی </button>  
 
<!-- اضافه کردن data-toggle="buttons-checkbox" برای تغییر سبک چک باکس در btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > چپ </button> 
  <button class = "btn" > وسط </button> 
  <button class = "btn" > راست </button> 
</div>
 
<!-- افزودن data-toggle="buttons-radio" برای تغییر سبک رادیویی در گروه btn -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > چپ </button> 
  <button class = "btn" > وسط </button> 
  <button class = "btn" > راست </button> 
</div>

مواد و روش ها

$().button('toggle')

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

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

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

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

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

$().button('reset')

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

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

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

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

در باره

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

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

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

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

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

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

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

گزینه ها

نشانه گذاری

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

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  تاشو ساده
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

مواد و روش ها

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

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

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.

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

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.

‹ ›

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

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

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

گزینه ها

نشانه گذاری

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

<div id = "myCarousel" class = "اسلاید چرخ فلک" >  
  <!-- آیتم های چرخ فلک -->
  <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>

مواد و روش ها

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

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

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

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

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

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

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

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

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

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

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

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

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

مناسبت ها

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

در باره

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

مثال

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

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

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

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

گزینه ها

نشانه گذاری

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

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

مواد و روش ها

.typeahead(گزینه ها)

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