Visió general

Individual o compilat

Els connectors es poden incloure individualment (utilitzant els *.jsfitxers individuals de Bootstrap) o tots alhora (utilitzant bootstrap.jso minificat bootstrap.min.js).

Utilitzant el JavaScript compilat

Tots dos bootstrap.jsi bootstrap.min.jscontenen tots els connectors en un sol fitxer. Inclou només un.

Dependències del connector

Alguns connectors i components CSS depenen d'altres connectors. Si incloeu connectors individualment, assegureu-vos de comprovar aquestes dependències als documents. Tingueu en compte també que tots els connectors depenen de jQuery (això significa que jQuery s'ha d'incloure abans dels fitxers de connectors). Consulteu el nostrebower.json per veure quines versions de jQuery són compatibles.

Atributs de dades

Podeu utilitzar tots els connectors Bootstrap únicament a través de l'API de marcatge sense escriure una sola línia de JavaScript. Aquesta és l'API de primera classe de Bootstrap i hauria de ser la vostra primera consideració quan feu servir un connector.

Dit això, en algunes situacions pot ser desitjable desactivar aquesta funcionalitat. Per tant, també oferim la possibilitat de desactivar l'API d'atribut de dades desvinculant tots els esdeveniments del document amb espai de noms data-api. Això es veu així:

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

Alternativament, per orientar un connector específic, només cal incloure el nom del connector com a espai de noms juntament amb l'espai de noms de l'api de dades com aquest:

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

Només un connector per element mitjançant atributs de dades

No utilitzeu atributs de dades de diversos connectors al mateix element. Per exemple, un botó no pot tenir una informació sobre eines i alternar un modal. Per aconseguir-ho, utilitzeu un element d'embolcall.

API programàtica

També creiem que hauríeu de poder utilitzar tots els connectors Bootstrap només mitjançant l'API de JavaScript. Totes les API públiques són mètodes únics que es poden encadenar i retornen la col·lecció sobre la qual s'ha actuat.

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

Tots els mètodes haurien d'acceptar un objecte d'opcions opcionals, una cadena que tingui com a objectiu un mètode concret o res (que iniciï un connector amb un comportament predeterminat):

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

Cada connector també exposa el seu constructor en brut en una Constructorpropietat: $.fn.popover.Constructor. Si voleu obtenir una instància de connector concreta, recupera-la directament d'un element: $('[rel="popover"]').data('popover').

Configuració per defecte

Podeu canviar la configuració predeterminada d'un connector modificant l' Constructor.DEFAULTSobjecte del connector:

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

Cap conflicte

De vegades és necessari utilitzar connectors Bootstrap amb altres marcs d'interfície d'usuari. En aquestes circumstàncies, ocasionalment es poden produir col·lisions d'espais de noms. Si això passa, podeu trucar .noConflictal connector del qual voleu revertir el valor.

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

Esdeveniments

Bootstrap ofereix esdeveniments personalitzats per a les accions úniques de la majoria dels connectors. Generalment, aquests es presenten en una forma d'infinitiu i de participi passat, on l'infinitiu (p. ex. show) s'activa a l'inici d'un esdeveniment i la seva forma de participi passat (p. ex. shown) s'activa en finalitzar una acció.

A partir de la 3.0.0, tots els esdeveniments Bootstrap tenen espai de noms.

Tots els esdeveniments infinitius proporcionen preventDefaultfuncionalitat. Això proporciona la possibilitat d'aturar l'execució d'una acció abans que comenci.

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

Números de versió

Es pot accedir a la versió de cadascun dels connectors jQuery de Bootstrap mitjançant la VERSIONpropietat del constructor del connector. Per exemple, per al connector tooltip:

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

No hi ha alternatives especials quan JavaScript està desactivat

Els connectors d'Bootstrap no cauen especialment amb gràcia quan JavaScript està desactivat. Si t'importa l'experiència de l'usuari en aquest cas, fes servir <noscript>per explicar la situació (i com tornar a activar JavaScript) als teus usuaris i/o afegir les teves pròpies alternatives personalitzades.

Biblioteques de tercers

Bootstrap no admet oficialment biblioteques JavaScript de tercers com Prototype o jQuery UI. Malgrat .noConflictels esdeveniments amb espai de noms, és possible que hi hagi problemes de compatibilitat que hàgiu de solucionar pel vostre compte.

Transicions transition.js

Sobre les transicions

Per obtenir efectes de transició senzills, inclou transition.jsuna vegada juntament amb els altres fitxers JS. Si utilitzeu el compilat (o minificat) bootstrap.js, no cal incloure-ho; ja hi és.

Què hi ha dins

Transition.js és un ajudant bàsic per a transitionEndesdeveniments, així com un emulador de transició CSS. Els altres connectors l'utilitzen per comprovar la compatibilitat amb la transició CSS ​​i per capturar les transicions penjades.

Desactivació de transicions

Les transicions es poden desactivar globalment utilitzant el fragment de JavaScript següent, que ha de venir després que s'hagi carregat transition.js(o bootstrap.jso , segons sigui el cas):bootstrap.min.js

$.support.transition = false

Modals modal.js

Els modals són indicacions de diàleg simplificades, però flexibles amb la funcionalitat mínima necessària i els valors predeterminats intel·ligents.

No s'admeten múltiples modalitats obertes

Assegureu-vos de no obrir un modal mentre un altre encara sigui visible. Mostrar més d'un modal alhora requereix un codi personalitzat.

Col·locació de marcatge modal

Intenteu sempre col·locar el codi HTML d'un modal en una posició de primer nivell del vostre document per evitar que altres components afectin l'aparença i/o la funcionalitat del modal.

Advertències dels dispositius mòbils

Hi ha algunes advertències sobre l'ús de modals en dispositius mòbils. Consulteu els nostres documents d'assistència per al navegador per obtenir més informació.

A causa de com HTML5 defineix la seva semàntica, l' autofocusatribut HTML no té cap efecte en els modals d'Bootstrap. Per aconseguir el mateix efecte, utilitzeu JavaScript personalitzat:

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

Exemples

Exemple estàtic

Un modal representat amb la capçalera, el cos i el conjunt d'accions al peu de pàgina.

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

Demo en directe

Commuteu un modal mitjançant JavaScript fent clic al botó següent. Es lliscarà cap avall i s'esvaeix des de la part superior de la pàgina.

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

Fer accessibles els modals

Assegureu-vos d'afegir role="dialog"i aria-labelledby="...", fent referència al títol modal, a .modal, i role="document"al .modal-dialogmateix.

A més, podeu donar una descripció del vostre diàleg modal amb aria-describedbyon .modal.

Inserció de vídeos de YouTube

La inserció de vídeos de YouTube en modalitats requereix JavaScript addicional que no estigui a Bootstrap per aturar automàticament la reproducció i molt més. Consulteu aquesta útil publicació de Stack Overflow per obtenir més informació.

Mides opcionals

Els modals tenen dues mides opcionals, disponibles mitjançant classes modificadores per col·locar-les en un fitxer .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>

Elimina l'animació

Per als modals que simplement apareixen en lloc de desaparèixer per veure's, elimineu la .fadeclasse del vostre marcatge modal.

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

Ús del sistema de graella

Per aprofitar el sistema de quadrícula Bootstrap dins d'un modal, només cal que niu .rows dins .modal-bodyi després utilitzeu les classes normals del sistema de quadrícula.

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

Tens un munt de botons que activen tots el mateix modal, només amb continguts lleugerament diferents? Utilitzeu event.relatedTargeti atributs HTMLdata-* (possiblement mitjançant jQuery ) per variar el contingut del modal en funció del botó que s'hagi fet clic. Consulteu els documents d'esdeveniments modals per obtenir més informació sobre relatedTarget,

...més botons...
<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)
})

Ús

El connector modal alterna el contingut ocult a demanda, mitjançant atributs de dades o JavaScript. També s'afegeix .modal-openal <body>comportament de desplaçament predeterminat per anul·lar i genera una .modal-backdropàrea de clic per descartar els modals mostrats quan es fa clic fora del modal.

Mitjançant atributs de dades

Activa un modal sense escriure JavaScript. Estableix data-toggle="modal"en un element del controlador, com un botó, juntament amb un data-target="#foo"o href="#foo"per orientar un modal específic per alternar.

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

Mitjançant JavaScript

Truqueu a un modal amb id myModalamb una sola línia de JavaScript:

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

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-backdrop="".

Nom tipus per defecte descripció
teló de fons booleà o la cadena'static' veritat Inclou un element de fons modal. Alternativament, especifiqueu staticun teló de fons que no tanqui el modal en fer clic.
teclat booleà veritat Tanca el modal quan es prem la tecla d'escapament
espectacle booleà veritat Mostra el modal quan s'inicialitza.
remot Camí fals

Aquesta opció està obsoleta des de la v3.3.0 i s'ha eliminat a la v4. En lloc d'això, recomanem que utilitzeu una plantilla del costat del client o un marc d'enllaç de dades, o que truqueu vosaltres mateixos a jQuery.load .

Si es proporciona un URL remot, el contingut es carregarà una vegada mitjançant el mètode de jQuery loadi s'injectarà al .modal-contentdiv. Si utilitzeu l'api de dades, també podeu utilitzar l' hrefatribut per especificar la font remota. A continuació es mostra un exemple d'això:

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

Mètodes

Activa el teu contingut com a modal. Accepta opcions opcionals object.

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

Commuta manualment un modal. Torna a la persona que truca abans que el modal s'hagi mostrat o amagat (és a dir, abans que es produeixi l'esdeveniment shown.bs.modalo ).hidden.bs.modal

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

Obre manualment un modal. Torna a la persona que truca abans que s'hagi mostrat realment el modal (és a dir, abans shown.bs.modalque es produeixi l'esdeveniment).

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

Amaga manualment un modal. Torna a la persona que truca abans que el modal s'hagi amagat (és a dir, abans hidden.bs.modalque es produeixi l'esdeveniment).

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

Reajusta el posicionament del modal per contrarestar una barra de desplaçament en cas que n'hagués d'aparèixer, cosa que faria que el modal salti cap a l'esquerra.

Només cal quan l'alçada del modal canvia mentre està obert.

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

Esdeveniments

La classe modal de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat modal.

Tots els esdeveniments modals es desencadenen al propi modal (és a dir, al <div class="modal">).

Tipus d'esdeveniment Descripció
show.bs.modal Aquest esdeveniment s'activa immediatament quan showes crida al mètode d'instància. Si és causat per un clic, l'element clicat està disponible com a relatedTargetpropietat de l'esdeveniment.
mostrat.bs.modal Aquest esdeveniment s'activa quan el modal s'ha fet visible per a l'usuari (esperarà que finalitzin les transicions CSS). Si és causat per un clic, l'element clicat està disponible com a relatedTargetpropietat de l'esdeveniment.
ocultar.bs.modal Aquest esdeveniment s'activa immediatament quan hides'ha cridat el mètode d'instància.
hidden.bs.modal Aquest esdeveniment s'activa quan el modal s'ha acabat d'ocultar a l'usuari (esperarà que finalitzin les transicions CSS).
carregat.bs.modal Aquest esdeveniment s'activa quan el modal ha carregat contingut mitjançant l' remoteopció.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Menú desplegable dropdown.js

Afegiu menús desplegables a gairebé qualsevol cosa amb aquest connector senzill, incloses la barra de navegació, les pestanyes i les píndoles.

Dins d'una barra de navegació

Dins de pastilles

Mitjançant atributs de dades o JavaScript, el connector desplegable alterna el contingut ocult (menús desplegables) canviant la .openclasse a l'element de la llista principal.

Als dispositius mòbils, l'obertura d'un menú desplegable afegeix una .dropdown-backdropàrea de toc per tancar els menús desplegables quan toqueu fora del menú, un requisit per a un suport adequat per a iOS. Això vol dir que canviar d'un menú desplegable obert a un menú desplegable diferent requereix un toc addicional al mòbil.

Nota: l' data-toggle="dropdown"atribut es basa per tancar menús desplegables a nivell d'aplicació, per la qual cosa és una bona idea utilitzar-lo sempre.

Mitjançant atributs de dades

Afegeix data-toggle="dropdown"a un enllaç o un botó per canviar un menú 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>

Per mantenir intactes els URL amb els botons d'enllaç, utilitzeu l' data-targetatribut en lloc de 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>

Mitjançant JavaScript

Truqueu als menús desplegables mitjançant JavaScript:

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

data-toggle="dropdown"encara requerit

Independentment de si truqueu al vostre menú desplegable mitjançant JavaScript o utilitzeu l'api de dades, data-toggle="dropdown"sempre cal que estigui present a l'element activador del menú desplegable.

Cap

Activa o desactiva el menú desplegable d'una barra de navegació determinada o de la navegació per pestanyes.

Tots els esdeveniments desplegables es desencadenen a l' .dropdown-menuelement pare de '.

Tots els esdeveniments desplegables tenen una relatedTargetpropietat, el valor de la qual és l'element d'ancoratge alternatiu.

Tipus d'esdeveniment Descripció
desplegable.show.bs Aquest esdeveniment s'activa immediatament quan es crida al mètode d'instància de mostra.
desplegable.bs.mostrat Aquest esdeveniment s'activa quan el desplegable s'ha fet visible per a l'usuari (esperarà que finalitzin les transicions CSS).
llista desplegable hide.bs Aquest esdeveniment s'activa immediatament quan s'ha cridat el mètode d'instància oculta.
desplegable.bs.ocult Aquest esdeveniment s'activa quan el menú desplegable s'ha acabat d'ocultar a l'usuari (esperarà que finalitzin les transicions CSS).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Exemple a la barra de navegació

El connector ScrollSpy serveix per actualitzar automàticament els objectius de navegació en funció de la posició del desplaçament. Desplaceu-vos per l'àrea de sota de la barra de navegació i observeu el canvi de classe activa. També es destacaran els subelements desplegables.

@greix

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi abans que s'esgotin qui. Tumblr drets de la bicicleta de la granja a la taula qualsevol. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 llop lluna irure. Suèter Cosby pantalons curts de texans lomo, dessuadora amb caputxa de williamsburg mínim qui probablement no n'has sentit a parlar i cardigan trust fund culpa biodièsel wes anderson estètica. Nihil tatuat acusamus, cred ironia biodièsel keffiyeh artesà ullamco consequat.

@mdo

Veniam marfa bigoti monopatí, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Camió de menjar amb jersei cosby tatuat, vinil quis no freegan de mcsweeney. Lo-fi wes anderson +1 sartorial. Carles no exercici estètic quis gentrify. Brooklyn adipisicing cervesa artesana vice keytar desert.

un

Occaecat commodo aliqua delectus. Fap cervesa artesana deserunt monopatí ea. Lomo bicycle rights adipisicing banh mi, velit ea are next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS és adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, delectus sostenible consectetur fanny pack iphone.

dos

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

three

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

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica clixé ironia, thundercats probablement no n'hagueu sentit a parlar consequat hoodie sense gluten lo-fi fap aliquip. Treballa el lloc abans que s'esgotin, terry richardson proident brunch no s'ha d'aconseguir un jersei cosby igual que un artesà helvètic. Cardigan cervesa artesana seitan readymade velit. VHS cambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Ús

Requereix Bootstrap nav

Actualment, Scrollspy requereix l'ús d'un component de navegació Bootstrap per ressaltar correctament els enllaços actius.

Es requereixen objectius d'identificació resolubles

Els enllaços de la barra de navegació han de tenir objectius d'identificació resolubles. Per exemple, un <a href="#home">home</a>ha de correspondre a alguna cosa al DOM com <div id="home"></div>.

S'han :visibleignorat els elements no objectiu

Els elements de destinació que no siguin :visiblesegons jQuery s'ignoraran i els seus elements de navegació corresponents no es ressaltaran mai.

Requereix un posicionament relatiu

Independentment del mètode d'implementació, scrollspy requereix l'ús de position: relative;l'element que esteu espiant. En la majoria dels casos aquest és el <body>. Quan feu una exploració de desplaçaments en elements diferents de <body>, assegureu-vos de tenir un heightconjunt i overflow-y: scroll;aplicar.

Mitjançant atributs de dades

Per afegir fàcilment un comportament scrollspy a la vostra navegació de la barra superior, afegiu data-spy="scroll"-lo a l'element que voleu espiar (normalment seria el <body>). A continuació, afegiu l' data-targetatribut amb l'ID o la classe de l'element pare de qualsevol .navcomponent Bootstrap.

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Mitjançant JavaScript

Després d'afegir position: relative;el vostre CSS, truqueu al scrollspy mitjançant JavaScript:

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

Mètodes

.scrollspy('refresh')

Quan utilitzeu scrollspy juntament amb l'addició o eliminació d'elements del DOM, haureu de cridar el mètode d'actualització de la següent manera:

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

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-offset="".

Nom tipus per defecte descripció
compensació nombre 10 Píxels a compensar des de la part superior quan es calcula la posició del desplaçament.

Esdeveniments

Tipus d'esdeveniment Descripció
activate.bs.scrollspy Aquest esdeveniment s'activa cada vegada que el scrollspy activa un element nou.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Pestanyes alternables tab.js

Pestanyes d'exemple

Afegiu una funcionalitat de pestanyes ràpida i dinàmica per passar pels panells de contingut local, fins i tot mitjançant menús desplegables. Les pestanyes imbricades no s'admeten.

Denim cru, probablement no has sentit parlar d'ells, Austin. Nesciunt tofu stumptown aliqua, neteja mestre de sintetitzadors retro. Mustache cliche tempor, williamsburg carles vegan helvetica. Rerehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher 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.

Amplia la navegació per pestanyes

Aquest connector amplia el component de navegació amb pestanyes per afegir àrees amb pestanyes.

Ús

Activa les pestanyes amb tabulació mitjançant JavaScript (cada pestanya s'ha d'activar individualment):

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

Podeu activar pestanyes individuals de diverses maneres:

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

Marcatge

Podeu activar una navegació de pestanyes o píndoles sense escriure cap JavaScript simplement especificant data-toggle="tab"o data-toggle="pill"en un element. Si afegiu les classes navi a la pestanya s'aplicarà l' estil de la pestanya Bootstrap , mentre que si afegiu les classes i s'aplicarà l' estil de la pastilla .nav-tabsulnavnav-pills

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Efecte esvaït

Per fer que les pestanyes s'esvaeixin, afegiu .fade-les a cadascuna .tab-pane. El primer panell de pestanyes també ha .inde fer visible el contingut inicial.

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

$().tab

Activa un element de pestanya i un contenidor. La pestanya hauria de tenir un node de contenidor data-targeto una hreforientació al DOM. En els exemples anteriors, les pestanyes són la <a>s amb data-toggle="tab"atributs.

.tab('show')

Selecciona la pestanya donada i mostra el seu contingut associat. Qualsevol altra pestanya que s'hagi seleccionat anteriorment es desactiva i el seu contingut associat s'amaga. Torna a la persona que truca abans que s'hagi mostrat realment el panell de pestanyes (és a dir, abans shown.bs.tabque es produeixi l'esdeveniment).

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

Esdeveniments

Quan es mostra una pestanya nova, els esdeveniments es desencadenen en l'ordre següent:

  1. hide.bs.tab(a la pestanya activa actual)
  2. show.bs.tab(a la pestanya per mostrar)
  3. hidden.bs.tab(a la pestanya activa anterior, la mateixa que per a l' hide.bs.tabesdeveniment)
  4. shown.bs.tab(a la pestanya recentment activa que s'acaba de mostrar, la mateixa que per a l' show.bs.tabesdeveniment)

Si no hi havia cap pestanya activa, els esdeveniments hide.bs.tabi hidden.bs.tabno s'activaran.

Tipus d'esdeveniment Descripció
mostrar.bs.tab Aquest esdeveniment s'activa a la pestanya mostra, però abans que s'hagi mostrat la nova pestanya. Utilitzeu event.targeti event.relatedTargetper orientar la pestanya activa i la pestanya activa anterior (si està disponible) respectivament.
pestanya.bs.mostrada Aquest esdeveniment s'activa a la mostra de pestanyes després que s'hagi mostrat una pestanya. Utilitzeu event.targeti event.relatedTargetper orientar la pestanya activa i la pestanya activa anterior (si està disponible) respectivament.
ocultar.bs.tab Aquest esdeveniment s'activa quan s'ha de mostrar una pestanya nova (i, per tant, s'ha d'amagar la pestanya activa anterior). Utilitzeu event.targeti event.relatedTargetper orientar la pestanya activa actual i la nova pestanya que s'activarà aviat, respectivament.
hidden.bs.tab Aquest esdeveniment s'activa després que es mostri una pestanya nova (i, per tant, s'amaga la pestanya activa anterior). Utilitzeu event.targeti event.relatedTargetper orientar la pestanya activa anterior i la nova pestanya activa, respectivament.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

Inspirat en l'excel·lent connector jQuery.tipsy escrit per Jason Frame; Els consells sobre eines són una versió actualitzada, que no es basen en imatges, utilitza CSS3 per a animacions i atributs de dades per a l'emmagatzematge de títols locals.

Els consells sobre eines amb títols de longitud zero no es mostren mai.

Exemples

Passeu el cursor per sobre dels enllaços següents per veure els consells sobre eines:

Pantalons ajustats keffiyeh del següent nivell , probablement no n'hagueu sentit a parlar. Photo Booth barba denim cru tipografia bossa de missatgeria vegana stumptown. Seitan de granja a taula, la roba americana de quinoa sostenible de 8 bits fixie de mcsweeney té un cambray de vinil terry richardson. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodièsel williamsburg marfa, quatre loko mcsweeney's cleanse vegan chambray. Un artesà realment irònic , sigui quin sigui el keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim cafè d'origen únic viral.

Informació sobre eines estàtica

Hi ha quatre opcions disponibles: superior, dreta, inferior i alineada a l'esquerra.

Quatre direccions

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

Funcionalitat d'activació

Per motius de rendiment, les apis de dades d'informació sobre eines i popover estan activades, és a dir, les heu d'iniciar vosaltres mateixos .

Una manera d'iniciar tots els consells d'eines d'una pàgina seria seleccionar-los pel seu data-toggleatribut:

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

Ús

El connector d'informació sobre eines genera contingut i marques sota demanda i, per defecte, col·loca els consells sobre eines després del seu element activador.

Activa la informació sobre eines mitjançant JavaScript:

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

Marcatge

L'etiquetatge necessari per a una informació sobre eines és només un dataatribut i titlea l'element HTML voleu tenir una informació sobre eines. El marcatge generat d'una informació sobre eines és bastant senzill, tot i que requereix una posició (per defecte, establerta toppel connector).

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

Enllaços de diverses línies

De vegades, voleu afegir una informació sobre eines a un hiperenllaç que embolica diverses línies. El comportament predeterminat del complement d'informació eines és centrar-lo horitzontalment i verticalment. Afegiu white-space: nowrap;-hi els vostres ancoratges per evitar-ho.

Els suggeriments sobre els grups de botons, els grups d'entrada i les taules requereixen una configuració especial

Quan utilitzeu informació sobre eines sobre elements dins d'un .btn-groupo d'un .input-group, o sobre elements relacionats amb la taula ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), haureu d'especificar l'opció container: 'body'(documentada a continuació) per evitar efectes secundaris no desitjats (com ara que l'element creixi i/o creixi). o perdent les seves cantonades arrodonides quan s'activa la informació sobre eines).

No intenteu mostrar suggeriments sobre elements ocults

Invocar $(...).tooltip('show')quan es troba l'element objectiu display: none;farà que la informació sobre eines es col·loqui incorrectament.

Consells d'eines accessibles per a usuaris de teclat i tecnologia d'assistència

Per als usuaris que naveguen amb un teclat i, en particular, els usuaris de tecnologies d'assistència, només hauríeu d'afegir informació sobre eines als elements enfocats al teclat, com ara enllaços, controls de formulari o qualsevol element arbitrari amb un tabindex="0"atribut.

Els suggeriments sobre elements desactivats requereixen elements d'embolcall

Per afegir una informació sobre eines a un element disabledo .disabled, col·loqueu l'element dins de a <div>i apliqueu-hi la informació sobre eines <div>.

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-animation="".

Nom Tipus Per defecte Descripció
animació booleà veritat Apliqueu una transició d'esvaïment CSS a la informació sobre eines
contenidor cadena | fals fals

Afegeix la informació sobre eines a un element específic. Exemple: container: 'body'. Aquesta opció és especialment útil perquè us permet situar la informació sobre eines en el flux del document a prop de l'element activador, cosa que evitarà que la informació sobre eines surti de l'element activador durant un canvi de mida de la finestra.

retard nombre | objecte 0

Retard per mostrar i amagar la informació sobre eines (ms): no s'aplica al tipus d'activador manual

Si es proporciona un número, s'aplica un retard tant per ocultar com per mostrar

L'estructura de l'objecte és:delay: { "show": 500, "hide": 100 }

html booleà fals Inseriu HTML a la informació sobre eines. Si és fals, texts'utilitzarà el mètode de jQuery per inserir contingut al DOM. Utilitzeu text si us preocupen els atacs XSS.
col·locació cadena | funció 'superior'

Com posicionar la informació sobre eines - superior | baix | esquerra | dreta | automàtic.
Quan s'especifica "automàtic", reorientarà dinàmicament la informació sobre eines. Per exemple, si la ubicació és "esquerra automàtica", la informació sobre eines es mostrarà a l'esquerra quan sigui possible, en cas contrari es mostrarà a la dreta.

Quan s'utilitza una funció per determinar la ubicació, es crida amb el node DOM d'informació eines com a primer argument i el node DOM de l'element activador com a segon. El thiscontext s'estableix a la instància d'informació eines.

selector corda fals Si es proporciona un selector, els objectes d'informació eines es delegaran als objectius especificats. A la pràctica, això s'utilitza per permetre que el contingut HTML dinàmic s'afegeixi informació sobre eines. Vegeu això i un exemple informatiu .
plantilla corda '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML base que s'ha d'utilitzar en crear la informació sobre eines.

La informació sobre eines titles'injectarà al fitxer .tooltip-inner.

.tooltip-arrowes convertirà en la fletxa de la informació sobre eines.

L'element d'embolcall més extern hauria de tenir la .tooltipclasse.

títol cadena | funció ''

Valor del títol predeterminat si titlel'atribut no és present.

Si es dóna una funció, es cridarà amb la seva thisreferència establerta a l'element al qual s'adjunta la informació sobre eines.

disparador corda 'enfocament al ratolí' Com s'activa la informació sobre eines - feu clic a | flotar | focus | manual. Podeu passar múltiples activadors; separeu-los amb un espai. manualno es pot combinar amb cap altre activador.
mirador cadena | objecte | funció { selector: 'cos', farciment: 0 }

Manté la informació sobre eines dins dels límits d'aquest element. Exemple: viewport: '#viewport'o{ "selector": "#viewport", "padding": 0 }

Si es dóna una funció, es crida amb l'element desencadenant node DOM com a únic argument. El thiscontext s'estableix a la instància d'informació eines.

Atributs de dades per a informació sobre eines individuals

Les opcions per als consells d'eines individuals es poden especificar alternativament mitjançant l'ús d'atributs de dades, tal com s'ha explicat anteriorment.

Mètodes

$().tooltip(options)

Adjunta un controlador d'informació eines a una col·lecció d'elements.

.tooltip('show')

Revela la informació sobre eines d'un element. Torna a la persona que truca abans que s'hagi mostrat realment la informació sobre eines (és a dir, abans shown.bs.tooltipque es produeixi l'esdeveniment). Això es considera una activació "manual" de la informació sobre eines. Els consells sobre eines amb títols de longitud zero no es mostren mai.

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

.tooltip('hide')

Amaga la informació sobre eines d'un element. Torna a la persona que truca abans que la informació sobre eines s'hagi amagat (és a dir, abans hidden.bs.tooltipque es produeixi l'esdeveniment). Això es considera una activació "manual" de la informació sobre eines.

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

.tooltip('toggle')

Commuta la informació sobre eines d'un element. Torna a la persona que truca abans que s'hagi mostrat o amagat la informació sobre eines (és a dir, abans que es produeixi l'esdeveniment shown.bs.tooltipo ). hidden.bs.tooltipAixò es considera una activació "manual" de la informació sobre eines.

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

.tooltip('destroy')

Amaga i destrueix la informació sobre eines d'un element. Els consells sobre eines que utilitzen la delegació (que es creen amb l' selectoropció ) no es poden destruir individualment en elements activadors descendents.

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

Esdeveniments

Tipus d'esdeveniment Descripció
mostrar.bs.informació-eina Aquest esdeveniment s'activa immediatament quan showes crida al mètode d'instància.
indicació.bs.mostrada Aquest esdeveniment s'activa quan la informació sobre eines s'ha fet visible per a l'usuari (esperarà que finalitzin les transicions CSS).
ocultar.bs.tooltip Aquest esdeveniment s'activa immediatament quan hides'ha cridat el mètode d'instància.
hidden.bs.tooltip Aquest esdeveniment s'activa quan la informació sobre eines s'ha acabat d'ocultar per a l'usuari (esperarà que finalitzin les transicions CSS).
informació.bs.inserida Aquest esdeveniment s'activa després de l' show.bs.tooltipesdeveniment quan s'ha afegit la plantilla d'informació eines al DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Afegiu petites superposicions de contingut, com les de l'iPad, a qualsevol element per allotjar informació secundària.

Les finestres emergents tant el títol com el contingut són de longitud zero mai es mostren.

Dependència del connector

Els popovers requereixen que el connector d'informació eines s'inclogui a la vostra versió de Bootstrap.

Funcionalitat d'activació

Per motius de rendiment, les apis de dades d'informació sobre eines i popover estan activades, és a dir, les heu d'iniciar vosaltres mateixos .

Una manera d'inicialitzar totes les finestres emergents d'una pàgina seria seleccionar-les pel seu data-toggleatribut:

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

Les finestres emergents en grups de botons, grups d'entrada i taules requereixen una configuració especial

Quan utilitzeu finestres emergents en elements dins d'un .btn-groupo d'un .input-group, o en elements relacionats amb la taula ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), haureu d'especificar l'opció container: 'body'(documentada a continuació) per evitar efectes secundaris no desitjats (com ara que l'element creixi i/o o perdent les seves cantonades arrodonides quan s'activa el popover).

No intenteu mostrar popovers en elements ocults

Invocar $(...).popover('show')quan està l'element objectiu display: none;farà que el popover es col·loqui incorrectament.

Els popovers dels elements desactivats requereixen elements d'embolcall

Per afegir un popover a un element disabledo .disabled, col·loqueu l'element dins de a <div>i apliqueu-hi el popover <div>.

Enllaços de diverses línies

De vegades, voleu afegir una finestra emergent a un hiperenllaç que embolcalla diverses línies. El comportament predeterminat del connector emergent és centrar-lo horitzontalment i verticalment. Afegiu white-space: nowrap;-hi els vostres ancoratges per evitar-ho.

Exemples

Popover estàtic

Hi ha quatre opcions disponibles: superior, dreta, inferior i alineada a l'esquerra.

Cap sobre popover

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pel·lentesc ornare sem lacinia quam venenatis vestibulum.

Popover a la dreta

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pel·lentesc ornare sem lacinia quam venenatis vestibulum.

Popover inferior

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pel·lentesc ornare sem lacinia quam venenatis vestibulum.

Popover a l'esquerra

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pel·lentesc ornare sem lacinia quam venenatis vestibulum.

Demo en directe

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

Quatre direccions

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

Omet al següent clic

Utilitzeu el focusdisparador per descartar popovers al següent clic que faci l'usuari.

Es requereix un etiquetatge específic per a descartar el clic següent

Per a un comportament adequat entre navegadors i plataformes, heu d'utilitzar l' <a>etiqueta, no l' <button>etiqueta, i també heu d'incloure els atributs role="button"i .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>

Ús

Activa les finestres emergents mitjançant JavaScript:

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

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-animation="".

Nom Tipus Per defecte Descripció
animació booleà veritat Apliqueu una transició d'esvaïment CSS al popover
contenidor cadena | fals fals

Afegeix la finestra emergent a un element específic. Exemple: container: 'body'. Aquesta opció és especialment útil perquè us permet situar el popover en el flux del document a prop de l'element activador, cosa que evitarà que el popover surti lluny de l'element activador durant un canvi de mida de la finestra.

contingut cadena | funció ''

Valor de contingut predeterminat si data-contentl'atribut no és present.

Si es dóna una funció, s'anomenarà amb la seva thisreferència establerta a l'element al qual està connectat el popover.

retard nombre | objecte 0

Retard per mostrar i amagar la finestra emergent (ms): no s'aplica al tipus d'activador manual

Si es proporciona un número, s'aplica un retard tant per ocultar com per mostrar

L'estructura de l'objecte és:delay: { "show": 500, "hide": 100 }

html booleà fals Inseriu HTML a la finestra emergent. Si és fals, texts'utilitzarà el mètode de jQuery per inserir contingut al DOM. Utilitzeu text si us preocupen els atacs XSS.
col·locació cadena | funció 'dret'

Com posicionar el popover - superior | baix | esquerra | dreta | automàtic.
Quan s'especifica "auto", reorientarà dinàmicament el popover. Per exemple, si la ubicació és "esquerra automàtica", la finestra emergent es mostrarà a l'esquerra quan sigui possible, en cas contrari es mostrarà a la dreta.

Quan s'utilitza una funció per determinar la ubicació, es crida amb el node DOM emergent com a primer argument i el node DOM de l'element activador com a segon. El thiscontext s'estableix a la instància emergent.

selector corda fals Si es proporciona un selector, els objectes emergents es delegaran als objectius especificats. A la pràctica, això s'utilitza per permetre que el contingut HTML dinàmic s'afegeixi popovers. Vegeu això i un exemple informatiu .
plantilla corda '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

HTML base per utilitzar quan es crea el popover.

Els popover's titles'injectaran al .popover-title.

Els popover's contents'injectaran al .popover-content.

.arrowes convertirà en la fletxa del popover.

L'element d'embolcall més extern hauria de tenir la .popoverclasse.

títol cadena | funció ''

Valor del títol predeterminat si titlel'atribut no és present.

Si es dóna una funció, s'anomenarà amb la seva thisreferència establerta a l'element al qual està connectat el popover.

disparador corda 'clic' Com s'activa el popover - feu clic a | flotar | focus | manual. Podeu passar múltiples activadors; separeu-los amb un espai. manualno es pot combinar amb cap altre activador.
mirador cadena | objecte | funció { selector: 'cos', farciment: 0 }

Manté el popover dins dels límits d'aquest element. Exemple: viewport: '#viewport'o{ "selector": "#viewport", "padding": 0 }

Si es dóna una funció, es crida amb l'element desencadenant node DOM com a únic argument. El thiscontext s'estableix a la instància emergent.

Atributs de dades per a popovers individuals

Les opcions per a popovers individuals es poden especificar alternativament mitjançant l'ús d'atributs de dades, tal com s'ha explicat anteriorment.

Mètodes

$().popover(options)

Inicialitza les finestres emergents per a una col·lecció d'elements.

.popover('show')

Revela el popover d'un element. Torna a la persona que truca abans que s'hagi mostrat realment el popover (és a dir, abans shown.bs.popoverque es produeixi l'esdeveniment). Això es considera una activació "manual" del popover. Les finestres emergents tant el títol com el contingut són de longitud zero mai es mostren.

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

.popover('hide')

Amaga la finestra emergent d'un element. Torna a la persona que truca abans que el popover s'hagi amagat (és a dir, abans hidden.bs.popoverque es produeixi l'esdeveniment). Això es considera una activació "manual" del popover.

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

.popover('toggle')

Activa o desactiva la finestra emergent d'un element. Torna a la persona que truca abans que el popover s'hagi mostrat o amagat (és a dir, abans que es produeixi l'esdeveniment shown.bs.popovero ). hidden.bs.popoverAixò es considera una activació "manual" del popover.

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

.popover('destroy')

Amaga i destrueix el popover d'un element. Els popovers que utilitzen la delegació (que es creen amb l' selectoropció ) no es poden destruir individualment en elements activadors descendents.

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

Esdeveniments

Tipus d'esdeveniment Descripció
show.bs.popover Aquest esdeveniment s'activa immediatament quan showes crida al mètode d'instància.
mostrat.bs.popover Aquest esdeveniment s'activa quan la finestra emergent s'ha fet visible per a l'usuari (esperarà que finalitzin les transicions CSS).
hide.bs.popover Aquest esdeveniment s'activa immediatament quan hides'ha cridat el mètode d'instància.
hidden.bs.popover Aquest esdeveniment s'activa quan la finestra emergent s'ha acabat d'ocultar per a l'usuari (esperarà que finalitzin les transicions CSS).
inserit.bs.popover Aquest esdeveniment s'activa després de l' show.bs.popoveresdeveniment quan s'ha afegit la plantilla popover al DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Missatges d'alerta alert.js

Alertes d'exemple

Afegiu la funcionalitat de descartar a tots els missatges d'alerta amb aquest connector.

Quan s'utilitza un .closebotó, ha de ser el primer fill del .alert-dismissiblei no hi pot haver contingut de text abans de l'etiquetatge.

Ús

Només heu d'afegir data-dismiss="alert"al vostre botó de tancament per donar automàticament una funcionalitat de tancament d'alerta. Tancar una alerta l'elimina del DOM.

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

Perquè les vostres alertes facin servir l'animació en tancar, assegureu-vos que tinguin la .fadei.in classes

Mètodes

$().alert()

Fa que una alerta escolti els esdeveniments de clic als elements descendents que tenen l' data-dismiss="alert"atribut. (No és necessari quan s'utilitza l'inicialització automàtica de l'api de dades.)

$().alert('close')

Tanca una alerta eliminant-la del DOM. Si les classes .fadei .inestan presents a l'element, l'alerta s'esvairà abans que s'elimini.

Esdeveniments

El connector d'alerta de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat d'alerta.

Tipus d'esdeveniment Descripció
tancar.bs.alerta Aquest esdeveniment s'activa immediatament quan closees crida al mètode d'instància.
tancat.bs.alerta Aquest esdeveniment s'activa quan l'alerta s'ha tancat (esperarà que finalitzin les transicions CSS).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Botons button.js

Fes més amb els botons. Controla els estats dels botons o crea grups de botons per a més components com ara barres d'eines.

Compatibilitat entre navegadors

El Firefox manté els estats de control de formularis (desactivació i verificació) durant les càrregues de la pàgina . Una solució alternativa és utilitzar autocomplete="off". Vegeu l'error de Mozilla #654072 .

Estatal

Afegeix data-loading-text="Loading..."per utilitzar un estat de càrrega en un botó.

Aquesta funció està obsoleta des de la v3.3.5 i s'ha eliminat a la v4.

Fes servir l'estat que vulguis!

Pel bé d'aquesta demostració, estem utilitzant data-loading-texti $().button('loading'), però aquest no és l'únic estat que podeu utilitzar. Vegeu més sobre això a continuació a la $().button(string)documentació .

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

Canvi únic

Afegeix data-toggle="button"per activar la commutació en un sol botó.

Calen botons pre-alternats.active iaria-pressed="true"

Per als botons pre-alternats, heu d'afegir la .activeclasse i l' aria-pressed="true"atribut a buttonvosaltres mateixos.

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

Casilla de selecció / Ràdio

Afegiu data-toggle="buttons"-hi una .btn-groupcasella de selecció o entrades de ràdio per activar la commutació dels seus respectius estils.

Les opcions preseleccionades necessiten.active

Per a les opcions preseleccionades, heu d'afegir la .activeclasse a l'entrada label.

L'estat de la comprovació visual només s'actualitza en fer clic

Si l'estat marcat d'un botó de casella de selecció s'actualitza sense activar un clickesdeveniment al botó (per exemple, mitjançant <input type="reset">o mitjançant la configuració de la checkedpropietat de l'entrada), haureu de canviar la .activeclasse a l'entrada 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ètodes

$().button('toggle')

Commuta l'estat push. Dóna al botó l'aspecte que s'ha activat.

$().button('reset')

Restableix l'estat del botó: canvia el text pel text original. Aquest mètode és asíncron i torna abans que s'hagi completat el restabliment.

$().button(string)

Canvia el text a qualsevol estat de text definit amb dades.

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

Replega collapse.js

Connector flexible que utilitza un grapat de classes per a un comportament fàcil de canviar.

Dependència del connector

Collapse requereix que el connector de transicions s'inclogui a la vostra versió de Bootstrap.

Exemple

Feu clic als botons següents per mostrar i amagar un altre element mitjançant els canvis de classe:

  • .collapseamaga contingut
  • .collapsings'aplica durant les transicions
  • .collapse.inmostra contingut

Podeu utilitzar un enllaç amb l' hrefatribut o un botó amb l' data-targetatribut. En ambdós casos, data-toggle="collapse"és necessari.

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>

Exemple d'acordió

Amplieu el comportament de col·lapse predeterminat per crear un acordió amb el component del panell.

Anim pariatur clixé reprehenderit, enim eiusmod high life accusamus Terry Richardson i calamar. 3 wolf moon officia aute, no cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua posar-hi un ocell calamar cafè d'origen únic nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur carnisser vice lomo. Leggings occaecat cervesa artesanal de la granja a la taula, sintetitzador d'estètica denim cru, probablement no n'hagueu sentit a parlar acusamus labore sostenible VHS.
Anim pariatur clixé reprehenderit, enim eiusmod high life accusamus Terry Richardson i calamar. 3 wolf moon officia aute, no cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua posar-hi un ocell calamar cafè d'origen únic nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur carnisser vice lomo. Leggings occaecat cervesa artesanal de la granja a la taula, sintetitzador d'estètica denim cru, probablement no n'hagueu sentit a parlar acusamus labore sostenible VHS.
Anim pariatur clixé reprehenderit, enim eiusmod high life accusamus Terry Richardson i calamar. 3 wolf moon officia aute, no cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua posar-hi un ocell calamar cafè d'origen únic nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur carnisser vice lomo. Leggings occaecat cervesa artesanal de la granja a la taula, sintetitzador d'estètica denim cru, probablement no n'hagueu sentit a parlar acusamus 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>

També és possible canviar .panel-bodys per .list-groups.

  • Bootply
  • One itmus ac facilitin
  • Segon eros

Feu que els controls d'ampliació/repleg siguin accessibles

Assegureu-vos d'afegir aria-expandeda l'element de control. Aquest atribut defineix explícitament l'estat actual de l'element plegable per als lectors de pantalla i tecnologies d'assistència similars. Si l'element plegable es tanca per defecte, hauria de tenir un valor de aria-expanded="false". Si heu configurat l'element plegable perquè estigui obert de manera predeterminada mitjançant la inclasse, configureu aria-expanded="true"-lo al control. El connector canviarà automàticament aquest atribut en funció de si l'element plegable s'ha obert o tancat o no.

A més, si el vostre element de control està orientat a un sol element plegable, és a dir, l' data-targetatribut apunta a un idselector, podeu afegir un aria-controlsatribut addicional a l'element de control, que contingui l' idelement plegable. Els lectors de pantalla moderns i tecnologies d'assistència similars fan ús d'aquest atribut per oferir als usuaris dreceres addicionals per navegar directament a l'element plegable.

Ús

El connector de col·lapse utilitza unes quantes classes per gestionar el treball pesat:

  • .collapseamaga el contingut
  • .collapse.inmostra el contingut
  • .collapsings'afegeix quan comença la transició i s'elimina quan s'acaba

Aquestes classes es poden trobar a component-animations.less.

Mitjançant atributs de dades

Només cal afegir data-toggle="collapse"i a data-targeta l'element per assignar automàticament el control d'un element plegable. L' data-targetatribut accepta un selector CSS al qual aplicar el col·lapse. Assegureu-vos d'afegir la classe collapsea l'element plegable. Si voleu que s'obri per defecte, afegiu la classe addicional in.

Per afegir una gestió de grups semblant a un acordió a un control plegable, afegiu l'atribut de dades data-parent="#selector". Consulteu la demostració per veure-ho en acció.

Mitjançant JavaScript

Habilita manualment amb:

$('.collapse').collapse()

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-parent="".

Nom tipus per defecte descripció
pare selector fals Si es proporciona un selector, tots els elements plegables sota el pare especificat es tancaran quan es mostri aquest element plegable. (semblant al comportament d'acordió tradicional - això depèn de la panelclasse)
alternar booleà veritat Activa o desactiva l'element plegable en invocació

Mètodes

.collapse(options)

Activa el teu contingut com a element plegable. Accepta opcions opcionals object.

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

.collapse('toggle')

Commuta un element plegable per mostrar-lo o amagar-lo. Torna a la persona que truca abans que l'element plegable s'hagi mostrat o amagat (és a dir, abans que es produeixi l'esdeveniment shown.bs.collapseo ).hidden.bs.collapse

.collapse('show')

Mostra un element plegable. Torna a la persona que truca abans que s'hagi mostrat realment l'element plegable (és a dir, abans shown.bs.collapseque es produeixi l'esdeveniment).

.collapse('hide')

Amaga un element plegable. Torna a la persona que truca abans que l'element plegable s'hagi amagat (és a dir, abans hidden.bs.collapseque es produeixi l'esdeveniment).

Esdeveniments

La classe de col·lapse de Bootstrap exposa alguns esdeveniments per connectar-se a la funcionalitat de col·lapse.

Tipus d'esdeveniment Descripció
show.bs.collapse Aquest esdeveniment s'activa immediatament quan showes crida al mètode d'instància.
mostrat.bs.collapse Aquest esdeveniment s'activa quan un element de col·lapse s'ha fet visible per a l'usuari (esperarà que finalitzin les transicions CSS).
ocultar.bs.collapse Aquest esdeveniment s'activa immediatament quan hides'ha cridat el mètode.
hidden.bs.collapse Aquest esdeveniment s'activa quan un element de col·lapse s'ha amagat per a l'usuari (esperarà que finalitzin les transicions CSS).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carrusel carousel.js

Un component de presentació de diapositives per circular per elements, com un carrusel. Els carrusels imbricats no s'admeten.

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

Subtítols opcionals

Afegiu subtítols a les vostres diapositives fàcilment amb l' .carousel-captionelement de qualsevol .item. Col·loqueu gairebé qualsevol HTML opcional allà dins i s'alinearà i formatarà automàticament.

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

Carrusels múltiples

Els carrusels requereixen l'ús d'un idcontenidor a l'exterior (el .carousel) perquè els controls del carrusel funcionin correctament. Quan afegiu diversos carrusels o quan canvieu un carrusel id, assegureu-vos d'actualitzar els controls pertinents.

Mitjançant atributs de dades

Utilitzeu atributs de dades per controlar fàcilment la posició del carrusel. data-slideaccepta les paraules clau prevo next, que altera la posició de la diapositiva en relació a la seva posició actual. Alternativament, utilitzeu data-slide-toper passar un índex de diapositives en brut al carrusel data-slide-to="2", que canvia la posició de la diapositiva a un índex concret que comença per 0.

L' data-ride="carousel"atribut s'utilitza per marcar un carrusel com a animador a partir de la càrrega de la pàgina. No es pot utilitzar en combinació amb la inicialització explícita de JavaScript (redundant i innecessària) del mateix carrusel.

Mitjançant JavaScript

Truqueu manualment al carrusel amb:

$('.carousel').carousel()

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-interval="".

Nom tipus per defecte descripció
interval nombre 5000 La quantitat de temps per retardar entre el cicle automàtic d'un element. Si és fals, el carrusel no girarà automàticament.
pausa cadena | nul "passar el ratolí" Si s'estableix en "hover", posa en pausa el cicle del carrusel encès mouseenteri reprèn el cicle del carrusel encès mouseleave. Si s'estableix en null, passar el cursor per sobre del carrusel no el posarà en pausa.
embolicar booleà veritat Si el carrusel ha de circular contínuament o tenir parades dures.
teclat booleà veritat Si el carrusel ha de reaccionar als esdeveniments del teclat.

Inicialitza el carrusel amb opcions opcionals objecti comença a circular pels elements.

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

Recorre els elements del carrusel d'esquerra a dreta.

Impedeix que el carrusel circuli per elements.

Cicle el carrusel a un fotograma concret (basat en 0, similar a una matriu).

Cicles a l'element anterior.

Passa a l'element següent.

La classe de carrusel de Bootstrap exposa dos esdeveniments per connectar-se a la funcionalitat del carrusel.

Tots dos esdeveniments tenen les següents propietats addicionals:

  • direction: La direcció en què llisca el carrusel (o "left""right").
  • relatedTarget: l'element DOM que s'està fent lliscar al seu lloc com a element actiu.

Tots els esdeveniments del carrusel es desenvolupen al mateix carrusel (és a dir, al <div class="carousel">).

Tipus d'esdeveniment Descripció
slide.bs.carrusel Aquest esdeveniment s'activa immediatament quan slides'invoca el mètode d'instància.
slid.bs.carrusel Aquest esdeveniment s'activa quan el carrusel ha completat la transició de diapositives.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Afix affix.js

Exemple

El connector d'afix s'activa position: fixed;i desactiva, emulant l'efecte trobat amb position: sticky;. La subnavegació de la dreta és una demostració en directe del connector afix.


Ús

Utilitzeu el connector afix mitjançant atributs de dades o manualment amb el vostre propi JavaScript. En ambdues situacions, heu de proporcionar CSS per al posicionament i l'amplada del vostre contingut col·locat.

Nota: no utilitzeu el connector d'afixos en un element contingut en un element relativament posicionat, com ara una columna estirada o empesa, a causa d'un error de representació de Safari .

Posicionament mitjançant CSS

El connector d'afix alterna entre tres classes, cadascuna representant un estat particular: .affix, .affix-top, i .affix-bottom. Heu de proporcionar els estils, amb l'excepció de position: fixed;on .affix, d'aquestes classes vosaltres mateixos (independentment d'aquest connector) per gestionar les posicions reals.

Així és com funciona el connector d'afix:

  1. Per començar, el connector s'afegeix .affix-topper indicar que l'element es troba a la seva posició superior. En aquest moment no cal cap posicionament CSS.
  2. Desplaçar-vos més enllà de l'element que voleu col·locar hauria de desencadenar la col·locació real. Aquí és on .affixsubstitueix .affix-topi estableix position: fixed;(proporcionat pel CSS de Bootstrap).
  3. Si es defineix un desplaçament inferior, desplaçar-se més enllà hauria de substituir-lo .affixper .affix-bottom. Com que els desplaçaments són opcionals, establir-ne un requereix que establiu el CSS adequat. En aquest cas, afegir position: absolute;quan sigui necessari. El connector utilitza l'atribut de dades o l'opció JavaScript per determinar on col·locar l'element des d'allà.

Seguiu els passos anteriors per configurar el vostre CSS per a qualsevol de les opcions d'ús següents.

Mitjançant atributs de dades

Per afegir fàcilment un comportament d'afixos a qualsevol element, només cal que afegiu data-spy="affix"-lo a l'element que voleu espiar. Utilitzeu desplaçaments per definir quan s'ha de canviar la fixació d'un element.

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

Mitjançant JavaScript

Truqueu al connector d'afix mitjançant JavaScript:

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

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-offset-top="200".

Nom tipus per defecte descripció
compensació nombre | funció | objecte 10 Píxels a compensar de la pantalla en calcular la posició del desplaçament. Si es proporciona un sol número, el desplaçament s'aplicarà tant a la part superior com a la inferior. Per proporcionar un desplaçament únic, inferior i superior, només cal que proporcioneu un objecte offset: { top: 10 }o offset: { top: 10, bottom: 5 }. Utilitzeu una funció quan necessiteu calcular dinàmicament un desplaçament.
objectiu selector | node | element jQuery l' windowobjecte Especifica l'element objectiu de l'afix.

Mètodes

.affix(options)

Activa el teu contingut com a contingut enganxat. Accepta opcions opcionals object.

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

.affix('checkPosition')

Recalcula l'estat de l'afix en funció de les dimensions, la posició i la posició de desplaçament dels elements rellevants. Les classes .affix, .affix-top, i .affix-bottoms'afegeixen o s'eliminen del contingut adjunt segons el nou estat. Aquest mètode s'ha de cridar sempre que es canvien les dimensions del contingut col·locat o de l'element objectiu, per garantir el posicionament correcte del contingut col·locat.

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

Esdeveniments

El connector d'afixos de Bootstrap exposa alguns esdeveniments per connectar-vos a la funcionalitat d'afixos.

Tipus d'esdeveniment Descripció
afix.bs.afix Aquest esdeveniment s'activa immediatament abans que l'element s'hagi col·locat.
afixat.bs.afix Aquest esdeveniment s'activa després de col·locar l'element.
afix-top.bs.affix Aquest esdeveniment es dispara immediatament abans que l'element s'hagi fixat a la part superior.
afixed-top.bs.affix Aquest esdeveniment s'activa després que l'element s'hagi fixat a la part superior.
afix-bottom.bs.affix Aquest esdeveniment s'activa immediatament abans que l'element s'hagi fixat a la part inferior.
afixed-bottom.bs.affix Aquest esdeveniment s'activa després que l'element s'hagi fixat a la part inferior.