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

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 de datos 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')

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éicha ojehú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
})

Desinfectante rehegua

Tooltips ha Popovers oipuru ore desinfectante incorporado omopotĩ hag̃ua opción omoneĩva HTML.

Pe whiteListmba’ekuaarã tee ha’e ko’ãva:

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

Emoĩséramo mba’ekuaarã pyahu ko ñepyrũrãme whiteListikatu rejapo ko’ã mba’e:

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

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

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

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

Ojedesviaséramo ore desinfectante reiporusevégui peteĩ biblioteca dedicada, techapyrã DOMPurify , rejapova’erã ko’ã mba’e:

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

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

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.

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

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>

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" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

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

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

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

Oñemoambuévo contenido modal oñemopyendáva botón disparador rehe

¿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, .

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

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

Método-kuéra rehegua

.modal(options)

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

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

.modal('toggle')

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

.modal('show')

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

.modal('hide')

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

.modal('handleUpdate')

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

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

Umi mba’e’oka dropdown.js

Tembiecharã

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

Jeporu rehegua

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

Opciones rehegua

Avave

Método-kuéra rehegua

$().dropdown('toggle')

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

Umi mba’e oikóva

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.

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

Jeporu rehegua

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

Emoĩ hag̃ua scrollspy jeiko pya’e nde barra yvategua jeguatarãme, emoĩve data-spy="scroll"elemento reespiaasévape (jepiveguaichavéva kóva ha’éta pe <body>). Upéi emoĩve data-targetatributo ID térã clase elemento túva reheve oimeraẽ .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="".

Umi mba’e oikóva

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

Jeporu rehegua

Emboguata umi vore vore’i rehegua 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 contenido mbaꞌeryru. 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.

$('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; Tembipuru’i ñ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 ñeñongaturã título 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:

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>

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

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

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, pe...shown.bs.tooltip té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. Tembipururã ñe’ẽmondo oipurúva delegación (ojejapóva ojeporúvo pe ...selector ) ndaikatúi oñehundi peteĩteĩ umi elemento disparador ñemoñare rehe .

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

Umi mba’e oikóva

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

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

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

Tembiecharã

Popover estático rehegua

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

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 ojapóvape puruhára.

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

Método-kuéra rehegua

$().popover(options)

Omoñepyrũ umi popovers 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 pe ohenóivape oñeñomi mboyve añetehápe pe popover (he’iséva pe...hidden.bs.popover mbaꞌ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

$('#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. Oiméramo pe .fadeha.in oĩ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.

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

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.

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

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

Peteĩ toggle rehegua

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

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

Ñe’ẽñemi / Radio

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

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

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

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 marandu jehaipyre estado oñembohekopyrévape.

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

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

Oñemboty collapse.js

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

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.

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

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

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 rehe oñemeꞌe hag̃ua ijeheguiete control peteĩ elemento oñembotykuaá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="".

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.

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

Tembiecharã

Mboyvegua Ag̃ui

<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ĩve ñ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.

Peteĩha etiqueta diapositiva rehegua

Nulla vitae elit libero, peteĩ ñe’ẽpoty augue mollis interdum rehegua.

Mokõiha etiqueta diapositiva rehegua

Lorem ipsum dolor oguapy amet, consectetur adipiscing elit.

Mbohapyha etiqueta diapositiva rehegua

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Mboyvegua Ag̃ui

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

Jeporu rehegua

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ꞌág̃agua ndive. Ikatu avei, eipuru data-slide-toembohasa hagua petet índice diapositiva cruda carrusel-pe data-slide-to="2", ombohasáva diapositiva ñemohenda petet índice particularpe oñepyrüva 0.

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

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

Método-kuéra rehegua

.carousel(options)

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

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

.carousel('cycle')

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

.carousel('pause')

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

.carousel(number)

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

.carousel('prev')

Ombohasa ciclo pe elemento ohasava’ekuépe.

.carousel('next')

Ombojere pe mba’e oúvape.

Umi mba’e oikóva

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

$('#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. Péva ha’e moõpa .affixomyengovia .affix-topha omoĩ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".

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.