Барраси

Инфиродӣ ё ҷамъоварӣ

Васлкунакҳо метавонанд ба таври инфиродӣ (бо истифода аз *.jsфайлҳои инфиродии Bootstrap) ё ҳама якбора (бо истифода bootstrap.jsё хурдтар bootstrap.min.js) дохил карда шаванд.

Аттрибутҳои маълумот

Шумо метавонед ҳамаи плагинҳои Bootstrap-ро танҳо тавассути API-и аломатгузорӣ бидуни навиштани як сатри JavaScript истифода баред. Ин API-и дараҷаи якуми Bootstrap аст ва ҳангоми истифодаи плагин бояд аввалиндараҷаи шумо бошад.

Гуфта мешавад, ки дар баъзе ҳолатҳо хомӯш кардани ин функсия матлуб аст. Аз ин рӯ, мо инчунин қобилияти ғайрифаъол кардани атрибути додаҳои API-ро бо роҳи қатъ кардани ҳама рӯйдодҳои ҳуҷҷат дар фазои номҳо таъмин мекунем data-api. Ин чунин менамояд:

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

Интихобан, барои ҳадафи як плагини мушаххас, танҳо номи плагинро ҳамчун фазои ном дар якҷоягӣ бо фазои номи data-api дохил кунед:

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

API-и барномавӣ

Мо инчунин боварӣ дорем, ки шумо бояд ҳамаи плагинҳои Bootstrap-ро танҳо тавассути API JavaScript истифода баред. Ҳама 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

Не низоъ

Баъзан лозим меояд, ки плагинҳои Bootstrap-ро бо дигар чаҳорчӯбаҳои UI истифода баред. Дар ин шароит, бархӯрдҳои фазои номҳо баъзан рух дода метавонанд. Агар ин рӯй диҳад, шумо метавонед .noConflictба плагин занг занед, ки мехоҳед арзиши онро баргардонед.

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

Ҳодисаҳо

Bootstrap рӯйдодҳои фармоиширо барои амалҳои беназири аксари плагинҳо таъмин мекунад. Одатан, инҳо дар шакли пасванд ва замони гузашта меоянд - дар он ҷо масдар (масалан show) дар оғози ҳодиса ва шакли пасванди он (масалан shown) дар анҷоми амал ба вуҷуд меояд.

Аз 3.0.0, ҳама рӯйдодҳои Bootstrap фазои ном доранд.

Ҳама рӯйдодҳои инфинитивӣ preventDefaultфунксияро таъмин мекунанд. Ин имкон медиҳад, ки иҷрои амалро пеш аз оғози он қатъ кунед.

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

Санитизатор

Маслиҳатҳо ва 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)
  }
})

Рақамҳои версия

Ба версияи ҳар як плагинҳои jQuery Bootstrap тавассути VERSIONмоликияти созандаи плагин дастрас шудан мумкин аст. Масалан, барои плагини асбобҳо:

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

Ҳангоми ғайрифаъол будани JavaScript ягон бозгашти махсус вуҷуд надорад

Васлкунакҳои Bootstrap ҳангоми хомӯш кардани JavaScript ба таври возеҳ намеафтанд. Агар шумо дар бораи таҷрибаи корбар дар ин ҳолат ғамхорӣ кунед, <noscript>барои шарҳ додани вазъият (ва чӣ гуна JavaScript-ро аз нав фаъол кардан) ба корбарони худ истифода баред ва/ё нусхаҳои фармоишии худро илова кунед.

Transitions transition.js

Дар бораи гузариш

Барои эффектҳои гузариши оддӣ, transition.jsяк маротиба дар паҳлӯи дигар файлҳои JS дохил кунед. Агар шумо компилятсионӣ (ё хурдтар) -ро истифода баред bootstrap.js, лозим нест, ки онро дохил кунед - он аллакай вуҷуд дорад.

Дар дохили он чӣ ҳаст

Transition.js як ёвари асосӣ барои transitionEndрӯйдодҳо ва инчунин эмулятори гузариш CSS мебошад. Он аз ҷониби плагинҳои дигар барои тафтиши дастгирии гузариш CSS ва гирифтани гузариши овезон истифода мешавад.

Хомӯш кардани гузаришҳо

Гузаришҳоро бо истифода аз порчаи зерини JavaScript дар саросари ҷаҳон ғайрифаъол кардан мумкин аст, ки он бояд пас аз боркунӣ transition.js(ё bootstrap.jsё bootstrap.min.jsмувофиқи ҳолат) ворид шавад:

$.support.transition = false

Modals modal.js

Модалҳо соддашуда, вале чандир, дархостҳои муколама бо ҳадди ақали функсияҳои зарурӣ ва пешфарзҳои оқилона мебошанд.

Аз сабаби он ки чӣ тавр HTML5 семантикаи худро муайян мекунад, autofocusатрибути HTML дар modalҳои Bootstrap ҳеҷ гуна таъсире надорад. Барои ноил шудан ба ҳамон таъсир, якчанд JavaScript-и фармоиширо истифода баред:

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

Намоиши зинда

Модалро тавассути JavaScript бо пахш кардани тугмаи зер иваз кунед. Он аз болои саҳифа ба поён ҳаракат мекунад ва пажмурда мешавад.

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

Истифодаи системаи шабакавӣ

Барои истифодаи бартарии системаи шабакаи Bootstrap дар як мод, танҳо .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 -->

Мундариҷаи модалӣ дар асоси тугмаи триггер

Оё як даста тугмаҳо доред, ки ҳамаашон як модальро ба вуҷуд меоранд, танҳо бо мундариҷаи каме гуногун? Аттрибутҳо event.relatedTargetва HTML - data-*ро (эҳтимолан тавассути jQuery ) истифода баред, то мундариҷаи модалро вобаста ба он ки тугмача пахш карда шудааст, тағир диҳед. Барои тафсилот ба ҳуҷҷатҳои рӯйдодҳои модалӣ нигаред 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)
})

Истифода

Васлкунаки модалӣ мундариҷаи пинҳонии шуморо бо дархост тавассути атрибутҳои додаҳо ё JavaScript иваз мекунад. Он инчунин ба рафтори пешфарзии пешфарз барои бекор кардани ҳаракат илова мекунад .modal-openва <body>барои .modal-backdropфароҳам овардани майдони клик барои рад кардани модальҳои нишондодашуда ҳангоми клик берун аз модаль тавлид мекунад.

Тавассути атрибутҳои додаҳо

Модалро бе навиштани JavaScript фаъол созед. Дар data-toggle="modal"як унсури контроллер, ба монанди тугма, дар якҷоягӣ бо як data-target="#foo"ё href="#foo"ҳадафи модали мушаххас барои иваз кардан насб кунед.

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

Тавассути JavaScript

Модалро бо ID myModalбо як сатри JavaScript занг занед:

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

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба 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.modalё ҳодиса) бармегардад.hidden.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')

Ҳодисаҳо

Синфи модалии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи модалӣ фош мекунад.

Ҳама рӯйдодҳои модалӣ ба худи модал (яъне дар <div class="modal">) тирандозӣ карда мешаванд.

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

афтандаҳо dropdown.js

Мисолхо

Бо ин плагини оддӣ ба қариб ҳама чиз менюҳои афтанда илова кунед, аз ҷумла навбар, ҷадвалҳо ва доруҳо.

Дар дохили навор

Дар дохили доруҳо

Истифода

Тавассути атрибутҳои додаҳо ё JavaScript, плагини афтанда мундариҷаи пинҳоншударо (менюҳои афтанда) бо иваз кардани .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>

Тавассути JavaScript

Ба афтандаҳо тавассути JavaScript занг занед:

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

Имконот

Ҳеҷ

Усулҳо

$().dropdown('toggle')

Менюи афтанда дар навор ё паймоиши ҷадвалбандиҳоро иваз мекунад.

Ҳодисаҳо

Ҳама рӯйдодҳои афтанда дар .dropdown-menuунсури волидайни ' ба кор андохта мешаванд.

Ҳама рӯйдодҳои афтанда дорои relatedTargetхосиятест, ки арзиши он унсури лангари ивазшаванда аст.

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

ScrollSpy scrollspy.js

Намуна дар навор

Васлкунаки ScrollSpy барои ба таври худкор навсозии ҳадафҳои нав дар асоси мавқеи ҳаракат аст. Майдони зери наворро ҳаракат кунед ва тағирёбии синфи фаъолро тамошо кунед. Зербандҳои афтанда низ таъкид карда мешаванд.

Истифода

Ҷойгиркунии нисбӣ талаб мекунад

Новобаста аз усули татбиқ, scrollspy истифодаи position: relative;элементеро, ки шумо ҷосусӣ мекунед, талаб мекунад. Дар аксари ҳолатҳо ин аст <body>. Ҳангоми scrollspying дар ҷузъҳои ғайр аз <body>, боварӣ ҳосил кунед, ки heightмаҷмӯи ва overflow-y: scroll;татбиқшаванда дошта бошед.

Тавассути атрибутҳои додаҳо

Барои ба осонӣ илова кардани рафтори scrollspy ба новбари болоии худ, data-spy="scroll"ба унсуре, ки мехоҳед ҷосусӣ кунед, илова кунед (аксаран ин <body>). Сипас data-targetатрибутро бо ID ё синфи унсури волидайни ягон .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>

Тавассути JavaScript

Пас аз илова кардани position: relative;CSS-и худ, ба scrollspy тавассути JavaScript занг занед:

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

Усулҳо

.scrollspy('refresh')

Ҳангоми истифодаи scrollspy дар якҷоягӣ бо илова кардан ё хориҷ кардани элементҳо аз DOM, шумо бояд усули навсозиро ба таври зерин даъват кунед:

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

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-offset="".

Ҳодисаҳо

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

Ҷадвалҳои ивазшаванда tab.js

Намунаҳои ҷадвалҳо

Барои гузариш аз панелҳои мундариҷаи маҳаллӣ, ҳатто тавассути менюҳои афтанда вазифаи зуд ва динамикии ҷадвалро илова кунед. Варақаҳои дохилӣ дастгирӣ намешаванд.

Истифода

Ҷадвалҳои ҷадвалбандишавандаро тавассути JavaScript фаъол созед (ҳар як ҷадвал бояд алоҳида фаъол карда шавад):

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

Нишондиҳӣ

Шумо метавонед новбари ҷадвал ё ҳабҳоро бидуни навиштани ягон JavaScript бо танҳо нишон data-toggle="tab"додан ё data-toggle="pill"дар элемент фаъол созед. Илова кардани navсинфҳо nav-tabsба ҷадвал услуби ҷадвалиul Bootstrapро татбиқ мекунад , дар ҳоле ки илова кардани синфҳо ва синфҳо ороиши доруҳоро татбиқ мекунад.navnav-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

Унсури ҷадвал ва контейнери мундариҷаро фаъол мекунад. Ҷадвал бояд data-targetяк hrefгиреҳи контейнерро дар DOM дошта бошад. Дар мисолҳои дар боло овардашуда, ҷадвалҳо <a>дорои 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
})

Tooltips tooltip.js

Аз плагини аълои jQuery.tipsy илҳом гирифта шудааст, ки аз ҷониби Ҷейсон 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()
})

Истифода

Васлкунаки асбобҳо мундариҷа ва аломатҳоро мувофиқи дархост тавлид мекунад ва ба таври нобаёнӣ маслиҳатҳои абзорро пас аз унсури триггери худ ҷойгир мекунад.

Маслиҳати абзорро тавассути JavaScript фаъол созед:

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

Нишондиҳӣ

Нишондиҳии зарурӣ барои маслиҳати асбобҳо танҳо атрибут аст dataва titleдар унсури HTML шумо мехоҳед маслиҳати абзор дошта бошед. Нишондиҳандаи тавлидшудаи маслиҳат хеле содда аст, гарчанде ки он мавқеъро талаб мекунад (ба таври нобаёнӣ, 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>

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба 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.tooltipё ҳодиса) ба зангзан бармегардад. hidden.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>

Истифода

Поповҳоро тавассути JavaScript фаъол созед:

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

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба 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синфҳо мавҷуд бошанд, огоҳӣ пеш аз хориҷ шуданаш хомӯш мешавад.

Ҳодисаҳо

Васлкунаки огоҳии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи ҳушдор фош мекунад.

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

Тугмаҳо button.js

Бо тугмаҳо бештар кор кунед. Тугмаи идоракуниро барои ҷузъҳои бештар ба монанди панелҳои асбобҳо гурӯҳҳо ё эҷод кардани тугмаҳо.

Давлатманд

Барои data-loading-text="Loading..."истифодаи ҳолати боркунӣ дар тугма илова кунед.

Ин хусусият аз v3.3.5 бекор карда шудааст ва дар v4 хориҷ карда шудааст.

<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.inмазмунро нишон медихад
• .collapsingҳангоми оғози гузариш илова карда мешавад ва ҳангоми ба охир расиданаш хориҷ карда мешавад

Ин синфҳоро дар component-animations.less.

Тавассути атрибутҳои додаҳо

Барои ба таври худкор таъин кардани назорати унсури пӯшидашаванда танҳо data-toggle="collapse"ва data-targetба элемент илова кунед. Аттрибут data-targetинтихобкунандаи CSS-ро барои татбиқи шикастхӯрӣ қабул мекунад. Боварӣ ҳосил кунед, ки синфро collapseба унсури пӯшидашаванда илова кунед. Агар шумо хоҳед, ки он пешфарз кушода шавад, синфи иловагӣ илова кунедin .

Барои илова кардани идоракунии гурӯҳи ба аккордеон монанд ба назорати ҷамъшаванда, атрибути маълумотро илова кунед data-parent="#selector". Барои дидани ин амал ба намоиш муроҷиат кунед.

Тавассути JavaScript

Ба таври дастӣ бо:

$('.collapse').collapse()

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба 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рух додани ҳодиса) бармегардад.

Ҳодисаҳо

Синфи пошхӯрии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи харобшавӣ фош мекунад.

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

Carousel 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, a 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калимаҳои калидӣ prevё -ро қабул мекунад next, ки мавқеи слайдро нисбат ба мавқеъи ҷории он тағйир медиҳад. Интихобан, data-slide-toбарои интиқол додани индекси слайдҳои хом ба карусел истифода баред data-slide-to="2", ки он мавқеи слайдро ба шохиси мушаххаси аз0 .

Аттрибут data-ride="carousel"барои қайд кардани карусел ҳамчун аниматсия аз сарбории саҳифа истифода мешавад. Онро дар якҷоягӣ бо оғозкунии возеҳ JavaScript-и ҳамон карусел истифода бурдан мумкин нест.

Тавассути JavaScript

Каруселро дастӣ бо:

$('.carousel').carousel()

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба 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

Мисол

Васлкунаки аффикс position: fixed;фурӯзон ва хомӯш карда мешавад, ки таъсири бо position: sticky;. Субнавигатсия дар тарафи рост намоиши зиндаи плагини аффикс мебошад.

Истифода

Васлкунаки аффиксро тавассути атрибутҳои додаҳо ё дастӣ бо JavaScript-и худ истифода баред. Дар ҳарду ҳолат, шумо бояд CSS-ро барои ҷойгиршавӣ ва паҳнои мундариҷаи замимашуда таъмин кунед.

Эзоҳ: Васлкунаки аффиксиро дар элементе, ки дар як унсури нисбатан ҷойгиршуда мавҷуд аст, ба монанди сутуни кашидашуда ё телашуда аз сабаби иштибоҳи намоиши Safari истифода набаред .

Ҷойгиркунӣ тавассути CSS

Васлкунаки аффикс дар байни се синф иваз мешавад, ки ҳар як ҳолати мушаххасро ифода мекунад: .affix, .affix-top, ва .affix-bottom. Шумо бояд сабкҳоро ба истиснои position: fixed;on .affix, барои ин синфҳо худатон таъмин кунед (вобаста аз ин плагин) барои идора кардани мавқеъҳои воқеӣ.

Ин аст, ки плагини аффикс чӣ гуна кор мекунад:

1. Барои оғоз, плагин илова мекунад.affix-top , то нишон диҳад, ки элемент дар мавқеи баландтаринаш аст. Дар ин лаҳза ҷойгиркунии CSS талаб карда намешавад.
2. Гузаштан аз элементе, ки шумо мехоҳед часпонед, бояд аффикси воқеиро оғоз кунад. Ин аст, ки .affixҷойгузинҳо .affix-topва танзимҳо position: fixed;(аз ҷониби CSS Bootstrap дода шудааст).
3. Агар ҷуброни поён муайян карда шуда бошад, гузаштан ба он бояд .affixбо .affix-bottom. Азбаски офсетҳо ихтиёрӣ мебошанд, танзими яке аз шумо талаб мекунад, ки CSS-и мувофиқро таъин кунед. Дар ин ҳолат, position: absolute;ҳангоми зарурат илова кунед. Васлкунак аттрибути маълумот ё имконоти JavaScript-ро барои муайян кардани куҷо ҷойгир кардани элемент аз он ҷо истифода мебарад.

Қадамҳои дар боло зикршударо иҷро кунед, то CSS-и худро барои яке аз имконоти истифода дар зер муқаррар кунед.

Тавассути атрибутҳои додаҳо

Барои ба осонӣ илова кардани рафтори аффикс ба ягон элемент, танҳо data-spy="affix"ба унсуре, ки мехоҳед ҷосусӣ кунед, илова кунед. Офсетҳоро барои муайян кардани кай иваз кардани пайвасткунии элемент истифода баред.

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

Тавассути JavaScript

Ба плагини аффикс тавассути JavaScript занг занед:

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

Имконот

Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-монанди замима кунед data-offset-top="200".

Усулҳо

.affix(options)

Мундариҷаи шуморо ҳамчун мундариҷаи замимашуда фаъол мекунад. Вариантҳои ихтиёриро қабул мекунад object.

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

.affix('checkPosition')

Ҳолати аффиксро аз рӯи андозаҳо, мавқеъ ва мавқеъи паймоиши унсурҳои дахлдор аз нав ҳисоб мекунад. Синфҳои , .affix, .affix-topва .affix-bottomсинфҳо мувофиқи ҳолати нав ба мундариҷаи иловашуда илова карда мешаванд ё аз он хориҷ карда мешаванд. Ин усулро ҳар вақте, ки андозаҳои мундариҷаи замимашуда ё унсури ҳадаф иваз карда мешаванд, даъват кардан лозим аст, то ҷойгиркунии дурусти мундариҷаи замимашударо таъмин кунад.

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

Ҳодисаҳо

Васлкунаки аффикси Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи аффикс фош мекунад.