بررسی اجمالی

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

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

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

شما می توانید از تمام پلاگین های بوت استرپ صرفاً از طریق 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
})

ضد عفونی کننده

Tooltips و Popovers از ضدعفونی کننده داخلی ما برای پاکسازی گزینه هایی که HTML را می پذیرند استفاده می کنند.

مقدار پیش فرض whiteListبه صورت زیر است:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

اگر می خواهید مقادیر جدیدی به این پیش فرض اضافه whiteListکنید، می توانید موارد زیر را انجام دهید:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

اگر می‌خواهید از ضدعفونی‌کننده ما دور بزنید زیرا ترجیح می‌دهید از یک کتابخانه اختصاصی استفاده کنید، برای مثال DOMPurify ، باید موارد زیر را انجام دهید:

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

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

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

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

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

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

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

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

با توجه به اینکه 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>

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

مدال ها دو اندازه اختیاری دارند که از طریق کلاس های اصلاح کننده در دسترس هستند تا روی یک قرار بگیرند .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" 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" 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="".

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

مواد و روش ها

.modal(options)

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

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

.modal('toggle')

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

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

.modal('show')

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

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

.modal('hide')

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

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

.modal('handleUpdate')

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

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

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

مناسبت ها

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

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

$('#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()

گزینه ها

هیچ یک

مواد و روش ها

$().dropdown('toggle')

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

مناسبت ها

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

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

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

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

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

استفاده

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

فرقی نمی‌کند روش پیاده‌سازی، 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="".

مناسبت ها

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

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

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

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

استفاده

برگه های 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نمی شوند.

$('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 برای انیمیشن ها و از ویژگی های داده برای ذخیره عنوان محلی استفاده می کند.

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

مثال ها

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

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

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

چهار جهت

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

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

گزینه ها

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

مواد و روش ها

$().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')

مناسبت ها

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

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

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

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

مثال ها

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

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

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

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

مواد و روش ها

$().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')

مناسبت ها

$('#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روی عنصر وجود داشته باشد، هشدار قبل از حذف محو می شود.

مناسبت ها

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

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Buttons button.js

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

دولتی

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

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

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

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

ضامن تکی

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

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

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

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

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

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

مواد و روش ها

$().button('toggle')

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

$().button('reset')

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

$().button(string)

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

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

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

جمع کردن collapse.js

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

مثال

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

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

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

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

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

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

<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 وجود دارد.

استفاده

افزونه 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="".

مواد و روش ها

.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وقوع رویداد) به تماس گیرنده برمی گردد.

مناسبت ها

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

$('#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 اختیاری را در آنجا قرار دهید و به طور خودکار تراز و قالب بندی می شود.

اولین برچسب اسلاید

Nulla vitae elit libero، یک pharetra augue mollis interdum.

برچسب اسلاید دوم

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

برچسب اسلاید سوم

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

قبلی بعد

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

مواد و روش ها

.carousel(options)

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

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

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

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

.carousel('next')

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

مناسبت ها

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

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

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

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

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

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

مثال

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

استفاده

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

توجه: به دلیل وجود اشکال در ارائه Safari ، از افزونه 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"به عنصری که می خواهید جاسوسی کنید اضافه کنید. برای تعیین زمان تغییر سنجاق یک عنصر از offset ها استفاده کنید.

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

مواد و روش ها

.affix(options)

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

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

.affix('checkPosition')

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

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

مناسبت ها

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