Tembiecharã

Peteĩteĩ térã oñembyatýva

Umi plugin ikatu oike peteĩteĩ (oipurúvo Bootstrap rembiapokue peteĩteĩva *.js), térã opaite peteĩ jeýpe (oipurúvo bootstrap.jstérã oñemboguejýva bootstrap.min.js).

Oipurúvo JavaScript oñembyatýva

Mokõivéva bootstrap.jsha bootstrap.min.jsoguereko opaite plugin peteĩ vore’ípe. Emoĩ peteĩnte.

Umi dependencia plugin rehegua

Oĩ plugin ha CSS componente odependéva ambue plugin rehe. Emoĩramo umi plugin peteĩteĩ, eñangareko ehecha hag̃ua ko’ã dependencia umi docs-pe. Avei eñatendéke opaite plugin odependeha jQuery rehe (kóva heꞌise jQuery oikevaꞌerãha umi plugin rembiapokue mboyve ). Ejesareko orebower.json rehe rehecha hag̃ua mba’e versión jQuery rehegua oipytyvõ.

Umi atributo de datos rehegua

Ikatu reipuru opaite Bootstrap mboajepyréva API marcado rupive añoite rehai’ỹre peteĩ línea JavaScript rehegua. Kóva ha’e Bootstrap API peteĩha mbo’esyry ha ha’eva’erã ne mba’ekuaarã peteĩha reipuru jave peteĩ plugin.

Upéva oje’évo, oĩ situación-pe ikatu ojeipota oñembogue ko funcionalidad. Upévare, rome’ẽ avei mba’ekuaarã embogue hag̃ua API atributo dato rehegua emboguejývo opaite mba’e ojehúva kuatia rérape oñembojoajúva ndive data-api. Péva ojehecha péicha:

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

Ikatu avei, oñembohape hag̃ua peteĩ plugin específico, emoinge mante pe plugin réra peteĩ téra rendaguépe data-api réra rendaguépe kóicha:

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

Peteĩ plugin añoite peteĩ elemento rehegua umi atributo dato rehegua rupive

Ani reipuru umi atributo dato rehegua heta plugin-gui peteĩ elemento-pe. Techapyrã, peteĩ botón ndaikatúi mokõive oguereko peteĩ tembipuru’i ñe’ẽmondo ha ombohasa peteĩ modal. Péva ojejapo hagua, ojepuruva era petet elemento de envoltura.

API programática rehegua

Avei roguerovia ikatuva’erãha reipuru opaite Bootstrap mboajepyréva JavaScript API rupive añoite. Opaite API público haꞌehína método peteĩva, oñekadenakuaáva, ha ombojevy pe colección ojejapóva hese.

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

Opaite método omoneĩva’erã peteĩ mba’e’oka opción opcional, peteĩ cadena ojepytasóva peteĩ método particular rehe, térã mba’eve (omoñepyrũva peteĩ plugin orekóva comportamiento por defecto):

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

Káda plugin ohechauka avei iconstructor raw peteĩ Constructorpropiedad rehe: $.fn.popover.Constructor. Ojehupytyséramo peteĩ instancia plugin particular, egueru directamente peteĩ elemento-gui: $('[rel="popover"]').data('popover').

Ñembohekorã ñepyrũrã

Ikatu emoambue ñemboheko tee peteĩ plugin-pe g̃uarã emoambuévo pe plugin Constructor.DEFAULTSmba’ekuaarã:

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

Ndaipóri conflicto

Sapy’ánte tekotevẽ ojepuru Bootstrap mboajepyréva ambue UI rembiapokue ndive. Ko’ã mba’épe, ikatu sapy’apy’a oiko umi choque espacio de nombre rehegua. Péva oikóramo, ikatu ehenói .noConflictpe plugin rembojevysévape pe valor.

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

Umi mba’e oikóva

Bootstrap ome’ẽ mba’e’oka jeporupyre hetavéva umi plugin rembiaporã ijojaha’ỹvape g̃uarã. Generalmente, koꞌãva oúva peteĩ forma infinitiva ha participio ohasavaꞌekuépe - oñemboguatahápe infinitivo (ex. show) oñepyrũvo peteĩ mbaꞌe ojehúva, ha iforma participio ohasavaꞌekue (ex. shown) oñembohapéva oñembotývo peteĩ tembiapo.

3.0.0 guive, opaite Bootstrap mbaꞌe ojehúva oñemboheko héra mbytépe.

Opaite mba’e ojehúva infinitivo ome’ẽ preventDefaultfuncionalidad. Kóva omeꞌe katupyry ojejoko hag̃ua peteĩ tembiapo jejapópe oñepyrũ mboyve.

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

Umi número de versión rehegua

Pe versión peteĩteĩva Bootstrap jQuery mboajepyréva rehegua ikatu ojeike VERSIONpe mboajepyréva apoha mbaꞌekuaarã rupive. Techapyrã, tembipuru’i ñembohekorãme g̃uarã:

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

Ndaipóri fallback especial oñembogue jave JavaScript

Bootstrap plugins ndo’ái tapykuépe particularmente gracioso JavaScript oñembogue jave. Ejepy’apýramo puruhára jeikove rehe ko kásope, eipuru <noscript>emyesakã hag̃ua mba’éichapa oĩ (ha mba’éichapa ikatu emboguata jey JavaScript) ne puruhárape, ha/térã emoĩve ne mba’e’oka jeporupyre.

Mbohapyha arandukakuéra rehegua

Bootstrap ndoipytyvõi oficialmente mbohapýha JavaScript aranduka’i Prototype térã jQuery UI-icha. Jepémo .noConflictha umi mba’e ojehúva téra espacio-pe, ikatu oĩ apañuãi compatibilidad rehegua tekotevẽva remyatyrõ ndejehegui.

Ñembohasahakuéra transition.js

Umi transición rehegua

Umi efecto transición simple-pe g̃uarã, emoinge transition.jspeteĩ jey ambue JS vore ykére. Oipurúramo oñembohekopyréva (térã oñemboguejýva) bootstrap.js, natekotevẽi remoinge kóva—oĩma upépe.

Mba'épa oĩ hyepýpe

Transition.js haꞌehína peteĩ pytyvõha tenondegua umi transitionEndmbaꞌe ojehúvape g̃uarã ha avei peteĩ emulador transición CSS rehegua. Oipuru ambue plugin ohecha hag̃ua CSS ñembohasa pytyvõ ha ojagarra hag̃ua ñembohasa ojekolokáva.

Omboguejývo umi transición

Umi jehaipyre ikatu oñembogue opaite tetãme ojeporúvo ko’ã JavaScript pehẽngue, oúva’erã ojekarga rire transition.js(térã bootstrap.jstérã bootstrap.min.js, ikatuháicha):

$.support.transition = false

Modal -kuéra rehegua modal.js

Umi modal oñemohenda porã, ha katu iflexible, ñe’ẽmondo ñe’ẽmondo orekóva funcionalidad michĩvéva oñeikotevẽva ha umi por defecto inteligente.

Heta modal abierto ndojeguerohorýiva

Ejesareko ani hag̃ua reipe’a peteĩ modal ojehecha aja gueteri ambue. Ohechauka hag̃ua hetave peteĩ modal peteĩ jeýpe oikotevẽ código personalizado.

Colocación de marcado modal rehegua

Akóinte eñeha’ã emoĩ peteĩ modal código HTML peteĩ tenda yvateguápe nde kuatiaroguépe ani hag̃ua ambue componente oityvyro modal jehechauka ha/térã funcionalidad-pe.

Umi advertencia dispositivo móvil rehegua

Oĩ algunas advertencias ojeporúvo modales umi dispositivo móvil-pe. Ehecha ore kuatiañe’ẽ pytyvõrã kundahára rehegua reikuaa hag̃ua mba’ekuaarã.

Mbaꞌeichaitépa HTML5 omboheko iñemohendapyre, autofocusHTML atributo ndoguerekói mbaꞌeveichagua mbaꞌekuaarã umi modal Bootstrap-pe. Ojehupyty hag̃ua peteĩchagua efecto, eipuru peteĩ JavaScript jeporupyre:

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

Tembiecharã

Ejemplo estático rehegua

Peteĩ modal oñembohasáva oguerekóva iñakãrapuꞌa, hete ha tembiaporã ñemohendapyre ipype.

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

Embohasa peteĩ modal JavaScript rupive eitykuévo pe botón oĩva iguýpe. Oguejýta ha oñedesvanece vaʼerã pe páhina yvate guive.

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

Ojapo umi modalidad ojeikekuaa haguã

Ejesareko katuete emoĩ role="dialog"ha aria-labelledby="...", referencia título modal rehe, .modal, ha role="document"pe .modal-dialogijehegui.

Avei, ikatu eme’ẽ peteĩ ñemombe’u ne ñe’ẽñemi modal rehegua aria-describedbyon ndive .modal.

Oñemoinge umi video YouTube-pegua

Oñemoinge hag̃ua YouTube videokuéra modal-pe oikotevẽ JavaScript adicional ndaha’éiva Bootstrap-pe ojejoko hag̃ua ijeheguiete ñembopu ha hetave mba’e. Ehecha ko kuatiañe’ẽ oipytyvõva Stack Overflow rehegua reikuaave hag̃ua.

Umi tamaño opcional rehegua

Umi modal oguereko mokõi tuichakue opcional, ojeguerekóva clase modificador rupive oñemoĩ hag̃ua peteĩ .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>

Ojepe’a pe animación

Umi modal ojehechaukáva simplemente oñedesvanece rangue ojehecha hag̃ua, eipe’a pe .fadeclase nde marcado modal-gui.

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

Oipurúvo sistema de rejilla

Ojeaprovecha hag̃ua sistema rejilla Bootstrap rehegua peteĩ modal ryepýpe, emoĩnte .rows ryepýpe .modal-bodyha upéi eipuru umi clase sistema rejilla normal rehegua.

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

¿Reguerekópa peteĩ aty umi botón opavave ombohapéva peteĩchagua modal, umi contenido iñambue’imiva reheve añoite? Eipuru event.relatedTargetha HTML data-*atributo (ikatu jQuery rupive ) emoambue hag̃ua modal mbaꞌekuaarã ojesarekóva mbaꞌe botón rehepa ojepyso. Ehecha umi docs Eventos Modales rehegua reikuaa hag̃ua mba’épa he’ise relatedTarget, .

...hetave umi botón...
<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)
})

Jeporu rehegua

Pe plugin modal ombohasa ne mba’ekuaarã kañymby ojejeruréramo, umi atributo dato rehegua térã JavaScript rupive. Avei omoĩve .modal-openpe <body>to override desplazamiento comportamiento por defecto ha omoheñói peteĩ .modal-backdropomeꞌe hag̃ua peteĩ área clic rehegua oñemboyke hag̃ua umi modal ojehechaukáva ojepyso jave modal okaháre.

Umi atributo de datos rupive

Emombaꞌapo peteĩ modal ehaiꞌeỹre JavaScript. Oñemohenda data-toggle="modal"peteĩ elemento controlador rehe, peteĩ botón-icha, peteĩ data-target="#foo"térã href="#foo"ndive ojepytaso hag̃ua peteĩ modal específico ojere hag̃ua.

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

JavaScript rupive

Ehenói peteĩ modal orekóva id myModalpeteĩ línea JavaScript reheve:

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

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-backdrop="".

Téra hesegua upevakuére techaukaha
telón de fondo rehegua boolean térã pe vore'static' teete Oike peteĩ elemento modal-telón de fondo rehegua. Ikatu avei, emombeꞌu staticpeteĩ telón de fondo-pe g̃uarã nombotýiva modal clic-pe.
teclado rehegua booleano rehegua teete Omboty modal ojepysóramo tecla escape
hechauka booleano rehegua teete Ohechauka modal oñepyrũ jave.
mombyryeterei tapepo'i japu

Ko opción ndojepuruvéima v3.3.0 guive ha ojeipeꞌa v4-pe. Ro’e porã eipuru rangue plantilla cliente-pegua térã peteĩ marco de encuadernación de datos, térã ehenói jQuery.load ndete voi.

Oñeme’ẽramo peteĩ URL mombyrygua, ojekargáta contenido peteĩ jey jQuery loadmétodo rupive ha oñeinyecta .modal-contentdiv-pe. Eipurúramo data-api, ikatu eipuru ambue hendáicha pe hrefatributo emombe’u hag̃ua pe fuente mombyrygua. Ko mba’e rehegua techapyrã ojehechauka ko’ápe:

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

Método-kuéra rehegua

Omomba’apo ne contenido modal ramo. Omoneĩ peteĩ opción opcional object.

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

Ombohasa manualmente peteĩ modal. Ojevy ohenóivape ojehechauka térã oñeñomi mboyve añetehápe modal (heꞌiséva oiko mboyve shown.bs.modaltérã hidden.bs.modalmbaꞌe ojehúva).

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

Oipe’a manualmente peteĩ modal. Ojevy ohenóivape ojehechauka mboyve añetehápe modal (heꞌiséva oiko mboyve pe shown.bs.modalmbaꞌe ojehúva).

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

Oñomi manualmente peteĩ modal. Ojevy ohenóivape oñeñomi mboyve añetehápe modal (heꞌiséva oiko mboyve pe hidden.bs.modalmbaꞌe ojehúva).

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

Omohenda jey modal ñemohenda ombohovái hag̃ua peteĩ barra de desplazamiento oiméramo ojehechauka peteĩva, ojapótava modal salto akatúa gotyo.

Oñeikotevẽ añoite oñemoambuéramo pe modal yvatekue ojepe’a aja.

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

Umi mba’e oikóva

Bootstrap clase modal ohechauka mbovymi mbaꞌe ojehúva oñembojoaju hag̃ua funcionalidad modal-pe.

Opaite mbaꞌe ojehúva modal ojedispara pe modal rehe voi (heꞌiséva pe <div class="modal">).

Tipo de Evento rehegua Techaukaha
ohechauka.bs.modal Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave showmétodo instancia rehegua. Ojejapóramo peteĩ jekutu rupive, pe elemento ojepysóva ojeguereko relatedTargetpe mbaꞌe ojehúva mbaꞌeichaitépa.
ojehechauka.bs.modal Ko mbaꞌe ojehúva oñembogue ojejapo rire modal ojehecha hag̃ua puruhárape (ohaꞌarõta oñembotývo umi CSS jehasaha). Ojejapóramo peteĩ jekutu rupive, pe elemento ojepysóva ojeguereko relatedTargetpe mbaꞌe ojehúva mbaꞌeichaitépa.
omokañy.bs.modal Ko mbaꞌe ojehúva oñembogue pyaꞌe oñehenói rire pe hidemétodo instancia rehegua.
kañymby.bs.modal Ko mbaꞌe ojehúva oñembogue modal oñemokañypa rire puruháragui (ohaꞌarõta CSS jehaipyre oñembotývo).
ojekarga.bs.modal Ko evento oñembogue modal okargáma jave contenido oiporúvo remoteopción.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Umi mba’e’oka dropdown.js

Emoĩ menú desplegable haimete oimeraẽ mba’épe ko plugin isãsóva reheve, oikehápe navbar, ficha ha pastilla.

Peteĩ navbar ryepýpe

Umi pastilla ryepýpe

Atributo de datos térã JavaScript rupive, pe plugin desplegable omoambue contenido kañymby (menú desplegable) ombohasávo .openclase elemento lista tuvakuéra rehegua.

Umi dispositivo móvil-pe, ojepe’ávo peteĩ desplegable omoĩ peteĩ .dropdown-backdropárea de tapón ramo oñemboty hag̃ua umi menú desplegable ojepoko jave menú okaháre, peteĩ mba’e ojejeruréva iOS pytyvõ hekopete. Kóva he’ise oñembohasa hag̃ua peteĩ menú desplegable abierto-gui peteĩ menú desplegable iñambuévape oikotevẽha peteĩ tap extra móvil-pe.

Ñe’ẽñemi: Pe data-toggle="dropdown"atributo ojejerovia oñemboty hag̃ua menú desplegable peteĩ aplicación nivel-pe, upévare iporã reipuru meme.

Umi atributo de datos rupive

Emoĩ data-toggle="dropdown"peteĩ enlace térã botón-pe emoambue hag̃ua peteĩ desplegable.

<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-kuéra oñeñongatu hag̃ua hekopete umi joajuha vore reheve, eipuru data-targetatributo 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 rupive

Ehenói umi desplegable JavaScript rupive:

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

data-toggle="dropdown"oñeikotevẽ gueteri

Taha’e ha’éva ehenóiva ne desplegable JavaScript rupive térã upéva rangue eipuru data-api, data-toggle="dropdown"oñeikotevẽ akóinte oĩ presente pe desplegable elemento desencadenante-pe.

Avave

Ombohasa menú desplegable peteĩ navbar térã navegación ficha oñemeꞌevaꞌekue rehegua.

Opaite mbaꞌe ojehúva desplegable oñembopu .dropdown-menu's elemento túvape.

Opaite mbaꞌe ojehúva desplegable oguereko peteĩ relatedTargetmbaꞌekuaarã, ivalór haꞌehína elemento anclaje oñembohasáva.

Tipo de Evento rehegua Techaukaha
ohechauka.bs.oñemboguejy Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave método instancia ohechaukáva.
ojehechauka.bs.dropdown Ko mba’e ojehúva oñembogue ojejapo rire ojehecha hag̃ua puruhárape (oha’arõta umi CSS jehaipyre, oñembotývo).
omokañy.bs.oñemboguejy Ko mbaꞌe ojehúva oñembogue pyaꞌe oñehenói rire pe método instancia omokañyvaꞌekue.
kañymby.bs.dropdown rehegua Ko mba’e ojehúva oñembogue oñemokañypa rire pe desplegable puruháragui (oha’arõta CSS jehaipyre, oñembotývo).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy rehegua scrollspy.js

Tembiecharã navbar-pe

Pe ScrollSpy plugin ha’e oñembopyahu hag̃ua ijeheguiete umi nav destino oñemopyendáva desplazamiento ñemohenda rehe. Emoinge pe área oĩva navbar guýpe ha ehecha pe clase activa ñemoambue. Umi sub elemento desplegable ojehechaukáta avei.

@ñandy

Polainas de anuncios keytar, brunch id arte partido dolor labore rehegua. Horquilla yr enim lo-fi ovende mboyve hikuái qui. Tumblr derecho bicicleta granja-a-mesa taha'e ha'éva. Anim keffiyeh carles cardigan rehegua. Velit seitan mcsweeney foto cabina 3 lobo jasy irure. Cosby suéter lomo jean shorts, williamsburg sudadera minim qui oiméne nerehendúi hesekuéra et cardigan fondo fiduciario culpa biodiesel wes anderson estética. Nihil tatuado acusamus, cred ironía biodiésel keffiyeh artesano ullamco consequat rehegua.

@mdo rehegua

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

peteĩ

Occaecat commodo aliqua delectus rehegua. Fap artesanía cerveza deserunt patineta ea. Lomo bicicleta derecho adipisicing banh mi, velit ea sunt nivel oúva locavore café de origen único en magna veniam. Vinilo id de vida yvate, eco parque consequat quis aliquip banh mi horquilla. Vero VHS est adipisicing rehegua. Consectetur nisi DIY mínimo mensajero vosa rehegua. Cred ex en, sostenible delectus consectetur fanny pack iphone rehegua.

mokõi

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 bolso marfa taha'e ha'éva delectus camión hi'upyrã. Sapiente sintet id asumida rehegua. Locavore sed helvetica cliche ironía, truenos oiméne nerehendúiva chuguikuéra consequat sudadera con capucha sin gluten lo-fi fap aliquip. Labore elit placeat oñevende mboyve hikuái, terry richardson proident brunch nesciunt quis cosby suéter pariatur keffiyeh ut helvetica artesano. Cardigan cerveza artesanal seitan velit listo rehegua. VHS chambray laboris venam temporal rehegua. Anim mollit mínimo commodo ullamco arasunukuéra.

Jeporu rehegua

Oikotevê Bootstrap nav

Scrollspy ko’áĝa oikotevẽ ojepuru peteĩ componente nav Bootstrap rehegua ojehechauka porã hag̃ua umi enlace activo.

Oñeikotevë umi meta ID oresolvéva

Umi enlace Navbar oguerekova’erã umi meta id oñemyatyrõva. Techapyrã, a <a href="#home">home</a>okorrespondevaꞌerã peteĩ mbaꞌe DOM-pe haꞌeháicha <div id="home"></div>.

Umi elemento ndaha’éiva :visibleblanco oñemboyke

Umi elemento destino ndaha’éiva :visiblejQuery he’iháicha oñemboykéta ha umi elemento nav okorrespondéva araka’eve noñemomba’emo’ãi.

Oikotevê posicionamiento relativo

Taha’e ha’éva pe método implementación rehegua, scrollspy oikotevẽ jepuru rehegua position: relative;pe elemento rehe reespiáva. Hetavépe kóva ha’e pe <body>. Ojejapo jave desplazamiento umi elemento ndaha’éiva pe <body>, katuete oguereko peteĩ heightconjunto ha overflow-y: scroll;ojeporu.

Umi atributo de datos rupive

Oñemoĩ hag̃ua scrollspy jeiko pya’e nde barra yvategua jeguatarãme, emoĩve data-spy="scroll"pe elemento ehechasévape (jepiveguaichavéva kóva ha’éta pe <body>). Upéi emoĩve data-targetatributo orekóva ID térã clase elemento túva oimeraẽva .navcomponente Bootstrap rehegua.

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 rupive

Emoĩ rire position: relative;nde CSS-pe, ehenói scrollspy-pe JavaScript rupive:

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

Método-kuéra rehegua

.scrollspy('refresh')

Eipuru jave scrollspy ojoajúvo emoĩ térã eipeꞌa elemento DOM-gui, tekotevẽta ehenói método ñembopyahu péicha:

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

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-offset="".

Téra hesegua upevakuére techaukaha
desplazamiento rehegua papapy 10 rehegua Umi píxel ojedesplaza hag̃ua yvate guive oñekalkula jave posición desplazamiento rehegua.

Umi mba’e oikóva

Tipo de Evento rehegua Techaukaha
omomba’apo.bs.scrollspy Ko mba’e ojehúva odispara jave peteĩ mba’e pyahu oñemboguata jave pe scrollspy rupive.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Umi ficha oñembohasáva tab.js

Tembiecharã fichakuéra

Emoĩve funcionalidad ficha pya’e ha dinámica rehegua embohasa hag̃ua umi panel contenido local rupive, jepe umi menú desplegable rupive. Umi ficha anidado ndojeguerohorýi.

Denim crudo oiméne nerehendúi chuguikuéra pantalón corto vaquero Austin. Nesciunt tofu stumptown aliqua, retro sintetizador maestro omopotîva. Bigote cliché temporal, williamsburg carles helvetica vegana rehegua. Reprehenderit carnicero retro keffiyeh atrapador de sueños sintetizador. Suéter cosby eu banh mi, qui irure terry richardson ex calamar. Aliquip placeat salvia cillum rehegua 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.

Ombohape jeguata ficha rehegua

Ko plugin ombohape componente navegación ficha rehegua omoĩ hag̃ua área ficha rehegua.

Jeporu rehegua

Emboguata umi vore vore’i JavaScript rupive (peteĩteĩva vore tekotevẽ oñemboguata peteĩteĩ):

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

Ikatu emombaꞌapo peteĩteĩva ficha heta hendáicha:

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

Marcado rehegua

Ikatu emomba’apo peteĩ ficha térã pastilla jeguata ehai’ỹre mba’eveichagua JavaScript emombe’úvo data-toggle="tab"térã data-toggle="pill"peteĩ elemento ári. Oñemoĩvo umi navha nav-tabsmbo’esyry pestaña ul-pe ojeporúta Bootstrap pestaña estilo , oñembojoapývo umi navha nav-pillsmbo’esyry ojeporúta píldora estilo .

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

Ojejapo hag̃ua umi ficha oñedesvanece, emoĩ .fadepeteĩteĩme .tab-pane. Peteĩha vore vore oguerekovaꞌerã avei .inojehecha hag̃ua pe contenido ñepyrũrã.

<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étodo-kuéra rehegua

$().tab

Omombaꞌapo peteĩ elemento ficha ha mbaꞌeryru contenido rehegua. Tab oguerekovaꞌerã peteĩ data-targettérã peteĩ hrefojepytasóva peteĩ nodo mbaꞌerepy rehegua DOM-pe. Umi techapyrã yvateguápe, umi ficha haꞌehína umi <a>s oguerekóva data-toggle="tab"atributo.

.tab('show')

Oiporavo pe ficha oñeme’ẽva ha ohechauka contenido ojoajúva hese. Oimeraẽ ambue ficha ojeporavóva’ekue ymave ndojeporavoiva’ekue ha oñeñomi umi contenido ojoajúva hese. Ojevy ohenóivape ojehechauka mboyve añetehápe pe ficha vore (heꞌiséva oiko mboyve pe shown.bs.tabmbaꞌe ojehúva).

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

Umi mba’e oikóva

Ohechauka jave peteĩ ficha pyahu, umi mbaꞌe ojehúva odispara koꞌã orden-pe:

  1. hide.bs.tab(pe ficha activa ko’áĝaguápe)
  2. show.bs.tab(pe pestaña ojehechaukátavape)
  3. hidden.bs.tab(pe ficha activa mboyvegua-pe, peteĩchagua pe hide.bs.tabevento-pe g̃uarã)
  4. shown.bs.tab(pe pestaña ojehechauka ramóvape, peteĩchagua pe show.bs.tabevento-pe g̃uarã)

Ndaipóriramo peteĩ ficha ndojejapóiva’ekue voi, upéicharamo umi hide.bs.tabha hidden.bs.tabmba’e ojehúva ndojedisparamo’ãi.

Tipo de Evento rehegua Techaukaha
ohechauka.bs.tab Ko mbaꞌe ojehúva odispara ficha jehechaukahápe, ha katu ojehechauka mboyve ficha pyahu. Eipuru event.targetha event.relatedTargetemohenda hag̃ua pe ficha activa ha pe ficha activa mboyvegua (oĩramo) peteĩteĩ.
ojehechauka.bs.tab Ko mba’e ojehúva odispara ficha jehechaukahápe ojehechauka rire peteĩ ficha. Eipuru event.targetha event.relatedTargetemohenda hag̃ua pe ficha activa ha pe ficha activa mboyvegua (oĩramo) peteĩteĩ.
omokañy.bs.tab Ko mbaꞌe ojehúva ojedispara ojehechaukavaꞌerã jave peteĩ ficha pyahu (ha upéicha rupi oñeñomivaꞌerã pe ficha activa mboyvegua). Eipuru event.targetha event.relatedTargetemohenda hag̃ua pe ficha activa ko’áĝagua ha pe ficha pyahu pya’e ojejapótava, peteĩteĩ.
kañymby.bs.tab Ko mbaꞌe ojehúva oñembopu ojehechauka rire peteĩ ficha pyahu (ha upéicha oñeñomi pe ficha activa mboyvegua). Eipuru event.targetha event.relatedTargetemohenda hag̃ua pe ficha activa mboyvegua ha pe ficha activa pyahu, peteĩteĩ.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tembipururã ñe’ẽmondo tooltip.js

Oñeinspiráva pe plugin iporãitereíva jQuery.tipsy ohaiva’ekue Jason Frame; Tembipururã ñe’ẽmondo ha’e peteĩ versión oñembopyahúva, ndojeroviapáiva ta’ãngamýire, oipuru CSS3 taꞌãngamýime g̃uarã, ha dato-atributo título ñeñongaturã tendápe g̃uarã.

Umi tembipuru’i ñe’ẽmondo oguerekóva título ipukukue cero araka’eve ndojehechaukái.

Tembiecharã

Emoĩ nde po umi enlace oĩva ko’ápe rehecha hag̃ua tembipuru’i ñe’ẽmondo:

Pantalón apretado nivel próximo keffiyeh oiméne nerehendúi hesekuéra. Foto cabina barba crudo denim tipografía vegano mensajero bolso stumptown. Seitan granja a mesa, mcsweeney fixie sostenible quinoa 8 bits ropa americana orekóva peteî terry richardson vinilo chambray. Barba tocón, cardigans banh mi lomo gatos arasunu rehegua. Tofu biodiésel williamsburg marfa, irundy loko mcsweeney's omopotîva vegano chambray. Peteĩ artesano añetehápe irónico taha'e ha'éva keytar , scenester granja-a-mesa banksy Austin twitter mango freegan cred denim crudo café de origen único viral.

Tembipururã ñe’ẽmondo estático

Ojeguereko irundy opción: yvate, akatúa, yvy gotyo ha asu gotyo alineado.

Irundy dirección rehegua

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

Funcionalidad de opt-in rehegua

Mba’éichapa omba’apo, Tooltip ha Popover data-apis ha’e opt-in, he’iséva ndete voi remoñepyrũva’erã .

Peteĩ tape oñemboguapy hag̃ua opaite tembipuru’i ñe’ẽmondo peteĩ páhinape ha’éta ojeporavo hag̃ua data-toggleatributo rupive:

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

Jeporu rehegua

Pe tembipuru’i ñemohendaha omoheñói contenido ha marcado ojejerurévo, ha por defecto omoĩ tembipuru’i ñe’ẽmondo elemento desencadenante rire.

Emoñepyrũ tembipuru’i ñe’ẽmondo JavaScript rupive:

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

Marcado rehegua

Pe marcado oñeikotevẽva peteĩ tembipuru’i ñe’ẽmondope g̃uarã ha’e peteĩ dataatributo añoite ha titleelemento HTML rehe reguerekoséva peteĩ tembipuru’i ñe’ẽmondo. Pe marcado oñembohekopyréva peteĩ tembipuru’i ñe’ẽmondo rehegua isãsove, jepémo oikotevẽ peteĩ tenda (por defecto, oñemohenda topplugin rupive).

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

Umi enlace heta línea rehegua

Sapy’ánte emoĩse peteĩ tembipuru’i ñe’ẽmondo peteĩ hipervínculo-pe ombojere heta línea. Pe tembipuru’i ñembohekopyrã jeiko ñepyrũrã haꞌehína oñemombyte hag̃ua horizontalmente ha verticalmente. Emoĩve white-space: nowrap;nde ancla-kuérape ani hag̃ua oiko upéva.

Umi tembipuru’i ñe’ẽmondo oĩva botón aty’ípe, jeikeha aty ha cuadro-pe oikotevẽ ñemboheko especial

Eipuru jave tembipuru’i ñe’ẽmondo umi elemento oĩva peteĩ .btn-grouptérã peteĩ ryepýpe .input-group, térã umi elemento ojoajúva cuadro rehe ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), emombe’uva’erã opción container: 'body'(oñemoĩva kuatiápe iguýpe) ani hag̃ua oiko umi mba’e vai ojeipota’ỹva (ha’eháicha pe elemento okakuaa tuichavéva ha/ térã operde umi iesquina redondeada oñemboguata jave tembipuru’i punta).

Ani reñeha’ã ehechauka tembipuru’i ñe’ẽmondo umi elemento kañymby rehe

Oñehenóiramo $(...).tooltip('show')elemento destino oĩ jave display: none;, ojapóta tembipuru’i ñemohenda vai oñemohenda vai hag̃ua.

Tembipururã ñe’ẽmondo ojeikekuaahápe teclado ha tecnología pytyvõhára puruhárape g̃uarã

Umi puruhárape g̃uarã ohóva teclado reheve, ha en particular umi tecnología pytyvõhára puruhárape g̃uarã, emoĩva’erã tembipuru’i ñe’ẽmondo añoite umi elemento teclado-pe oñembohapévape ha’eháicha enlace, control formulario rehegua térã oimeraẽ elemento arbitrario orekóva tabindex="0"atributo.

Umi tembipuru’i ñe’ẽmondo umi elemento oñemboykéva rehegua oikotevẽ umi elemento envoltura rehegua

Oñemoĩ hag̃ua peteĩ tembipuru’i peteĩ disabledtérã .disabledelemento-pe, emoĩ pe elemento peteĩ ryepýpe <div>ha emoĩ tembipuru’i ñe’ẽmondo upévape <div>hendaguépe.

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-animation="".

Téra Hesegua Upevakuére Techaukaha
animación rehegua booleano rehegua teete Emoĩ peteĩ CSS ñemboguejy ñembohasa tembipuru’i ñe’ẽmondope
mba’yru rehegua cadena rehegua | japu japu

Ombojoaju tembipuru’i ñe’ẽmondo peteĩ elemento específico-pe. Tembiecharã: container: 'body'. Ko jeporavopyre ideprovéchoiterei ohejágui ndéve emohenda tembipuru’i ñe’ẽmondo kuatia osyryhápe elemento desencadenante ypýpe - ojokótava tembipuru’i ñe’ẽmondo ani hag̃ua oveve mombyry elemento desencadenante-gui peteĩ ventána tuichakue ñemoambue aja.

mbegue papapy | mba'e 0 rehegua

Retraso ojehechauka ha oñeñomi hag̃ua tembipuru’i ñe’ẽmondo (ms) - ndojeporúi tipo de disparo manual-pe

Oñeme’ẽramo peteĩ papapy, ojejapo retardo mokõivévape kañy/jehechauka

Objeto estructura ha’e: .delay: { "show": 500, "hide": 100 }

html rehegua booleano rehegua japu Emoinge HTML tembipuru’i ñe’ẽmondope. Japúramo, jQuery rembiaporã textojeporúta oñemoinge hag̃ua mbaꞌekuaarã DOM-pe. Eipuru jehaipyre rejepy’apýramo umi ataque XSS rehe.
colocación rehegua cadena rehegua | hembiapo 'yvate'

Mba'éichapa oñemohenda tembipuru'i - yvate | yvy gotyo | izquierda | derecho | auto rehegua.
Ojekuaaukávo "auto", oorienta jeýta dinámicamente tembipuru’i ñe’ẽmondo. Techapyrã, ñemohenda haꞌeramo "auto izquierda", tembipururã vore ohechaukáta ijasu gotyo ikatúramo, ndaupéichairamo ohechaukáta akatúa gotyo.

Ojepuru jave peteĩ tembiaporã ojekuaa hag̃ua ñemohenda, oñehenói tembipururã vore DOM nodo peteĩha argumento ramo ha elemento disparador nodo DOM mokõiha ramo. Pe thiscontexto oñemohenda tembipuru’i ñe’ẽñemi instancia-pe.

selector rehegua japu Oñeme’ẽramo peteĩ jeporavoha, umi mba’e’oka tembipuru’i ñe’ẽmondo rehegua oñeme’ẽta umi mba’e’oka oje’évape. En práctica, kóva ojepuru ikatu hag̃uáicha contenido HTML dinámico oguereko tembipuru’i ñe’ẽmondo oñembojoapýva. Ehecha kóva ha peteĩ techapyrã informativo .
plantilla rehegua '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Base HTML ojepuru hag̃ua ojejapo jave tembipuru’i ñe’ẽmondo.

Pe tembipuru'i titleoñeinyecta va'erã pe .tooltip-inner.

.tooltip-arrowoikóta chugui pe tembipuru’i flecha.

Pe elemento envoltura okápegua oguerekova era pe .tooltipclase.

myakãha cadena rehegua | hembiapo '' .

Título valor por defecto titleatributo ndaipóriramo.

Oñemeꞌeramo peteĩ función, oñehenóita thisirreferencia ñemohenda reheve pe elemento oñembojoajúvape tembipururã vore rehe.

ñembokapu 'enfoque hover' rehegua. Mba’éichapa oñemboguata tembipuru’i ñe’ẽmondo - eity | hover rehegua | enfoque | popeguáva. Ikatu rembohasa heta disparador; omboja’o chupekuéra peteĩ espacio reheve. manualndaikatúi oñembojoaju ambue gatillo ndive.
jehechaukaha cadena rehegua | mba'e | hembiapo { selector: 'cuerpo', acolchado: 0 } Ñe'ẽpoty ha purahéi .

Oñongatu tembipuru’i ñe’ẽmondo ko elemento rembe’y ryepýpe. Tembiecharã: viewport: '#viewport'térã{ "selector": "#viewport", "padding": 0 }

Oñemeꞌeramo peteĩ tembiaporã, oñehenói elemento desencadenante DOM nodo reheve iargumento añoite ramo. Pe thiscontexto oñemohenda tembipuru’i ñe’ẽñemi instancia-pe.

Umi atributo dato rehegua tembipuru’i peteĩteĩvape g̃uarã

Umi opción tembipuru’i peteĩteĩvape g̃uarã ikatu alternativamente oñemboheko umi atributo dato rehegua jepuru rupive, oñemyesakã haguéicha yvateve.

Método-kuéra rehegua

$().tooltip(options)

Ombojoaju peteĩ tembipuru’i ñemboguataha peteĩ elemento ñembyaty rehe.

.tooltip('show')

Oikuaauka peteĩ elemento tembipururã ñe’ẽmondo. Ojevy ohenóivape ojehechauka mboyve añetehápe tembipuru’i ñe’ẽmondo (he’iséva oiko mboyve pe shown.bs.tooltipmba’e ojehúva). Kóva ojehecha peteĩ "manual" disparo herramienta rehegua. Umi tembipuru’i ñe’ẽmondo oguerekóva título ipukukue cero araka’eve ndojehechaukái.

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

.tooltip('hide')

Oñomi peteĩ elemento tembipuru’i ñe’ẽmondo. Ojevy ohenóivape oñeñomi mboyve añetehápe tembipuru’i ñe’ẽmondo (he’iséva oiko mboyve pe hidden.bs.tooltipmba’e ojehúva). Kóva ojehecha peteĩ "manual" disparo herramienta rehegua.

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

.tooltip('toggle')

Ombohasa peteĩ elemento tembipuru’i ñe’ẽmondo. Ojevy ohenóivape ojehechauka térã oñeñomi mboyve añetehápe tembipuru’i ñe’ẽmondo (he’iséva oiko mboyve shown.bs.tooltiptérã hidden.bs.tooltipmba’e’oka). Kóva ojehecha peteĩ "manual" disparo herramienta rehegua.

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

.tooltip('destroy')

Oñomi ha ohundi peteĩ elemento tembipuru’i ñe’ẽmondo. Umi tembipuru’i oipurúva delegación (ojejapóva ojeporúvo opciónselector ) ndaikatúi oñehundi peteĩteĩ umi elemento disparador ñemoñare rehe .

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

Umi mba’e oikóva

Tipo de Evento rehegua Techaukaha
ohechauka.bs.tembipuru’i ñe’ẽmondo Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave showmétodo instancia rehegua.
ojehechauka.bs.tembipuru’i ñe’ẽmondo Ko mba’e’oka oñembogue ojejapo rire tembipuru’i ñemboheko ojehecha hag̃ua puruhárape (oha’arõta CSS jehaipyre oñembotývo).
hide.bs.tembipuru’i ñe’ẽmondo Ko mbaꞌe ojehúva oñembogue pyaꞌe oñehenói rire pe hidemétodo instancia rehegua.
hidden.bs.tembipuru’i ñe’ẽmondo Ko mba’e ojehúva oñembogue oñemokañypa rire tembipuru’i ñe’ẽmondo puruháragui (oha’arõta CSS jehaipyre oñembotývo).
oñemoinge.bs.tembipuru’i ñe’ẽmondo Ko mbaꞌe ojehúva oñembogue pe show.bs.tooltipmbaꞌe ojehúva rire oñembojoapy rire tembipururã ñemohendaha DOM-pe.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers rehegua popover.js

Oñemoĩ umi superposición michĩva contenido rehegua, umi oĩva iPad-peguáicha, oimeraẽ elemento-pe oñemohenda hag̃ua marandu secundaria.

Umi popovers oguerekóva título ha contenido mokõive ipukukue cero araka’eve ndojehechaukái.

Plugin rehegua dependencia

Popovers oikotevẽ tembipuru’i ñemohendaha oike hag̃ua ne versión Bootstrap-pe.

Funcionalidad de opt-in rehegua

Mba’éichapa omba’apo, Tooltip ha Popover data-apis ha’e opt-in, he’iséva ndete voi remoñepyrũva’erã .

Peteĩ tape oñemboguapy hag̃ua opaite popover peteĩ página-pe haꞌeta ojeporavo hag̃ua data-toggleatributo rupive:

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

Umi popover umi botón aty, entrada aty ha cuadro-pe oikotevẽ configuración especial

Oipurúvo popovers umi elemento oĩva peteĩ .btn-grouptérã peteĩ ryepýpe .input-group, térã umi elemento ojoajúva cuadro rehe ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), emombeꞌuvaꞌerã opción container: 'body'(oñemoĩva kuatiápe iguýpe) ani hag̃ua oiko umi efecto secundario ndojeipotavéiva (haꞌeháicha pe elemento okakuaa tuichavéva ha/ térã operde umi esquina redondeada oñemboguata jave popover).

Ani reñeha'ã rehechauka umi popovers umi elemento kañymby rehe

Oñehenóiramo arakaꞌepa $(...).popover('show')pe elemento destino oĩ display: none;, ojapóta pe popover oñemohenda vai hag̃ua.

Umi popovers umi elemento discapacitado rehe oikotevẽ elemento envoltura rehegua

Oñemoĩ hag̃ua peteĩ popover peteĩ disabledtérã .disabledelemento rehe, emoĩ pe elemento peteĩ ryepýpe <div>ha emoĩ pe popover upévape <div>rangue.

Umi enlace heta línea rehegua

Sapy’ánte emoĩse peteĩ popover peteĩ hipervínculo-pe ombojere heta línea. Popover plugin reko ñepyrũrã haꞌehína oñecentra hag̃ua horizontalmente ha verticalmente. Emoĩve white-space: nowrap;nde ancla-kuérape ani hag̃ua oiko upéva.

Tembiecharã

Popover estático rehegua

Ojeguereko irundy opción: yvate, akatúa, yvy gotyo ha asu gotyo alineado.

Popover yvate

Seed posuere consectetur est en lobortis rehegua. Eneano eu leo ​​quam rehegua. Pelentesco ornare sem lacinia quam venenatis vestibulo rehegua.

Popover oike

Seed posuere consectetur est en lobortis rehegua. Eneano eu leo ​​quam rehegua. Pelentesco ornare sem lacinia quam venenatis vestibulo rehegua.

Popover yvy gotyo

Seed posuere consectetur est en lobortis rehegua. Eneano eu leo ​​quam rehegua. Pelentesco ornare sem lacinia quam venenatis vestibulo rehegua.

Popover oho

Seed posuere consectetur est en lobortis rehegua. Eneano eu leo ​​quam rehegua. Pelentesco ornare sem lacinia quam venenatis vestibulo rehegua.

Demostración en vivo rehegua

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

Irundy dirección rehegua

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

Oñemboyke ambue clic-pe

Eipuru pe focusgatillo emosẽ hag̃ua umi popovers ambue clic-pe puruhára ojapóva.

Oñeikotevẽ marcado específico oñemboyke-pe g̃uarã ambue clic-pe

Ojepokuaa porã hag̃ua kundaha ha plataforma kurusu, eipuruva’erã <a>etiqueta, ndaha’éi etiqueta <button>, ha avei emoĩva’erã umi atributo role="button"ha .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>

Jeporu rehegua

Emboguata popovers JavaScript rupive:

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

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-animation="".

Téra Hesegua Upevakuére Techaukaha
animación rehegua booleano rehegua teete Emoĩ peteĩ CSS descoloramiento ñembohasa popover-pe
mba’yru rehegua cadena rehegua | japu japu

Ombojoaju pe popover peteĩ elemento específico rehe. Tembiecharã: container: 'body'. Ko opción ideprovéchoiterei ohejágui ndéve emohenda pe popover kuatia osyryhápe elemento desencadenante ypýpe - ojokótava pe popover ani hag̃ua oveve mombyry elemento desencadenante-gui peteĩ ventána tuichakue ñemoambue aja.

pypegua cadena rehegua | hembiapo '' .

Contenido valor por defecto data-contentatributo noĩriramo.

Oñemeꞌeramo peteĩ función, oñehenóita thisirreferencia reheve pe elemento oñembojoajúva popover rehe.

mbegue papapy | mba'e 0 rehegua

Retraso ohechauka ha omokañy popover (ms) - ndojeporúi tipo de gatillo manual-pe

Oñeme’ẽramo peteĩ papapy, ojejapo retardo mokõivévape kañy/jehechauka

Objeto estructura ha’e: .delay: { "show": 500, "hide": 100 }

html rehegua booleano rehegua japu Emoinge HTML pe popover-pe. Japúramo, jQuery rembiaporã textojeporúta oñemoinge hag̃ua mbaꞌekuaarã DOM-pe. Eipuru jehaipyre rejepy’apýramo umi ataque XSS rehe.
colocación rehegua cadena rehegua | hembiapo 'akatúa'

Mba'éichapa oñemohenda pe popover - yvate | yvy gotyo | izquierda | derecho | auto rehegua.
Ojeꞌe jave "auto", oorienta jeýta dinámicamente pe popover. Techapyrã, ñemohenda haꞌeramo "auto izquierda", pe popover ohechaukáta ijasu gotyo ikatúramo, ndaupéichairamo ohechaukáta akatúa gotyo.

Ojepuru jave peteĩ tembiaporã ojekuaa hag̃ua ñemohenda, oñehenói nodo popover DOM reheve peteĩha argumento ramo ha elemento disparador nodo DOM mokõiha ramo. Pe thiscontexto oñemohenda instancia popover-pe.

selector rehegua japu Oñeme’ẽramo peteĩ jeporavoha, umi mba’e’oka popover rehegua oñeme’ẽta umi mba’e’oka oje’évape. En práctica, kóva ojepuru ikatu hag̃uáicha contenido HTML dinámico oguereko popovers oñembojoapýva. Ehecha kóva ha peteĩ techapyrã informativo .
plantilla rehegua '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Base HTML ojepuru hag̃ua ojejapo jave popover.

Umi popover's titleoñeinyecta va'erã pe .popover-title.

Umi popover's contentoñeinyecta va'erã pe .popover-content.

.arrowoikóta chugui pe popover flecha.

Pe elemento envoltura okápegua oguerekova era pe .popoverclase.

myakãha cadena rehegua | hembiapo '' .

Título valor por defecto titleatributo ndaipóriramo.

Oñemeꞌeramo peteĩ función, oñehenóita thisirreferencia reheve pe elemento oñembojoajúva popover rehe.

ñembokapu 'emboguejy'. Mba'éichapa oñemboguata popover - eity | hover rehegua | enfoque | popeguáva. Ikatu rembohasa heta disparador; omboja’o chupekuéra peteĩ espacio reheve. manualndaikatúi oñembojoaju ambue gatillo ndive.
jehechaukaha cadena rehegua | mba'e | hembiapo { selector: 'cuerpo', acolchado: 0 } Ñe'ẽpoty ha purahéi .

Oñongatu pe popover ko elemento límite ryepýpe. Tembiecharã: viewport: '#viewport'térã{ "selector": "#viewport", "padding": 0 }

Oñemeꞌeramo peteĩ tembiaporã, oñehenói elemento desencadenante DOM nodo reheve iargumento añoite ramo. Pe thiscontexto oñemohenda instancia popover-pe.

Umi atributo de datos umi popover individual-pe g̃uarã

Umi opción umi popover individual-pe g̃uarã ikatu alternativamente ojehechauka ojeporúvo umi atributo de datos, oñemyesakã haguéicha yvateve.

Método-kuéra rehegua

$().popover(options)

Omoñepyrũ umi popover peteĩ elemento ñembyatyrã.

.popover('show')

Oikuaauka peteî elemento popover. Ojevy ohenóivape ojehechauka mboyve añetehápe popover (heꞌiséva oiko mboyve pe shown.bs.popovermbaꞌe ojehúva). Péva ojehecha peteî "manual" desencadenante del popover. Umi popovers oguerekóva título ha contenido mokõive ipukukue cero araka’eve ndojehechaukái.

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

.popover('hide')

Oñomi peteĩ elemento popover rehegua. Ojevy ohenóivape oñeñomi mboyve añetehápe pe popover (heꞌiséva oiko mboyve pe hidden.bs.popovermbaꞌe ojehúva). Péva ojehecha peteî "manual" desencadenante del popover.

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

.popover('toggle')

Ombohasa peteĩ elemento popover. Ojevy ohenóivape ojehechauka térã oñeñomi mboyve añetehápe pe popover (heꞌiséva oiko mboyve pe shown.bs.popovertérã hidden.bs.popovermbaꞌe ojehúva). Péva ojehecha peteî "manual" desencadenante del popover.

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

.popover('destroy')

Oñomi ha ohundi peteî elemento popover. Umi popovers oipurúva delegación (ojejapóva ojeporúvo opciónselector ) ndaikatúi oñehundi peteĩteĩ umi elemento disparador descendiente rehe .

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

Umi mba’e oikóva

Tipo de Evento rehegua Techaukaha
ohechauka.bs.popover rehegua Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave showmétodo instancia rehegua.
ojehechauka.bs.mboriahu Ko mba’e ojehúva oñembogue ojejapo rire ojehecha hag̃ua puruhárape (oha’arõta oñembotývo umi CSS jehasaha).
omokañy.bs.mboriahu Ko mbaꞌe ojehúva oñembogue pyaꞌe oñehenói rire pe hidemétodo instancia rehegua.
kañymby.bs.mboriahu Ko mba’e’oka oñembogue pe popover oñemokañypa rire puruháragui (oha’arõta CSS jehaipyre oñembotývo).
omoinge.bs.mboriahu Ko mbaꞌe ojehúva oñemboyke pe show.bs.popovermbaꞌe ojehúva rire oñembojoapývo popover plantilla DOM-pe.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Marandu ñe’ẽmondo rehegua alert.js

Umi alerta techapyrãva

Emoĩve tembiaporã ñemboyke rehegua opaite marandu ñe’ẽmondo rehegua ko plugin rupive.

Oipurúvo peteĩ .closebotón, haꞌevaꞌerã peteĩha mitã pe .alert-dismissibleha mbaꞌeveichagua contenido jehaipyre ndaikatúi oúva henondépe pe marcado-pe.

Jeporu rehegua

Emoĩnte data-dismiss="alert"nde botón ñemboty rehegua ome’ẽ hag̃ua ijeheguiete peteĩ alerta ñemboty funcionalidad. Oñembotývo peteĩ alerta ojeipe’a DOM-gui.

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

Ikatu hag̃uáicha ne alertakuéra oipuru animación oñemboty jave, eñangareko oguerekoha hikuái umi .fadeha .inmbo’esyry ojeporúmava hesekuéra.

Método-kuéra rehegua

$().alert()

Ojapo peteĩ alerta ohendu hag̃ua umi mbaꞌe ojehúva clic rehegua umi elemento descendiente rehegua oguerekóva data-dismiss="alert"atributo. (Natekotevẽi ojepuru jave data-api auto-initialización).

$().alert('close')

Omboty peteĩ alerta oipeꞌa rupi DOM-gui. Umi clase .fadeha .inoĩramo elemento-pe, pe alerta oñehundipáta ojeipeꞌa mboyve.

Umi mba’e oikóva

Bootstrap plugin alerta rehegua oikuaauka mbovymi mbaꞌe ojehúva oñembojoaju hag̃ua alerta funcionalidad-pe.

Tipo de Evento rehegua Techaukaha
omboty.bs.alerta rehegua Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave closemétodo instancia rehegua.
oñemboty.bs.alerta rehegua Ko mba’e ojehúva oñemboty oñemboty rire ñe’ẽmondo (oha’arõta oñembotývo umi CSS jehaipyre).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Umi botón rehegua.js

Ejapo hetave mba’e umi botón reheve. Control botón heꞌi térã omoheñói botón aty hetave componente-pe g̃uarã tembipururã ryru-icha.

Navegador kurusu rehegua joaju

Firefox opersisti umi estado control formulario rehegua (desactivación ha jesareko) página jeguerahauka rupi . Peteĩ tembiaporã ojejapo hag̃ua haꞌehína ojepuru autocomplete="off". Ehecha Mozilla mba’e’oka #654072 .

Estado-pegua

Oñemoĩve data-loading-text="Loading..."ojepuru hag̃ua peteĩ estado de carga peteĩ botón rehe.

Ko mbaꞌeporã ndojepuruvéima v3.3.5 guive ha ojeipeꞌa v4-pe.

¡Eipuru oimeraẽ estado ndegustáva!

Ko jehechaukarã, roipuru hína data-loading-textha $().button('loading'), ha katu ndaha’éi upéva añoite pe estado ikatúva reipuru. Ehechave ko mba'ére ko'ápe $().button(string)kuatiahaipyrépe .

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

Peteĩ toggle rehegua

Emoĩve data-toggle="button"emombarete hag̃ua toggling peteĩ botón-pe.

Umi botón pre-toggled oikotevẽ .activehaaria-pressed="true"

Umi botón pre-toggle-pe g̃uarã, emoĩva’erã pe .activeclase ha pe aria-pressed="true"atributo pe buttonndejehegui.

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

Ñe’ẽmondo / Radio

Emoĩ data-toggle="buttons"peteĩ .btn-groupcasilla de verificación oguerekóvape térã umi entrada radio rehegua emboguata hag̃ua toggling umi estilo orekóvape.

Umi opción ojeporavova’ekue mboyve oikotevẽ.active

Umi opción ojeporavóvape g̃uarã, emoĩvaꞌerã .activemboꞌepy pe entrada-pe labelndete voi.

Estado ojehecharamóva oñembopyahu clic-pe añoite

Oñembopyahúramo estado ojehechavaꞌekue peteĩ botón casilla de verificación rehegua ojedisparaꞌeỹre peteĩ clickmbaꞌe ojehúva pe botón rehe (techapyrã: vía <input type="reset">térã vía emohenda checkedmbaꞌekuaarã entrada rehegua), tekotevẽta rembohasa ndete voi pe .activeclase entrada rehegua 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étodo-kuéra rehegua

$().button('toggle')

Ombohasa estado empuje rehegua. Ome’ẽ pe botón-pe ojehechaháicha oñemboguata hague.

$().button('reset')

Omoĩjey botón estado - ombohasa jehaipyre jehaipyre ypykuépe. Ko método haꞌehína asíncrono ha ojevy ojejapo mboyve añetehápe pe reset.

$().button(string)

Ombohasa jehaipyre oimeraẽva dato jehaipyre estado oñembohekopyrévape.

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

Oñemboty collapse.js

Plugin flexible oipurúva peteĩ pokõi mbo’esyry jepokuaa ndahasýivape g̃uarã.

Plugin rehegua dependencia

Ñemboguejy oikotevẽ pe transiciones plugin oike hag̃ua nde versión Bootstrap-pe.

Tembiecharã

Emboguejy umi botón iguýpe ehechauka ha emokañy hag̃ua ambue elemento mbo’esyry ñemoambue rupive:

  • .collapseomokañy contenido
  • .collapsingojeporu umi transición aja
  • .collapse.inohechauka contenido rehegua

Ikatu reipuru peteĩ joajuha oguerekóva hrefatributo, térã peteĩ botón oguerekóva data-targetatributo. Mokõivévape, data-toggle="collapse"oñeikotevẽ pe.

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>

Acordeón techapyrã

Embohape pe comportamiento colapso por defecto emoheñói hag̃ua peteĩ acordeón componente panel rehegua ndive.

Anim pariatur cliché reprehenderit, enim eiusmod tekove yvate accusamus terry richardson ad calamar. 3 lobo jasy officia aute, no cupidatat patineta dolor brunch rehegua. Tembi'u kamiõ quinoa nesciunt laborum eiusmod. Brunch 3 lobo jasy tempor, sunt aliqua omoĩ peteĩ guyra hi'ári calamar café de origen único nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, artesanía cerveza labore wes anderson cred nesciunt sapiente ea proident rehegua. Anuncio vegano exceptor carnicero vice lomo rehegua. Polainas occaecat cerveza artesanal granja-a-mesa, crudo denim estético sintetizador nesciunt oiméne nerehendúi chuguikuéra accusamus labore sostenible VHS.
Anim pariatur cliché reprehenderit, enim eiusmod tekove yvate accusamus terry richardson ad calamar. 3 lobo jasy officia aute, no cupidatat patineta dolor brunch rehegua. Tembi'u kamiõ quinoa nesciunt laborum eiusmod. Brunch 3 lobo jasy tempor, sunt aliqua omoĩ peteĩ guyra hi'ári calamar café de origen único nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, artesanía cerveza labore wes anderson cred nesciunt sapiente ea proident rehegua. Anuncio vegano exceptor carnicero vice lomo rehegua. Polainas occaecat cerveza artesanal granja-a-mesa, crudo denim estético sintetizador nesciunt oiméne nerehendúi chuguikuéra accusamus labore sostenible VHS.
Anim pariatur cliché reprehenderit, enim eiusmod tekove yvate accusamus terry richardson ad calamar. 3 lobo jasy officia aute, no cupidatat patineta dolor brunch rehegua. Tembi'u kamiõ quinoa nesciunt laborum eiusmod. Brunch 3 lobo jasy tempor, sunt aliqua omoĩ peteĩ guyra hi'ári calamar café de origen único nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, artesanía cerveza labore wes anderson cred nesciunt sapiente ea proident rehegua. Anuncio vegano exceptor carnicero vice lomo rehegua. Polainas occaecat cerveza artesanal granja-a-mesa, crudo denim estético sintetizador nesciunt oiméne nerehendúi chuguikuéra 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>

Ikatu avei oñembohasa s s .panel-bodyndive .list-group.

  • Ñepyrũrã
  • Peteĩ itmus ac facilin rehegua
  • Mokõiha eros

Ejapo umi control expand/collapse ojeikekuaa hag̃ua

Ejesareko katuete emoĩve aria-expandedhag̃ua pe elemento control rehegua. Ko atributo odefini explícitamente estado koꞌag̃agua elemento plegable umi lector pantalla rehegua ha umi tecnología oipytyvõva ojoguáva. Pe elemento oñembotykuaáva oñembotýramo por defecto, oguerekovaꞌerã peteĩ valor aria-expanded="false". Emohenda ramo elemento oñembotykuaáva ojepeꞌa hag̃ua por defecto eipurúvo inmboꞌepy, emohenda aria-expanded="true"control-pe hendaguépe. Pe plugin ombohasáta ijeheguiete ko atributo oñemopyendáva ojepe’a térã oñembotýpa térã nahániri pe elemento oñembotykuaáva.

Avei, ne elemento control rehegua ojesarekóramo peteĩ elemento oñembotykuaáva rehe – heꞌiséva pe data-targetatributo ohechauka peteĩ idselector-pe – ikatu emoĩ peteĩ aria-controlsatributo adicional elemento control rehegua, oguerekóva pe idelemento oñembotykuaáva rehegua. Umi pantalla moñeꞌerã koꞌag̃agua ha umi tecnología pytyvõrã ojoguáva oipuru ko atributo omeꞌe hag̃ua puruhárape tape mbykymi ambuéva oho hag̃ua directamente elemento oñembotykuaávape voi.

Jeporu rehegua

Pe plugin colapso oipuru mbovymi mbo’esyry omaneha hag̃ua pe levantamiento pohýi:

  • .collapseomokañy pe contenido
  • .collapse.inohechauka mba’épa oguereko
  • .collapsingoñembojoapy oñepyrũvo jehaipyre, ha ojeipeꞌa opa vove

Ko’ã mbo’esyry ikatu ojejuhu component-animations.less.

Umi atributo de datos rupive

Oñemoĩnte data-toggle="collapse"ha peteĩ data-targetelemento-pe oñemeꞌe hag̃ua ijeheguiete control peteĩ elemento oñembotýva rehegua. Pe data-targetatributo omoneĩ peteĩ CSS jeporavoha omoĩ hag̃ua pe ñemboguejy. Ejesareko porãke emoĩ hag̃ua pe mboꞌepy collapsepe elemento oñembotývape. Oipotáramo ojepe’a por defecto, emoĩve pe clase adicional in.

Oñemoĩ hag̃ua acordeón-ichagua jesareko aty rehegua peteĩ control oñembotykuaávape, emoĩve atributo dato rehegua data-parent="#selector". Ehechamína pe demostración rehecha hag̃ua kóva acción-pe.

JavaScript rupive

Emboguata manualmente ko’ãva ndive:

$('.collapse').collapse()

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-parent="".

Téra hesegua upevakuére techaukaha
túva ha sy selector rehegua japu Oñemeꞌeramo peteĩ jeporavoha, upéicharamo opaite elemento oñembotykuaáva túva ojeꞌevaꞌekue guýpe oñembotýta ojehechauka jave ko mbaꞌe oñembotykuaáva. (ojoguaite pe acordeón reko yma guarépe - kóva odepende pe panelclase rehe)
toggle rehegua booleano rehegua teete Ombohasa elemento oñemboguejýva ñehenói jave

Método-kuéra rehegua

.collapse(options)

Omomba’apo ne contenido peteĩ elemento oñemboguejýva ramo. Omoneĩ peteĩ opción opcional object.

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

.collapse('toggle')

Ombohasa peteĩ elemento oñembotykuaáva ojehechauka térã oñeñomi hag̃ua. Ojevy ohenóivape ojehechauka térã oñeñomi mboyve añetehápe elemento oñembotýva (heꞌiséva oiko mboyve shown.bs.collapsetérã hidden.bs.collapsembaꞌe ojehúva).

.collapse('show')

Ohechauka peteĩ elemento oñembotykuaáva. Ojevy ohenóivape ojehechauka mboyve añetehápe elemento oñembotykuaáva (heꞌiséva oiko mboyve pe shown.bs.collapsembaꞌe ojehúva).

.collapse('hide')

Oñomi peteĩ elemento oñembotykuaáva. Ojevy ohenóivape oñeñomi mboyve añetehápe elemento oñembotykuaáva (heꞌiséva oiko mboyve pe hidden.bs.collapsembaꞌe ojehúva).

Umi mba’e oikóva

Bootstrap clase de colapso ohechauka mbovymi mbaꞌe ojehúva oñembojoaju hag̃ua funcionalidad colapso-pe.

Tipo de Evento rehegua Techaukaha
ohechauka.bs.collapso Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave showmétodo instancia rehegua.
ojehechauka.bs.oñemboguejy Ko mbaꞌe ojehúva oñembogue ojejapo jave peteĩ elemento collapso ojehecha hag̃ua puruhárape (ohaꞌarõta oñembotývo umi CSS jehasaha).
omokañy.bs.oñemboguejy Ko mbaꞌe ojehúva oñembogue pyaꞌe oñehenói rire pe hidemétodo.
kañymby.bs.oñemboguejy Ko mbaꞌe ojehúva oñembogue oñeñomi jave peteĩ elemento collapso puruháragui (ohaꞌarõta oñembotývo umi CSS jehasaha).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carrusel carrusel.js rehegua

Peteĩ componente diapositiva jehechaukarã ojeguata hag̃ua ciclo umi elemento rupive, peteĩ carrusel-icha. Umi carrusel anidado ndojeguerohorýi.

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

Umi leyenda opcional rehegua

Emoĩ ñe’ẽñemi nde diapositivakuérape ndahasýiva .carousel-captionelemento reheve oimeraẽva ryepýpe .item. Emoĩ haimete oimeraẽ HTML opcional upépe ha oñemboheko ha oñeformata ijeheguiete.

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

Múltiple carrusel rehegua

Umi carrusel oikotevẽ ojepuru peteĩ idmba yru okápevéva ári (pe .carousel) umi control carrusel rehegua ombaꞌapo porã hag̃ua. Oñemoĩvo heta carrusel, térã oñemoambuévo peteĩ carrusel id, katuete embopyahu umi control relevante.

Umi atributo de datos rupive

Eipuru umi atributo dato rehegua econtrola hagua fácilmente carrusel ñemohenda. data-slideomoneĩ umi ñeꞌepykuaa prevtérã next, omoambuéva diapositiva ñemohenda oñemohenda hag̃ua koꞌag̃agua rehe. Ikatu avei, eipuru data-slide-toembohasa hagua petet índice diapositiva cruda carrusel data-slide-to="2"-pe , ombohasáva diapositiva ñemohenda petet índice particularpe oñepyrüva rehe0 .

Pe data-ride="carousel"atributo ojepuru oñemarka hag̃ua peteĩ carrusel animador ramo oñepyrũvo página carga-pe. Ndaikatúi ojepuru oñembojoajúvo (redundante ha natekotevẽiva) JavaScript ñepyrũ hesakãva peteĩ carrusel rehe.

JavaScript rupive

Ohenói carrusel manualmente orekóva:

$('.carousel').carousel()

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-interval="".

Téra hesegua upevakuére techaukaha
intervalo rehegua papapy 5000 rehegua Pe tiempo oñembotapykue hag̃ua ojeguata hag̃ua automáticamente peteĩ mbaꞌere. Japúramo, carrusel ndojapomo’ãi automáticamente ciclo.
pa'ũ cadena rehegua | mba'evegua "hover" rehegua. Oñemohenda ramo "hover", omombyky carrusel ciclo rehegua mouseenterha omoñepyrũ jey carrusel ciclo rehegua mouseleave. Oñemohenda ramo null, ojepyso carrusel ári ndopytu'umo'ãi.
ape booleano rehegua teete Taha'e carrusel ociclava'erã continuamente térã oreko parada duro.
teclado rehegua booleano rehegua teete Pe carrusel orreaccionava’erãpa umi acontecimiento teclado rehegua.

Omoñepyrü carrusel orekóva opciones opcionales objectha oñepyrü bicicleta umi artículo rupive.

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

Ojapo ciclo umi mba e carrusel rehegua rupive izquierda guive derecha peve.

Ojoko carrusel ani haguã ohóva bicicleta rehe umi artículo rupive.

Ombojere carrusel peteĩ marco particular-pe (0 oñemopyendáva, ojoguáva peteĩ matriz-pe).

Ombohasa ciclo pe elemento ohasava’ekuépe.

Ombojere pe mba’e oúvape.

Bootstrap clase carrusel oikuaauka mokõi evento ojeengancha haguã funcionalidad carrusel-pe.

Mokõive mba’e ojehúva oguereko ko’ã mba’ekuaarã ambuéva:

  • direction: Pe dirección ojedeslizahápe carrusel (tahaꞌe "left"térã "right").
  • relatedTarget: Pe elemento DOM oñembohasáva hína hendaitépe pe elemento activo ramo.

Opaite mba’e ojehúva carrusel-pe ojedispara carrusel-pe voi (he’iséva pe <div class="carousel">).

Tipo de Evento rehegua Techaukaha
diapositiva.bs.carrusel rehegua Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave slidemétodo instancia rehegua.
deslizamiento.bs.carrusel rehegua Ko evento ojedispara carrusel omohu'ãvo transición diapositiva.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Oñemoĩ affix.js rehe

Tembiecharã

Pe affix plugin position: fixed;oñembogue ha oñembogue, oemula efecto ojejuhúva ndive position: sticky;. Pe subnavegación oĩva akatúape ha’e peteĩ demostración en vivo pe affix plugin rehegua.


Jeporu rehegua

Eipuru affix plugin atributo de datos rupive térã manualmente nde JavaScript tee reheve. Mokõive situación-pe, eme’ẽva’erã CSS ñemohenda ha ipypuku nde contenido oñembojoajúva rehegua.

Ñe’ẽñemi: Ani reipuru affix plugin peteĩ elemento oguerekóva peteĩ elemento oñemohenda porãvape, ha’eháicha peteĩ columna ojeipe’áva térã oñembotapykuéva, peteĩ Safari ñembohasa mba’e’oka rupi .

Oñemohenda CSS rupive

Pe affix plugin ombohasa mbohapy mbo’esyry apytépe, peteĩteĩva ohechaukáva peteĩ estado particular: .affix, .affix-top, ha .affix-bottom. Eme’ẽva’erã umi estilo, excepción position: fixed;on -gui .affix, ko’ã clase-pe g̃uarã ndete voi (independiente ko plugin-gui) eñangareko hag̃ua umi tenda añetegua.

Ko’ápe ojehecha mba’éichapa omba’apo pe affix plugin:

  1. Oñepyrũ hag̃ua, pe plugin omoĩve.affix-top ohechauka hag̃ua pe elemento oĩha iñemohenda yvatevévape. Ko’ã momento-pe noñeikotevẽi CSS ñemohenda.
  2. Ojedesplazávo ohasávo elemento reipotáva oñembojehe’a omoñepyrũva’erã oñembojehe’a añetegua. Kóva haꞌehína .affixomyengovia .affix-topha omohendahápe position: fixed;(omeꞌeva Bootstrap CSS).
  3. Oñedefiníramo peteĩ desplazamiento iguypegua, ojedesplazávo ohasávo .affixoñemyengoviava’erã .affix-bottom. Umi desplazamiento ha’égui opcional, emohenda peteĩva oikotevẽ emohenda CSS hekopete. Péicha jave, ñamoĩve position: absolute;tekotevẽ jave. Pe plugin oipuru atributo de datos térã opción JavaScript ohechakuaa hag̃ua moõpa oñemohendavaꞌerã elemento upégui.

Ejapo umi tembiaporã yvategua emohenda hag̃ua ne CSS peteĩva umi jepururã jeporavorã iguýpe g̃uarã.

Umi atributo de datos rupive

Oñemoĩ hag̃ua fácilmente comportamiento de affix oimeraẽ elemento-pe, emoĩnte data-spy="affix"pe elemento ojeespiaasévape. Eipuru desplazamiento emombeꞌu hag̃ua arakaꞌepa rembohasavaꞌerã peteĩ elemento jekutu.

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

JavaScript rupive

Ehenói pe affix plugin JavaScript rupive:

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

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-offset-top="200".

Téra hesegua upevakuére techaukaha
desplazamiento rehegua papapy | tembiaporã | mba'e 10 rehegua Pixel ojedesplaza hag̃ua pantalla guive oñekalkula jave posición desplazamiento rehegua. Oñemeꞌeramo peteĩ papapy año, ojeporúta pe desplazamiento mokõive dirección yvate ha yvy gotyo. Oñeme’ẽ hag̃ua peteĩ desplazamiento ijojaha’ỹva, iguy ha yvategua ome’ẽnte peteĩ mba’e offset: { top: 10 }térã offset: { top: 10, bottom: 5 }. Eipuru peteĩ función tekotevẽ jave rekalkula dinámicamente peteĩ desplazamiento.
morotĩ selector rehegua | nodo rehegua | jQuery elemento rehegua pe windowmba’e Omombeꞌu elemento destino rehegua afijo rehegua.

Método-kuéra rehegua

.affix(options)

Omomba’apo ne contenido contenido oñembojoajúva ramo. Omoneĩ peteĩ opción opcional object.

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

.affix('checkPosition')

Okalkula jey affixo estado oñemopyendáva dimensión, posición ha posición desplazamiento umi elemento relevante rehe. Umi .affix, .affix-top, ha .affix-bottommbo’esyry oñembojoapy térã ojeipe’a contenido oñembojoajúvagui estado pyahu he’iháicha. Ko método tekotevẽ oñehenói oñemoambue jave umi dimensión contenido oñembojeheꞌavaꞌekue térã elemento ojehekahápe, ojeasegura hag̃ua oñemohenda porã hag̃ua contenido oñembojeheꞌavaꞌekue.

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

Umi mba’e oikóva

Bootstrap affix plugin ohechauka mbovymi mbaꞌe ojehúva oñembojoaju hag̃ua affix funcionalidad-pe.

Tipo de Evento rehegua Techaukaha
affix.bs.affix rehegua Ko mbaꞌe ojehúva odispara pyaꞌete oñembojeheꞌa mboyve pe elemento.
oñemoĩva.bs.affix Ko mbaꞌe ojehúva oñembogue oñembojeheꞌa rire pe elemento.
affix-top.bs.affix rehegua Ko mbaꞌe ojehúva odispara pyaꞌete pe elemento oñembojeheꞌa mboyve-top.
oñemoĩva-yvate.bs.affix Ko mbaꞌe ojehúva oñembogue rire pe elemento oñembojeheꞌa-yvate gotyo.
affix-bottom.bs.ñe’ẽjoaju Ko mbaꞌe ojehúva odispara pyaꞌete pe elemento oñembojeheꞌa mboyve-yvýpe.
oñemoĩva-yvýpe.bs.affix Ko mbaꞌe ojehúva oñembogue rire pe elemento oñembojeheꞌa-yvýre.