Барраси

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

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

Истифодаи JavaScript тартиб додашуда

Ҳарду bootstrap.jsва bootstrap.min.jsдорои ҳамаи плагинҳо дар як файл. Танҳо якро дохил кунед.

Вобастагии плагинҳо

Баъзе плагинҳо ва ҷузъҳои CSS аз плагинҳои дигар вобастаанд. Агар шумо плагинҳоро ба таври инфиродӣ дохил кунед, боварӣ ҳосил кунед, ки ин вобастагиҳоро дар ҳуҷҷатҳо тафтиш кунед. Инчунин қайд кунед, ки ҳама плагинҳо аз jQuery вобастаанд (ин маънои онро дорад, ки jQuery бояд пеш аз файлҳои плагин дохил карда шавад). Ба моbower.json муроҷиат кунед, то бубинед, ки кадом версияҳои jQuery дастгирӣ мешаванд.

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

Шумо метавонед ҳамаи плагинҳои 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
})

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

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

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

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

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

Китобхонаҳои тарафи сеюм

Bootstrap расман китобхонаҳои JavaScript-и тарафи сеюмро ба монанди Prototype ё jQuery UI дастгирӣ намекунад. Сарфи назар аз .noConflictрӯйдодҳо ва фазои ном, метавонад мушкилоти мутобиқат дошта бошад, ки шумо бояд мустақилона ислоҳ кунед.

Transitions transition.js

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

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

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

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

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

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

$.support.transition = false

Modals modal.js

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

Модалҳои сершумори кушода дастгирӣ намешаванд

Боварӣ ҳосил кунед, ки модальро дар ҳоле ки дигараш ҳанӯз намоён аст, накушед. Намоиши зиёда аз як модаль дар як вақт рамзи фармоиширо талаб мекунад.

Ҷойгиркунии аломатгузории модалӣ

Ҳамеша кӯшиш кунед, ки коди HTML-и модальро дар як мавқеи боло дар ҳуҷҷати худ ҷойгир кунед, то ҷузъҳои дигареро, ки ба намуди зоҳирӣ ва/ё функсияи модал таъсир мерасонанд, пешгирӣ кунед.

Огоҳӣ дар дастгоҳи мобилӣ

Дар мавриди истифодаи модальҳо дар дастгоҳҳои мобилӣ баъзе огоҳиҳо мавҷуданд. Барои тафсилот ба ҳуҷҷатҳои дастгирии браузери мо нигаред.

Аз сабаби он ки чӣ тавр HTML5 семантикаи худро муайян мекунад, autofocusатрибути HTML дар модальҳои 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>

Модалҳоро дастрас кунед

Ҳатман илова кунед role="dialog"ва aria-labelledby="..."бо истинод ба унвони модалӣ ба .modal, ва role="document"ба .modal-dialogхуди.

Илова бар ин, шумо метавонед тавсифи муколамаи модалии худро бо aria-describedbyon .modal.

Ҷойгиркунии видеоҳои YouTube

Ҷойгиркунии видеоҳои YouTube дар модальҳо JavaScript-и иловагиро талаб мекунад, ки на дар Bootstrap барои худкор қатъ кардани бозиҳо ва ғайра. Барои маълумоти бештар ба ин пости муфиди Stack Overflow нигаред.

Андозаҳои ихтиёрӣ

Модалҳо ду андозаи ихтиёрӣ доранд, ки тавассути синфҳои тағирдиҳанда барои ҷойгир кардани .modal-dialog.

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

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

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

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

Аниматсияро нест кунед

Барои модальҳое, ки ба ҷои он ки барои дидан пажмурда шаванд, пайдо мешаванд, .fadeсинфро аз аломатгузории модалии худ хориҷ кунед.

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

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

Барои истифодаи бартарии системаи шабакаи 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="".

Ном навъи пешфарз тавсиф
замина булӣ ё сатр'static' дуруст Унсури модаль-заминаро дар бар мегирад. Интихобан, staticбарои заминае муайян кунед, ки модальро бо клик намепӯшад.
клавиатура булӣ дуруст Вақте ки тугмаи escape пахш карда мешавад, модальро мепӯшонад
нишон додан булӣ дуруст Модалро ҳангоми оғозёбӣ нишон медиҳад.
дурдаст роҳ дурӯғ

Ин хосият аз замони v3.3.0 бекор карда шудааст ва дар v4 хориҷ карда шудааст. Мо тавсия медиҳем, ки ба ҷои он шаблонсозии тарафи муштарӣ ё чаҳорчӯбаи ҳатмии маълумот ё худ ба jQuery.load занг занед .

Агар URL-и дурдаст таъмин карда шавад, мундариҷа як маротибаload тавассути усули jQuery бор карда мешавад ва ба .modal-contentdiv ворид карда мешавад. Агар шумо data-api-ро истифода баред, шумо метавонед ба таври алтернативӣ hrefатрибутро барои муайян кардани манбаи дурдаст истифода баред. Намунаи ин дар зер нишон дода шудааст:

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

Усулҳо

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

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

Модалро дастӣ иваз мекунад. Ба зангзананда пеш аз он ки модаль воқеан нишон дода шавад ё пинҳон шавад (яъне пеш аз рух додани ҳодиса shown.bs.modalё ҳодиса) бармегардад.hidden.bs.modal

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

Модалро дастӣ мекушояд. Ба зангзананда пеш аз намоиши модаль (яъне пеш аз shown.bs.modalрух додани ҳодиса) бармегардад.

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

Модалро дастӣ пинҳон мекунад. Ба зангзананда пеш аз пинҳон шудани модаль (яъне пеш аз hidden.bs.modalрух додани ҳодиса) бармегардад.

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

Ҷойгиркунии модальро барои муқобила бо сатри ҳаракат дар сурати пайдо шудани он аз нав танзим мекунад, ки ин модалро ба тарафи чап ҷаҳиш мекунад.

Танҳо вақте лозим аст, ки баландии модаль ҳангоми кушодани он тағир меёбад.

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

Ҳодисаҳо

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

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

Навъи ҳодиса Тавсифи
show.bs.modal Ин ҳодиса фавран ҳангоми showдаъват кардани усули инстансия оғоз меёбад. Агар дар натиҷаи клик ба вуҷуд омада бошад, унсури кликшуда ҳамчун relatedTargetмоликияти ҳодиса дастрас аст.
нишон дода шудааст.bs.modal Ин ҳодиса вақте оғоз мешавад, ки модаль барои корбар намоён карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад). Агар дар натиҷаи клик ба вуҷуд омада бошад, унсури кликшуда ҳамчун relatedTargetмоликияти ҳодиса дастрас аст.
hide.bs.modal Ин ҳодиса фавран ҳангоми hideдаъват кардани усули инстансия оғоз мешавад.
hidden.bs.modal Ин ҳодиса пас аз анҷоми пинҳон кардани модаль аз корбар оғоз мешавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
loaded.bs.modal Ин ҳодиса вақте оғоз мешавад, ки модаль мундариҷаро бо истифода аз remoteопсия бор кардааст.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

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

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

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

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

Тавассути атрибутҳои додаҳо ё 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()

data-toggle="dropdown"хануз талаб карда мешавад

Новобаста аз он, ки шумо афтандаро тавассути JavaScript занг мезанед ё ба ҷои он data-api-ро истифода мебаред, data-toggle="dropdown"ҳамеша бояд дар элементи триггери афтанда мавҷуд бошад.

Ҳеҷ

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

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

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

Навъи ҳодиса Тавсифи
show.bs.downdown Вақте ки усули мисоли нишон даъват карда мешавад, ин ҳодиса фавран оғоз меёбад.
нишон дода мешавад Ин ҳодиса вақте оғоз мешавад, ки афтанда ба корбар намоён карда шуд (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
пинҳон.bs.афтанда Вақте ки усули пинҳон кардани мисол даъват карда шудааст, ин ҳодиса фавран оғоз мешавад.
hidden.bs.downdown Ин ҳодиса пас аз анҷоми пинҳон кардани афтанда аз корбар оғоз мешавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

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

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

@фарбеҳ

Ad leggings keytar, brunch ID санъати ҳизб dolor labore. Pitchfork yr enim lo-fi пеш аз он ки онҳо qui фурӯхта. Tumblr ҳуқуқҳои велосипедронии ферма ба мизи ҳар чӣ. Кардиган Аним Кеффиех Карлес. Велит Сейтан Максвини аксбардорӣ 3 гург моҳ irure. Косби свитери ломо ҷин шорт, hoodie minim Williamsburg, ки шумо эҳтимол дар бораи онҳо нашунидаед ва фонди эътимоди кардиган culpa biodiesel Вес Андерсон эстетикӣ. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mouche skateboard, adipisicing fugiat velit pitchfork риш. Фриган риши aliqua cupidatat Mcsweeney's Vero. Cupidatat чор loko nisi, ea helvetica nulla carles. Мошини хӯрокворӣ свитери косби татуировкашуда, винилӣ аз Максвини. Ло-фи Вес Андерсон +1 sartorial. Карлес машқҳои эстетикии ғайримуқаррарӣ аст. Бруклин adipisicing ҳунарҳои пиво ноиби Keytar deserunt.

як

Дастрасӣ ба шумо имкон медиҳад. Fap ҳунармандӣ пиво deserunt скейтборд ea. Ҳуқуқҳои велосипедронии Lomo adipisicing banh mi, velit ea sunt lokavore қаҳваи якнажинадор дар Magna Veniam. Винили идентификатсияи ҳаёт, Эхо Парки оқибати он quis aliquip banh mi pitchfork мебошад. Vero VHS est adipising. Consectetur nisi DIY minim болишти паёмбаре. Cred ex in, delectus consectetur fanny Pack iphone устувор.

ду

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

three

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

Keytar twee blog, culpa messenger халта марфа ҳар мошини хӯрокворӣ delectus. Тасвирҳои синтези идентификатсия. Locavore sed helvetica cliche irony, thundercats, ки шумо эҳтимол дар бораи онҳо нашунидаед, ки дар натиҷаи hoodie free gluten lo-fi fap aliquip. Пеш аз он ки онҳо фурӯхта шаванд, Терри Ричардсон пеш аз он ки свитерҳои косбиро пеш аз он ки онҳо фурӯхта шаванд. Кардиган ҳунарҳои пиво seitan тайёр velit. VHS Chambray меҳнати муваққатӣ дорад. Аним моллит миним commodo ullamco thundercats.

Истифода

Nav Bootstrap -ро талаб мекунад

Scrollspy дар айни замон истифодаи ҷузъи Bootstrap navро барои равшансозии дурусти истинодҳои фаъол талаб мекунад.

Ҳадафҳои ID-и ҳалшаванда талаб карда мешаванд

Истинодҳои навбар бояд ҳадафҳои ҳалшавандаи ID дошта бошанд. Масалан, <a href="#home">home</a>бояд ба чизе дар DOM мувофиқат кунад <div id="home"></div>.

Унсурҳои :visibleғайримақсаднок сарфи назар карда шуданд

Унсурҳои мақсаднок, ки :visibleмувофиқи jQuery нестанд , сарфи назар карда мешаванд ва ҷузъҳои нави нави онҳо ҳеҷ гоҳ таъкид карда намешаванд.

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

Новобаста аз усули татбиқ, 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="".

Ном навъи пешфарз тавсиф
офсет рақам 10 Ҳангоми ҳисоб кардани мавқеи ҳаракат пикселҳо аз боло ҷуброн карда мешаванд.

Ҳодисаҳо

Навъи ҳодиса Тавсифи
activate.bs.scrollspy Ин ҳодиса ҳар вақте, ки ашёи нав тавассути scrollspy фаъол мешавад, оташ мегирад.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

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

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

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

Ҷинси хом шумо эҳтимол дар бораи онҳо шортҳои ҷинс Остин нашунидаед. Nesciunt tofu stumptown aliqua, retro synth усто пок. Мӯйлаб клише tempor, Williamsburg Carles vegan helvetica. Reprehenderit қассоб ретро keffiyeh dreamcatcher synth. Косби свитер eu Banh mi, qui irure Терри Ричардсон собиқ калмар. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan либоси амрикоӣ, қассоб ихтиёрӣ аст.

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

Навигатсияи ҷадвалбандиҳоро васеъ мекунад

Ин плагин ҷузъи навигатсионии ҷадвалбандишударо барои илова кардани минтақаҳои ҷадвалбанд васеъ мекунад.

Истифода

Ҷадвалҳои ҷадвалбандишавандаро тавассути 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рӯйдодҳо барканор карда намешаванд.

Навъи ҳодиса Тавсифи
show.bs.tab Ин ҳодиса дар намоиши ҷадвалҳо оғоз мешавад, аммо пеш аз он ки ҷадвали нав нишон дода шавад. Барои ҳадаф кардани ҷадвали фаъол ва ҷадвали фаъоли қаблӣ (агар мавҷуд бошад) мувофиқан event.targetва истифода баред .event.relatedTarget
нишон дода шудааст Ин ҳодиса пас аз нишон додани ҷадвал дар намоиши ҷадвал оташ мегирад. Барои ҳадаф кардани ҷадвали фаъол ва ҷадвали фаъоли қаблӣ (агар мавҷуд бошад) мувофиқан event.targetва истифода баред .event.relatedTarget
hide.bs.tab Ин ҳодиса ҳангоми намоиш додани ҷадвали нав оғоз меёбад (ва аз ин рӯ, ҷадвали фаъоли қаблӣ пинҳон карда мешавад). Барои мақсаднок кардани ҷадвали фаъоли ҷорӣ ва ҷадвали нави ба зудӣ фаъолшаванда мутаносибан ва истифода event.targetбаред .event.relatedTarget
hidden.bs.tab Ин ҳодиса пас аз нишон додани ҷадвали нав оғоз меёбад (ва ба ин васила ҷадвали фаъоли қаблӣ пинҳон мешавад). Барои ҳадаф кардани ҷадвали фаъоли қаблӣ ва ҷадвали нави фаъол, event.targetва истифода баред .event.relatedTarget
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

Аз плагини аълои jQuery.tipsy илҳом гирифта шудааст, ки аз ҷониби Ҷейсон Frame навишта шудааст; Маслиҳатҳо версияи навшуда мебошанд, ки ба тасвирҳо такя намекунанд, CSS3-ро барои аниматсияҳо ва атрибутҳо барои нигаҳдории унвонҳои маҳаллӣ истифода мебаранд.

Маслиҳатҳои асбобҳо бо унвонҳои дарозии сифр ҳеҷ гоҳ намоиш дода намешаванд.

Мисолхо

Барои дидани маслиҳатҳои асбобҳо ба болои истинодҳои зер гузаред:

Шимҳои танги сатҳи оянда keffiyeh шумо эҳтимол дар бораи онҳо нашунидаед. Аксҳо кабина риш хом denim letterpress vegan болишти паёмбаре Stumptown. Либоси амрикоии 8-битаи фарм-ба-сеитан, фиксии устувори квиноаи Максвини дорои винилии терри Ричардсон . Раъду риш, кардиганҳо banh mi lomo thundercats. Tofu biodiesel Williamsburg Марфа, чор Loko mcsweeney пок vegan chambray. A artisan воқеан ironic ҳар keytar , scenester farm-to-table banksy Остин twitter handle freegan cred raw denim қаҳва вирусӣ ягона.

Маслиҳати статикӣ

Чор вариант мавҷуд аст: боло, рост, поён ва ба чап мувофиқ.

Чор самт

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

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

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

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

Функсияи дохилшавӣ

Бо сабабҳои иҷроиш, Tooltip ва Popover data-apis дохил мешаванд, яъне шумо бояд онҳоро худатон оғоз кунед .

Як роҳи оғоз кардани ҳамаи маслиҳатҳои асбобҳо дар саҳифа ин интихоб кардани онҳо аз рӯи data-toggleатрибути онҳост:

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

Истифода

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

Маслиҳати абзорро тавассути 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>

Пайвандҳои сершумор

Баъзан шумо мехоҳед, ки ба гиперҳавола, ки сатрҳои сершуморро фаро мегирад, маслиҳати абзор илова кунед. Рафтори пешфарзии плагини абзор ин аст, ки он ба таври уфуқӣ ва амудӣ марказонида шавад. Барои white-space: nowrap;пешгирӣ кардани ин ба лангарҳои худ илова кунед.

Маслиҳатҳои асбобҳо дар гурӯҳҳои тугмаҳо, гурӯҳҳои воридотӣ ва ҷадвалҳо танзимоти махсусро талаб мекунанд

Ҳангоми истифодаи маслиҳатҳои асбобҳо оид ба унсурҳои дохили a .btn-groupё a .input-group, ё дар унсурҳои марбут ба ҷадвал ( <td>, <th>, <tr>, , <thead>, <tbody>, <tfoot>), шумо бояд интихобро container: 'body'(дар зер ҳуҷҷатгузорӣ шудааст) муайян кунед, то аз таъсири манфии номатлуб канорагирӣ кунед (масалан, элемент васеътар мешавад ва/ ё гум кардани кунҷҳои мудавваршуда ҳангоми ба кор андохтани банди асбоб).

Кӯшиш накунед, ки маслиҳатҳои асбобҳоро дар унсурҳои пинҳон нишон диҳед

Даъват $(...).tooltip('show')кардан ҳангоми мавҷудияти унсури мақсаднок display: none;боиси нодуруст ҷойгиршавии банди асбоб мегардад.

Маслиҳатҳои дастрас барои клавиатура ва корбарони технологияи ёрирасон

Барои корбароне, ки бо клавиатура паймоиш мекунанд ва махсусан корбарони технологияҳои ёрирасон, шумо бояд танҳо маслиҳатҳои абзорро ба унсурҳои ба клавиатура нигаронидашуда, ба монанди истинодҳо, назорати шакл ё ягон унсури худсарона бо атрибут илова кунед tabindex="0".

Маслиҳатҳои асбобҳо оид ба унсурҳои ғайрифаъол унсурҳои сарпӯшро талаб мекунанд

Барои илова кардани маслиҳат ба як disabledё .disabledэлемент, элементро дар дохили a ҷойгир кунед <div>ва ба ҷои он маслиҳатро истифода <div>баред.

Имконот

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

Ном Навъи Пешфарз Тавсифи
аниматсия булӣ дуруст Гузариши пажмурдашудаи CSS-ро ба маслиҳати абзор татбиқ кунед
контейнер сатр | дурӯғ дурӯғ

Маслиҳати абзорро ба унсури мушаххас замима мекунад. Мисол: container: 'body'. Ин хосият махсусан аз он сабаб муфид аст, ки он ба шумо имкон медиҳад, ки маслиҳати абзорро дар ҷараёни ҳуҷҷат дар наздикии унсури триггер ҷойгир кунед - ин имкон медиҳад, ки маслиҳати абзор ҳангоми тағир додани андозаи равзана аз шиноварӣ аз элементи триггер пешгирӣ кунад.

таъхир рақам | объект 0

Таъхири нишон додан ва пинҳон кардани маслиҳати асбобҳо (ms) - ба намуди триггери дастӣ дахл надорад

Агар рақам дода шавад, таъхир барои ҳарду пинҳон/нишон дода мешавад

Сохтори объект ин аст:delay: { "show": 500, "hide": 100 }

html булӣ дурӯғ HTML-ро ба маслиҳати абзор дохил кунед. Агар дурӯғ бошад, textусули jQuery барои ворид кардани мундариҷа ба DOM истифода мешавад. Агар шумо аз ҳамлаҳои XSS хавотир бошед, матнро истифода баред.
ҷойгиркунӣ сатр | функсия 'боло'

Маслиҳати абзорро чӣ гуна ҷойгир кардан мумкин аст - боло | поён | чап | рост | авто.
Вақте ки "авто" муайян карда мешавад, он масири абзорро ба таври динамикӣ дигар мекунад. Масалан, агар ҷойгиркунӣ "авто чап" бошад, маслиҳати абзор ҳангоми имконпазир ба тарафи чап нишон дода мешавад, вагарна он ба рост нишон дода мешавад.

Вақте ки функсия барои муайян кардани ҷойгиркунӣ истифода мешавад, он бо гиреҳи асбоби DOM ҳамчун аргументи аввал ва унсури триггери DOM гиреҳи дуюм номида мешавад. Контекст thisба мисоли маслиҳати асбобҳо гузошта шудааст.

интихобкунанда сатр дурӯғ Агар интихобкунанда таъмин карда шавад, объектҳои маслиҳати асбобҳо ба ҳадафҳои муқарраршуда дода мешаванд. Дар амал, ин барои имкон додани мундариҷаи динамикии HTML барои илова кардани маслиҳатҳои асбобҳо истифода мешавад. Ин ва мисоли иттилоотиро бубинед .
шаблон сатр '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Асоси HTML барои истифода ҳангоми сохтани маслиҳати абзор.

Маслиҳатҳои асбобҳо titleба .tooltip-inner.

.tooltip-arrowтирчаи банди асбобҳо мегардад.

Унсури болоии печанда бояд .tooltipсинф дошта бошад.

унвон сатр | функсия ''

Қимати унвони пешфарз, агар titleатрибут мавҷуд набошад.

Агар функсия дода шавад, он бо thisмаҷмӯи истинод ба элементе, ки маслиҳати абзор ба он замима шудааст, даъват карда мешавад.

триггер сатр 'фокусро дар баргиранда' Чӣ тавр маслиҳати асбобҳо фаъол карда мешавад - клик | овезон | таваҷҷӯҳ | дастур. Шумо метавонед якчанд триггерҳоро гузаронед; онҳоро бо фосила ҷудо кунед. manualбо ягон триггери дигар якчоя кардан мумкин нест.
нуқтаи назар сатр | объект | функсия { интихобкунанда: 'бадан', пуркунӣ: 0 }

Маслиҳати абзорро дар ҳудуди ин элемент нигоҳ медорад. Мисол: viewport: '#viewport'ё{ "selector": "#viewport", "padding": 0 }

Агар функсия дода шавад, он бо унсури триггери гиреҳи DOM ҳамчун далели ягонаи он даъват карда мешавад. Контекст thisба мисоли маслиҳати асбобҳо гузошта шудааст.

Атрибутҳои маълумот барои маслиҳатҳои инфиродӣ

Имконот барои маслиҳатҳои инфиродӣ метавонанд ба таври алтернативӣ тавассути истифодаи атрибутҳои додаҳо, тавре ки дар боло шарҳ дода шуд, муайян карда шаванд.

Усулҳо

$().tooltip(options)

Дастгиркунандаи маслиҳатро ба коллексияи элементҳо замима мекунад.

.tooltip('show')

Маслиҳати асбоби элементро ошкор мекунад. Пеш аз он ки маслиҳати асбобҳо воқеан нишон дода шавад (яъне пеш аз shown.bs.tooltipрух додани ҳодиса) ба зангзан бармегардад. Ин як триггери "дастӣ"-и маслиҳати абзор ҳисобида мешавад. Маслиҳатҳои асбобҳо бо унвонҳои дарозии сифр ҳеҷ гоҳ намоиш дода намешаванд.

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

.tooltip('hide')

Маслиҳати асбоби элементро пинҳон мекунад. Пеш аз он ки маслиҳати асбобҳо воқеан пинҳон карда шавад (яъне пеш аз hidden.bs.tooltipрух додани ҳодиса) ба зангзананда бармегардад. Ин як триггери "дастӣ"-и маслиҳати абзор ҳисобида мешавад.

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

.tooltip('toggle')

Маслиҳати асбоби элементро иваз мекунад. Пеш аз он ки маслиҳати асбобҳо воқеан нишон дода ё пинҳон карда шавад (яъне пеш аз рух додани ҳодиса shown.bs.tooltipё ҳодиса) ба зангзан бармегардад. hidden.bs.tooltipИн як триггери "дастӣ"-и маслиҳати абзор ҳисобида мешавад.

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

.tooltip('destroy')

Маслиҳати асбоби элементро пинҳон ва нобуд мекунад. Маслиҳатҳои асбобҳое, ки намояндагиро истифода мебаранд (ки бо истифода аз selectorопсия сохта шудаанд ) наметавонанд дар унсурҳои триггери насли алоҳида нобуд карда шаванд.

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

Ҳодисаҳо

Навъи ҳодиса Тавсифи
show.bs.tooltip Ин ҳодиса фавран ҳангоми showдаъват кардани усули инстансия оғоз меёбад.
нишон дода шудааст Ин ҳодиса вақте оғоз мешавад, ки маслиҳати абзор ба корбар намоён карда шуд (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
hide.bs.tooltip Ин ҳодиса фавран ҳангоми hideдаъват кардани усули инстансия оғоз мешавад.
hidden.bs.tooltip Ин ҳодиса вақте оғоз мешавад, ки маслиҳати абзор аз корбар пинҳон карда шавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
inserted.bs.tooltip Ин ҳодиса пас аз show.bs.tooltipҳодиса, вақте ки қолаби маслиҳати абзор ба DOM илова карда шудааст, оғоз мешавад.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Иловаи қабатҳои хурди мундариҷаро, ба монанди онҳое, ки дар iPad, ба ҳама гуна унсурҳо барои ҷойгир кардани маълумоти дуввум илова кунед.

Поповарҳое, ки ҳам унвон ва ҳам мундариҷаи онҳо сифр дарозӣ доранд, ҳеҷ гоҳ намоиш дода намешаванд.

Вобастагии плагин

Popovers талаб мекунад, ки плагини абзор ба версияи Bootstrap дохил карда шавад.

Функсияи дохилшавӣ

Бо сабабҳои иҷроиш, Tooltip ва Popover data-apis дохил мешаванд, яъне шумо бояд онҳоро худатон оғоз кунед .

Як роҳи оғоз кардани ҳама поповҳо дар саҳифа ин интихоб кардани онҳо аз рӯи data-toggleатрибути онҳост:

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

Поповарҳо дар гурӯҳҳои тугмаҳо, гурӯҳҳои воридотӣ ва ҷадвалҳо танзимоти махсусро талаб мекунанд

Ҳангоми истифодаи поповҳо дар унсурҳои дохили a .btn-groupё a .input-group, ё дар унсурҳои марбут ба ҷадвал ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), шумо бояд интихобро муайян кунед container: 'body'(дар зер ҳуҷҷатгузорӣ шудааст) барои пешгирӣ кардани таъсири манфии номатлуб (масалан, элемент васеътар мешавад ва/ ё гум кардани кунҷҳои мудавваршуда ҳангоми фаъол кардани попов).

Кӯшиш накунед, ки поповҳоро дар унсурҳои пинҳон нишон диҳед

Даъват $(...).popover('show')кардани унсури мавриди ҳадаф display: none;боиси нодуруст ҷойгиршавии попов мегардад.

Поповарҳо дар унсурҳои ғайрифаъол унсурҳои печандаро талаб мекунанд

Барои илова кардани попов ба элемент disabledё .disabledэлемент, элементро дар дохили a ҷойгир кунед <div>ва ба ҷои он поповро истифода <div>баред.

Пайвандҳои сершумор

Баъзан шумо мехоҳед, ки ба гиперҳаволае, ки сатрҳои сершуморро фаро мегирад, поповер илова кунед. Рафтори пешфарзии плагини popover ин аст, ки он ба таври уфуқӣ ва амудӣ марказонида шавад. Барои white-space: nowrap;пешгирӣ кардани ин ба лангарҳои худ илова кунед.

Мисолхо

Попвери статикӣ

Чор вариант мавҷуд аст: боло, рост, поён ва ба чап мувофиқ.

Попов боло

Дар лобортис ҷойгир аст. Aenean eu leo ​​quam. Пеллентеск ороиши sem lacinia quam venenatis vestibulum.

Попов рост

Дар лобортис ҷойгир аст. Aenean eu leo ​​quam. Пеллентеск ороиши sem lacinia quam venenatis vestibulum.

Поёни попов

Дар лобортис ҷойгир аст. Aenean eu leo ​​quam. Пеллентеск ороиши sem lacinia quam venenatis vestibulum.

Попов рафт

Дар лобортис ҷойгир аст. Aenean eu leo ​​quam. Пеллентеск ороиши sem lacinia quam venenatis vestibulum.

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

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

Чор самт

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

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

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

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

Дар клики навбатӣ қатъ кунед

Триггерро истифода баред focus, то поповҳоро дар клики навбатӣ, ки корбар мекунад, рад кунед.

Нишонаи мушаххас барои клики навбатӣ лозим аст

Барои рафтори дурусти кросс-браузер ва байниплатформа, шумо бояд тегро истифода баред <a>, на тег ва <button>шумо инчунин бояд атрибутҳои варо дохил role="button"кунед .tabindex

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

Истифода

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

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

Имконот

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

Ном Навъи Пешфарз Тавсифи
аниматсия булӣ дуруст Гузариши пажмурдашавии CSS-ро ба popover татбиқ кунед
контейнер сатр | дурӯғ дурӯғ

Поповро ба унсури мушаххас замима мекунад. Мисол: container: 'body'. Ин хосият махсусан аз он сабаб муфид аст, ки он ба шумо имкон медиҳад, ки попопверро дар ҷараёни ҳуҷҷат дар наздикии унсури триггер ҷойгир кунед - ин имкон намедиҳад, ки popover ҳангоми тағир додани андозаи равзана аз элементи триггер шино кунад.

мазмун сатр | функсия ''

Арзиши мундариҷаи пешфарз, агар data-contentаттрибут мавҷуд набошад.

Агар функсия дода шавад, он бо thisмаҷмӯи истинод ба элементе, ки popover ба он замима шудааст, даъват карда мешавад.

таъхир рақам | объект 0

Таъхири нишон додан ва пинҳон кардани popover (ms) - ба намуди триггери дастӣ дахл надорад

Агар рақам дода шавад, таъхир барои ҳарду пинҳон/нишон дода мешавад

Сохтори объект ин аст:delay: { "show": 500, "hide": 100 }

html булӣ дурӯғ HTML-ро ба popover дохил кунед. Агар дурӯғ бошад, textусули jQuery барои ворид кардани мундариҷа ба DOM истифода мешавад. Агар шумо аз ҳамлаҳои XSS хавотир бошед, матнро истифода баред.
ҷойгиркунӣ сатр | функсия 'дуруст'

Чӣ тавр ҷойгир кардани попов - боло | поён | чап | рост | авто.
Вақте ки "авто" муайян карда мешавад, он поповро ба таври динамикӣ тағир медиҳад. Масалан, агар ҷойгиркунӣ "авто чап" бошад, попover ҳангоми имконпазир ба тарафи чап намоиш дода мешавад, вагарна он ба рост нишон дода мешавад.

Вақте ки функсия барои муайян кардани ҷойгиркунӣ истифода мешавад, он бо гиреҳи popover DOM ҳамчун аргументи аввал ва унсури триггери DOM гиреҳи дуюм номида мешавад. Контекст thisба мисоли popover гузошта шудааст.

интихобкунанда сатр дурӯғ Агар интихобкунанда таъмин карда шавад, объектҳои попов ба ҳадафҳои муайяншуда дода мешаванд. Дар амал, ин барои имкон додани мундариҷаи динамикии HTML барои илова кардани поповҳо истифода мешавад. Ин ва мисоли иттилоотиро бубинед .
шаблон сатр '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Асоси HTML барои истифода ҳангоми сохтани popover.

Поповар ба titleсӯзандору ворид карда мешавад .popover-title.

Поповар ба contentсӯзандору ворид карда мешавад .popover-content.

.arrowтири поповар мегардад.

Унсури болоии печанда бояд .popoverсинф дошта бошад.

унвон сатр | функсия ''

Қимати унвони пешфарз, агар titleатрибут мавҷуд набошад.

Агар функсия дода шавад, он бо thisмаҷмӯи истинод ба элементе, ки popover ба он замима шудааст, даъват карда мешавад.

триггер сатр 'клик' Чӣ тавр popover фаъол карда мешавад - клик | овезон | таваҷҷӯҳ | дастур. Шумо метавонед якчанд триггерҳоро гузаронед; онҳоро бо фосила ҷудо кунед. manualбо ягон триггери дигар якчоя кардан мумкин нест.
нуқтаи назар сатр | объект | функсия { интихобкунанда: 'бадан', пуркунӣ: 0 }

Поповарро дар ҳудуди ин элемент нигоҳ медорад. Мисол: viewport: '#viewport'ё{ "selector": "#viewport", "padding": 0 }

Агар функсия дода шавад, он бо унсури триггери гиреҳи DOM ҳамчун далели ягонаи он даъват карда мешавад. Контекст thisба мисоли popover гузошта шудааст.

Атрибутҳои маълумот барои поповҳои инфиродӣ

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

Усулҳо

$().popover(options)

Поповҳоро барои коллексияи элементҳо оғоз мекунад.

.popover('show')

Поповери элементро ошкор мекунад. Ба зангзананда пеш аз намоиши поповер бармегардад (яъне пеш аз shown.bs.popoverрух додани ҳодиса). Ин як ангезаи "дастӣ"-и попов ҳисобида мешавад. Поповарҳое, ки ҳам унвон ва ҳам мундариҷаи онҳо сифр дарозӣ доранд, ҳеҷ гоҳ намоиш дода намешаванд.

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

.popover('hide')

Попповери элементро пинҳон мекунад. Ба зангзананда пеш аз пинҳон шудани поповер бармегардад (яъне пеш аз hidden.bs.popoverрух додани ҳодиса). Ин як ангезаи "дастӣ"-и попов ҳисобида мешавад.

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

.popover('toggle')

Поп-повери элементро иваз мекунад. Ба зангзананда пеш аз он ки popover воқеан нишон дода шавад ё пинҳон шавад (яъне пеш аз рух додани ҳодиса shown.bs.popoverё ҳодиса) бармегардад. hidden.bs.popoverИн як ангезаи "дастӣ"-и попов ҳисобида мешавад.

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

.popover('destroy')

Поповери элементро пинҳон ва нобуд мекунад. Поповҳое, ки намояндагиро истифода мебаранд (ки бо истифода аз selectorопсия сохта шудаанд ) наметавонанд дар унсурҳои триггери насли алоҳида нобуд карда шаванд.

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

Ҳодисаҳо

Навъи ҳодиса Тавсифи
show.bs.popover Ин ҳодиса фавран ҳангоми showдаъват кардани усули инстансия оғоз меёбад.
нишон дода шудааст.bs.popover Ин ҳодиса вақте оғоз мешавад, ки попов ба корбар намоён карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
hide.bs.popover Ин ҳодиса фавран ҳангоми hideдаъват кардани усули инстансия оғоз мешавад.
hidden.bs.popover Ин ҳодиса пас аз анҷоми пинҳон кардани попов аз корбар оғоз мешавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
inserted.bs.popover Ин ҳодиса пас аз show.bs.popoverҳодиса, вақте ки қолаби popover ба DOM илова карда шудааст, оғоз мешавад.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Паёмҳои огоҳкунанда alert.js

Намунаи огоҳиҳо

Бо ин плагин ба ҳама паёмҳои огоҳкунанда функсияи радкунӣ илова кунед.

Ҳангоми истифодаи .closeтугма, он бояд аввалин фарзанди он бошад .alert-dismissibleва дар аломатгузорӣ ягон мундариҷаи матнӣ пеш аз он омада наметавонад.

Истифода

Танҳо data-dismiss="alert"ба тугмаи пӯшидаи худ илова кунед, то ба таври худкор функсияи наздики ҳушдор диҳад. Пӯшидани ҳушдор онро аз DOM хориҷ мекунад.

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

Барои он ки огоҳиҳои шумо ҳангоми пӯшидан аниматсияро истифода баранд, боварӣ ҳосил кунед, ки онҳо аллакай ба онҳо .fadeва .inсинфҳо татбиқ шудаанд.

Усулҳо

$().alert()

Ҳодисаҳои кликро дар унсурҳои насли, ки атрибут доранд, огоҳӣ медиҳад data-dismiss="alert". (Ҳангоми истифодаи автоматикунонии data-api лозим нест.)

$().alert('close')

Огоҳиро бо хориҷ кардани он аз DOM мепӯшонад. Агар дар элемент синфҳо .fadeва .inсинфҳо мавҷуд бошанд, огоҳӣ пеш аз хориҷ шуданаш хомӯш мешавад.

Ҳодисаҳо

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

Навъи ҳодиса Тавсифи
наздик.б.огоҳӣ Ин ҳодиса фавран ҳангоми closeдаъват кардани усули инстансия оғоз меёбад.
баста.б.огоҳӣ Ин ҳодиса ҳангоми баста шудани ҳушдор оғоз мешавад (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Тугмаҳо button.js

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

Мутобиқати кросс-браузер

Firefox ҳолати назорати шаклро (маъюбонӣ ва тафтишӣ) дар сарбории саҳифа нигоҳ медорад . Як роҳи ҳалли ин истифода autocomplete="off"аст. Ба хатогии Mozilla # 654072 нигаред .

Давлатманд

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

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

Ҳар ҳолате, ки ба шумо маъқул аст, истифода баред!

Ба хотири ин намоиш, мо data-loading-textва -ро истифода мебарем $().button('loading'), аммо ин ягона ҳолате нест, ки шумо метавонед истифода баред. Муфассалтар дар ин бора дар $().button(string)ҳуҷҷатҳо нигаред .

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

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

Гузариш ягона

Барои data-toggle="button"фаъол кардани гузариш дар як тугма илова кунед.

Тугмаҳои қаблан ивазшуда лозиманд .activeваaria-pressed="true"

Барои тугмаҳои қаблан ивазшуда, шумо бояд .activeсинф ва aria-pressed="true"атрибутро ба buttonхуд илова кунед.

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

Қуттии қайд / Радио

Ба data-toggle="buttons"қуттии .btn-groupқайдкуни ё вурудоти радио илова кунед, то гузаришро бо услубҳои мувофиқи худ фаъол созед.

Имконоти пешакӣ интихобшуда лозим аст.active

Барои имконоти пешакӣ интихобшуда шумо бояд .activeсинфро ба вуруди labelхуд илова кунед.

Ҳолати визуалии тафтишшуда танҳо бо клик навсозӣ мешавад

Агар ҳолати санҷидашудаи тугмаи қуттии қайд бидуни clickсар задани ҳодиса дар тугма навсозӣ шавад (масалан, тавассути <input type="reset">ё тавассути танзими checkedмоликияти вуруд), ба шумо лозим меояд, ки .activeсинфро дар худи вуруд иваз labelкунед.

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

Усулҳо

$().button('toggle')

Ҳолати фишорро иваз мекунад. Тугма намуди зоҳириро медиҳад, ки он фаъол шудааст.

$().button('reset')

Ҳолати тугмаро барқарор мекунад - матнро ба матни аслӣ иваз мекунад. Ин усул асинхронӣ аст ва пеш аз он ки барқароркунӣ воқеан анҷом ёбад, бармегардад.

$().button(string)

Матнро ба ҳама гуна ҳолати матни додашуда иваз мекунад.

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

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

Collapse.js _

Васлкунаки фасеҳ, ки барои рафтори ивазкунии осон як қатор синфҳоро истифода мебарад.

Вобастагии плагин

Collapse плагини гузаришро талаб мекунад , ки ба версияи Bootstrap дохил карда шавад.

Мисол

Барои нишон додан ва пинҳон кардани унсури дигар тавассути тағироти синф тугмаҳои зерро клик кунед:

  • .collapseмундариҷаро пинҳон мекунад
  • .collapsingхангоми гузариш ба кор бурда мешавад
  • .collapse.inмазмун нишон медихад

Шумо метавонед пайвандеро бо hrefатрибут ё тугмаи дорои data-targetатрибут истифода баред. Дар ҳарду ҳолат, data-toggle="collapse"зарур аст.

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

Мисоли аккордеон

Барои сохтани аккордеон бо ҷузъи панел, рафтори пешфарзро васеъ кунед.

Аним париатур клише бозмегардонад, ки ҳаёти баландро ба Терри Ричардсон ва калмар мефаҳмонад. 3 Гург моҳ officia aute, ғайри cupidatat skateboard dolor brunch. Мошини озуқаворӣ quinoa nesciunt laborum eiusmod. Brunch 3 Гург tempor моҳ, sunt aliqua як парранда бар он калмар қаҳва ягона пайдоиши nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo labore Wes Anderson Cred nesciunt sapiente ea proident. Од вегетарианӣ excepteur қассоб ноиби lomo. Leggings occaecat craft пиво ферма-ба-миз, nesciunt эстетикии denim хом, шумо эҳтимол дар бораи онҳо accusamus labore VHS устувор нашунидаед.
Аним париатур клише бозмегардонад, ки ҳаёти баландро ба Терри Ричардсон ва калмар мефаҳмонад. 3 Гург моҳ officia aute, ғайри cupidatat skateboard dolor brunch. Мошини озуқаворӣ quinoa nesciunt laborum eiusmod. Brunch 3 Гург tempor моҳ, sunt aliqua як парранда бар он калмар қаҳва ягона пайдоиши nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo labore Wes Anderson Cred nesciunt sapiente ea proident. Од вегетарианӣ excepteur қассоб ноиби lomo. Leggings occaecat craft пиво ферма-ба-миз, nesciunt эстетикии denim хом, шумо эҳтимол дар бораи онҳо accusamus labore VHS устувор нашунидаед.
Аним париатур клише бозмегардонад, ки ҳаёти баландро ба Терри Ричардсон ва калмар мефаҳмонад. 3 Гург моҳ officia aute, ғайри cupidatat skateboard dolor brunch. Мошини озуқаворӣ quinoa nesciunt laborum eiusmod. Brunch 3 Гург tempor моҳ, sunt aliqua як парранда бар он калмар қаҳва ягона пайдоиши nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo labore Wes Anderson Cred nesciunt sapiente ea proident. Од вегетарианӣ excepteur қассоб ноиби lomo. Leggings occaecat craft пиво ферма-ба-миз, nesciunt эстетикии denim хом, шумо эҳтимол дар бораи онҳо accusamus labore VHS устувор нашунидаед.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Инчунин иваз кардани .panel-bodys бо .list-groups имконпазир аст.

  • Bootply
  • Як илоҷи он
  • Эроси дуюм

Назорати васеъ кардан/буриданро дастрас кунед

Боварӣ ҳосил кунед aria-expanded, ки ба элементи назорат илова кунед. Ин атрибут ба таври возеҳ ҳолати кунунии унсури пӯшидашавандаро барои хонандагони экран ва технологияҳои ёрирасони шабеҳ муайян мекунад. Агар унсури ҷамъшаванда бо нобаёнӣ баста бошад, он бояд арзиши aria-expanded="false". Агар шумо унсури ҷамъшавандаро бо нобаёнӣ бо истифода аз inсинф муқаррар aria-expanded="true"карда бошед, ба ҷои он назоратро насб кунед. Васлкунак ба таври худкор ин атрибутро вобаста ба кушода ё баста шудани элементи ҷамъшаванда иваз мекунад.

Илова бар ин, агар унсури идоракунии шумо як унсури ҷамъшавандаро ҳадаф қарор диҳад, яъне data-targetатрибут ба селектор ишора кунад - шумо метавонед ба унсури идоракунӣ атрибути idиловагӣ илова кунед , ки дорои унсури ҷамъшаванда мебошад. Хонандагони экрани муосир ва технологияҳои ёрирасони шабеҳ аз ин атрибут истифода мебаранд, то ба корбарон миёнабурҳои иловагӣ фароҳам оранд, то мустақиман ба худи унсури пӯшидашаванда ҳаракат кунанд.aria-controlsid

Истифода

Васлкунаки пошхӯрӣ чанд синфро барои идора кардани борбардории вазнин истифода мебарад:

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

Ном навъи пешфарз тавсиф
падару модар интихобкунанда дурӯғ Агар интихобкунанда таъмин карда шуда бошад, пас ҳамаи унсурҳои ҷамъшаванда дар зери волидайни муайяншуда ҳангоми нишон додани ин унсури ҷамъшаванда баста мешаванд. (ба рафтори анъанавии аккордеон монанд - ин аз panelсинф вобаста аст)
иваз кардан булӣ дуруст Элементи ҷамъшавандаро ҳангоми даъват иваз мекунад

Усулҳо

.collapse(options)

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

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

.collapse('toggle')

Элементи ҷамъшавандаро ба нишон ё пинҳон иваз мекунад. Пеш аз он ки унсури ҷамъшаванда воқеан нишон дода ё пинҳон карда шавад (яъне пеш аз рух додани ҳодиса shown.bs.collapseё ҳодиса) ба зангзан бармегардад.hidden.bs.collapse

.collapse('show')

Элементи ҷамъшавандаро нишон медиҳад. Ба зангзананда пеш аз намоиш додани унсури ҷамъшаванда бармегардад (яъне пеш аз shown.bs.collapseрух додани ҳодиса).

.collapse('hide')

Элементи пӯшидашавандаро пинҳон мекунад. Ба зангзананда пеш аз он ки унсури ҷамъшаванда воқеан пинҳон карда шавад (яъне пеш аз hidden.bs.collapseрух додани ҳодиса) бармегардад.

Ҳодисаҳо

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

Навъи ҳодиса Тавсифи
show.bs.colapse Ин ҳодиса фавран ҳангоми showдаъват кардани усули инстансия оғоз меёбад.
нишон дода шудааст Ин ҳодиса вақте оғоз мешавад, ки унсури шикаста ба корбар намоён карда шуд (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
пинҳон кардан Ин ҳодиса фавран вақте ки hideусул даъват шудааст, барканор карда мешавад.
пинҳон.б.хуриш Ин ҳодиса вақте оғоз мешавад, ки унсури шикаста аз корбар пинҳон карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
$('#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-и ихтиёриро дар он ҷо ҷойгир кунед ва он ба таври худкор мувофиқ ва формат карда мешавад.

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

Ном навъи пешфарз тавсиф
фосила рақам 5000 Миқдори вақт барои таъхир дар байни велосипедронии автоматии ашё. Агар дурӯғ бошад, карусель ба таври худкор давр намезанад.
таваққуф кардан сатр | нул "гурез" Агар ба танзим гузошта шуда бошад "hover", гардиши каруселро таваққуф mouseenterмекунад ва чарх задани каруселро дар mouseleave. Агар ба - муқаррар карда шавад null, дар болои карусел гузоштан онро таваққуф намекунад.
печонед булӣ дуруст Новобаста аз он ки карусель бояд пайваста давр занад ё таваққуфҳои сахт дошта бошад.
клавиатура булӣ дуруст Оё карусел бояд ба рӯйдодҳои клавиатура вокуниш нишон диҳад.

Каруселро бо имконоти ихтиёрӣ objectоғоз мекунад ва дар байни ашё давр заданро оғоз мекунад.

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

Дар байни ҷузъҳои карусел аз чап ба рост давр мезанад.

Каруселро аз гардиши байни ашё бозмедорад.

Каруселро ба чаҳорчӯбаи мушаххас давр мезанад (дар асоси 0, монанд ба массив).

Давра ба банди қаблӣ.

Давра ба банди оянда.

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

Ҳарду ҳодиса дорои хосиятҳои иловагии зерин мебошанд:

  • direction: Самт, ки дар он карусел ҳаракат мекунад (ё "left"ё "right").
  • relatedTarget: Унсури DOM, ки ҳамчун унсури фаъол ба ҷои ҷойгир карда мешавад.

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

Навъи ҳодиса Тавсифи
слайд.б.карусел slideВақте ки усули мисол даъват карда мешавад, ин ҳодиса фавран оғоз меёбад.
slid.bs.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".

Ном навъи пешфарз тавсиф
офсет рақам | функсия | объект 10 Ҳангоми ҳисоб кардани мавқеи ҳаракат пикселҳо аз экран ҷуброн карда мешаванд. Агар рақами ягона дода шавад, офсет ҳам дар самти боло ва ҳам дар поён татбиқ карда мешавад. Барои таъмин намудани ҷуброни беназир, поён ва боло танҳо як объект offset: { top: 10 }ё offset: { top: 10, bottom: 5 }. Функсияро ҳангоми зарурати ба таври динамикӣ ҳисоб кардани ҷуброн истифода баред.
ҳадаф интихобкунанда | гиреҳ | Унсури jQuery windowобъект _ Унсури мақсадноки аффиксро муайян мекунад.

Усулҳо

.affix(options)

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

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

.affix('checkPosition')

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

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

Ҳодисаҳо

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

Навъи ҳодиса Тавсифи
affix.bs.affiks Ин ҳодиса фавран пеш аз гузоштани элемент оғоз меёбад.
аффикс.б.аффикс Ин ҳодиса пас аз гузоштани элемент ба кор андохта мешавад.
affix-top.bs.affiks Ин ҳодиса фавран пеш аз он ки элемент часпонида шавад, оғоз меёбад.
affixed-top.bs.affiks Ин ҳодиса пас аз гузоштани элемент ба боло оғоз мешавад.
affix-bottom.bs.affiks Ин ҳодиса фавран пеш аз он ки элемент дар поён часпида шавад, оғоз меёбад.
affixed-bottom.bs.affiks Ин ҳодиса пас аз гузоштани элемент дар поён ба кор андохта мешавад.