بررسی اجمالی

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

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

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

هر دو bootstrap.jsو bootstrap.min.jsشامل همه افزونه ها در یک فایل واحد است. فقط یکی را شامل شود.

وابستگی های افزونه

برخی از پلاگین ها و اجزای CSS به پلاگین های دیگر بستگی دارند. اگر افزونه‌ها را به صورت جداگانه اضافه می‌کنید، حتماً این وابستگی‌ها را در اسناد بررسی کنید. همچنین توجه داشته باشید که همه پلاگین ها به jQuery وابسته هستند (این بدان معناست که jQuery باید قبل از فایل های افزونه گنجانده شود). با ما مشورتbower.json کنید تا ببینید کدام نسخه از jQuery پشتیبانی می شود.

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

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

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

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

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

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

فقط یک افزونه در هر عنصر از طریق ویژگی های داده

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

API برنامه‌ای

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

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

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

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

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

تنظیمات پیش فرض

می‌توانید تنظیمات پیش‌فرض یک افزونه را با تغییر Constructor.DEFAULTSشیء افزونه تغییر دهید:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

بدون درگیری

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

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

مناسبت ها

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

از نسخه 3.0.0، همه رویدادهای بوت استرپ دارای فضای نام هستند.

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

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

شماره های نسخه

نسخه هر یک از پلاگین های جی کوئری بوت استرپ از طریق VERSIONویژگی سازنده افزونه قابل دسترسی است. به عنوان مثال، برای افزونه tooltip:

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

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

وقتی جاوا اسکریپت غیرفعال است، پلاگین‌های بوت استرپ به‌خوبی کار نمی‌کنند. اگر در این مورد به تجربه کاربری اهمیت می دهید، <noscript>برای توضیح وضعیت (و نحوه فعال کردن مجدد جاوا اسکریپت) به کاربران خود و/یا اضافه کردن بک گراندهای سفارشی خود استفاده کنید.

کتابخانه های شخص ثالث

بوت استرپ به طور رسمی از کتابخانه های جاوا اسکریپت شخص ثالث مانند Prototype یا jQuery UI پشتیبانی نمی کند. با وجود .noConflictرویدادها و فضای نام، ممکن است مشکلات سازگاری وجود داشته باشد که باید به تنهایی آنها را برطرف کنید.

Transitions transition.js

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

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

داخلش چیه

Transition.js یک کمک کننده اساسی برای transitionEndرویدادها و همچنین یک شبیه ساز انتقال CSS است. توسط سایر پلاگین ها برای بررسی پشتیبانی از انتقال CSS و برای گرفتن ترانزیشن های معلق استفاده می شود.

غیرفعال کردن انتقال ها

انتقال‌ها را می‌توان با استفاده از قطعه جاوا اسکریپت زیر، که باید پس از بارگیری transition.js( bootstrap.jsیا ، بر حسب مورد) غیرفعال کرد:bootstrap.min.js

$.support.transition = false

Modals modal.js

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

چند حالت باز پشتیبانی نمی شود

مطمئن شوید که یک مودال را باز نکنید تا زمانی که دیگری هنوز قابل مشاهده است. نمایش بیش از یک مدال در یک زمان به کد سفارشی نیاز دارد.

قرار دادن نشانه گذاری معین

همیشه سعی کنید کد HTML یک مودال را در یک موقعیت سطح بالا در سند خود قرار دهید تا از تأثیر سایر مؤلفه‌ها بر ظاهر و/یا عملکرد مودال جلوگیری شود.

هشدارهای دستگاه تلفن همراه

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

با توجه به اینکه HTML5 چگونه معنایی خود را تعریف می کند، autofocusویژگی HTML هیچ تاثیری در مدال های Bootstrap ندارد. برای رسیدن به همان اثر، از جاوا اسکریپت سفارشی استفاده کنید:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

مثال ها

مثال ثابت

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

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

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

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

مدال ها را در دسترس قرار دهید

مطمئن شوید که role="dialog"و aria-labelledby="..."را با ارجاع به عنوان مدال، به .modalو role="document"به .modal-dialogخود اضافه کنید.

علاوه بر این، می‌توانید شرحی از گفتگوی مودال خود با aria-describedbyدر ارائه دهید .modal.

جاسازی ویدیوهای یوتیوب

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

اندازه های اختیاری

مدال ها دو اندازه اختیاری دارند که از طریق کلاس های اصلاح کننده در دسترس هستند تا روی یک قرار بگیرند .modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

حذف انیمیشن

برای حالت‌هایی که به‌جای محو شدن برای مشاهده، به سادگی ظاهر می‌شوند، .fadeکلاس را از نشانه‌گذاری مدال خود حذف کنید.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

با استفاده از سیستم شبکه

برای استفاده از س��ستم شبکه بوت استرپ در یک مودال، فقط .rowدر داخل کلاس‌های سیستم شبکه معمولی لانه کنید .modal-bodyو سپس از کلاس‌های سیستم شبکه معمولی استفاده کنید.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

آیا یک دسته دکمه دارید که همگی یک مودال را راه اندازی می کنند، فقط با محتویات کمی متفاوت؟ از ویژگی‌های HTMLevent.relatedTarget و (احتمالاً از طریق jQuery ) برای تغییر محتویات مدال بسته به اینکه روی کدام دکمه کلیک شده است، استفاده کنید. برای جزئیات بیشتر به اسناد رویدادهای Modal مراجعه کنید ،data-*relatedTarget

... دکمه های بیشتر ...
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

استفاده

افزونه مودال محتوای پنهان شما را در صورت تقاضا، از طریق ویژگی های داده یا جاوا اسکریپت تغییر می دهد. همچنین به نادیده گرفتن رفتار پیمایش پیش‌فرض اضافه .modal-openمی‌کند <body>و یک .modal-backdropناحیه کلیک برای رد کردن مدال‌های نشان‌داده‌شده هنگام کلیک کردن در خارج از مدال ایجاد می‌کند.

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

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

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

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

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

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

گزینه ها

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

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

این گزینه از نسخه 3.3.0 منسوخ شده و در نسخه 4 حذف شده است. توصیه می‌کنیم در عوض از قالب سمت کلاینت یا چارچوب اتصال داده استفاده کنید یا خودتان jQuery.load را فراخوانی کنید.

اگر یک URL راه دور ارائه شود، محتوا یک بار از طریق روش jQuery بارگیری می شود و به div loadتزریق می شود . .modal-contentاگر از data-api استفاده می‌کنید، می‌توانید از hrefویژگی برای تعیین منبع راه دور استفاده کنید. نمونه ای از آن در زیر نشان داده شده است:

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

مواد و روش ها

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

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

به صورت دستی یک مودال را تغییر می دهد. قبل از اینکه مدال واقعاً نشان داده یا پنهان شود (یعنی قبل از وقوع رویداد یا رویداد) به تماس گیرنده برمی گردد.shown.bs.modalhidden.bs.modal

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

به صورت دستی یک مودال را باز می کند. قبل از اینکه مدال واقعاً نشان داده شود (یعنی قبل از وقوع رویداد) به تماس گیرنده برمی گردد .shown.bs.modal

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

به صورت دستی یک مودال را پنهان می کند. قبل از اینکه مدال واقعاً پنهان شود (یعنی قبل از وقوع رویداد) به تماس گیرنده برمی گردد .hidden.bs.modal

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

موقعیت مودال را مجدداً برای مقابله با نوار پیمایش تنظیم می کند، در صورتی که ظاهر شود، که باعث پرش مودال به سمت چپ می شود.

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

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

مناسبت ها

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

همه رویدادهای مودال به سمت خود مدال شلیک می شوند (یعنی در <div class="modal">).

نوع رویداد شرح
show.bs.modal این رویداد بلافاصله پس از showفراخوانی متد نمونه فعال می شود. اگر ناشی از کلیک باشد، عنصر کلیک شده به عنوان relatedTargetویژگی رویداد در دسترس است.
نشان داده شده.bs.modal این رویداد زمانی فعال می شود که مدال برای کاربر قابل مشاهده باشد (منتظر تکمیل انتقال CSS می شود). اگر ناشی از کلیک باشد، عنصر کلیک شده به عنوان relatedTargetویژگی رویداد در دسترس است.
hide.bs.modal این رویداد بلافاصله پس از hideفراخوانی متد نمونه فعال می شود.
hidden.bs.modal این رویداد زمانی فعال می شود که مودال از کاربر پنهان شود (منتظر تکمیل انتقال CSS می شود).
loaded.bs.modal این رویداد زمانی فعال می شود که مدال محتوا را با استفاده از remoteگزینه بارگیری کند.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

dropdown.js را کشویی می کند

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

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

داخل قرص

از طریق ویژگی های داده یا جاوا اسکریپت، افزونه کشویی محتوای پنهان (منوهای کشویی) را با تغییر دادن .openکلاس در آیتم لیست والد تغییر می دهد.

در دستگاه‌های تلفن همراه، باز کردن یک منوی کرکره‌ای، یک ناحیه .dropdown-backdropبه‌عنوان یک ضربه برای بستن منوهای کشویی هنگام ضربه زدن در خارج از منو اضافه می‌کند، که لازمه پشتیبانی مناسب iOS است. این بدان معنی است که تغییر از یک منوی بازشو به یک منوی کشویی دیگر نیاز به یک ضربه اضافی در تلفن همراه دارد.

توجه: این data-toggle="dropdown"ویژگی برای بستن منوهای کشویی در سطح برنامه مورد استفاده قرار می گیرد، بنابراین ایده خوبی است که همیشه از آن استفاده کنید.

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

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

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

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

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

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

data-toggle="dropdown"هنوز مورد نیاز است

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

هیچ یک

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

همه رویدادهای کرکره‌ای در .dropdown-menuعنصر والد اجرا می‌شوند.

همه رویدادهای کشویی دارای یک relatedTargetویژگی هستند که مقدار آن عنصر لنگر تغییر دهنده است.

نوع رویداد شرح
نمایش کشویی.bs این رویداد بلافاصله با فراخوانی متد show instance فعال می شود.
نمایش داده شده.bs.dropdown این رویداد زمانی فعال می شود که کشویی برای کاربر قابل مشاهده باشد (برای تکمیل شدن CSS منتظر می ماند).
hide.bs.dropdown این رویداد بلافاصله پس از فراخوانی متد hide instance فعال می شود.
hidden.bs.dropdown این رویداد زمانی فعال می‌شود که مخفی شدن فهرست کشویی از کاربر به پایان برسد (برای تکمیل شدن CSS منتظر می‌ماند).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy 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 Nav نیاز دارد

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

اهداف شناسایی قابل حل مورد نیاز است

پیوندهای نوار ناوبری باید دارای اهداف شناسایی قابل حل باشند. برای مثال، <a href="#home">home</a>باید با چیزی در DOM مطابقت داشته باشد مانند <div id="home"></div>.

عناصر غیر :visibleهدف نادیده گرفته شدند

عناصر هدف که :visibleمطابق با jQuery نیستند نادیده گرفته می شوند و موارد ناو مربوطه آنها هرگز برجسته نمی شوند.

نیاز به موقعیت نسبی دارد

فرقی نمی‌کند روش پیاده‌سازی، scrollspy به استفاده از position: relative;عنصری که در حال جاسوسی از آن هستید، نیاز دارد. در بیشتر موارد این است <body>. هنگام اسکرول جاسوسی بر روی عناصری غیر از <body>, حتماً یک heightمجموعه داشته باشید و overflow-y: scroll;اعمال کنید.

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

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

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

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

پس از افزودن position: relative;CSS خود، scrollspy را از طریق جاوا اسکریپت فراخوانی کنید:

$('body').scrollspy({ target: '#navbar-example' })

مواد و روش ها

.scrollspy('refresh')

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

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

گزینه ها

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

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

مناسبت ها

نوع رویداد شرح
activate.bs.scrollspy این رویداد هر زمان که یک مورد جدید توسط scrollspy فعال شود فعال می شود.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

تب های قابل تغییر 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.

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

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

استفاده

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

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

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

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

نشانه گذاری

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

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

اثر محو شدن

برای محو کردن برگه ها، .fadeبه هر کدام اضافه کنید .tab-pane. اولین صفحه تب نیز باید .inمحتوای اولیه را قابل مشاهده کند.

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

مواد و روش ها

$().tab

یک عنصر برگه و محفظه محتوا را فعال می کند. Tab باید دارای یک data-targetیا یک hrefگره کانتینری در DOM باشد. در مثال های بالا، برگه ها <a>s با data-toggle="tab"ویژگی هستند.

.tab('show')

برگه داده شده را انتخاب می کند و محتوای مرتبط با آن را نشان می دهد. هر برگه دیگری که قبلاً انتخاب شده بود انتخاب نشده و محتوای مرتبط با آن پنهان می شود. قبل از اینکه صفحه برگه واقعاً نشان داده شود (یعنی قبل از shown.bs.tabوقوع رویداد) به تماس گیرنده برمی گردد.

$('#someTab').tab('show')

مناسبت ها

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

  1. hide.bs.tab(در برگه فعال فعلی)
  2. show.bs.tab(در برگه برای نشان دادن)
  3. hidden.bs.tab(در برگه فعال قبلی، همان برگه hide.bs.tabرویداد)
  4. shown.bs.tab(در برگه تازه نشان داده شده فعال، همان برگه show.bs.tabرویداد)

اگر هیچ برگه ای قبلاً فعال نبوده است، رویدادهای hide.bs.tabو فعال hidden.bs.tabنمی شوند.

نوع رویداد شرح
show.bs.tab این رویداد در نمایش برگه فعال می شود، اما قبل از اینکه برگه جدید نشان داده شود. از event.targetو event.relatedTargetبرای هدف قرار دادن برگه فعال و برگه فعال قبلی (در صورت موجود بودن) استفاده کنید.
نشان داده شده.bs.tab این رویداد پس از نمایش یک برگه در نمایش برگه فعال می شود. از event.targetو event.relatedTargetبرای هدف قرار دادن برگه فعال و برگه فعال قبلی (در صورت موجود بودن) استفاده کنید.
hide.bs.tab این رویداد زمانی فعال می شود که یک برگه جدید نشان داده شود (و بنابراین باید برگه فعال قبلی پنهان شود). به ترتیب از برگه فعال فعلی و برگه جدید که به زودی فعال می شود استفاده کنید event.targetو آن را هدف قرار دهید.event.relatedTarget
hidden.bs.tab این رویداد پس از نمایش یک برگه جدید فعال می شود (و بنابراین تب فعال قبلی پنهان می شود). به ترتیب از event.targetو event.relatedTargetبرای هدف قرار دادن تب فعال قبلی و تب فعال جدید استفاده کنید.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

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

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

راهنمای ابزار با عناوین با طول صفر هرگز نمایش داده نمی شود.

مثال ها

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

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

راهنمای ابزار استاتیک

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

چهار جهت

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

قابلیت انتخاب کردن

به دلایل عملکرد، Tooltip و Popover data-apis انتخابی هستند، به این معنی که باید خودتان آنها را مقداردهی اولیه کنید .

یک راه برای مقداردهی اولیه تمام نکات ابزار در یک صفحه این است که آنها را با ویژگی آنها انتخاب کنید data-toggle:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

استفاده

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

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

$('#example').tooltip(options)

نشانه گذاری

نشانه گذاری مورد نیاز برای یک Tooltip فقط یک dataویژگی است و titleدر عنصر HTML شما می خواهید یک Tooltip داشته باشید. نشانه گذاری ایجاد شده از یک راهنمای ابزار نسبتاً ساده است، اگرچه به یک موقعیت نیاز دارد (به طور پیش فرض، topتوسط افزونه تنظیم شده است).

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

لینک های چند خطی

گاهی اوقات می خواهید یک راهنمای ابزار را به یک لینک اضافه کنید که چندین خط را می پیچد. رفتار پیش فرض پلاگین tooltip این است که آن را به صورت افقی و عمودی در مرکز قرار دهید. white-space: nowrap;برای جلوگیری از این موضوع به لنگرهای خود اضافه کنید.

نکات ابزار در گروه های دکمه، گروه های ورودی و جداول نیاز به تنظیمات خاصی دارند

هنگام استفاده از نکات ابزار بر روی عناصر داخل a .btn-groupیا an .input-groupیا عناصر مرتبط با جدول ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>)، باید گزینه container: 'body'(مستند شده در زیر) را برای جلوگیری از عوارض جانبی ناخواسته (مانند بزرگتر شدن عنصر و/) مشخص کنید. یا هنگام فعال شدن راهنمای ابزار، گوشه های گرد خود را از دست می دهد).

سعی نکنید نکات ابزار را روی عناصر پنهان نشان دهید

فراخوانی $(...).tooltip('show')زمانی که عنصر هدف قرار دارد display: none;باعث می شود که راهنمای ابزار به درستی قرار نگیرد.

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

برای کاربرانی که با صفحه‌کلید پیمایش می‌کنند، و به‌ویژه کاربران فناوری‌های کمکی، فقط باید نکات ابزار را به عناصر قابل‌تمرکز روی صفحه‌کلید مانند پیوندها، کنترل‌های فرم یا هر عنصر دلخواه با tabindex="0"ویژگی اضافه کنید.

نکات ابزار در عناصر غیرفعال به عناصر بسته بندی نیاز دارند

برای افزودن یک راهنمای ابزار به یک disabledیا .disabledعنصر، عنصر را در داخل a قرار دهید <div>و به جای آن، راهنمای ابزار را روی آن اعمال <div>کنید.

گزینه ها

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

نام تایپ کنید پیش فرض شرح
انیمیشن بولی درست است، واقعی یک انتقال محو CSS را به راهنمای ابزار اعمال کنید
ظرف رشته | نادرست نادرست

راهنمای ابزار را به یک عنصر خاص اضافه می کند. مثال: container: 'body'. این گزینه به ویژه از این جهت مفید است که به شما امکان می‌دهد راهنمای ابزار را در جریان سند در نزدیکی عنصر راه‌انداز قرار دهید - که مانع از شناور شدن راهنمای ابزار از عنصر راه‌انداز در طول تغییر اندازه پنجره می‌شود.

تاخیر انداختن شماره | هدف - شی 0

تأخیر در نمایش و پنهان کردن راهنمای ابزار (ms) - برای نوع ماشه دستی اعمال نمی شود

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

ساختار شیء عبارت است از:delay: { "show": 500, "hide": 100 }

html بولی نادرست HTML را در راهنمای ابزار وارد کنید. textاگر نادرست باشد، از روش jQuery برای درج محتوا در DOM استفاده می شود. اگر نگران حملات XSS هستید از متن استفاده کنید.
تعیین سطح رشته | عملکرد 'بالا'

نحوه قرار دادن راهنمای ابزار - بالا | پایین | چپ | راست | خودکار.
هنگامی که "خودکار" مشخص می شود، به صورت پویا راهنمای ابزار را تغییر می دهد. به عنوان مثال، اگر محل قرارگیری "سمت چپ خودکار" باشد، راهنمای ابزار در صورت امکان به سمت چپ نمایش داده می شود، در غیر این صورت سمت راست نمایش داده می شود.

هنگامی که یک تابع برای تعیین مکان استفاده می شود، با گره DOM به عنوان اولین آرگومان و عنصر راه اندازی گره DOM به عنوان دومین آرگومان فراخوانی می شود. متن thisروی نمونه راهنمای ابزار تنظیم شده است.

انتخابگر رشته نادرست اگر انتخابگر ارائه شود، اشیاء راهنمای ابزار به اهداف مشخص شده واگذار می شوند. در عمل، از این برای فعال کردن محتوای پویا HTML برای افزودن نکات ابزار استفاده می‌شود. این و یک مثال آموزنده را ببینید .
قالب رشته '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

پایه HTML برای استفاده در هنگام ایجاد راهنمای ابزار.

راهنمای ابزار به titleداخل تزریق می شود .tooltip-inner.

.tooltip-arrowبه پیکان راهنمای ابزار تبدیل خواهد شد.

خارجی ترین عنصر پوشش باید دارای .tooltipکلاس باشد.

عنوان رشته | عملکرد ''

titleاگر مشخصه وجود نداشته باشد، مقدار عنوان پیش‌فرض است.

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

ماشه رشته "تمرکز شناور" راهنمای ابزار چگونه راه اندازی می شود - کلیک کنید | شناور | تمرکز | کتابچه راهنمای. شما ممکن است چندین محرک عبور دهید. آنها را با فاصله جدا کنید. manualنمی توان با هیچ محرک دیگری ترکیب کرد.
درگاه دید رشته | شی | عملکرد { انتخابگر: 'بدن'، بالشتک: 0 }

راهنمای ابزار را در محدوده این عنصر نگه می دارد. مثال: viewport: '#viewport'یا{ "selector": "#viewport", "padding": 0 }

اگر تابعی داده شود، با گره DOM عنصر محرک به عنوان تنها آرگومان فراخوانی می شود. متن thisروی نمونه راهنمای ابزار تنظیم شده است.

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

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

مواد و روش ها

$().tooltip(options)

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

.tooltip('show')

راهنمای ابزار یک عنصر را نشان می دهد. قبل از اینکه نکته ابزار واقعاً نشان داده شود (یعنی قبل از وقوع رویداد) به تماس گیرنده برمی گردد. shown.bs.tooltipاین یک راه‌اندازی «دستی» راهنمای ابزار در نظر گرفته می‌شود. راهنمای ابزار با عناوین با طول صفر هرگز نمایش داده نمی شود.

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

.tooltip('hide')

راهنمای ابزار یک عنصر را پنهان می کند. قبل از اینکه نکته ابزار واقعاً پنهان شود (یعنی قبل از وقوع رویداد) به تماس گیرنده برمی گردد. hidden.bs.tooltipاین یک راه‌اندازی «دستی» راهنمای ابزار در نظر گرفته می‌شود.

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

.tooltip('toggle')

راهنمای ابزار یک عنصر را تغییر می دهد. قبل از اینکه نکته ابزار واقعاً نشان داده یا پنهان شود (یعنی قبل از اینکه رویداد یا رویداد رخ دهد) به تماس گیرنده برمی گردد. این یک راه‌اندازی «دستی» راهنمای ابزار در نظر گرفته می‌شود.shown.bs.tooltiphidden.bs.tooltip

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

.tooltip('destroy')

راهنمای ابزار یک عنصر را پنهان و از بین می برد. راهنمایی‌های ابزاری که از تفویض اختیار استفاده می‌کنند (که با استفاده از selectorگزینه ایجاد می‌شوند ) را نمی‌توان به‌صورت جداگانه در عناصر ماشه‌ای از بین برد.

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

مناسبت ها

نوع رویداد شرح
show.bs.tooltip این رویداد بلافاصله پس از showفراخوانی متد نمونه فعال می شود.
نشان داده شده.bs.tip tool این رویداد زمانی فعال می شود که راهنمای ابزار برای کاربر قابل مشاهده باشد (منتظر تکمیل انتقال CSS می شود).
hide.bs.tooltip این رویداد بلافاصله پس از hideفراخوانی متد نمونه فعال می شود.
hidden.bs.tooltip این رویداد زمانی فعال می شود که راهنمای ابزار از کاربر مخفی شود (منتظر تکمیل انتقال CSS می شود).
درج شده.bs.tooltip این رویداد پس از show.bs.tooltipرویداد زمانی که الگوی راهنمای ابزار به DOM اضافه شده است فعال می شود.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

پاپاورهایی که هم عنوان و هم محتوای آنها صفر است هرگز نمایش داده نمی شوند.

وابستگی به افزونه

برای پاپاورها باید افزونه tooltip در نسخه بوت استرپ شما گنجانده شود.

قابلیت انتخاب کردن

به دلایل عملکرد، Tooltip و Popover data-apis انتخابی هستند، به این معنی که باید خودتان آنها را مقداردهی اولیه کنید .

یک راه برای مقداردهی اولیه همه پاپاورها در یک صفحه این است که آنها را با ویژگی آنها انتخاب کنید data-toggle:

$(function () {
  $('[data-toggle="popover"]').popover()
})

پاپاورها در گروه های دکمه، گروه های ورودی و جداول نیاز به تنظیمات خاصی دارند

هنگام استفاده از پاپاورها بر روی عناصر داخل a .btn-groupیا an .input-groupیا در عناصر مرتبط با جدول ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>)، باید گزینه container: 'body'(مستند شده در زیر) را برای جلوگیری از عوارض جانبی ناخواسته (مانند بزرگتر شدن عنصر و/) مشخص کنید. یا هنگام شروع پاپاور، گوشه های گرد خود را از دست می دهد).

سعی نکنید پاپاورها را روی عناصر پنهان نشان دهید

فراخوانی $(...).popover('show')زمانی که عنصر هدف قرار دارد display: none;باعث می شود پاپاور به درستی قرار نگیرد.

پاپاورهای روی عناصر غیرفعال به عناصر پوششی نیاز دارند

برای افزودن پاپاور به یک disabledیا .disabledعنصر، عنصر را در داخل a قرار دهید <div>و به جای آن پاپاور را روی آن اعمال <div>کنید.

لینک های چند خطی

گاهی اوقات شما می خواهید یک پاپاور به یک هایپرلینک اضافه کنید که چندین خط را می پیچد. رفتار پیش‌فرض پلاگین popover این است که آن را به صورت افقی و عمودی در مرکز قرار دهید. white-space: nowrap;برای جلوگیری از این موضوع به لنگرهای خود اضافه کنید.

مثال ها

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

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

تاپ پاپاور

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

پاپاور راست

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

پاپاور پایین

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

پاپوور چپ شد

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

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

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

چهار جهت

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

رد کردن با کلیک بعدی

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

نشانه‌گذاری خاصی برای رد کردن روی کلیک بعدی لازم است

برای رفتار مناسب بین مرورگر و کراس پلتفرم، باید از تگ استفاده کنید <a>، نه<button> تگ، و همچنین باید ویژگی های role="button"و tabindexرا نیز درج کنید.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

استفاده

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

$('#example').popover(options)

گزینه ها

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

نام تایپ کنید پیش فرض شرح
انیمیشن بولی درست است، واقعی یک انتقال محو شدن CSS به پاپاور اعمال کنید
ظرف رشته | نادرست نادرست

popover را به یک عنصر خاص اضافه می کند. مثال: container: 'body'. این گزینه مخصوصاً از این جهت مفید است که به شما امکان می‌دهد پاپاور را در جریان سند نزدیک عنصر راه‌انداز قرار دهید - که از شناور شدن پاپاور از عنصر راه‌انداز در طول تغییر اندازه پنجره جلوگیری می‌کند.

محتوا رشته | عملکرد ''

data-contentاگر ویژگی وجود نداشته باشد، مقدار محتوای پیش‌فرض را تعیین کنید .

اگر تابعی داده شود، با thisمجموعه مرجع خود به عنصری که popover به آن متصل است فراخوانی می شود.

تاخیر انداختن شماره | هدف - شی 0

تاخیر در نمایش و پنهان کردن پاپاور (ms) - برای نوع ماشه دستی اعمال نمی شود

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

ساختار شیء عبارت است از:delay: { "show": 500, "hide": 100 }

html بولی نادرست HTML را در پاپاور قرار دهید. textاگر نادرست باشد، از روش jQuery برای درج محتوا در DOM استفاده می شود. اگر نگران حملات XSS هستید از متن استفاده کنید.
تعیین سطح رشته | عملکرد 'درست'

نحوه قرار دادن پاپاور - بالا | پایین | چپ | راست | خودکار.
هنگامی که "خودکار" مشخص می شود، به صورت پویا جهت پاپاور را تغییر می دهد. به عنوان مثال، اگر محل قرارگیری "سمت چپ خودکار" باشد، پاپاور در صورت امکان به سمت چپ نمایش داده می شود، در غیر این صورت سمت راست نمایش داده می شود.

هنگامی که یک تابع برای تعیین مکان استفاده می شود، با گره popover DOM به عنوان اولین آرگومان و عنصر آغازگر DOM به عنوان دومین آرگومان فراخوانی می شود. متن thisروی نمونه popover تنظیم شده است.

انتخابگر رشته نادرست اگر انتخابگر ارائه شود، اشیاء پاپاور به اهداف مشخص شده واگذار می شود. در عمل، از این برای فعال کردن محتوای پویا HTML برای افزودن پاپاور استفاده می‌شود. این و یک مثال آموزنده را ببینید .
قالب رشته '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

پایه HTML برای استفاده در هنگام ایجاد پاپاور.

پاپاور به titleداخل تزریق خواهد شد .popover-title.

پاپاور به contentداخل تزریق خواهد شد .popover-content.

.arrowتبدیل به پیکان پاپاور خواهد شد.

خارجی ترین عنصر پوشش باید دارای .popoverکلاس باشد.

عنوان رشته | عملکرد ''

titleاگر مشخصه وجود نداشته باشد، مقدار عنوان پیش‌فرض است.

اگر تابعی داده شود، با thisمجموعه مرجع خود به عنصری که popover به آن متصل است فراخوانی می شود.

ماشه رشته 'کلیک' چگونه پاپاور راه اندازی می شود - کلیک کنید | شناور | تمرکز | کتابچه راهنمای. شما ممکن است چندین محرک عبور دهید. آنها را با فاصله جدا کنید. manualنمی توان با هیچ محرک دیگری ترکیب کرد.
درگاه دید رشته | شی | عملکرد { انتخابگر: 'بدن'، بالشتک: 0 }

پاپاور را در محدوده این عنصر نگه می دارد. مثال: viewport: '#viewport'یا{ "selector": "#viewport", "padding": 0 }

اگر تابعی داده شود، با گره DOM عنصر محرک به عنوان تنها آرگومان فراخوانی می شود. متن thisروی نمونه popover تنظیم شده است.

ویژگی های داده برای پاپاورهای فردی

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

مواد و روش ها

$().popover(options)

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

.popover('show')

پاپاور یک عنصر را آشکار می کند. قبل از اینکه پاپاور واقعاً نشان داده شود (یعنی قبل از shown.bs.popoverوقوع رویداد) به تماس گیرنده برمی گردد. این یک راه‌اندازی "دستی" برای پاپاور در نظر گرفته می‌شود. پاپاورهایی که هم عنوان و هم محتوای آنها صفر است هرگز نمایش داده نمی شوند.

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

.popover('hide')

پاپاور یک عنصر را پنهان می کند. قبل از اینکه پاپاور واقعاً پنهان شود (یعنی قبل از hidden.bs.popoverوقوع رویداد) به تماس گیرنده برمی گردد. این یک راه‌اندازی "دستی" برای پاپاور در نظر گرفته می‌شود.

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

.popover('toggle')

popover یک عنصر را تغییر می دهد. قبل از اینکه پاپاور واقعاً نشان داده یا پنهان شود (یعنی قبل از وقوع رویداد shown.bs.popoverیا hidden.bs.popoverرویداد) به تماس گیرنده برمی گردد. این یک راه‌اندازی "دستی" برای پاپاور در نظر گرفته می‌شود.

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

.popover('destroy')

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

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

مناسبت ها

نوع رویداد شرح
show.bs.popover این رویداد بلافاصله پس از showفراخوانی متد نمونه فعال می شود.
نشان داده شده.ب.اس.پاپور این رویداد زمانی فعال می شود که پاپاور برای کاربر قابل مشاهده باشد (منتظر تکمیل انتقال CSS می شود).
hide.bs.popover این رویداد بلافاصله پس از hideفراخوانی متد نمونه فعال می شود.
hidden.bs.popover این رویداد زمانی فعال می شود که پاپ اور از کاربر مخفی شود (منتظر تکمیل انتقال CSS می شود).
درج شده.bs.popover این رویداد پس از show.bs.popoverرویداد زمانی که قالب popover به DOM اضافه شده است فعال می شود.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

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

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

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

هنگام استفاده از یک .closeدکمه، باید فرزند اول آن باشد .alert-dismissibleو هیچ محتوای متنی قبل از آن در نشانه گذاری وجود ندارد.

استفاده

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

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

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

مواد و روش ها

$().alert()

هشداری را برای رویدادهای کلیک بر روی عناصر نسلی که دارای data-dismiss="alert"ویژگی هستند گوش می دهد. (در هنگام استفاده از مقداردهی اولیه خودکار data-api ضروری نیست.)

$().alert('close')

یک هشدار را با حذف آن از DOM می بندد. اگر.fade کلاس های و .inروی عنصر وجود داشته باشد، هشدار قبل از حذف محو می شود.

مناسبت ها

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

نوع رویداد شرح
close.bs.alert این رویداد بلافاصله پس از closeفراخوانی متد نمونه فعال می شود.
بسته.ب.هشدار این رویداد زمانی فعال می شود که هشدار بسته شده باشد (منتظر تکمیل انتقال CSS می شود).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Buttons button.js

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

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

فایرفاکس از حالت های کنترلی (غیرفعال و بررسی) در بارگذاری صفحه باقی می ماند . یک راه حل برای این استفاده از autocomplete="off". باگ #654072 موزیلا را ببینید .

دولتی

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

این ویژگی از نسخه 3.3.5 منسوخ شده و در نسخه 4 حذف شده است.

از هر حالتی که دوست دارید استفاده کنید!

به خاطر این نمایش، از data-loading-textو استفاده می کنیم $().button('loading')، اما این تنها حالتی نیست که می توانید استفاده کنید. بیشتر در این مورد در زیر در $().button(string)اسناد مشاهده کنید.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

ضامن تکی

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

دکمه های از پیش تعویض شده نیاز .activeوaria-pressed="true"

برای دکمه هایی که از قبل تغییر داده شده اند، باید .activeکلاس و aria-pressed="true"ویژگی را به buttonخودتان اضافه کنید.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

چک باکس / رادیو

برای فعال کردن تغییر در سبک‌های مربوطه، آن را data-toggle="buttons"به یک کادر تأیید یا ورودی‌های رادیویی اضافه کنید..btn-group

گزینه های از پیش انتخاب شده نیاز دارند.active

برای گزینه های از پیش انتخاب شده، باید .activeکلاس را خودتان به ورودی اضافه labelکنید.

حالت بررسی بصری فقط با کلیک به روز می شود

اگر وضعیت علامت زده شده یک دکمه چک باکس بدون شلیک clickرویدادی روی دکمه به‌روزرسانی شود (مثلاً از طریق <input type="reset">یا از طریق تنظیم checkedویژگی ورودی)، باید خودتان .activeکلاس را روی ورودی labelتغییر دهید.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

مواد و روش ها

$().button('toggle')

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

$().button('reset')

حالت دکمه را بازنشانی می کند - متن را به متن اصلی تغییر می دهد. این روش ناهمزمان است و قبل از اینکه بازنشانی واقعاً کامل شود برمی‌گردد.

$().button(string)

متن را به هر حالت متنی تعریف شده با داده تغییر می دهد.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

جمع کردن collapse.js

پلاگین انعطاف پذیر که از تعداد انگشت شماری از کلاس ها برای تغییر رفتار آسان استفاده می کند.

وابستگی به افزونه

برای کوچک کردن، باید افزونه Transitions در نسخه Bootstrap شما گنجانده شود.

مثال

برای نمایش و پنهان کردن عنصر دیگری از طریق تغییرات کلاس، روی دکمه‌های زیر کلیک کنید:

  • .collapseمحتوا را پنهان می کند
  • .collapsingدر طول انتقال اعمال می شود
  • .collapse.inمحتوا را نشان می دهد

می توانید از یک پیوند با hrefویژگی یا یک دکمه با data-targetویژگی استفاده کنید. در هر دو مورد، data-toggle="collapse"لازم است.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

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

رفتار جمع کردن پیش‌فرض را برای ایجاد آکاردئونی با مؤلفه پانل گسترش دهید.

انیمیشن پاریاتور کلیشه ای 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 پایدار نشنیده اید.
انیمیشن پاریاتور کلیشه ای 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 پایدار نشنیده اید.
انیمیشن پاریاتور کلیشه ای 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 پایدار نشنیده اید.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

همچنین امکان تعویض .panel-bodys با .list-groups وجود دارد.

  • Bootply
  • یک عدد itmus ac facilin
  • اروس دوم

کنترل های بسط/کوچک کردن را در دسترس قرار دهید

حتما به aria-expandedعنصر کنترل اضافه کنید. این ویژگی به صراحت وضعیت فعلی عنصر جمع شونده را برای صفحه خوان ها و فناوری های کمکی مشابه تعریف می کند. اگر عنصر جمع شونده به طور پیش فرض بسته باشد، باید مقدار آن برابر aria-expanded="false"باشد. inاگر عنصر جمع شونده را به‌طور پیش‌فرض با استفاده از کلاس باز کرده‌اید ، تنظیم کنیدaria-expanded="true" در عوض روی کنترل تنظیم کنید. افزونه به طور خودکار این ویژگی را بر اساس باز یا بسته شدن عنصر جمع شونده تغییر می دهد.

علاوه بر این، اگر عنصر کنترلی شما یک عنصر جمع شونده را هدف قرار می دهد - یعنی data-targetمشخصه به یک idانتخابگر اشاره می کند - می توانید یک ویژگی اضافی aria-controlsبه عنصر کنترل اضافه کنید که حاوی idعنصر جمع شونده باشد. صفحه‌خوان‌های مدرن و فناوری‌های کمکی مشابه از این ویژگی استفاده می‌کنند تا میانبرهای اضافی را برای کاربران فراهم کنند تا مستقیماً به خود عنصر جمع شونده حرکت کنند.

استفاده

افزونه collapse از چند کلاس برای انجام کارهای سنگین استفاده می کند:

  • .collapseمحتوا را پنهان می کند
  • .collapse.inمحتوا را نشان می دهد
  • .collapsingهنگامی که انتقال شروع می شود اضافه می شود و پس از پایان آن حذف می شود

این کلاس ها را می توان در component-animations.less.

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

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

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

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

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

$('.collapse').collapse()

گزینه ها

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

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

مواد و روش ها

.collapse(options)

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

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

.collapse('toggle')

یک عنصر جمع شونده را به نمایش یا پنهان تغییر می دهد. قبل از اینکه عنصر جمع شونده واقعاً نشان داده یا پنهان شود (یعنی قبل از وقوع رویداد shown.bs.collapseیا hidden.bs.collapseرویداد) به تماس گیرنده برمی گردد.

.collapse('show')

یک عنصر جمع شونده را نشان می دهد. قبل از اینکه عنصر جمع شونده واقعاً نشان داده شود (یعنی قبل از shown.bs.collapseوقوع رویداد) به تماس گیرنده برمی گردد.

.collapse('hide')

یک عنصر جمع شونده را پنهان می کند. قبل از اینکه عنصر جمع شونده واقعاً پنهان شود (یعنی قبل از hidden.bs.collapseوقوع رویداد) به تماس گیرنده برمی گردد.

مناسبت ها

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

نوع رویداد شرح
نشان دادن.ب.سقوط این رویداد بلافاصله پس از showفراخوانی متد نمونه فعال می شود.
نشان داده شده.ب.ب.افتادن این رویداد زمانی فعال می‌شود که یک عنصر جمع‌شده برای کاربر قابل مشاهده باشد (منتظر تکمیل انتقال‌های CSS می‌ماند).
hide.bs.collapse این رویداد بلافاصله پس از hideفراخوانی متد اجرا می شود.
hidden.bs.collapse این رویداد زمانی فعال می‌شود که یک عنصر جمع‌شده از کاربر پنهان شده باشد (منتظر تکمیل انتقال‌های CSS می‌ماند).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

چرخ فلک carousel.js

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

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

زیرنویس های اختیاری

زیرنویس را به اسلایدهای خود به راحتی با .carousel-captionعنصر موجود در هر اضافه .itemکنید. تقریباً هر HTML اختیاری را در آنجا قرار دهید و به طور خودکار تراز و قالب بندی می شود.

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

چرخ و فلک های متعدد

چرخ فلک ها برای اینکه کنترل های چرخ فلک به درستی کار کنند نیاز به استفاده از یک idدر بیرونی ترین کانتینر دارند. .carouselهنگام اضافه کردن چرخ فلک های متعدد، یا هنگام تغییر چرخ فلک id، حتماً کنترل های مربوطه را به روز کنید.

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

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

این data-ride="carousel"ویژگی برای علامت گذاری یک چرخ فلک به عنوان متحرک با شروع بارگذاری صفحه استفاده می شود. نمی توان آن را در ترکیب با (زائد و غیر ضروری) مقداردهی اولیه صریح جاوا اسکریپت از همان چرخ فلک استفاده کرد.

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

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

$('.carousel').carousel()

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

نام نوع پیش فرض شرح
فاصله عدد 5000 مدت زمان تأخیر بین دوچرخه‌سواری خودکار یک مورد. اگر نادرست باشد، چرخ فلک به طور خودکار چرخه نخواهد شد.
مکث رشته | خالی " شناور " اگر روی تنظیم شود "hover"، چرخه چرخ و فلک را متوقف می کند و چرخه چرخ mouseenterو فلک را روشن می mouseleaveکند. اگر روی تنظیم شود null، نگه داشتن ماوس روی چرخ فلک باعث توقف موقت آن نمی شود.
بسته بندی کردن بولی درست است، واقعی اینکه چرخ فلک باید به طور مداوم چرخه بزند یا توقف های سخت داشته باشد.
صفحه کلید بولی درست است، واقعی آیا چرخ فلک باید به رویدادهای صفحه کلید واکنش نشان دهد یا خیر.

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

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

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

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

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

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

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

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

هر دو رویداد دارای ویژگی های اضافی زیر هستند:

  • direction: جهتی که چرخ فلک در آن می لغزد (یا "left"یا "right").
  • relatedTarget: عنصر DOM که به عنوان آیتم فعال در جای خود قرار می گیرد.

همه رویدادهای چرخ و فلک به سمت خود چرخ و فلک شلیک می شوند (یعنی در <div class="carousel">).

نوع رویداد شرح
slide.bs. چرخ فلک این رویداد بلافاصله پس از slideفراخوانی متد نمونه فعال می شود.
slid.bs. چرخ فلک این رویداد زمانی اجرا می شود که چرخ فلک انتقال اسلاید خود را کامل کند.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

affix.js را بچسبانید

مثال

پلاگین affix position: fixed;روشن و خاموش می شود و افکتی را که با position: sticky;. پیمایش فرعی سمت راست یک نسخه نمایشی زنده از افزونه affix است.


استفاده

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

توجه: به دلیل وجود اشکال در رندر سافاری ، از افزونه affix بر روی عنصری که در یک عنصر نسبتاً موقعیت‌یافته، مانند یک ستون کشیده یا فشار داده شده است، استفاده نکنید .

تعیین موقعیت از طریق CSS

افزونه affix بین سه کلاس جابجا می شود که هر یک وضعیت خاصی را نشان می دهد: .affix, .affix-topو .affix-bottom. شما باید سبک‌ها را، به استثنای position: fixed;on .affix، برای این کلاس‌ها خودتان (مستقل از این افزونه) ارائه دهید تا موقعیت‌های واقعی را مدیریت کنید.

در اینجا نحوه کار افزونه affix آمده است:

  1. برای شروع، افزونه اضافه می کند .affix-topتا نشان دهد عنصر در بالاترین موقعیت خود قرار دارد. در این مرحله نیازی به تعیین موقعیت CSS نیست.
  2. پیمایش از کنار عنصری که می‌خواهید الصاق شود باید الصاق واقعی را آغاز کند. این جایی است که .affixجایگزین .affix-topو تنظیم می position: fixed;شود (ارائه شده توسط CSS Bootstrap).
  3. اگر یک افست پایین تعریف شده است، با پیمایش از کنار آن باید .affixبا .affix-bottom. از آنجایی که افست ها اختیاری هستند، تنظیم یک نیاز به تنظیم CSS مناسب دارد. در این صورت در صورت position: absolute;لزوم اضافه کنید. این افزونه از ویژگی داده یا گزینه جاوا اسکریپت برای تعیین محل قرارگیری عنصر از آنجا استفاده می کند.

مراحل بالا را دنبال کنید تا CSS خود را برای یکی از گزینه های استفاده زیر تنظیم کنید.

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

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

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

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

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

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

گزینه ها

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

نام نوع پیش فرض شرح
انحراف شماره | تابع | هدف - شی 10 هنگام محاسبه موقعیت پیمایش، پیکسل‌هایی که از صفحه نمایش جدا می‌شوند. اگر یک عدد ارائه شود، افست در هر دو جهت بالا و پایین اعمال خواهد شد. برای ارائه یک افست منحصر به فرد، پایین و بالا فقط یک شی offset: { top: 10 }یا offset: { top: 10, bottom: 5 }. زمانی که نیاز به محاسبه پویا یک افست دارید از یک تابع استفاده کنید.
هدف انتخابگر | گره | عنصر جی کوئری windowشی _ عنصر هدف الصاق را مشخص می کند.

مواد و روش ها

.affix(options)

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

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

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

$('#myAffix').affix('checkPosition')

مناسبت ها

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

نوع رویداد شرح
affix.bs.affix این رویداد بلافاصله قبل از الصاق عنصر فعال می شود.
affixed.bs.affix این رویداد پس از الصاق عنصر فعال می شود.
affix-top.bs.affix این رویداد بلافاصله قبل از اینکه عنصر در بالای صفحه قرار گیرد فعال می شود.
affixed-top.bs.affix این رویداد پس از چسباندن عنصر در بالا فعال می شود.
affix-bottom.bs.affix این رویداد بلافاصله قبل از اینکه عنصر در پایین الصاق شود فعال می شود.
affixed-bottom.bs.affix این رویداد پس از چسباندن عنصر به پایین فعال می شود.