Hatun qhawariy

Sapakama utaq huñusqa

Pluginkuna sapalla churasqa kankuman (Bootstrap sapalla *.jswillañiqikunata llamk'achispa), utaq tukuy huk kutillapi (llamk'achispa bootstrap.jsutaq pisiyachisqa bootstrap.min.js).

Huñusqa JavaScript nisqawan

Iskaynin bootstrap.jschaymanta bootstrap.min.jsllapa plugins huklla willañiqipi hap'in. Hukllata churay.

Plugin nisqamanta dependenciakuna

Wakin plugins chaymanta CSS componentes wak plugins kaqmanta hapirin. Sichus sapalla plugins churanki, allinta qhaway kay dependenciakuna docs kaqpi. Hinallataq, tukuy plugins jQuery kaqmanta hapirin (kayqa niyta munan jQuery manaraq plugin willañiqikuna kachkaptin churasqa kanan tiyan). Consulta nuestrobower.json para ver las versiones de jQuery que se apoya.

Atributos de datos

Llapa Bootstrap plugins llamk'achiyta atikunki ch'uya API marcación kaqninta mana huk chiru JavaScript qillqaspa. Kayqa Bootstrap kaqpa ñawpaq clase API kaqnin chaymanta ñawpaq qhawayniyki kanan tiyan huk plugin llamk'achkaspa.

Chayta nispa, wakin situacionkunapi kay ruwayta wañuchiy munasqa kanman. Chayrayku, atiyta quykutaq willay laya API mana llamk'achiyta llapa ruwaykunata qillqa sutikuna t'aqasqa kaqpi mana watasqa kaqwan data-api. Kayqa kayhinam rikchakun:

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

Hukninpi, huk específico plugin kaqman targetta ruwanapaq, pluginpa sutinta huk sutinchana hina churaylla kayhina data-api sutinchanawan kuska:

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

Huk pluginlla sapa elemento kaqpi willay atributokuna kaqnintakama

Ama achka pluginkunamanta willay layakunata kikin elemento kaqpi llamk'achiychu. Ejemplopaq, huk botón mana iskayninta huk yanapakuypa yuyaychayninta ruwayta atinmanchu chaymanta huk modalta tikrayta atinchu. Chayta ruwanaykipaqqa huk elemento de envoltura nisqawanmi llamk’achiy.

API programática nisqa

Hinallataq iñiyku llapa Bootstrap plugins llamk'achiyta atisqaykita ch'uya JavaScript API kaqnintakama. Llapan llapapaq APIkuna sapalla, kadenayuq ruwanakuna kanku, chaymanta huñusqa ruwasqa kutichiy.

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

Llapan ruwanakuna huk akllana akllanakuna objetota chaskinanku tiyan, huk watiqa mayqinchus huk ruwanaman chayan, utaq mana ima (mayqinchus huk plugin ñawpaqmanta ruwaywan qallarichin):

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

ConstructorSapa pluginpas huk propiedadpi raw ruwaqnintam qawachin : $.fn.popover.Constructor. Sichus huk plugin instanciata chaskiyta munanki, huk elementomanta chiqalla kutichiy: $('[rel="popover"]').data('popover').

Ñawpaqmanta churasqakuna

Huk pluginpaq ñawpaqmanta churasqakunata tikrayta atikunki pluginpa Constructor.DEFAULTSobjetonta tikraspa:

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

Mana ch’aqwayniyuq

Wakin kutiqa huk UI marcokunawan Bootstrap plugins llamk'achina tiyan. Kayhina kaqtinqa, sutikunap chiqan t'inkinakuyninkuna wakin kutipi kanman. Sichus kay ruwakun, chay plugin kaqman waqyayta .noConflictatikunki mayqinmantachus chanita kutichiyta munanki.

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

Eventos nisqakuna

Bootstrap sapanchasqa ruwaykunata qun aswan plugins sapalla ruwanakuna kaqpaq. Tukuypaq, kaykunaqa mana tukukuq, ñawpaq participio nisqa rikch'aypi hamunku - maypichus infinitivo (ex. show) huk suceso qallariypi llamk'achisqa, ñawpaq participio nisqa rikch'ayninqa (ex. shown) huk ruway tukukuptin llamk'achisqa.

3.0.0 kaqmanta, llapa Bootstrap ruwaykuna sutikuna chiqanchasqa kachkan.

Llapan mana tukukuq sucesokuna preventDefaultruwayta qun. Kayqa huk ruwayta manaraq qallarichkaptin sayachiy atiyta qun.

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

Versión yupaykuna

Sapa Bootstrap kaqpa jQuery plugins kaqpa laya VERSIONkaqninqa plugin ruwaqpa propiedadnin kaqninta yaykuyta atikun. Ejemplopaq, yanapakuypa yanapakuynin pluginpaq:

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

JavaScript mana llamk'achisqa kaptin mana huk especial fallbacks kaqchu

Bootstrap kaqpa plugins mana qhipaman urmankuchu particularmente gracioso kaqwan JavaScript mana llamk'achisqa kaqtin. Sichus kay casopi ruwaqpa experiencianmanta llakikunki, llamk'achiy <noscript>situacionta sut'inchanapaq (hinallataq imayna JavaScript kaqmanta atichiyta) ruwaqniykikunaman, chaymanta/utaq kikiyki ruwasqa fallbacksniyki yapay.

Kimsa kaq bibliotecakuna

Bootstrap mana oficialmente yanapanchu kimsa kaq JavaScript bibliotecakuna Prototype utaq jQuery UI hina. Aunque .noConflictchaymanta sutikuna chiqanchasqa ruwaykuna, kanman tupachiy sasachakuykuna mayqinkunatachus sapallayki allichanayki tiyan.

Transiciones transición.js nisqa

Transiciones nisqamanta

Sasan tikray efectos kaqpaq, transition.jshuk kuti wak JS willañiqikunap ladunpi churay. Sichus huñusqa (utaq pisiyachisqa) llamk'achkanki bootstrap.js, mana kayta churanayki tiyanchu —chaypi kachkanña.

Imataq ukunpi kachkan

Transition.js huk sapsi yanapakuq transitionEndruwaykunapaq chaymanta huk CSS tikray emulador kaqpaq. Huk plugins kaqwan llamk'achisqa CSS tikray yanapakuyta qhawanapaq chaymanta warkusqa tikraykunata hap'inapaq.

Transiciones nisqakunata mana llamk’achispa

Tikraykunaqa tukuypaq mana llamk'achisqa kanman kay JavaScript t'aqawan, mayqinchus hamunan tiyan transition.js(utaq bootstrap.js, bootstrap.min.jsimaynachus kanman) kargasqa kaptin:

$.support.transition = false

Modales nisqakuna modal.js

Modalkuna allinchasqa kanku, ichaqa flexible, rimanakuna tapuykunata aswan pisi munasqa ruwanakunayuq chaymanta yuyaysapa ñawpaqmanta churasqakunayuq.

Achka kichasqa modales mana yanapasqachu

Aseguray ama kichaychu huk modal huk rikukuchkaptinraq. Huk kutipi aswan huk modal rikuchiyqa sapanchasqa código nisqatam munan.

Colocación de marcado modal nisqa

Siempre kallpachakuy huk modalpa HTML codigonta qillqaykipi huk pata pata kaqpi churayta huk componentekuna modalpa rikchayninta chaymanta/utaq ruwayninta mana afectananpaq.

Dispositivo móvil nisqamanta advertenciakuna

Wakin advertencias kanku dispositivos móviles kaqpi modales llamk'achinamanta. Rikuy maskaq yanapakuy qillqaykumanta aswan sut'inchaykunapaq.

Imayna HTML5 semántica kaqninta riqsichisqanrayku, autofocusHTML atributo mana Bootstrap modales kaqpi ruwayniyuqchu. Kikin ruwayta aypanaykipaq, wakin ruwasqa JavaScript llamk'achiy:

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

Ejemplos

Ejemplo estático

Huk ruwasqa modal umawan, kurkuwan, chaymanta ruwanakuna huñuwan chaki kaqpi.

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

Demostración en vivo

Huk modal JavaScript kaqninta tikray uraypi kaq ñit'inata ñit'ispa. Chayqa urayman llimp’inqa, chaymantataq p’anqa patamantapacha chinkapunqa.

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

Hacer accesibles a los modales

Aswan allinta yapay role="dialog"chaymanta aria-labelledby="...", referenciando el título modal, a .modal, y role="document"a la .modal-dialogmisma.

aria-describedbyChaymantapas, on nisqawanmi modal rimanakuyniykimanta willakuyta quwaq .modal.

YouTube videokunata churay

YouTube videokuna modales kaqpi churayqa huk JavaScript yapasqa mana Bootstrap kaqpi munan kikinmanta pukllayta sayachinapaq chaymanta aswan. Aswan willakuypaq kay yanapakuq Pila Desbordamiento qillqasqata qhaway.

Tamaños opcionales

Modalkuna iskay akllana sayayniyuq kanku, huk .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>

Animación nisqamanta hurquy

Modalkuna qhawanapaq mana chinkaylla rikuriqllapaq, .fadeclaseta modal markaykimanta hurquy.

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

Sistema de rejilla nisqawan yanapachikuspa

Huk modal ukhupi Bootstrap rejilla sistemamanta ventajata hapinapaq, chaylla nido .rows ukhupi .modal-bodychaymanta chaymanta normal rejilla sistema clasekunata llamk'achiy.

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

¿Huk qutu botonesniyuqchu kanki, chaytaq tukuyninku kikin modalllata llamk’achinku, juk chhika wak contenidoyuqlla? Utilizar event.relatedTargetchaymanta HTML data-*atributokuna (ichapas jQuery kaqnintakama ) modal kaqpa imayna kayninta tikranapaq mayqin ñit'ina ñit'isqa kasqanmanhina. Rikuy Modal Eventos docs nisqapi aswan sut'inchaykunapaq relatedTarget, .

...aswan botones...
<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)
})

Uso

Modal plugin pakasqa willayniyki mañakuypi tikran, willay atributokuna utaq JavaScript kaqnintakama. Hinallataq yapan .modal-openchayman <body>ñawpaqmanta kuyuchiy ruwayta llallinanpaq chaymanta .modal-backdrophuk ñit'iy áreata qunanpaq rikuchisqa modalkunata qarqunapaq modal hawapi ñit'iypi ruwan.

Atributos de datos nisqawan

JavaScript qillqaspa mana huk modal nisqa llamk'achiy. Huk kamachiq elemento kaqpi churay data-toggle="modal", huk ñit'ina hina, huk data-target="#foo"utaq href="#foo"huk específico modal kaqman tikranapaq target kaqwan kuska.

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

JavaScript nisqawan

Huk modal id myModalkaqwan huk sapalla chiru JavaScript kaqwan waqyay:

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

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-backdrop="".

Suti niraq ñawpaqchasqa willay
telón de fondo boolean icha chay watiqa'static' chiqaq Incluye un elemento de telón de fondo modal. Hukninpi, statichuk telón de fondopaq willay mayqinchus mana modal ñit'iypi wichq'anchu.
teclado nisqa boolean nisqa chiqaq Escape llave ñit'isqa kaptin modal nisqatam wichqan
qawachiy boolean nisqa chiqaq Qallarichisqa kaptin modal nisqatam qawachin.
karu ñan pantasqa

Kay akllana v3.3.0 kaqmanta manaña llamk'achisqachu chaymanta v4 kaqpi hurqusqa. Recomendayku aswanpas plantillas lado cliente kaqmanta utaq huk marco de unión de datos kaqmanta llamk'achiyta, utaq jQuery.load kaqmanta qam kikiyki waqyayta.

Sichus huk karu URL qusqa, contenido huk kuti jQuery kaqpa ruwayninwan kargasqa kanqa chaymanta div kaqman loadinyectasqa kanqa . .modal-contentSichus data-api llamk'achkanki, hukmanta llamk'achiy atikunki hrefatributota karu pukyuta willanaykipaq. Kaymanta huk rikch'anachiymi kay urapi rikuchikun:

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

Métodos

Contenidoykita huk modal hina activan. Huk akllana akllanakunata chaskikun object.

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

Manualmente huk modal nisqatam tikran. Llamaqman kutimun manaraq modal chiqamanta rikuchisqa utaq pakasqa kachkaptin (icha manaraq shown.bs.modalutaq hidden.bs.modalruway ruwakuchkaptin).

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

Manualmente kichan huk modal. Llamaqman kutimun manaraq modal chiqamanta rikuchisqa kachkaptin (icha manaraq shown.bs.modalruway ruwakuchkaptin).

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

Manualmente pakakun huk modal. Llamaqman kutimun manaraq modal chiqamanta pakasqa kachkaptin (icha manaraq hidden.bs.modalruway ruwakuchkaptin).

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

Modalpa churayninta musuqmanta allichan huk barra de desplazamiento kaqwan contrapi ruwanapaq sichus huk rikhurinman, chaytaq modal saltayta ruwanman lluq'iman.

Kichasqa kachkaptin modalpa sayaynin tikrakuptinllam necesitakun.

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

Eventos nisqakuna

Bootstrap kaqpa modal clase huk pisi ruwaykunata rikuchin modal ruwanakunaman enganche kaqpaq.

Llapan modal ruwaykuna kikin modal kaqpi (ichataq <div class="modal">).

Tipo de Evento Willay
rikuchiy.bs.modal Kay ruwayqa chaylla rawrarin mayk'aq showinstancia método waqyasqa. Sichus huk ñit'iywan ruwasqa, ñit'isqa elementoqa ruwaypa relatedTargetpropiedadnin hinam kachkan.
rikuchisqa.bs.modal Kay ruwayqa llamk'achisqa kachkan mayk'aq modal ruwaqman rikukuq ruwasqa (suyanqa CSS tikraykuna tukukunanta). Sichus huk ñit'iywan ruwasqa, ñit'isqa elementoqa ruwaypa relatedTargetpropiedadnin hinam kachkan.
pakay.bs.modal nisqa Kay ruwayqa chaylla llamk'achisqa kachkan mayk'aq hideinstancia método waqyasqa kachkan.
pakasqa.bs.modal nisqa Kay ruwayqa llamk'achisqa kachkan mayk'aq modal llamk'aqmanta pakasqa kayta tukusqa (suyanqa CSS tikraykunata tukunanta).
cargado.bs.modal nisqa Kay ruwayqa llamk'achisqa kachkan mayk'aq modal remoteakllanata llamk'achispa contenidota kargasqa.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Urmachiykuna dropdown.js

Yaqa imamanpas urayk'aq menúkunata yapay kay sasan plugin kaqwan, navbar kaqwan, tablakuna chaymanta pastillas kaqwan.

Huk navbar ukhupi

Pastillas ukhupi

Willay atributokuna utaq JavaScript kaqnintakama, urayk'aq plugin pakasqa willayta (urquq menúkuna) tikran .opentayta lista kaqpi claseta tikraspa.

Dispositivokuna apaykachanakunapi, huk urayk'aq kichay huk .dropdown-backdrophuk ñit'iy área hina yapan urayk'aq menúkuna wichq'anapaq mayk'aq menú hawapi ñit'iy, huk mañakuy allin iOS yanapakuypaq. Kayqa niyta munan huk kichasqa urayk'aq menú kaqmanta huk urayk'aq menú kaqman tikray huk yapasqa ñit'iy movil kaqpi munan.

Qhaway: data-toggle="dropdown"Atributo huk ruwana patapi urayk'aq menúkuna wichq'anapaq hapipakun, chayrayku allin yuyay sapa kuti llamk'achinapaq.

Atributos de datos nisqawan

data-toggle="dropdown"Huk t'inkiman utaq ñit'inaman yapay huk urayk'achiqta tikranaykipaq.

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

URLkuna t'inkikuna ñit'inakunawan mana imayuq kananpaq, llamk'achiy data-targetatributota ranti 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 nisqawan

JavaScript nisqawan urayk'achiqkunata waqyay:

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

data-toggle="dropdown"kunankamapas mañasqaraqmi kachkan

Imayna kaptinpas sichus JavaScript kaqnintakama urayk'achisqayki waqyanki utaq aswanpas data-api kaqwan llamk'achkanki, data-toggle="dropdown"sapa kuti urayk'aqpa elemento desencadenante kaqpi kanan tiyan.

Mana mayqinpas

Huk qusqa navbar utaq tablayuq puriypa urayk'aq menú kaqninta tikran.

Llapan urayk'aq ruwaykuna .dropdown-menu's tayta elemento kaqpi llamk'achisqa.

Llapan urayk'aq ruwaykuna huk relatedTargetpropiedadniyuq kanku, mayqinpa chaninmi toggling ancla elemento.

Tipo de Evento Willay
rikuchiy.bs.urquy Kay ruwayqa chaylla rawrarin mayk'aq rikuchiy instancia método waqyasqa.
rikuchisqa.bs.uraq Kay ruwayqa llamk'achisqa kachkan mayk'aq urayk'achiq ruwaqman rikukuq ruwasqa (CSS tikraykunata suyanqa, tukusqa kananpaq).
pakay.bs.urquy Kay ruwayqa chaylla llamk'achisqa kan mayk'aq pakay instancia ñan waqyasqa.
pakasqa.bs.urquy Kay ruwayqa llamk'achisqa kanqa mayk'aq urayk'achiq llamk'achiqmanta pakasqa kayta tukusqa (CSS tikraykunata suyanqa, tukusqa kananpaq).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy nisqa scrollspy.js nisqa

Ejemplo en navbar

ScrollSpy plugin kikinmanta musuqyachiypaq nav metakuna kuyuchiy posición kaqpi. Navbar urapi kaq áreata kuyuchiy chaymanta qhaway activo clase tikrayta. Chay urayk’aq sub elementokuna hinallataq resaltasqa kanqa.

@wira

Polainas de anuncios keytar, brunch id arte fiesta dolor labore. Horquilla yr enim lo-fi antes de que se venden qui. Tumblr chakramanta mesaman bicicleta derechokuna imapas. Anim keffiyeh carles cardigan. Velit seitan mcsweeneypa foto cabina 3 lobo killa irure. Cosby suéter lomo jean pantalones cortos, williamsburg sudadera minim qui probablemente no has escuchado de ellos et cardigan fondo de fideicomiso culpa biodiesel wes anderson estética. Nihil tatuado acusamus, cred ironía biodiésel keffiyeh artesano ullamco consequat.

@mdo nisqa

Veniam marfa bigote patineta, adipisicing fugiat velit horquilla barba. Freegan barba aliqua cupidatat mcsweeneypa vero. Cupidatat tawa loko nisi, ea helvetica nulla carles. Tatuado cosby suéter camión de alimentos, mcsweeney's quis mana freegan vinilo. Lo-fi wes anderson +1 sartorial nisqa. Carles mana estético ejercicio quis gentrificar. Brooklyn adipisicing artesanal cerveza vice keytar deserunt.

huk

Occaecat nisqa commodo nisqa uywa. Fap artesanía cerveza deserunt patineta ea. Lomo bicicleta derechos adipisicing banh mi, velit ea sunt qatiqnin nivel locavore huk-origen café en magna veniam. Alta vida id vinilo, eco parque consequat quis aliquip banh mi horquilla. Vero VHS est adipisicing nisqa. Consectetur nisi DIY mínimo bolsa de mensajero. Cred ex en, sostenible delectus consectetur fanny pack iphone.

iskay

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 mensajero bolsa marfa imapas delectus mikhuy camion. Sapiente sintet id assumenda. Locavore sed helvetica cliche ironía, truenos gatos probablemente no has escuchado de ellos consequat sudadera con capucha sin gluten lo-fi fap aliquip. Labore elit placeat manaraq vendisqanku, terry richardson proident brunch nesciunt quis cosby suéter pariatur keffiyeh ut helvetica artesano. Cardigan cerveza artesanal seitan velit listo. VHS chambray laboris venam temporal nisqa. Anim mollit minim commodo ullamco rayokuna.

Uso

Requiere Bootstrap nav

Scrollspy kunan huk Bootstrap nav componente llamk'ayta munan allin ruwasqa t'inkikuna resaltananpaq.

ID nisqa allichanapaq metakuna necesitakun

Navbar t'inkikuna allichanapaq id metakunayuq kanan tiyan. Ejemplopaq, a <a href="#home">home</a>DOM nisqapi imawanpas tupananmi imaynan <div id="home"></div>.

Mana :visiblemeta nisqa elementokuna mana qhawasqa

:visibleJQuery kaqmanhina mana elementokuna meta kaqmanta mana qhawasqachu kanqa chaymanta tupaq nav elementokuna mana hayk'aqpas resaltasqachu kanqa.

Requiere posicionamiento relativo nisqa

Mana imapas ruway ñan, scrollspy llamk'ayta munan chaymanta position: relative;elemento espionaje kaqpi. Yaqa llapanpiqa kaymi <body>. Cuando scrollspiying en elementos otros que el <body>, asegúrate de tener un heightconjunto y overflow-y: scroll;aplicado.

Atributos de datos nisqawan

Scrollspy ruwayta mana sasachu yapanaykipaq pata barra puriyniykiman, yapay data-spy="scroll"elementoman yapay mayqinpichus espionayta munanki (aswan típicamente kay kanman chay <body>). Chaymanta yapay data-targetatributo ID kaqwan utaq clase kaqwan tayta elementomanta mayqin Bootstrap .navcomponente kaqmanta.

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 nisqawan

CSS nisqaykipi yapasqaykimanta position: relative;, JavaScript nisqawan scrollspy nisqaman waqyay:

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

Métodos

.scrollspy('refresh')

Scrollspy DOM kaqmanta elementokuna yapay utaq hurquywan kuska llamk'achkaspa, musuqyachiy ñanta chayhina waqyanayki tiyan:

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

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-offset="".

Suti niraq ñawpaqchasqa willay
offset nisqa yupay 10. 10 Pixelkuna patamanta offset kananpaq, kuyuypa posiciónninta yupaspa.

Eventos nisqakuna

Tipo de Evento Willay
activar.bs.scrollspy nisqa Kay suceso ninawan mayk'aqllapas huk musuq imapas scrollspy kaqwan llamk'achisqa kaptin.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Pestañas cambiables tab.js

Ejemplo de tablas

Yanapakuy utqaylla, kallpasapa tabla ruwanakunata kitipi kaqpa paneles kaqninta tikrayman, urayk'aq menúkuna kaqnintakamapas. Anidado tablakuna mana yanapasqachu.

Crudo denim probablemente no has escuchado de ellos pantalones cortos vaqueros Austin. Nesciunt tofu tocón aliqua, retro sintetizador maestro limpieza. Bigote cliché temporal, williamsburg carles vegana helvetica. Reprehenderit carnicero retro keffiyeh musquy hapiq sintetizador. Suéter cosby eu banh mi, qui irure terry richardson ex calamar. Aliquip lugarat salvia cillum iphone. Seitan aliquip quis cardigan ropa americana, carnicero voluptate nisi qui.

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

Pestañayuq puriyta mast’arikun

Kay plugin tablayuq puriy componenteta mast'arichin tablayuq áreas yapananpaq.

Uso

JavaScript kaqnintakama tablakuna ruwanakuna atichiy (sapa tablakuna sapalla llamk'achinan tiyan):

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

Sapa tablakunata achka ruwaykunapi llamk'achiyta atikunki:

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

Markup

Huk tabla utaq pastilla puriyta mana ima JavaScript qillqaspa llamk'achiyta atikunki huk elemento kaqpi willaylla data-toggle="tab"utaq data-toggle="pill"huk elemento kaqpi. navchaymanta chaymanta nav-tabsclasekuna tablaman yapayqa ulBootstrap tabla estilotanav ruwanqa , chaymanta chaymanta clasekuna yapayqa pastilla estilotanav-pills churanqa .

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

Efecto de desvanecer

Pestañakuna chinkananpaqqa, .fadesapakamaman yapay .tab-pane. Ñawpaq kaq tabla panelpas .inqallariy contenido rikukuq kananpaq kanan tiyan.

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

Métodos

$().tab

Huk elemento de pestaña chaymanta contenido waqaychanata llamk'achin. Tab huk data-targetutaq huk hreftargeting huk contenedor nodo DOM kaqpi kanan tiyan. Hawa rikch'anakunapiqa, tablakuna atributoyuq <a>s nisqakunam.data-toggle="tab"

.tab('show')

Qusqa tablata akllan chaymanta chaywan tinkisqa contenidota rikuchin. Ima wak tabla ñawpaq akllasqa kaqtapas mana akllasqaman tukun chaymanta tinkisqa kaqnin pakasqa. Llamaqman kutimun manaraq tabla panel chiqamanta rikuchisqa kachkaptin (icha manaraq shown.bs.tabruway ruwakuchkaptin).

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

Eventos nisqakuna

Musuq tablata rikuchispa, sucesokuna kay ordenpi ninawan:

  1. hide.bs.tab(kunan llamk'aq tablapi)
  2. show.bs.tab(qhawanapaq kaq tablapi)
  3. hidden.bs.tab(ñawpaq ruwaq tablapi, kikin hide.bs.tabruwaypaq)
  4. shown.bs.tab(musuq-ruray chayraq rikuchisqa ñiqipi, kikin show.bs.tabruwaypaq)

Sichus mana mayqin tablapas ruwasqañachu karqan, chaymanta hide.bs.tabchaymanta hidden.bs.tabruwaykuna mana llamk'achisqachu kanqa.

Tipo de Evento Willay
rikuchiy.bs.tab Kay ruwayqa tabla rikuchiypi ninawan, ichaqa manaraq musuq tabla rikuchisqa kachkaptin. Utilizar event.targety event.relatedTargetpara target a la pestaña activa y la pestaña activo anterior (si está disponible) respectivamente.
rikuchisqa.bs.tab Kay ruwayqa tabla rikuchiypi ninawan huk tabla rikuchisqa kaptin. Utilizar event.targety event.relatedTargetpara target a la pestaña activa y la pestaña activo anterior (si está disponible) respectivamente.
pakay.bs.tab Kay suceso ninawan mayk'aq huk musuq tabla rikuchisqa kanan tiyan (hinallataq chayhina ñawpaq ruwaq tabla pakasqa kanan tiyan). Utilizar event.targetchaymanta event.relatedTargetkunan ruwasqa tablata chaymanta musuq chaylla llamk'achiq tablata, sapakama.
pakasqa.bs.tab Kay ruwayqa musuq tabla rikuchisqa kaptin (hinallataq chayhina ñawpaq ruwaq tabla pakasqa kachkan). Utilizar event.targetchaymanta event.relatedTargetñawpaq ruwasqa tablata chaymanta musuq ruwaq tablata targetta ruwanapaq, chaymanta.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

YanapakuykunaYanapakuykuna

Jason Framepa qillqasqan allin jQuery.tipsy pluginmanta yuyaychasqa; Llamkanakuna huk musuqchasqa laya kanku, mayqinkunachus mana siq'ikunapi hapipakunkuchu, CSS3 llamk'achinku kawsachiykunapaq, chaymanta willay-atributokuna llaqta titulu waqaychaypaq.

Cero sayayniyuq tituluyuq llamkanakunap yuyaychayninkunaqa manam hayk'appas rikuchisqachu.

Ejemplos

Uraypi t'inkikuna patapi makiwan ñit'iy yanapakuykunata qhawanaykipaq:

Pantalón apretado siguiente nivel keffiyeh probablemente no has escuchado de ellos. Foto cabina barba crudo denim tipografía vegano mensajero bolsa stumptown. Haciendamanta mesakama seitan, mcsweeneypa fixie sostenible quinoa 8-bit americano pachayuqmi huk terry richardson vinilo chambray. Barba tocón, cardigans banh mi lomo trueno misikuna. Tofu biodiésel williamsburg marfa, tawa loko mcsweeney's pichay vegano chambray. Huk chiqap irónico artesano imapas keytar , scenester chakra-manta-mesa banksy Austin twitter manejo freegan cred crudo denim huk-origen café viral.

Consejo de herramientas estáticas

Tawa akllanakuna kan: pata, paña, uray, lluq'i chiqanchasqa.

Tawa ñankuna

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

Opt-in nisqa ruway

Ruway razonkunarayku, Tooltip chaymanta Popover data-apis opt-in kanku, niyta munan qam kikiyki qallarichinayki tiyan .

Huk ñan huk p'anqapi llapa yanapakuykunata qallariypaq kanman, data-toggleatributonkuman hina akllay:

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

Uso

Yanapakuypa yanapakuynin plugin ruwanakuna chaymanta markakuna mañakuypi ruwan, chaymanta ñawpaqmanta yanapakuypa yanapakuyninkunata elemento gatillo kaqninkumanta qhipaman churan.

JavaScript nisqawan yanapakuypa yuyaychayninta llamk'achiy:

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

Markup

Huk yanapakuypa yanapakuypaq munasqa markaqa huk layallam datachaymanta titleHTML elementopi huk yanapakuypa yanapakuyniyuq kayta munanki. Huk yanapakuypa paqarichisqan markasqa aswan sasan, ichaqa huk posiciónta munan (ñawpaqmanta, topplugin kaqwan churasqa).

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

Achka chiruyuq t’inkikuna

Wakin kuti huk yanapakuypa yuyaychayninta yapayta munanki huk hipervínculo kaqman achka chirukunata p'istuykuq. Llamkanakunap yanapakuyninpa ñawpaqmanta ruwayninqa, sayaqpi, sayaqpipas chawpichaymi. Anclaykikunaman yapay white-space: nowrap;mana chayta ruwanaykipaq.

Botón huñukunapi, yaykuna huñukunapi chaymanta tablakunapi yanapakuypa yuyaychaykunan huk especial churayta munanku

.btn-groupHuk utaq huk ukhupi elementokunapi yanapakuykunata llamk'achkaspa .input-group, utaq tablawan tupaq elementokunapi ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), akllanata willanayki tiyan container: 'body'(urapi qillqasqa) mana munasqa efectos secundarios kaqmanta (kayhina elemento aswan hatun wiñasqanmanta chaymanta/ otaq herramientakunaq puntan llank’achisqa kaqtin muyu k’uchukunata chinkachispa).

Ama pakasqa elementokunapi yanapakuykunata rikuchiyta kallpachakuychu

Mayk'aqchus $(...).tooltip('show')elemento meta kachkan display: none;chayta waqyayqa llamkanakunap yuyaychayninta pantasqa churasqa kananpaq ruwanqa.

Teclado kaqmanta chaymanta yanapakuy tecnologia kaqmanta llamk'aqkunapaq yaykuy atiy yanapakuykuna

Huk teclado kaqwan puriq ruwaqkunapaq, chaymanta aswanta yanapakuq tecnologiakuna ruwaqkunapaq, yanapakuypa yanapakuyninkunalla teclado-enfocable elementokunaman yapanayki tiyan kayhina t'inkikuna, formulario kamachiykuna utaq mayqin munasqa elemento huk tabindex="0"atributo kaqwan.

Mana llamk'achisqa elementokunapi llamkanakuna yuyaychaykuna p'istu elementokunata munan

disabledHuk icha elementoman huk yanapakuypa yanapakuyninta yapanaykipaqqa, hukpa .disabledukunpi elementota churay <div>hinaspa <div>chaypa rantinpi chayman yanapakuypa yuyaychayninta churay.

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-animation="".

Suti Niraq Ñawpaqchasqa Willay
animación boolean nisqa chiqaq Huk CSS chinkachiy tikrayta yanapakuypa yanapakuyninman churay
contenedor q'aytu | pantasqa pantasqa

Huk elemento específico nisqaman yanapakuypa yuyaychayninta yapan. Ejemplo: container: 'body'. Kay akllana aswan allin kan kaypi llamkanakunap willayninta qillqap puriyninpi churayta atikunki llamk'achiq elemento qayllapi - mayqinchus hark'anqa yanapakuypa yuyaychayninta llamk'achiq elementomanta karuman phawaykachayta huk ventana sayayninta tikraypi.

unayay yupay | ima 0.

Tardanza rikuchiy chaymanta pakay yanapakuypa yuyaychayninta (ms) - mana makiwan gatillo layapaqchu ruwakun

Sichus huk yupay qusqa, tardiy iskaynin pakay/rikuchiypi churasqa

Imakunap rurasqanqa kaymi:delay: { "show": 500, "hide": 100 }

html nisqapi boolean nisqa pantasqa HTML nisqa yanapakuypa yanapakuyninman churay. Sichus llulla, jQuery kaqpa textruwaynin llamk'achisqa kanqa DOM kaqman willayta churanapaq. Qillqata llamk'achiy sichus XSS ataquekunamanta llakisqa kanki.
churay q'aytu | ruway 'hanaq'

Imaynatataq yanapakuypa yuyaychayninta churana - pata | urayninpi | lluq'i | derecho | auto.
"Auto" nisqa kaptinqa, llamkanakunap yuyaychaynintam musuqmanta pusanqa. Ejemplopaq, sichus churay "auto lloq'e" kan chayqa, yanapakuypa yuyaychasqanqa lluq'iman rikuchikunqa atikuqtin, mana hina kaqtinqa pañaman rikuchinqa.

Huk llamkana churayta riqsinapaq llamk'achisqa kaqtinqa, llamkanakunap umalliqnin DOM nodowan ñawpaq argumenton hina chaymanta elemento desencadenante DOM nodo iskay kaq hina waqyasqa. Contexto thisnisqaqa yanapakuypa instancianmanmi churasqa kachkan.

akllaq qaytu pantasqa Sichus huk akllana qusqa, yanapakuypa yanapakuynin imakuna kamachisqa metakunaman qusqa kanqa. Ruwaypi, kayqa llamk'achisqa HTML llamk'achiq contenidota yanapakuypa yanapakuyninkuna yapasqa kananpaq atichinanpaq. Kayta hinaspa huk willakuypaq ejemplota qaway .
plantilla qaytu '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML nisqapi llamk'achinapaq llamkanakunap yuyaychayninta ruwachkaspa llamk'achiy.

Chay herramienta punta's titlenisqa inyectasqa kanqa chay.tooltip-inner .

.tooltip-arrowchay herramientakunaq flechanmanmi tukupunqa.

Aswan hawa p'istu elementoqa .tooltipclaseyuqmi kanan.

suti q'aytu | ruway '' .

Ñawpaqmanta churasqa titulu chani sichus titlelaya mana kanchu.

Sichus huk llamk'ana qusqa, waqyasqa kanqa thisreferencia churasqanwan chay elementoman mayqinmanchus llamkanakuna k'askasqa kachkan.

piñachiy qaytu 'hover enfoque' nisqa. Imayna yanapakuypa yuyaychaynin qallarikun - | ñit'iy hover | enfoque | makiwan. Achka gatillokunatam pasawaq; chaykunata huk ch’usaqwan t’aqay. manualmana huk gatillowan kuskanchasqachu kanman.
qhawana wasi q'aytu | objeto | ruway { akllaq: 'cuerpo', acolchado: 0 }

Kay elementopa linderonkuna ukhupi yanapakuypa yuyaychayninta waqaychan. Ejemplo: viewport: '#viewport'o{ "selector": "#viewport", "padding": 0 }

Huk llamk'ana qusqa kaptinqa, llamk'achiq elemento DOM nodowan sapallan argumenton hina waqyasqa. Contexto thisnisqaqa yanapakuypa instancianmanmi churasqa kachkan.

Sapanchasqa yanapakuykunapaq willakuypa layakuna

Sapanchasqa yanapakuypa yanapakuyninkunapaq akllanakuna hukmanta willaypa layakuna llamk'achiyninwan willayta atikunku, ñawpaqpi sut'inchasqa hina.

Métodos

$().tooltip(options)

Huk elemento huñusqaman huk yanapakuypa yanapaqninta k'askachin.

.tooltip('show')

Huk elementopa yanapakuypa yuyaychaynintam qawachin. Llamaqman kutimun manaraq yanapakuypa yanapakuy chiqap rikuchisqa kachkaptin (icha manaraq shown.bs.tooltipruway ruwakuchkaptin). Kayqa huk "makiwan" llamkanakunap llamk'achiynin hina qhawasqa. Cero sayayniyuq tituluyuq llamkanakunap yuyaychayninkunaqa manam hayk'appas rikuchisqachu.

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

.tooltip('hide')

Huk elementopa yanapakuypa yuyaychayninta pakan. Llamaqman kutimun manaraq yanapakuypa yanapakuy chiqap pakasqa kachkaptin (icha manaraq hidden.bs.tooltipruway ruwakuchkaptin). Kayqa huk "makiwan" llamkanakunap llamk'achiynin hina qhawasqa.

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

.tooltip('toggle')

Huk elementopa yanapakuypa yuyaychaynintam tikran. Llamaqman kutimun manaraq yanapakuypa yuyaychaynin chiqamanta rikuchisqa utaq pakasqa kachkaptin (icha manaraq shown.bs.tooltiputaq hidden.bs.tooltipruway ruwakuchkaptin). Kayqa huk "makiwan" llamkanakunap llamk'achiynin hina qhawasqa.

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

.tooltip('destroy')

Huk elementopa yanapakuypa yuyaychayninta pakaspa chinkachin. Delegacionta llamk'achiq yanapakuykuna ( kay selectorakllanawan ruwasqa ) mana sapalla chinkachiyta atikunmanchu miray llamk'achiq elementokunapi.

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

Eventos nisqakuna

Tipo de Evento Willay
rikuchiy.bs.herramientakuna Kay ruwayqa chaylla rawrarin mayk'aq showinstancia método waqyasqa.
rikuchisqa.bs.herramientakuna Kay ruwayqa llamkanakuna llamk'achiqman rikukuq ruwasqa kaptin llamk'achisqa (CSS tikraykunata tukunanta suyanqa).
pakay.bs.herramientakuna Kay ruwayqa chaylla llamk'achisqa kachkan mayk'aq hideinstancia método waqyasqa kachkan.
pakasqa.bs.herramientakuna Kay ruwayqa llamkanakuna llamk'achiqmanta pakasqa kayta tukuptin (CSS tikraykunata tukunanta suyanqa).
churasqa.bs.herramientakuna Kay ruwayqa ruwaymanta qhipaman llamk'achisqa kachkan show.bs.tooltipmayk'aq plantilla yanapakuypa willaynin DOM kaqman yapasqa.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers nisqa popover.js nisqa

Yanapakuy uchuy llanthukuna contenidomanta, iPad kaqpi hina, mayqin elementomanpas iskay kaq willayta wasichaypaq.

Popovers mayqinkunachus iskaynin titulonku chaymanta contenidonku cero-largo kanku mana hayk'aqpas rikuchisqachu.

Plugin nisqamanta dependencia

Popovers llamkanakuna yanapakuy plugin Bootstrap kaqpa layaykipi churasqa kananta munanku.

Opt-in nisqa ruway

Ruway razonkunarayku, Tooltip chaymanta Popover data-apis opt-in kanku, niyta munan qam kikiyki qallarichinayki tiyan .

Huk ñan huk p'anqapi llapa popovers qallariypaq kanman akllay data-toggleatributonkuman hina:

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

Popovers botón qutukunapi, yaykuna qutukunapi, tablakunapi ima, especial churayta munanku

.btn-groupHuk utaq huk ukhupi elementokunapi popovers llamk'achkaspa .input-group, utaq tablawan tupaq elementokunapi ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), akllanata container: 'body'(urapi qillqasqa) mana munasqa efectos secundarios kaqmanta (kayhina elemento aswan ancho wiñasqanmanta chaymanta/ utaq popover nisqa qallariptin muyu k’uchukunata chinkachispa).

Ama pakasqa elementokunapi popoverkunata rikuchiyta kallpachakuychu

Invocacionqa $(...).popover('show')mayk'aqchus elemento meta kachkan display: none;chay popover mana allin churasqa kananpaq ruwanqa.

Mana atiq elementokunapi popovers nisqakunaqa p'istu elementokunatam munan

Huk disabledicha .disabledelementoman popover nisqa yapanaykipaqqa, a nisqap ukhunpi elementota churay <div>hinaspa chaypa rantinpi chayman popover nisqa <div>churay.

Achka chiruyuq t’inkikuna

Wakin kuti huk popover yapayta munanki huk hipervínculo kaqman mayqinchus achka chirukunata p'istun. Popover pluginpa ñawpaqmanta ruwayninqa, sayaqpi, sayaqpipas chawpichaymi. Anclaykikunaman yapay white-space: nowrap;mana chayta ruwanaykipaq.

Ejemplos

Popover estático

Tawa akllanakuna kan: pata, paña, uray, lluq'i chiqanchasqa.

Popover pata

Sed posuere consectetur est en lobortis nisqa. Enean eu leo ​​quam. Pellentesco ornare sem lacinia quam venenatis vestibulo nisqa.

Popover derecho

Sed posuere consectetur est en lobortis nisqa. Enean eu leo ​​quam. Pellentesco ornare sem lacinia quam venenatis vestibulo nisqa.

Popover urapi

Sed posuere consectetur est en lobortis nisqa. Enean eu leo ​​quam. Pellentesco ornare sem lacinia quam venenatis vestibulo nisqa.

Popoverqa ripurqan

Sed posuere consectetur est en lobortis nisqa. Enean eu leo ​​quam. Pellentesco ornare sem lacinia quam venenatis vestibulo nisqa.

Demostración en vivo

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

Tawa ñankuna

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

Qatiqnin ñit’iypiqa qarquy

Gatillota llamk'achiy focuspopovers kaqmanta qarqunapaq qatiq ñit'iypi mayqinchus ruwaq ruwan.

Específica marcado necesario para dismiss-en-siguiente-click

Allin chakana maskaq chaymanta chakana plataforma ruwaypaq, <a>etiquetata llamk'achinayki tiyan, mana etiquetatachu , chaymanta chaymanta chaymanta atributokuna <button>churanayki tiyan .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>

Uso

JavaScript nisqawan popovers nisqakunata atichiy:

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

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-animation="".

Suti Niraq Ñawpaqchasqa Willay
animación boolean nisqa chiqaq Huk CSS ch'usaqyachiy tikrayta popover kaqman churay
contenedor q'aytu | pantasqa pantasqa

Popover nisqataqa huk elemento específico nisqamanmi yapan. Ejemplo: container: 'body'. Kay akllana aswan allin kan kaypi chaymanta popoverta qillqap puriyninpi elemento desencadenante qayllapi churayta atikun - mayqinchus harkanqa popoverta elemento desencadenantemanta karuman wayt'ayta huk ventana hatun kayninta tikray pachapi.

winay q'aytu | ruway '' .

Ñawpaqmanta churasqa imayna kanankuna sichus data-contentlaya mana kanchu.

Sichus huk ruwana qusqa, chayta waqyasqa kanqa thisreferencia churasqawan chay elementoman mayqinmanchus popover k'askasqa kachkan.

unayay yupay | ima 0.

Popover (ms) rikuchiy chaymanta pakay tardakuy - mana makiwan gatillo layapaqchu ruwakun

Sichus huk yupay qusqa, tardiy iskaynin pakay/rikuchiypi churasqa

Imakunap rurasqanqa kaymi:delay: { "show": 500, "hide": 100 }

html nisqapi boolean nisqa pantasqa Popover nisqaman HTML nisqa churay. Sichus llulla, jQuery kaqpa textruwaynin llamk'achisqa kanqa DOM kaqman willayta churanapaq. Qillqata llamk'achiy sichus XSS ataquekunamanta llakisqa kanki.
churay q'aytu | ruway 'paña'

Imaynatataq popover - pataman churana | urayninpi | lluq'i | derecho | auto.
"Auto" nisqa kaptinqa, popover nisqatam dinamicamente musuqmanta pusanqa. Ejemplopaq, sichus churay "auto lloq'e" kan chayqa, popover atikuqtin pañaman rikuchinqa, mana hina kaqtinqa pañaman rikuchinqa.

Huk ruwana churayta tarinapaq llamk'achisqa kaqtinqa, popover DOM nodowan ñawpaq argumenton hina chaymanta elemento trigger DOM nodo iskay kaq hina waqyasqa. Contextoqa thispopover instanciamanmi churasqa kachkan.

akllaq qaytu pantasqa Sichus huk akllana qusqa, popover objetokuna nisqa metakunaman delegasqa kanqa. Ruwaypi, kayqa llamk'achisqa HTML llamk'achiq contenido popovers yapasqa kananpaq atichinanpaq. Kayta hinaspa huk willakuypaq ejemplota qaway .
plantilla qaytu '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Base HTML llamk'achinapaq popover ruwachkaspa.

Chay popover's titlenisqataqa inyectasqa kanqa chay .popover-title.

Chay popover's contentnisqataqa inyectasqa kanqa chay .popover-content.

.arrowpopoverpa flechanman tukunqa.

Aswan hawa p'istu elementoqa .popoverclaseyuqmi kanan.

suti q'aytu | ruway '' .

Ñawpaqmanta churasqa titulu chani sichus titlelaya mana kanchu.

Sichus huk ruwana qusqa, chayta waqyasqa kanqa thisreferencia churasqawan chay elementoman mayqinmanchus popover k'askasqa kachkan.

piñachiy qaytu 'click' nisqa. Imayna popover qallarikun - ñit'iy | hover | enfoque | makiwan. Achka gatillokunatam pasawaq; chaykunata huk ch’usaqwan t’aqay. manualmana huk gatillowan kuskanchasqachu kanman.
qhawana wasi q'aytu | objeto | ruway { akllaq: 'cuerpo', acolchado: 0 }

Kay elementopa linderonkunapim popover nisqataqa waqaychan. Ejemplo: viewport: '#viewport'o{ "selector": "#viewport", "padding": 0 }

Huk llamk'ana qusqa kaptinqa, llamk'achiq elemento DOM nodowan sapallan argumenton hina waqyasqa. Contextoqa thispopover instanciamanmi churasqa kachkan.

Sapa popovers nisqapaq atributos de datos nisqa

Sapa popovers kaqpaq akllanakuna hukniraymanta willayta atributokuna llamk'achiyninwan riqsichikunman, ñawpaqpi sut'inchasqa hina.

Métodos

$().popover(options)

Huk elemento huñunapaq popovers nisqakunata qallarichin.

.popover('show')

Huk elementopa popover nisqa kaynintam qawarichin. Llamaqman kutimun manaraq popover chiqamanta rikuchisqa kachkaptin (icha manaraq shown.bs.popoverruway ruwakuchkaptin). Kayqa huk "manual" desencadenante hina qhawasqa kay popover kaqmanta. Popovers mayqinkunachus iskaynin titulonku chaymanta contenidonku cero-largo kanku mana hayk'aqpas rikuchisqachu.

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

.popover('hide')

Huk elementopa popover nisqa kayninta pakan. Llamaqman kutimun manaraq popover chiqamanta pakasqa kachkaptin (icha manaraq hidden.bs.popoverruway ruwakuchkaptin). Kayqa huk "manual" desencadenante hina qhawasqa kay popover kaqmanta.

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

.popover('toggle')

Huk elementopa popover nisqatam tikran. Llamaqman kutimun manaraq popover chiqamanta rikuchisqa utaq pakasqa kachkaptin (icha manaraq shown.bs.popoverutaq hidden.bs.popoverruway ruwakuchkaptin). Kayqa huk "manual" desencadenante hina qhawasqa kay popover kaqmanta.

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

.popover('destroy')

Huk elementopa popover nisqa kayninta pakaspa chinkachin. Popovers delegación llamk'achiqkuna (mayqinkuna akllana llamk'achispa kamasqaselector ) mana sapalla chinkachiyta atikunmanchu miray gatillo elementokunapi.

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

Eventos nisqakuna

Tipo de Evento Willay
rikuchiy.bs.popover Kay ruwayqa chaylla rawrarin mayk'aq showinstancia método waqyasqa.
rikuchisqa.bs.popover Kay ruwayqa llamk'achisqa kachkan mayk'aq popover ruwaqman rikukuq ruwasqa (suyanqa CSS tikraykuna tukukunanta).
pakay.bs.popover Kay ruwayqa chaylla llamk'achisqa kachkan mayk'aq hideinstancia método waqyasqa kachkan.
pakasqa.bs.wakcha Kay ruwayqa llamk'achisqa kachkan mayk'aq popover llamk'achiqmanta pakasqa kayta tukusqa (suyanqa CSS tikraykuna tukukunanta).
churasqa.bs.wakcha Kay ruwayqa ruwaymanta qhipaman qarqusqa kachkan show.bs.popovermayk'aq popover plantilla DOM kaqman yapasqa kachkan.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Willakuy willakuykunata alert.js

Ejemplo de alertas

Kay plugin kaqwan llapa willay willaykunaman qarquy ruwayta yapay.

Huk .closeñit'inata llamk'achkaspa, ñawpaq wawa kanan tiyan .alert-dismissiblechaymanta mana qillqa contenido ñawpaqninpi hamunmanchu chay marcapi.

Uso

Yanapakuylla data-dismiss="alert"botón wichq'ayniykiman kikillanmanta huk alerta wichq'ay ruwayta qunaykipaq. Huk willayta wichqaspaqa DOM nisqamanta hurqun.

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

Alertakunayki animacionta llamk'achinankupaq wichq'achkaspa, allinta qhaway chaymanta .fadechaymanta .inclasekuna paykunaman churasqaña kasqankuta.

Métodos

$().alert()

Huk willayta uyariyta ruwan ñit'iy ruwaykunamanta miray elementokunapi mayqinkunachus data-dismiss="alert"atributoyuq kanku. (Mana necesariochu data-api kaqpa auto-inicializacionninta llamk'achkaspa).

$().alert('close')

Huk willayta DOM kaqmanta hurquspa wichq'an. Sichus .fadechaymanta .inclasekuna elementopi kachkan, alerta manaraq hurqusqa kachkaptin chinkapunqa.

Eventos nisqakuna

Bootstrap kaqpa willay plugin huk pisi ruwaykunata riqsichin willay ruwanaman enganche kaqpaq.

Tipo de Evento Willay
wichqay.bs.alerta Kay ruwayqa chaylla rawrarin mayk'aq closeinstancia método waqyasqa.
wichqasqa.bs.alerta Kay ruwayqa llamk'achisqa kachkan mayk'aq willay wichq'asqa kachkan (suyanqa CSS tikraykuna tukukunanta).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Botones nisqa botón.js

Astawan ruway botoneswan. Control ñit'ina willan utaq huñukuna botones ruwan aswan componentes kaqpaq imayna llamkanakuna barrakuna.

Chawpi maskaqpa tupachiynin

Firefox formulario kamachiy estadokuna (mana atichisqa chaymanta qhaway) tukuy p'anqa kargakuna kaqpi takyachin . Kaypaq huk allichayqa llamk'achiymi autocomplete="off". Mozilla pantay #654072 nisqapi qhaway .

Estadoyuq

data-loading-text="Loading..."Huk ñit'inapi huk karga estadota llamk'achinapaq yapay .

Kay ruwana v3.3.5 kaqmanta manaña llamk'achisqachu chaymanta v4 kaqpi hurqusqa.

¡Utiliza cualquier estado que te guste!

Kay rikuchiypaq, chaymanta llamk'achkayku data-loading-text, $().button('loading')ichaqa mana chayllachu estado llamk'achiyta atikunki. Kaymanta astawan qhaway uraypi $().button(string)qillqapi .

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

Huklla toggle

data-toggle="button"Huklla ñit'inapi tikrayta llamk'achinapaq yapay .

Pre-toggled botones necesitan .activeyaria-pressed="true"

Ñawpaqmanta tikrasqa botones kaqpaq, .activeclase chaymanta aria-pressed="true"atributo qampaq yapanayki buttontiyan.

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

Caja de verificación / Radio nisqa

Yanapakuy data-toggle="buttons"huk .btn-groupqutu qhawaypi utaq radio yaykuykunaman yapay sapan estilonkupi tikrayta atichinanpaq.

Ñawpaqmanta akllasqa akllanakuna necesitanku.active

Ñawpaq akllasqa akllanakunapaq, .activeclaseta yapanayki tiyan yaykuypaq labelqam kikiyki.

Rikuna qhawasqa estado ñit'iyllapi musuqchasqa

Sichus huk qhaway caja ñit'inap qhawasqa estadon musuqchasqa mana huk clickruwayta ñit'ispa botón kaqpi (kayhina, vía <input type="reset">utaq vía churaymanta checkedpropiedad yaykusqa), qam kikiyki .activeyaykuna kaqpi claseta tikrayta necesitanki.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>

Métodos

$().button('toggle')

Toggles estado de empuje. Chay botónmanmi qun chay rikchayta activasqa kasqanmanta.

$().button('reset')

Botón estadota kutichin - qillqata ñawpaq qillqaman tikran. Kay ñanqa asíncrono kaq chaymanta kutimun manaraq chiqamanta kutichiy tukusqa kachkaptin.

$().button(string)

Qillqata mayqin willayta riqsichisqa qillqa estadomanpas tikran.

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

Urmachiy collapse.js

Flexible plugin mayqinchus huk maki clasekuna llamk'achin mana sasa tikray ruwaypaq.

Plugin nisqamanta dependencia

Collapseqa transiciones plugin Bootstrap kaqpa layaykipi churasqa kananta munan.

Qatina

Uraypi kaq ñit'inakunata ñit'iy huk elementota rikuchinaykipaq chaymanta pakanaykipaq clase tikraykunawan:

  • .collapsecontenidota pakan
  • .collapsingtransiciones nisqapi churakun
  • .collapse.incontenido nisqatam qawachin

Huk t'inkita llamk'achiyta atinki hrefatributowan, icha huk ñit'inata data-targetatributowan. Iskayninpipas, chay data-toggle="collapse"nisqa kamachisqa kachkan.

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>

Ejemplo de acordeón

Panel componentewan huk acordeón ruwanapaq ñawpaqmanta churasqa urmachiy ruwayta mast'ariy.

Anim pariatur cliché reprehenderit, enim eiusmod alto vida acusamus terry richardson ad calamar. 3 lobo killa officia aute, mana cupidatat patineta dolor brunch. Mikhuy apaykachana quinoa nesciunt laborum eiusmod. Brunch 3 lobo killa tempor, sunt aliqua churan huk pisquta chayman calamar huk-origen café nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, artesanía cerveza llamk'ay wes anderson cred nesciunt sapiente ea proident. Anuncio vegano excepteur carnicero vice lomo. Polainas occaecat artesanía cerveza granja-a-mesa, crudo denim estético synth nesciunt ichapas mana uyarirqankichu paykunamanta accusamus labore sostenible VHS.
Anim pariatur cliché reprehenderit, enim eiusmod alto vida acusamus terry richardson ad calamar. 3 lobo killa officia aute, mana cupidatat patineta dolor brunch. Mikhuy apaykachana quinoa nesciunt laborum eiusmod. Brunch 3 lobo killa tempor, sunt aliqua churan huk pisquta chayman calamar huk-origen café nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, artesanía cerveza llamk'ay wes anderson cred nesciunt sapiente ea proident. Anuncio vegano excepteur carnicero vice lomo. Polainas occaecat artesanía cerveza granja-a-mesa, crudo denim estético synth nesciunt ichapas mana uyarirqankichu paykunamanta accusamus labore sostenible VHS.
Anim pariatur cliché reprehenderit, enim eiusmod alto vida acusamus terry richardson ad calamar. 3 lobo killa officia aute, mana cupidatat patineta dolor brunch. Mikhuy apaykachana quinoa nesciunt laborum eiusmod. Brunch 3 lobo killa tempor, sunt aliqua churan huk pisquta chayman calamar huk-origen café nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, artesanía cerveza llamk'ay wes anderson cred nesciunt sapiente ea proident. Anuncio vegano excepteur carnicero vice lomo. Polainas occaecat artesanía cerveza granja-a-mesa, crudo denim estético synth nesciunt ichapas mana uyarirqankichu paykunamanta accusamus labore sostenible 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>

También es posible intercambio de .panel-bodys con .list-groups.

  • Bootply nisqa
  • Huk itmus ac facilin
  • Iskay kaq eros

Mastariy/urmay kamachiykunata yaykuy atikuq ruway

aria-expandedAswan allinta qhaway elemento de control nisqaman yapayta . Kay atributo sut'ita riqsichin kunan estadota elemento collapsible pantalla ñawiriqkuna chaymanta rikch'aq yanapakuy tecnologiakuna. Sichus t'inkisqa elemento ñawpaqmanta wichq'asqa kachkan, chaniyuq kanan tiyan aria-expanded="false". Sichus t'inkisqa elementota ñawpaqmanta kichasqa kananpaq inchurarqanki claseta llamk'achispa, churayaria-expanded="true" kamachiypi churay chaymanta ranti. Pluginqa kikinmanta kay atributota tikranqa sichus wichq'anapaq elemento kichasqa utaq wichqasqa kasqanmanta.

Chaymanta, sichus kamachiy elementoyki huk sapalla llañu elementota qhawachkan – chaymanta data-targetatributo huk akllaqman rikuchichkan id– huk yapa aria-controlsatributota kamachiy elementoman yapayta atikunki, chaymanta chay idde collapsible elemento kaqmanta. Kunan pantalla ñawiriqkuna chaymanta rikch'aq yanapakuy tecnologiakuna kay atributota llamk'achinku ruwaqkunaman yapa llalliq ñankuna qunankupaq chiqalla purinankupaq kikin elemento collapsible kaqman.

Uso

Urmachiy plugin huk pisi clasekunata llamk'achin llasa hoqariyta llamk'achinapaq:

  • .collapsechaypi kaqta pakaykun
  • .collapse.inchaypi kaqta rikuchin
  • .collapsingtikray qallariptin yapasqa, tukuptintaq hurqusqa

Kay clasekunataqa tarinki component-animations.less.

Atributos de datos nisqawan

Yanapakuylla data-toggle="collapse"chaymanta huk data-targetelementoman kikinmanta asignar control de un elemento colapsible. Atributo data-targethuk CSS akllanata chaskikun chayman urmachiyta churanapaq. Aswan allinta yapay chay claseta collapsechay elemento collapsible nisqaman. Sichus ñawpaqmanta kichasqa kananta munanki, yapasqa claseta yapayin .

Acordeón hina huñu kamachiyta huk llalliq kamachiyman yapanaykipaq, willay laya yapay data-parent="#selector". Kayta ruwaypi qhawanaykipaq demo nisqapi qhaway.

JavaScript nisqawan

Makiwan atichiy kaykunawan:

$('.collapse').collapse()

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-parent="".

Suti niraq ñawpaqchasqa willay
tayta mama akllaq pantasqa Sichus huk akllana qusqa, chaymanta llapa t'inkisqa elementokuna nisqa tayta mamap urapi wichq'asqa kanqa mayk'aq kay t'uqyakuq elemento rikuchisqa. panel(ñawpamanta pacha acordeón ruwayman rikch'akuq - kayqa clasemanta dependen )
toggle nisqa boolean nisqa chiqaq Invocacionpi colapsible elementota tikran

Métodos

.collapse(options)

Contenidoykita huk elemento collapsible hina activan. Huk akllana akllanakunata chaskikun object.

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

.collapse('toggle')

Huk ñit'isqa elementota rikuchisqaman icha pakasqaman tikran. Llamaqman kutimun manaraq llalliq elemento chiqamanta rikuchisqa utaq pakasqa kachkaptin (icha manaraq shown.bs.collapseutaq hidden.bs.collapseruway ruwakuchkaptin).

.collapse('show')

Huk llalliq elementota rikuchin. Llamaqman kutimun manaraq t'inkisqa elemento chiqamanta rikuchisqa kachkaptin (icha manaraq shown.bs.collapseruway ruwakuchkaptin).

.collapse('hide')

Huk llalliq elementota pakan. Llamaqman kutimun manaraq t'inkisqa elemento chiqamanta pakasqa kachkaptin (icha manaraq hidden.bs.collapseruway ruwakuchkaptin).

Eventos nisqakuna

Bootstrap kaqpa urmachiy clase huk pisi ruwaykunata riqsichin urmachiy ruwanaman enganche kaqpaq.

Tipo de Evento Willay
rikuchiy.bs.collapse Kay ruwayqa chaylla rawrarin mayk'aq showinstancia método waqyasqa.
rikuchisqa.bs.collapse Kay ruwayqa llamk'achisqa huk urmachiy elemento ruwaqman rikukuq ruwasqa kaqtin (CSS tikraykunata tukunanta suyanqa).
pakay.bs.ch'usaqyachiy Kay ruwayqa chaylla llamk'achisqa kachkan mayk'aqchus hidemétodo waqyasqa kachkan.
pakasqa.bs.collapse nisqa Kay ruwayqa llamk'achiqmanta huk urmachiy elemento pakasqa kaptin llamk'achisqa (CSS tikraykunata tukunanta suyanqa).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carrusel carrusel.js

Elementokuna chawpipi bicicletapi purinapaq diapositivakuna rikuchiy componente, carrusel hina. Carrusel anidado nisqakunaqa manam yanapasqachu.

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

Capciones opcionales

Diapositivaykikunaman qillqakunata yapay mana sasachakuspa .carousel-captionmayqin ukhupi kaq elementowan .item. Chay ukhupi yaqa mayqin HTML akllana kaqtapas churay chaymanta kikillanmanta chiqanchasqa chaymanta formatochasqa kanqa.

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

Achka carruselkuna

Carruselkunaqa huk idhawa kaq waqaychanapi (chay .carousel) llamk'achiyta munan, carrusel kamachiykuna allinta llamk'ananpaq. Achka carruselkunata yapaspa, utaq huk carruselpa kaqta tikrachkaspa id, ama hina kaspa tupaq kamachiykunata musuqyachiy.

Atributos de datos nisqawan

Atributos de datos nisqawan yanapachikuy carruselpa maypi kayninta mana sasachakuspalla kamachinaykipaq. data-slidellalliq simikunata chaskikun prevutaq next, chaymi diapositivapa kayninta kunan kasqanman hina tikran. Hukninpiqa, data-slide-tohuk raw diapositiva indiceta carruselman pasananpaq llamk'achiy data-slide-to="2", chaymi diapositivapa kayninta huk indice particularman tikran ,wan qallarispa 0.

Atributo data-ride="carousel"nisqaqa huk carrusel nisqa p'anqa kargamanta qallarispa kawsachiq hina markanapaqmi llamk'achisqa. Mana llamk'achiy atikunmanchu (redundante chaymanta mana necesario) sut'i JavaScript qallariywan kikin carrusel kaqwan kuskachasqa.

JavaScript nisqawan

Llama a carrusel manualmente con:

$('.carousel').carousel()

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-interval="".

Suti niraq ñawpaqchasqa willay
intervalo nisqa yupay 5000 nisqa Huk imapas kikillanmanta bicicletapi purichiymanta hayk'a pacha tardanapaq. Llulla kaptinqa, carruselqa manam kikillanmantachu ciclopi purinqa.
suyay q'aytu | chusaq "hover" nisqa. Sichus churasqa kachkan "hover", carruselpa bicicletapi puriyninta sayachin mouseenterhinaspa carruselpa bicicletapi puriyninta yapamanta qallarichin mouseleave. , nisqapi churasqa kaptinqa null, carruselpa hawanpi kuyurispaqa manam samachinqachu.
matiy boolean nisqa chiqaq Carrusel sapa kutilla bicicletapi purinan icha sinchi sayayniyuq kanan icha manachu.
teclado nisqa boolean nisqa chiqaq Sichus carrusel tecladopi sucedesqanwan reaccionananchu icha manachu.

Carruselta huk opcional akllanakunawan objectqallarichin chaymanta bicicletapi puriyta qallarikun imakuna kaqnintakama.

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

Carrusel nisqa imakunatapas lluq’imanta pañaman muyurin.

Carruselta imakuna chawpinta bicicletapi purinanta harkan.

Carruselta huk marco particularman muyuchin (0 kaqpi, huk matrizman rikch'akuq).

Ñawpaq kaq kaqman muyurin.

Qatiqnin kaqman muyurin.

Bootstrap kaqpa carrusel clase iskay ruwaykunata rikuchin carrusel ruwanaman enganche kaqpaq.

Iskaynin ruwaykuna kay yapasqa propiedadesniyuq kanku:

  • direction: Carrusel maymanchus llimp’isqan (yaqapas "left"utaq "right").
  • relatedTarget: DOM elemento mayqinchus llamk'aq elemento hina maychus kananman llimp'isqa kachkan.

Llapan carrusel ruwaykuna kikin carruselpi (ichataq chay <div class="carousel">).

Tipo de Evento Willay
diapositiva.bs.carrusel nisqa Kay ruwayqa chaylla rawrarin mayk'aq slideinstancia método waqyasqa.
llimp’isqa.bs.carrusel Kay sucesoqa carrusel diapositiva transicionninta tukuruptinmi rawrachisqa.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix.js nisqawan churana

Qatina

Affix plugin llamk'achiyta position: fixed;chaymanta wañuchiyta tikran, kaqwan tarisqa efectota qatipaspa position: sticky;. Paña kaqpi subnavigacionqa huk kawsaq demo affix plugin kaqmanta.


Uso

Affix plugin llamk'achiy willay layakuna kaqninta utaq makiwan kikin JavaScript kaqwan. Iskaynin situacionkunapi, CSS qunayki tiyan churanapaq chaymanta anchopaq k'askasqa contenidoykimanta.

Qhaway: Ama huk elementopi huk elementopi, huk aysasqa utaq tanqasqa columnapi, huk Safari ruway pantasqarayku , affix plugin llamk'achiychu .

CSS nisqawan churay

Affix plugin kimsa clasekunapura tikran, sapa huk estadota riqsichin: .affix, .affix-top, chaymanta .affix-bottom. Estilokunata qunayki tiyan, position: fixed;on kaqmanta .affixmana, kay clasekuna qam kikiykipaq (kay pluginmanta mana sapanchasqa) chiqa tiyaykuna llamk'achinapaq.

Kaypi imayna affix plugin llamk'an:

  1. Qallarinapaq, plugin yapan .affix-topelemento aswan pata-aswan kayninpi kasqanmanta rikuchinanpaq. Kaypiqa mana CSS churayqa necesitakunchu.
  2. K'askachiy munasqayki elementomanta ñawpaqman puriyqa chiqap k'askachiyta qallarinan tiyan. Kaypi maypi .affixtikran .affix-topchaymanta churan position: fixed;(Bootstrap kaqpa CSS kaqwan qusqa).
  3. .affixSichus huk uray offset nisqa sut'inchasqa kachkan, chaymanta pasaspa kuyuchiyqa .affix-bottom. Offsetkuna munasqa kasqanrayku, hukta churayqa CSS tupaq churanayki tiyan. position: absolute;Chayna kaptinqa, necesario kaptin yapay . Pluginqa willay laya utaq JavaScript akllanata llamk'achin maypi chaymanta elementota churanapaq.

Hawa ruwanakunata qatiy CSSniyki churanaykipaq mayqinpas uraypi llamkana akllanakunapaq.

Atributos de datos nisqawan

Ima elementomanpas affix ruwayta mana sasachakuspa yapanaykipaq data-spy="affix", chay elementoman yapaylla espia munasqaykiman. Huk elementopa pinchayninta hayk'aq tikranapaqmi offset nisqakunata llamk'achiy.

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

JavaScript nisqawan

JavaScript nisqawan affix plugin nisqaman waqyay:

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

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-offset-top="200".

Suti niraq ñawpaqchasqa willay
offset nisqa yupay | ruway | ima 10. 10 Pixels pantallamanta desplazanapaq mayk'aq yupaypi posición de desplazamiento. Huk yupaylla qusqa kaptinqa, offset nisqatam churakunqa hawanpi urayninpipas. Huk sapalla, uraymanta chaymanta patamanta offset qunapaq huk objeto offset: { top: 10 }utaq offset: { top: 10, bottom: 5 }. Huk ruwayta llamk'achiy mayk'aq huk offset dinamicamente yupayta necesitanki.
chayana akllaq | nodo | jQuery nisqa elemento chay windowimayay Afijo nisqap elemento meta nisqatam willan.

Métodos

.affix(options)

Contenidoykita contenido pegado hina activan. Huk akllana akllanakunata chaskikun object.

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

.affix('checkPosition')

Affixpa kayninta musuqmanta yupan, chayman hina elementokuna dimensiones, posición, desplazamiento posición nisqapi. Chay .affix, .affix-top, chaymanta .affix-bottomclasekuna musuq estadomanhina k'askasqa contenidoman yapasqa utaq hurqusqa. Kay métodota waqyana tiyan mayk'aqllapas dimensiones kay contenido fijado kaqmanta utaq kay elemento meta kaqmanta tikrasqa kaqtin, chaymanta allinta posicionamiento kaqmanta kay contenido fijado kaqmanta qhawanapaq.

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

Eventos nisqakuna

Bootstrap kaqpa affix plugin huk pisi ruwaykunata affix ruwanaman enganche kaqpaq riqsichin.

Tipo de Evento Willay
affix.bs.affix nisqa Kay ruwayqa manaraq elemento churasqa kachkaptin chaylla rawrarin.
k'askasqa.bs.affix Kay ruwayqa elemento k'askasqa kaptin rawrachisqa.
affix-top.bs.affix nisqa Kay sucesoqa chaylla rawrarin manaraq elemento affixed-top kachkaptin.
k'askasqa-pata.bs.affix Kay ruwayqa elemento k'askasqa-patapi kaptin llamk'achisqa.
affix-urapi.bs.affix Kay ruwayqa chaylla rawrarin manaraq elemento k'askasqa-urapi kachkaptin.
k'askasqa-ura.bs.affix Kay ruwayqa elemento k'askasqa-urapi kaptin rawrachisqa.