Superrigardo

Individuaj aŭ kompilitaj

Kromaĵoj povas esti inkluzivitaj individue (uzante la individuajn *.jsdosierojn de Bootstrap), aŭ ĉiujn samtempe (uzante bootstrap.jsaŭ la minified bootstrap.min.js).

Uzante la kompilitan JavaScript

Ambaŭ bootstrap.jskaj bootstrap.min.jsenhavas ĉiujn kromaĵojn en ununura dosiero. Inkluzivi nur unu.

Kromaĵo dependecoj

Iuj aldonaĵoj kaj CSS-komponentoj dependas de aliaj aldonaĵoj. Se vi inkluzivas kromaĵojn individue, nepre kontroli ĉi tiujn dependecojn en la dokumentoj. Rimarku ankaŭ, ke ĉiuj kromprogramoj dependas de jQuery (ĉi tio signifas, ke jQuery devas esti inkluzivita antaŭ la kromprogramoj). Konsultu nianbower.json por vidi kiuj versioj de jQuery estas subtenataj.

Datumaj atributoj

Vi povas uzi ĉiujn Bootstrap-kromaĵojn nur per la markada API sen skribi ununuran linion de JavaScript. Ĉi tio estas la unuaklasa API de Bootstrap kaj devus esti via unua konsidero kiam vi uzas kromprogramon.

Dirite, en iuj situacioj eble estos dezirinde malŝalti ĉi tiun funkcion. Sekve, ni ankaŭ provizas la kapablon malŝalti la datuman atributon API malligante ĉiujn eventojn en la dokumento nomspacita kun data-api. Ĉi tio aspektas jene:

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

Alternative, por celi specifan kromaĵon, simple inkluzivu la nomon de la kromaĵo kiel nomspacon kune kun la data-api nomspaco jene:

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

Nur unu kromaĵo per elemento per datumaj atributoj

Ne uzu datumajn atributojn de pluraj kromprogramoj sur la sama elemento. Ekzemple, butono ne povas kaj havi konsileton kaj ŝanĝi modalon. Por plenumi tion, uzu envolvan elementon.

Programa API

Ni ankaŭ kredas, ke vi devus povi uzi ĉiujn Bootstrap kromaĵojn nur per la JavaScript API. Ĉiuj publikaj API-oj estas unuopaj, ĉeneblaj metodoj, kaj resendas la kolekton pri kiu reagis.

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

Ĉiuj metodoj devas akcepti laŭvolan opcian objekton, ĉenon kiu celas apartan metodon, aŭ nenion (kiu iniciatas kromprogramon kun defaŭlta konduto):

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

Ĉiu kromaĵo ankaŭ elmontras sian krudan konstruilon sur Constructorposedaĵo: $.fn.popover.Constructor. Se vi ŝatus ricevi apartan kromprogramon, reakiru ĝin rekte de elemento: $('[rel="popover"]').data('popover').

Defaŭltaj agordoj

Vi povas ŝanĝi la defaŭltajn agordojn por kromaĵo modifante la Constructor.DEFAULTSobjekton de la kromaĵo:

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

Neniu konflikto

Kelkfoje necesas uzi Bootstrap-kromaĵojn kun aliaj UI-kadroj. En tiuj cirkonstancoj, nomspackolizioj povas foje okazi. Se tio okazas, vi povas alvoki .noConflictla kromprogramon, pri kiu vi volas reverti la valoron.

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

Eventoj

Bootstrap provizas kutimajn eventojn por la unikaj agoj de la plej multaj kromprogramoj. Ĝenerale, tiuj venas en infinitiva kaj preterito participo - kie la infinitivo (ekz. show) estas ekigita ĉe la komenco de okazaĵo, kaj ĝia preterito participformo (ekz. shown) estas ekigita sur la kompletigo de ago.

Ekde 3.0.0, ĉiuj Bootstrap-okazaĵoj estas nomspacigitaj.

Ĉiuj infinitivaj eventoj disponigas preventDefaultfunkciecon. Ĉi tio disponigas la kapablon ĉesigi la ekzekuton de ago antaŭ ol ĝi komenciĝas.

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

Versinumeroj

La versio de ĉiu el la aldonaĵoj jQuery de Bootstrap estas alirebla per la VERSIONposedaĵo de la konstrukciisto de la kromaĵo. Ekzemple, por la konsileto-kromaĵo:

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

Neniuj specialaj kompensoj kiam JavaScript estas malŝaltita

La kromprogramoj de Bootstrap ne falas precipe gracie kiam JavaScript estas malŝaltita. Se vi zorgas pri la uzantsperto en ĉi tiu kazo, uzu <noscript>por klarigi la situacion (kaj kiel reebligi JavaScript) al viaj uzantoj, kaj/aŭ aldoni viajn proprajn kutimajn kompensojn.

Triaj bibliotekoj

Bootstrap ne oficiale subtenas triajn JavaScript-bibliotekojn kiel Prototype aŭ jQuery UI. Malgraŭ .noConflictkaj nomspacitaj eventoj, povas esti kongruaj problemoj, kiujn vi devas ripari memstare.

Transiroj transition.js

Pri transiroj

Por simplaj transiraj efikoj, inkluzivu transition.jsunufoje kune kun la aliaj JS-dosieroj. Se vi uzas la kompilitan (aŭ minimumigitan) bootstrap.js, ne necesas inkluzivi ĉi tion—ĝi jam estas tie.

Kio estas ene

Transition.js estas baza helpanto por transitionEndeventoj kaj ankaŭ CSS-transira emulilo. Ĝi estas uzata de la aliaj kromprogramoj por kontroli por CSS-transirsubteno kaj por kapti pendantajn transirojn.

Malebligado de transiroj

Transiroj povas esti tutmonde malebligitaj uzante la jenan JavaScript-fragmenton, kiu devas veni post kiam transition.js(aŭ bootstrap.jsbootstrap.min.js, laŭ la kazo) ŝarĝiĝis:

$.support.transition = false

Modaloj modaloj.js

Modaloj estas fluliniaj, sed flekseblaj, dialogaj instigoj kun la minimuma postulata funkcieco kaj inteligentaj defaŭltoj.

Multoblaj malfermaj modaloj ne subtenataj

Nepre ne malfermu modalon dum alia ankoraŭ videblas. Montri pli ol unu modalon samtempe postulas kutiman kodon.

Modala markado lokigo

Ĉiam provu meti la HTML-kodon de modalo en plej altan pozicion en via dokumento por eviti ke aliaj komponantoj influu la aspekton kaj/aŭ funkciojn de la modalo.

Avertoj pri poŝtelefonoj

Estas kelkaj avertoj pri uzado de modaloj en porteblaj aparatoj. Vidu nian retumilon subtendokumentojn por detaloj.

Pro kiel HTML5 difinas sian semantikon, la autofocusHTML-atributo ne efikas en Bootstrap-modaloj. Por atingi la saman efikon, uzu iun kutiman JavaScript:

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

Ekzemploj

Statika ekzemplo

Reprezentita modalo kun kaplinio, korpo kaj aro de agoj en la piedlinio.

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

Viva demonstraĵo

Ŝaltu modalon per JavaScript alklakante la suban butonon. Ĝi glitos malsupren kaj velkos de la supro de la paĝo.

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

Faru modalojn alireblaj

Nepre aldonu role="dialog"kaj aria-labelledby="...", referencante la modalan titolon, al .modal, kaj role="document"al la .modal-dialogmem.

Aldone, vi povas doni priskribon de via modala dialogo per aria-describedbysur .modal.

Enkonstruado de YouTube-videoj

Enmeti YouTube-filmetojn en modaloj postulas plian JavaScript ne en Bootstrap por aŭtomate ĉesigi la reproduktadon kaj pli. Vidu ĉi tiun helpeman afiŝon de Stack Overflow por pliaj informoj.

Laŭvolaj grandecoj

Modaloj havas du laŭvolajn grandecojn, haveblajn per modifiklasoj por esti metitaj sur .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>

Forigi kuraĝigon

Por modaloj kiuj simple aperas prefere ol fadi por vidi, forigu la .fadeklason de via modala markado.

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

Uzante la kradsistemon

Por utiligi la Bootstrap kradsistemon ene de modalo, nur nestu .rows ene de la .modal-bodykaj tiam uzu la normalajn kradsistemklasojn.

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

Ĉu vi havas amason da butonoj, kiuj ĉiuj ekigas la saman modalon, nur kun iomete malsama enhavo? Uzu event.relatedTargetkaj HTML- data-*atributojn (eble per jQuery ) por variigi la enhavon de la modalo depende de kiu butono estis klakita. Vidu la dokumentojn pri Modalaj Eventoj por detaloj pri relatedTarget,

...pli da butonoj...
<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)
})

Uzado

La modala kromaĵo ŝanĝas vian kaŝitan enhavon laŭpeto, per datumaj atributoj aŭ JavaScript. Ĝi ankaŭ aldonas .modal-openal la <body>por superregi defaŭltan movo-konduton kaj generas .modal-backdroppor disponigi klakan areon por forĵeti montritajn modalojn kiam oni klakas ekster la modalo.

Per datumaj atributoj

Aktivigu modalon sen skribi JavaScript. Agordu data-toggle="modal"sur regila elemento, kiel butono, kune kun data-target="#foo"href="#foo"por celi specifan modalon por ŝanĝi.

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

Per JavaScript

Voku modalon kun id myModalkun ununura linio de JavaScript:

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

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-backdrop="".

Nomo tajpu defaŭlte Priskribo
fono bulea aŭ la ĉeno'static' vera Inkluzivas modalan fonan elementon. Alternative, specifu staticpor fono, kiu ne fermas la modalon alklakante.
klavaro bulea vera Fermas la modalon kiam eskapa klavo estas premata
montri bulea vera Montras la modalon kiam pravalorigita.
fora vojo malvera

Ĉi tiu opcio estas malrekomendita ekde v3.3.0 kaj estis forigita en v4. Ni rekomendas anstataŭe uzi klientflankan ŝablonon aŭ datuman ligan kadron, aŭ voki jQuery.load mem.

Se fora URL estas provizita, enhavo estos ŝarĝita unufoje per la metodo de jQuery loadkaj injektita en la .modal-contentdiv. Se vi uzas la data-api, vi povas alternative uzi la hrefatributon por specifi la foran fonton. Ekzemplo de tio estas montrita malsupre:

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

Metodoj

Aktivigas vian enhavon kiel modalon. Akceptas laŭvolajn opciojn object.

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

Mane ŝanĝas modalon. Revenas al la alvokanto antaŭ ol la modalo estas efektive montrita aŭ kaŝita (t.e. antaŭ ol la shown.bs.modalevento hidden.bs.modalokazas).

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

Mane malfermas modalon. Revenas al la alvokanto antaŭ ol la modalo estas efektive montrita (te antaŭ ol la shown.bs.modalevento okazas).

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

Mane kaŝas modalon. Revenas al la alvokanto antaŭ ol la modalo estas fakte kaŝita (te antaŭ ol la hidden.bs.modalevento okazas).

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

Reĝustigas la poziciigon de la modalo por kontraŭstari rulstangon en la okazo ke oni aperus, kio farus la modalon salti maldekstren.

Nur necesas kiam la alteco de la modalo ŝanĝiĝas dum ĝi estas malfermita.

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

Eventoj

La modala klaso de Bootstrap elmontras kelkajn eventojn por hoki al modala funkcieco.

Ĉiuj modalaj eventoj estas pafitaj ĉe la modalo mem (te ĉe la <div class="modal">).

Eventa Tipo Priskribo
show.bs.modal Ĉi tiu evento tuj ekfunkciigas kiam la showekzempla metodo estas vokita. Se kaŭzite de klako, la klakita elemento disponeblas kiel la relatedTargetposedaĵo de la evento.
montrata.bs.modala Ĉi tiu evento estas lanĉita kiam la modalo fariĝis videbla por la uzanto (atendos ke CSS-transiroj finiĝos). Se kaŭzite de klako, la klakita elemento disponeblas kiel la relatedTargetposedaĵo de la evento.
kaŝi.bs.modal Ĉi tiu evento estas lanĉita tuj kiam la hideekzempla metodo estas vokita.
kaŝita.bs.modala Ĉi tiu evento estas lanĉita kiam la modalo finiĝis kaŝita de la uzanto (atendos ke CSS-transiroj finiĝos).
loaded.bs.modal Ĉi tiu evento estas lanĉita kiam la modalo ŝarĝis enhavon uzante la remoteopcion.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

Aldonu falmenuojn al preskaŭ io ajn per ĉi tiu simpla kromaĵo, inkluzive de la navigadbreto, langetoj kaj piloloj.

Ene de navbar

Ene de piloloj

Per datumaj atributoj aŭ JavaScript, la falmenuo aldonaĵo ŝanĝas kaŝitan enhavon (falmenuoj) ŝanĝante la .openklason sur la gepatra listo.

Sur porteblaj aparatoj, malfermi falmenuon aldonas .dropdown-backdropkiel frapetan areon por fermi falmenuojn dum frapetado ekster la menuo, postulo por taŭga iOS-subteno. Ĉi tio signifas, ke ŝanĝi de malfermita falmenuo al malsama falmenuo postulas kroman frapeton sur poŝtelefono.

Noto: La data-toggle="dropdown"atributo estas fidata por fermi falmenuojn je aplika nivelo, do estas bona ideo ĉiam uzi ĝin.

Per datumaj atributoj

Aldonu data-toggle="dropdown"al ligilo aŭ butono por ŝanĝi falmenuon.

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

Por konservi URL-ojn nerompitaj kun ligaj butonoj, uzu la data-targetatributon anstataŭ 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>

Per JavaScript

Voku la menuojn per JavaScript:

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

data-toggle="dropdown"ankoraŭ bezonata

Sendepende de ĉu vi nomas vian falmenuon per JavaScript aŭ anstataŭe uzas la datuman api, data-toggle="dropdown"ĉiam necesas ĉeesti sur la ellasilelemento de la menuo.

Neniu

Ŝaltas la falmenuon de difinita navbreto aŭ klapeta navigado.

Ĉiuj falmenuaj eventoj estas pafitaj ĉe la .dropdown-menugepatra elemento de la.

Ĉiuj falmenuaj eventoj havas relatedTargetposedaĵon, kies valoro estas la ŝanĝanta ankrelemento.

Eventa Tipo Priskribo
montru.bs.falumenon Ĉi tiu evento tuj ekfunkciigas kiam la metodo de spektaklo estas vokita.
montrata.bs.menuo Ĉi tiu evento estas pafita kiam la falmenuo fariĝis videbla por la uzanto (atendos CSS-transirojn, por plenumi).
kaŝi.bs.falu Ĉi tiu evento estas lanĉita tuj kiam la metodo kaŝi kazon estas vokita.
kaŝita.bs.falu Ĉi tiu evento estas pafita kiam la menuo finiĝis kaŝita de la uzanto (atendos CSS-transirojn, por finiĝi).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Ekzemplo en navbar

La ScrollSpy kromaĵo estas por aŭtomate ĝisdatigi nav-celojn surbaze de rulpozicio. Rulumu la areon sub la navbar kaj rigardu la aktivan klasŝanĝon. La submenuaj suberoj ankaŭ estos reliefigitaj.

@graso

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi antaŭ ol ili elĉerpiĝis qui. Tumblr-bieno-al-tablo-rajtoj de biciklo. Anim keffiyeh carles cardigan. La fotobudo de Velit seitan mcsweeney 3 lupo luno irure. Cosby svetero lomo jean shorts, williamsburg hoodie minimum qui vi verŝajne ne aŭdis pri ili et cardigan trust fund kulpa biodiesel wes anderson estetiko. Nihil tatuita akuzamus, kredi ironio biodiesel keffiyeh metiisto ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork barbo. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tatuita cosby svetero manĝkamiono, mcsweeney's quis non freegan vinilo. Lo-fi wes anderson +1 vestaĵo. Carles ne estetika ekzercado quis gentrify. Brooklyn adipisicing metia biero vice keytar deserunt.

unu

Occaecat commodo aliqua delectus. Fap metia biero deserunt rultabulo ea. Lomo biciklorajtoj adipisicing banh mi, velit ea sunt next level locavore unu-devena kafo en magna veniam. High life id vinilo, echo park consequat quis aliquip banh mi pitchfork. Vero VHS estas adipisicing. Consectetur nisi DIY minimum mesaĝa sako. Kredi eks in, daŭrigebla delectus consectetur fanny pack iphone.

du

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 blogo, kulpa mesaĝista sako marfa whatever delectus manĝkamiono. Sapiente synth id assumenda. Locavore sed helvetica kliŝo ironio, thundercats vi verŝajne ne aŭdis pri ili consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica metiisto. Cardigan metia biero seitan preta velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Uzado

Postulas Bootstrap nav

Scrollspy nuntempe postulas la uzon de Bootstrap nav-komponento por taŭga reliefigo de aktivaj ligiloj.

Solveblaj ID-celoj bezonataj

Navbar-ligiloj devas havi solveblajn id-celojn. Ekzemple, <a href="#home">home</a>devas respondi al io en la DOM kiel <div id="home"></div>.

Ne- :visiblecelaj elementoj ignoritaj

Celelementoj kiuj ne estas :visiblelaŭ jQuery estos ignoritaj kaj iliaj respondaj nav-eroj neniam estos reliefigitaj.

Postulas relativan poziciigon

Ne gravas la efektivigmetodo, scrollspy postulas la uzon de position: relative;la elemento, kiun vi spionas. Plejofte ĉi tio estas la <body>. Kiam scrollspying sur elementoj krom la <body>, nepre havi heightaron kaj overflow-y: scroll;aplikita.

Per datumaj atributoj

Por facile aldoni scrollspy-konduton al via supra navigado, aldonu data-spy="scroll"al la elemento, kiun vi volas spioni (plej kutime ĉi tio estus la <body>). Poste aldonu la data-targetatributon kun la ID aŭ klaso de la gepatra elemento de iu ajn Bootstrap- .navkomponento.

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>

Per JavaScript

Post aldoni position: relative;vian CSS, voku la scrollspy per JavaScript:

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

Metodoj

.scrollspy('refresh')

Kiam vi uzas scrollspy kune kun aldono aŭ forigo de elementoj de la DOM, vi devos nomi la refreŝigan metodon tiel:

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

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-offset="".

Nomo tajpu defaŭlte Priskribo
ofseto nombro 10 Pikseloj por kompensi de supro dum kalkulado de pozicio de rullibro.

Eventoj

Eventa Tipo Priskribo
aktivigi.bs.scrollspy Ĉi tiu evento pafas kiam ajn nova objekto estas aktivigita de la scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Ŝanĝeblaj langetoj tab.js

Ekzemplaj langetoj

Aldonu rapidan dinamikan langeton por transiri tra paneloj de loka enhavo, eĉ per falmenuoj. Nestitaj langetoj ne estas subtenataj.

Kruda denim vi verŝajne ne aŭdis pri ili jean shorts Austin. Nesciunt tofu stumptown aliqua, retro sintezila majstro purigi. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby svetero eu banh mi, qui irure terry richardson eks kalmaro. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan amerika vesto, 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.

Etendas klapeta navigado

Ĉi tiu kromaĵo etendas la klapeta navigada komponanto por aldoni tabulajn areojn.

Uzado

Ebligu tabulajn langetojn per JavaScript (ĉiu langeto devas esti aktivigita individue):

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

Vi povas aktivigi individuajn langetojn en pluraj manieroj:

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

Markado

Vi povas aktivigi langeton aŭ pilolan navigadon sen skribi JavaScript per simple specifi data-toggle="tab"data-toggle="pill"sur elemento. Aldonante la navkaj nav-tabsklasojn al la langeto ulaplikos la stilon de la langeto Bootstrap , dum aldonado de la navkaj nav-pillsklasoj aplikos pilolstilon .

<div>

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

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

</div>

Fade efiko

Por ke langetoj fadiĝu, aldonu .fadeal ĉiu .tab-pane. La unua klapeta panelo ankaŭ devas .invidigi la komencan enhavon.

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

Metodoj

$().tab

Aktivigas langetan elementon kaj enhavujon. Tab devus havi aŭ data-targetcelantan hrefujo-nodon en la DOM. En la supraj ekzemploj, la langetoj estas la <a>s kun data-toggle="tab"atributoj.

.tab('show')

Elektas la donitan langeton kaj montras ĝian rilatan enhavon. Ajna alia langeto, kiu estis antaŭe elektita, fariĝas neelektita kaj ĝia rilata enhavo estas kaŝita. Revenas al la alvokanto antaŭ ol la langeto-fenestro efektive estis montrita (te antaŭ ol la shown.bs.tabevento okazas).

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

Eventoj

Kiam oni montras novan langeton, la eventoj ekfunkciigas en la sekva sinsekvo:

  1. hide.bs.tab(en la nuna aktiva langeto)
  2. show.bs.tab(en la montrota langeto)
  3. hidden.bs.tab(sur la antaŭa aktiva langeto, la sama kiel por la hide.bs.tabevento)
  4. shown.bs.tab(en la lastatempe aktiva ĵus montrita langeto, la sama kiel por la show.bs.tabevento)

Se neniu langeto jam estis aktiva, tiam la eventoj hide.bs.tabkaj hidden.bs.tabne estos pafitaj.

Eventa Tipo Priskribo
montri.bs.tab Ĉi tiu evento ekfunkciigas sur langeto, sed antaŭ ol la nova langeto estis montrita. Uzu event.targetkaj event.relatedTargetpor celi la aktivan langeton kaj la antaŭan aktivan langeton (se disponeblaj) respektive.
montrata.bs.tab Ĉi tiu evento ekfunkciigas sur langeto-spektaklo post kiam langeto estis montrita. Uzu event.targetkaj event.relatedTargetpor celi la aktivan langeton kaj la antaŭan aktivan langeton (se disponeblaj) respektive.
kaŝi.bs.tab Ĉi tiu evento pafas kiam nova langeto estas montrata (kaj tiel la antaŭa aktiva langeto estas kaŝota). Uzu event.targetkaj event.relatedTargetpor celi la nunan aktivan langeton kaj la novan baldaŭ aktivan langeton, respektive.
kaŝita.bs.tab Ĉi tiu evento ekfunkcias post kiam nova langeto estas montrita (kaj tiel la antaŭa aktiva langeto estas kaŝita). Uzu event.targetkaj event.relatedTargetpor celi la antaŭan aktivan langeton kaj la novan aktivan langeton, respektive.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Konsiletoj tooltip.js

Inspirite de la bonega jQuery.tipsy kromaĵo verkita de Jason Frame; Konsiletoj estas ĝisdatigita versio, kiu ne dependas de bildoj, uzas CSS3 por kuraĝigoj kaj datumoj-atributoj por loka titolstokado.

Konsiletoj kun nullongaj titoloj neniam estas montrataj.

Ekzemploj

Ŝvebu super la subaj ligiloj por vidi konsiletojn:

Streĉaj pantalonoj sekva nivelo keffiyeh vi verŝajne ne aŭdis pri ili. Fotobudo barbo kruda denim tipografio vegana mesaĝisto sako stumptown. Farm-al-table seitan, mcsweeney's fixie daŭrigebla kvinoa 8-bita amerika vestaĵo havas terry richardson vinilĉambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, kvar loko mcsweeney's pure vegan chambray. Vere ironia metiisto whatever keytar , scenester farm-to-table banksy Austin twitter tenilo freegan cred kruda denim unu-devena kafo viral.

Statika konsileto

Kvar opcioj estas disponeblaj: supro, dekstre, malsupre kaj maldekstre vicigitaj.

Kvar direktoj

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

Elektu-en-funkcio

Pro agado-kialoj, la Tooltip kaj Popover-datum-apis estas elekteblaj, tio signifas, ke vi devas pravigi ilin mem .

Unu maniero pravalorigi ĉiujn konsiletojn sur paĝo estus elekti ilin laŭ ilia data-toggleatributo:

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

Uzado

La kromkonsileto generas enhavon kaj markadon laŭpeto, kaj defaŭlte metas konsiletojn post ilia ellasilelemento.

Ekfunkciigu la konsileton per JavaScript:

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

Markado

La bezonata markado por konsileto estas nur dataatributo kaj titlesur la HTML-elemento vi deziras havi konsileton. La generita markado de konsileto estas sufiĉe simpla, kvankam ĝi postulas pozicion (defaŭlte, agordita topde la kromaĵo).

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

Plurliniaj ligiloj

Kelkfoje vi volas aldoni konsileton al hiperligo, kiu envolvas plurajn liniojn. La defaŭlta konduto de la konsileto kromaĵo estas centri ĝin horizontale kaj vertikale. Aldonu white-space: nowrap;al viaj ankroj por eviti ĉi tion.

Konsiletoj en butongrupoj, eniggrupoj kaj tabeloj postulas specialan agordon

Kiam vi uzas konsiletojn pri elementoj ene de a .btn-groupaŭ an .input-group, aŭ pri tabel-rilataj elementoj ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), vi devos specifi la opcion container: 'body'(dokumentitan sube) por eviti nedeziratajn kromefikojn (kiel la elemento plilarĝiĝanta kaj/ aŭ perdante ĝiajn rondetajn angulojn kiam la konsileto estas ekigita).

Ne provu montri konsiletojn pri kaŝitaj elementoj

Alvoki $(...).tooltip('show')kiam la cela elemento estas display: none;, kaŭzos la konsileton malĝuste poziciigita.

Alireblaj konsiletoj por uzantoj de klavaro kaj helpteknologio

Por uzantoj navigantaj per klavaro, kaj precipe uzantoj de helpaj teknologioj, vi devus nur aldoni konsiletojn al klavar-fokuseblaj elementoj kiel ekzemple ligiloj, formularaj kontroloj aŭ ajna arbitra elemento kun tabindex="0"atributo.

Konsiletoj pri malfunkciigitaj elementoj postulas envolvaĵelementojn

Por aldoni konsileton al a disabled.disabledelemento, metu la elementon enen de a <div>kaj apliku la konsileton al tio <div>anstataŭe.

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-animation="".

Nomo Tajpu Defaŭlte Priskribo
animacio bulea vera Apliku CSS-fade-transiron al la konsileto
ujo ŝnuro | malvera malvera

Aldonas la konsileton al specifa elemento. Ekzemplo: container: 'body'. Ĉi tiu opcio estas precipe utila ĉar ĝi ebligas al vi poziciigi la konsileton en la fluo de la dokumento proksime de la ekiganta elemento - kio malhelpos la ilokonsileton flosi for de la ekiganta elemento dum fenestro regrandigo.

prokrasto nombro | objekto 0

Prokrasto montri kaj kaŝi la konsileton (ms) - ne validas por mana ellasiltipo

Se nombro estas provizita, prokrasto estas aplikata al ambaŭ kaŝi/montri

Objekta strukturo estas:delay: { "show": 500, "hide": 100 }

html bulea malvera Enigu HTML en la konsileto. Se malvera, la textmetodo de jQuery estos uzata por enmeti enhavon en la DOM. Uzu tekston se vi zorgas pri XSS-atakoj.
lokigo ŝnuro | funkcio 'supro'

Kiel poziciigi la konsileton - supro | fundo | maldekstra | ĝuste | aŭtomate.
Kiam "aŭto" estas specifita, ĝi dinamike reorientiĝos la konsileto. Ekzemple, se lokigo estas "aŭtomate maldekstre", la konsileto montriĝos maldekstre kiam eble, alie ĝi montros dekstre.

Kiam funkcio estas uzata por determini la lokigon, ĝi estas vokita kun la konsileto DOM-nodo kiel sia unua argumento kaj la ekiga elemento DOM-nodo kiel sia dua. La thiskunteksto estas agordita al la konsileto-instanco.

elektilo ŝnuro malvera Se elektilo estas disponigita, konsiletaj objektoj estos delegitaj al la specifitaj celoj. En praktiko, ĉi tio estas uzata por ebligi dinamikan HTML-enhavon por aldoni konsiletojn. Vidu ĉi tion kaj informan ekzemplon .
ŝablono ŝnuro '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Baza HTML por uzi dum kreado de la konsileto.

La konsileto titleestos injektitaj en la .tooltip-inner.

.tooltip-arrowfariĝos la sago de la konsileto.

La plej ekstera envolvaĵelemento devus havi la .tooltipklason.

titolo ŝnuro | funkcio ''

Defaŭlta titolvaloro se titleatributo ne ĉeestas.

Se funkcio estas donita, ĝi estos vokita kun ĝia thisreferenco aro al la elemento al kiu la konsileto estas alfiksita.

ellasilon ŝnuro 'ŝveba fokuso' Kiel la konsileto estas ekigita - alklaku | ŝvebi | fokuso | manlibro. Vi povas pasi plurajn ellasilon; apartigu ilin per spaco. manualne povas esti kombinita kun iu ajn alia ellasilo.
vidujo ŝnuro | objekto | funkcio { elektilo: 'korpo', kompletigo: 0}

Tenas la konsileton ene de la limoj de ĉi tiu elemento. Ekzemplo: viewport: '#viewport'{ "selector": "#viewport", "padding": 0 }

Se funkcio estas donita, ĝi estas vokita kun la ekiga elemento DOM-nodo kiel ĝia nura argumento. La thiskunteksto estas agordita al la konsileto-instanco.

Datumaj atributoj por individuaj konsiletoj

Opcioj por individuaj konsiletoj povas alternative esti specifitaj per la uzo de datumaj atributoj, kiel klarigite supre.

Metodoj

$().tooltip(options)

Alligas konsileton pritraktilon al elementkolekto.

.tooltip('show')

Rivelas la konsileton de elemento. Revenas al la alvokanto antaŭ ol la konsileto efektive estis montrita (te antaŭ ol la shown.bs.tooltipevento okazas). Ĉi tio estas konsiderata "mana" ekigado de la konsileto. Konsiletoj kun nullongaj titoloj neniam estas montrataj.

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

.tooltip('hide')

Kaŝas la konsileton de elemento. Revenas al la alvokanto antaŭ ol la konsileto efektive estis kaŝita (te antaŭ ol la hidden.bs.tooltipevento okazas). Ĉi tio estas konsiderata "mana" ekigado de la konsileto.

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

.tooltip('toggle')

Ŝaltas la konsileton de elemento. Revenas al la alvokanto antaŭ ol la konsileto efektive estis montrita aŭ kaŝita (t.e. antaŭ ol la shown.bs.tooltipevento hidden.bs.tooltipokazas). Ĉi tio estas konsiderata "mana" ekigado de la konsileto.

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

.tooltip('destroy')

Kaŝas kaj detruas la konsileton de elemento. Konsiletoj kiuj uzas delegacion (kiuj estas kreitaj per la selectoropcio ) ne povas esti individue detruitaj sur posteulaj ellasilelementoj.

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

Eventoj

Eventa Tipo Priskribo
montru.bs.instruilon Ĉi tiu evento tuj ekfunkciigas kiam la showekzempla metodo estas vokita.
montrata.bs.ilotipo Ĉi tiu evento estas lanĉita kiam la konsileto estas videbla por la uzanto (atendos ke CSS-transiroj finiĝos).
kaŝi.bs.ilotip Ĉi tiu evento estas lanĉita tuj kiam la hideekzempla metodo estas vokita.
kaŝita.bs.ilotip Ĉi tiu evento estas lanĉita kiam la konsileto finiĝis kaŝita de la uzanto (atendos ke CSS-transiroj finiĝos).
enigita.bs.ilotip Ĉi tiu evento estas lanĉita post la show.bs.tooltipevento kiam la konsileto ŝablono estis aldonita al la DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Aldonu malgrandajn tegaĵojn de enhavo, kiel tiuj sur la iPad, al iu ajn elemento por loĝigi malĉefajn informojn.

Popovers kies kaj titolo kaj enhavo estas nullongaj neniam estas montrataj.

Dependeco de kromprogramoj

Popovers postulas ke la konsileto-kromaĵo estu inkluzivita en via versio de Bootstrap.

Elektu-en-funkcio

Pro agado-kialoj, la Tooltip kaj Popover-datum-apis estas elekteblaj, tio signifas, ke vi devas pravigi ilin mem .

Unu maniero pravalorigi ĉiujn popovers sur paĝo estus elekti ilin laŭ ilia data-toggleatributo:

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

Popovers en butongrupoj, eniggrupoj kaj tabeloj postulas specialan agordon

Kiam vi uzas popovers sur elementoj ene de a .btn-groupaŭ an .input-group, aŭ sur tabel-rilataj elementoj ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), vi devos specifi la opcion container: 'body'(dokumentita sube) por eviti nedeziratajn kromefikojn (kiel la elemento plilarĝiĝanta kaj/ aŭ perdante ĝiajn rondetajn angulojn kiam la popover estas ekigita).

Ne provu montri popovers sur kaŝitaj elementoj

Alvoki $(...).popover('show')kiam la cela elemento estas display: none;kaŭzos la popover malĝuste poziciigita.

Popovers sur malebligitaj elementoj postulas envolvaĵelementojn

Por aldoni popover al a disabled.disabledelemento, metu la elementon ene de a <div>kaj apliku la popover al tio <div>anstataŭe.

Plurliniaj ligiloj

Kelkfoje vi volas aldoni popover al hiperligo, kiu envolvas plurajn liniojn. La defaŭlta konduto de la popover kromaĵo estas centri ĝin horizontale kaj vertikale. Aldonu white-space: nowrap;al viaj ankroj por eviti ĉi tion.

Ekzemploj

Senmova popover

Kvar opcioj estas disponeblaj: supro, dekstre, malsupre kaj maldekstre vicigitaj.

Popover supro

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

Popover dekstra

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

Popover fundo

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

Popover foriris

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

Viva demonstraĵo

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

Kvar direktoj

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

Forĵeti ĉe sekva klako

Uzu la focusellasilon por malakcepti popovers ĉe la sekva klako kiun la uzanto faras.

Specifa markado bezonata por malakcepto je sekva klako

Por taŭga trans-retumilo kaj transplatforma konduto, vi devas uzi la <a>etikedon, ne la <button>etikedon, kaj vi ankaŭ devas inkluzivi la role="button"kaj tabindexatributojn.

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

Uzado

Ebligu popovers per JavaScript:

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

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-animation="".

Nomo Tajpu Defaŭlte Priskribo
animacio bulea vera Apliki CSS-fade-transiron al la popover
ujo ŝnuro | malvera malvera

Aldonas la popover al specifa elemento. Ekzemplo: container: 'body'. Ĉi tiu opcio estas precipe utila pro tio, ke ĝi ebligas al vi poziciigi la popover en la fluo de la dokumento proksime de la ekfunkciiga elemento - kio malhelpos ke la popover flosu for de la ekfunkciiga elemento dum fenestroregrandigo.

enhavo ŝnuro | funkcio ''

Defaŭlta enhavvaloro se data-contentatributo ne ĉeestas.

Se funkcio estas donita, ĝi estos vokita kun ĝia thisreferenco aro al la elemento al kiu la popover estas alfiksita.

prokrasto nombro | objekto 0

Prokrasto montri kaj kaŝi la popover (ms) - ne validas por mana ellasiltipo

Se nombro estas provizita, prokrasto estas aplikata al ambaŭ kaŝi/montri

Objekta strukturo estas:delay: { "show": 500, "hide": 100 }

html bulea malvera Enigu HTML en la popover. Se malvera, la textmetodo de jQuery estos uzata por enmeti enhavon en la DOM. Uzu tekston se vi zorgas pri XSS-atakoj.
lokigo ŝnuro | funkcio 'ĝuste'

Kiel poziciigi la popover - supro | fundo | maldekstra | ĝuste | aŭtomate.
Kiam "aŭto" estas specifita, ĝi dinamike reorientiĝos la popover. Ekzemple, se lokigo estas "aŭtomate maldekstre", la popover montriĝos maldekstre kiam eble, alie ĝi montros dekstre.

Kiam funkcio estas uzata por determini la lokigon, ĝi estas vokita kun la popover DOM-nodo kiel sia unua argumento kaj la ekiga elemento DOM-nodo kiel sia dua. La thiskunteksto estas agordita al la popover-instanco.

elektilo ŝnuro malvera Se elektilo estas disponigita, popover-objektoj estos delegitaj al la specifitaj celoj. En praktiko, ĉi tio estas uzata por ebligi dinamikan HTML-enhavon por aldoni popovers. Vidu ĉi tion kaj informan ekzemplon .
ŝablono ŝnuro '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Baza HTML por uzi dum kreado de la popover.

La popover-oj titleestos injektitaj en la .popover-title.

La popover-oj contentestos injektitaj en la .popover-content.

.arrowfariĝos la sago de la popover.

La plej ekstera envolvaĵelemento devus havi la .popoverklason.

titolo ŝnuro | funkcio ''

Defaŭlta titolvaloro se titleatributo ne ĉeestas.

Se funkcio estas donita, ĝi estos vokita kun ĝia thisreferenco aro al la elemento al kiu la popover estas alfiksita.

ellasilon ŝnuro 'klako' Kiel popover estas ekigita - klaku | ŝvebi | fokuso | manlibro. Vi povas pasi plurajn ellasilon; apartigu ilin per spaco. manualne povas esti kombinita kun iu ajn alia ellasilo.
vidujo ŝnuro | objekto | funkcio { elektilo: 'korpo', kompletigo: 0}

Tenas la popover ene de la limoj de ĉi tiu elemento. Ekzemplo: viewport: '#viewport'{ "selector": "#viewport", "padding": 0 }

Se funkcio estas donita, ĝi estas vokita kun la ekiga elemento DOM-nodo kiel ĝia nura argumento. La thiskunteksto estas agordita al la popover-instanco.

Datumaj atributoj por individuaj popovers

Opcioj por individuaj popovers povas alternative esti precizigitaj per la uzo de datumaj atributoj, kiel klarigite supre.

Metodoj

$().popover(options)

Inicialigas popovers por elemento kolekto.

.popover('show')

Rivelas la popover de elemento. Revenas al la alvokanto antaŭ ol la popover efektive montriĝis (te antaŭ ol la shown.bs.popoverevento okazas). Tio estas konsiderita "manlibro" ekigado de la popover. Popovers kies kaj titolo kaj enhavo estas nullongaj neniam estas montrataj.

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

.popover('hide')

Kaŝas la popover de elemento. Revenas al la alvokanto antaŭ ol la popover efektive estis kaŝita (te antaŭ ol la hidden.bs.popoverevento okazas). Tio estas konsiderita "manlibro" ekigado de la popover.

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

.popover('toggle')

Ŝaltas la popover de elemento. Revenas al la alvokanto antaŭ ol la popover efektive estis montrita aŭ kaŝita (t.e. antaŭ ol la shown.bs.popoverevento hidden.bs.popoverokazas). Tio estas konsiderita "manlibro" ekigado de la popover.

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

.popover('destroy')

Kaŝas kaj detruas la popover de elemento. Popovers kiuj uzas delegacion (kiuj estas kreitaj uzante la selectoropcion ) ne povas esti individue detruitaj sur posteulaj ellasilelementoj.

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

Eventoj

Eventa Tipo Priskribo
show.bs.popover Ĉi tiu evento tuj ekfunkciigas kiam la showekzempla metodo estas vokita.
montrata.bs.popover Ĉi tiu evento estas lanĉita kiam la popover fariĝis videbla por la uzanto (atendos ke CSS-transiroj finiĝos).
kaŝi.bs.popover Ĉi tiu evento estas lanĉita tuj kiam la hideekzempla metodo estas vokita.
kaŝita.bs.popover Ĉi tiu evento estas lanĉita kiam la popover finiĝis kaŝita de la uzanto (atendos ke CSS-transiroj finiĝos).
enigita.bs.popover Ĉi tiu evento estas lanĉita post la show.bs.popoverevento kiam la popover ŝablono estis aldonita al la DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Avertmesaĝoj alert.js

Ekzemplaj atentigoj

Aldonu malakceptan funkcion al ĉiuj alarmaj mesaĝoj per ĉi tiu kromaĵo.

Kiam oni uzas .closebutonon, ĝi devas esti la unua filo de la .alert-dismissiblekaj neniu tekstenhavo povas esti antaŭ ĝi en la markado.

Uzado

Nur aldonu data-dismiss="alert"al via fermbutono por aŭtomate doni atentan proksiman funkcion. Fermi alarmon forigas ĝin de la DOM.

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

Por ke viaj atentigoj uzu animacion dum la fermo, certigu, ke ili havas la klasojn .fadekaj jam aplikatajn al ili..in

Metodoj

$().alert()

Atentigas aŭskulti klakajn eventojn pri devenaj elementoj, kiuj havas la data-dismiss="alert"atributon. (Ne necesas kiam vi uzas la aŭtomatan inicialigon de la datum-api.)

$().alert('close')

Fermas alarmon forigante ĝin de la DOM. Se la .fadekaj .inklasoj ĉeestas sur la elemento, la atentigo forvelkos antaŭ ol ĝi estas forigita.

Eventoj

La atentiga kromaĵo de Bootstrap elmontras kelkajn eventojn por aliĝi al atentiga funkcio.

Eventa Tipo Priskribo
fermu.bs.alerton Ĉi tiu evento tuj ekfunkciigas kiam la closeekzempla metodo estas vokita.
fermita.bs.alerto Ĉi tiu evento estas lanĉita kiam la atentigo estas fermita (atendos ke CSS-transiroj finiĝos).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Butonoj button.js

Faru pli per butonoj. Kontrolu butonajn ŝtatojn aŭ kreu grupojn de butonoj por pli da komponantoj kiel ilobretoj.

Inter-retumila kongruo

Fajrovulpo daŭras formkontrolajn statojn (malfunkcieco kaj kontrolado) tra paĝŝarĝoj . Solvo por ĉi tio estas uzi autocomplete="off". Vidu Mozilo-cimon #654072 .

Stateful

Aldonu data-loading-text="Loading..."por uzi ŝarĝan staton sur butono.

Ĉi tiu funkcio estas malrekomendita ekde v3.3.5 kaj estis forigita en v4.

Uzu kian ajn staton vi ŝatas!

Por ĉi tiu pruvo, ni uzas data-loading-textkaj $().button('loading'), sed tio ne estas la sola stato, kiun vi povas uzi. Vidu pli pri tio ĉi malsupre en la $().button(string)dokumentado .

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

Ununura baskulo

Aldonu data-toggle="button"por aktivigi baskulon sur ununura butono.

Antaŭ-ŝanĝitaj butonoj bezonas .activekajaria-pressed="true"

Por antaŭŝanĝitaj butonoj, vi devas aldoni la .activeklason kaj la aria-pressed="true"atributon al la buttonmem.

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

Markobutono / Radio

Aldonu data-toggle="buttons"al .btn-groupenhava markobutono aŭ radio-enigaĵojn por ebligi ŝanĝi en iliaj respektivaj stiloj.

Antaŭelektitaj elektoj bezonas.active

Por antaŭelektitaj opcioj, vi mem devas aldoni la .activeklason al la enigo label.

Vida kontrolita stato nur ĝisdatigita alklakante

Se la markita stato de markobutono butono estas ĝisdatigita sen lanĉi clickeventon sur la butono (ekz. per <input type="reset">aŭ per agordo de la checkedposedaĵo de la enigo), vi devos mem ŝalti la .activeklason sur la enigo 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>

Metodoj

$().button('toggle')

Ŝaltigas puŝan staton. Donas al la butono la aspekton, ke ĝi estas aktivigita.

$().button('reset')

Restarigas butonan staton - interŝanĝas tekston al originala teksto. Ĉi tiu metodo estas nesinkrona kaj revenas antaŭ ol la restarigo efektive finiĝis.

$().button(string)

Interŝanĝas tekston al iu ajn datuma difinita teksto-stato.

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

Kolapso collapse.js

Fleksebla kromaĵo, kiu uzas manplenon da klasoj por facila ŝanĝa konduto.

Dependeco de kromprogramoj

Kolapso postulas, ke la transiraj kromaĵo estu inkluzivita en via versio de Bootstrap.

Ekzemplo

Alklaku la subajn butonojn por montri kaj kaŝi alian elementon per klasŝanĝoj:

  • .collapsekaŝas enhavon
  • .collapsingestas aplikata dum transiroj
  • .collapse.inmontras enhavon

Vi povas uzi ligilon kun la hrefatributo, aŭ butonon kun la data-targetatributo. En ambaŭ kazoj, la data-toggle="collapse"estas postulata.

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>

Ekzemplo de akordiono

Etendi la defaŭltan kolapsan konduton por krei akordionon kun la panela komponanto.

Anim pariatur kliŝo reprehenderit, enim eiusmod alta vivo akuzas terry richardson ad kalmaro. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Manĝkamiono quinoa nesciunt laborum eiusmod. Brunch 3 lupo luno tempor, sunt aliqua metis birdon sur ĝin kalmaro unu-devena kafo 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 metia biero farm-al-table, kruda denim estetika sinteza nesciunt vi verŝajne ne aŭdis pri ili accusamus labore daŭrigebla VHS.
Anim pariatur kliŝo reprehenderit, enim eiusmod alta vivo akuzas terry richardson ad kalmaro. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Manĝkamiono quinoa nesciunt laborum eiusmod. Brunch 3 lupo luno tempor, sunt aliqua metis birdon sur ĝin kalmaro unu-devena kafo 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 metia biero farm-al-table, kruda denim estetika sinteza nesciunt vi verŝajne ne aŭdis pri ili accusamus labore daŭrigebla VHS.
Anim pariatur kliŝo reprehenderit, enim eiusmod alta vivo akuzas terry richardson ad kalmaro. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Manĝkamiono quinoa nesciunt laborum eiusmod. Brunch 3 lupo luno tempor, sunt aliqua metis birdon sur ĝin kalmaro unu-devena kafo 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 metia biero farm-al-table, kruda denim estetika sinteza nesciunt vi verŝajne ne aŭdis pri ili accusamus labore daŭrigebla 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>

Eblas ankaŭ interŝanĝi .panel-bodys kun .list-groups.

  • Bootply
  • Unu itmus ac facilin
  • Dua eros

Faru vastigi/kolapsi kontrolojn alireblaj

Nepre aldonu aria-expandedal la kontrolelemento. Ĉi tiu atributo eksplicite difinas la nunan staton de la faldebla elemento al ekranlegantoj kaj similaj helpaj teknologioj. Se la faldebla elemento estas fermita defaŭlte, ĝi devus havi valoron de aria-expanded="false". Se vi agordis la faldeblan elementon por esti malfermita defaŭlte uzante la inklason, agorduaria-expanded="true" anstataŭe agordu la kontrolon. La kromaĵo aŭtomate ŝanĝos ĉi tiun atributon laŭ ĉu la faldebla elemento estis malfermita aŭ fermita aŭ ne.

Aldone, se via kontrolelemento celas ununuran faldeblan elementon – te la data-targetatributo indikas idelektilon – vi povas aldoni plian aria-controlsatributon al la kontrolelemento, enhavanta la idde la faldebla elemento. Modernaj ekranlegiloj kaj similaj helpaj teknologioj uzas ĉi tiun atributon por provizi uzantojn per kromaj ŝparvojoj por navigi rekte al la faldebla elemento mem.

Uzado

La kolapsa kromaĵo uzas kelkajn klasojn por trakti la pezan ŝarĝon:

  • .collapsekaŝas la enhavon
  • .collapse.inmontras la enhavon
  • .collapsingestas aldonita kiam la transiro komenciĝas, kaj forigita kiam ĝi finiĝas

Ĉi tiuj klasoj troviĝas en component-animations.less.

Per datumaj atributoj

Nur aldonu data-toggle="collapse"kaj a data-targetal la elemento por aŭtomate asigni kontrolon de faldebla elemento. La data-targetatributo akceptas CSS-elektilon al kiu apliki la kolapson. Nepre aldonu la klason collapseal la faldebla elemento. Se vi ŝatus, ke ĝi defaŭlte malfermu, aldonu la aldonan klasonin .

Por aldoni akordion-similan grupadministradon al faldebla kontrolo, aldonu la datuman atributon data-parent="#selector". Riferu al la demo por vidi ĉi tion en ago.

Per JavaScript

Ebligu permane per:

$('.collapse').collapse()

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-parent="".

Nomo tajpu defaŭlte Priskribo
gepatro elektilo malvera Se elektilo estas provizita, tiam ĉiuj faldeblaj elementoj sub la specifita gepatro estos fermitaj kiam ĉi tiu faldebla ero montriĝas. (simila al tradicia akordiona konduto - tio dependas de la panelklaso)
baskuli bulea vera Ŝaltas la faldeblan elementon ĉe alvoko

Metodoj

.collapse(options)

Aktivigas vian enhavon kiel faldebla elemento. Akceptas laŭvolajn opciojn object.

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

.collapse('toggle')

Ŝaltas faldebla elemento al montrita aŭ kaŝita. Revenas al la alvokanto antaŭ ol la faldebla elemento efektive estis montrita aŭ kaŝita (t.e. antaŭ ol okazas la shown.bs.collapsehidden.bs.collapseevento).

.collapse('show')

Montras faldeblan elementon. Revenas al la alvokanto antaŭ ol la faldebla elemento efektive montriĝis (te antaŭ ol la shown.bs.collapseevento okazas).

.collapse('hide')

Kaŝas faldeblan elementon. Revenas al la alvokanto antaŭ ol la faldebla elemento efektive estis kaŝita (te antaŭ lahidden.bs.collapse evento okazas).

Eventoj

La kolapsoklaso de Bootstrap elmontras kelkajn eventojn por hoki en kolapfunkciecon.

Eventa Tipo Priskribo
montri.bs.kolapso Ĉi tiu evento tuj ekfunkciigas kiam la showekzempla metodo estas vokita.
montrita.bs.kolapso Ĉi tiu okazaĵo estas pafita kiam kolapelemento fariĝis videbla por la uzanto (atendos ke CSS-transiroj finiĝos).
kaŝi.bs.kolapso Ĉi tiu evento estas lanĉita tuj kiam la hidemetodo estas vokita.
kaŝita.bs.kolapso Ĉi tiu okazaĵo estas pafita kiam kolapelemento estis kaŝita de la uzanto (atendos ke CSS-transiroj finiĝos).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Karuselo carousel.js

Bildprezenta komponanto por bicikli tra elementoj, kiel karuselo. Nestitaj karuseloj ne estas subtenataj.

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

Laŭvolaj subtitoloj

Aldonu subtitolojn al viaj diapozitivoj facile per la .carousel-captionelemento en iu ajn .item. Metu preskaŭ ajnan laŭvolan HTML tie kaj ĝi estos aŭtomate vicigita kaj formatita.

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

Multoblaj karuseloj

Karuseloj postulas la uzon de idsur la plej ekstera ujo (la .carousel) por ke karuselaj kontroloj funkciu ĝuste. Aldonante plurajn karuselojn aŭ ŝanĝante karuselojn id, nepre ĝisdatigu la koncernajn kontrolojn.

Per datumaj atributoj

Uzu datumajn atributojn por facile kontroli la pozicion de la karuselo. data-slideakceptas la ŝlosilvortojn prevnext, kiu ŝanĝas la glitpozicion rilate al ĝia nuna pozicio. Alternative, uzu data-slide-topor transdoni krudan glitan indekson al la karuselo data-slide-to="2", kiu movas la glitpozicion al aparta indekso komencanta per 0.

La data-ride="carousel"atributo estas uzata por marki karuselon kiel vigliganta ekde la paĝa ŝarĝo. Ĝi ne povas esti uzata en kombinaĵo kun (redunda kaj nenecesa) eksplicita JavaScript-komencigo de la sama karuselo.

Per JavaScript

Voku karuselon permane kun:

$('.carousel').carousel()

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-interval="".

Nomo tajpu defaŭlte Priskribo
intervalo nombro 5000 La kvanto da tempo por prokrasti inter aŭtomate biciklado de objekto. Se estas malvera, karuselo ne aŭtomate biciklos.
paŭzo ŝnuro | nulo "ŝvebi" Se agordita al "hover", paŭzas la bicikladon de la karuselo mouseenterkaj rekomencas la bicikladon de la karuselo mouseleave. Se agordita al null, ŝvebi super la karuselo ne paŭzos ĝin.
envolvi bulea vera Ĉu la karuselo devas bicikli kontinue aŭ havi malfacilajn haltojn.
klavaro bulea vera Ĉu la karuselo devus reagi al klavaraj eventoj.

Komencas la karuselon kun laŭvolaj opcioj objectkaj komencas bicikli tra eroj.

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

Biciklas tra la karuselaj eroj de maldekstre dekstren.

Maldaŭrigas la karuselon de bicikli tra eroj.

Biciklas la karuselon al aparta kadro (bazita 0, simila al tabelo).

Ciklas al la antaŭa ero.

Bicikloj al la sekva ero.

La karuselklaso de Bootstrap elmontras du okazaĵojn por hoki en karuselfunkciecon.

Ambaŭ okazaĵoj havas la sekvajn kromajn trajtojn:

  • direction: La direkto en kiu la karuselo glitas (aŭ "left""right").
  • relatedTarget: La DOM-elemento kiu estas glita en lokon kiel la aktiva objekto.

Ĉiuj karuselaj eventoj estas pafitaj ĉe la karuselo mem (te ĉe la <div class="carousel">).

Eventa Tipo Priskribo
gliti.bs.karuselo Ĉi tiu okazaĵo tuj ekfunkciigas kiam la slideekzempla metodo estas alvokita.
gliti.bs.karuselo Ĉi tiu evento estas pafita kiam la karuselo kompletigis sian glitan transiron.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Afikso affix.js

Ekzemplo

La afiksa kromaĵo ŝaltas position: fixed;kaj malŝaltas, imitante la efikon trovitan per position: sticky;. La subnavigado dekstre estas reala demo de la afiksa kromaĵo.


Uzado

Uzu la afiksan kromaĵon per datumaj atributoj aŭ permane per via propra JavaScript.En ambaŭ situacioj, vi devas provizi CSS por la pozicio kaj larĝo de via fiksita enhavo.

Noto: Ne uzu la afiksan kromprogramon sur elemento enhavita en relative poziciigita elemento, kiel tirita aŭ puŝita kolumno, pro Safara bildigo .

Poziciigado per CSS

La afiksa kromaĵo ŝanĝas inter tri klasoj, ĉiu reprezentante apartan staton: .affix, .affix-top, kaj .affix-bottom. Vi devas mem provizi la stilojn, kun la escepto de position: fixed;on .affix, por ĉi tiuj klasoj (sendepende de ĉi tiu kromaĵo) por pritrakti la realajn poziciojn.

Jen kiel funkcias la afiksa kromaĵo:

  1. Por komenci, la kromprogramo aldonas.affix-top por indiki, ke la elemento estas en sia plej alta pozicio. Je ĉi tiu punkto neniu CSS-poziciigo estas bezonata.
  2. Rulumado preter la elemento, kiun vi volas alfiksi, devus ekigi la realan alfiksadon. Jen kie .affixanstataŭigas .affix-topkaj aroj position: fixed;(provizitaj de CSS de Bootstrap).
  3. Se malsupra ofseto estas difinita, movu preter ĝi devus anstataŭigi .affixper .affix-bottom. Ĉar kompensoj estas laŭvolaj, agordi unu postulas, ke vi agordu la taŭgan CSS. En ĉi tiu kazo, aldonu position: absolute;kiam necese. La kromaĵo uzas la datuman atributon aŭ JavaScript-opcion por determini kie poziciigi la elementon de tie.

Sekvu la suprajn paŝojn por agordi vian CSS por iu el la malsupraj uzado-opcioj.

Per datumaj atributoj

Por facile aldoni afiksan konduton al iu ajn elemento, simple aldonu data-spy="affix"al la elemento, kiun vi volas spioni. Uzu ofsetojn por difini kiam ŝanĝi la alpinglon de elemento.

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

Per JavaScript

Voku la afiksan kromprogramon per JavaScript:

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

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-offset-top="200".

Nomo tajpu defaŭlte Priskribo
ofseto nombro | funkcio | objekto 10 Pikseloj por kompensi de ekrano dum kalkulado de pozicio de rullibro. Se ununura nombro estas provizita, la ofseto estos aplikata en ambaŭ supraj kaj malsupraj direktoj. Por provizi unikan, malsupran kaj supran ofseton simple provizi objekton offset: { top: 10 }offset: { top: 10, bottom: 5 }. Uzu funkcion kiam vi bezonas dinamike kalkuli ofseton.
celo elektilo | nodo | jQuery-elemento la windowobjekto Specifas la celelementon de la afikso.

Metodoj

.affix(options)

Aktivigas vian enhavon kiel fiksita enhavo. Akceptas laŭvolajn opciojn object.

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

.affix('checkPosition')

Rekalkulas la staton de la afikso surbaze de la dimensioj, pozicio kaj rulpozicio de la koncernaj elementoj. La .affix, .affix-top, kaj .affix-bottomklasoj estas aldonitaj aŭ forigitaj de la alfiksita enhavo laŭ la nova stato. Ĉi tiu metodo devas esti nomita kiam ajn la dimensioj de la fiksita enhavo aŭ la cela elemento estas ŝanĝitaj, por certigi ĝustan poziciigon de la fiksita enhavo.

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

Eventoj

La afiksa kromaĵo de Bootstrap elmontras kelkajn eventojn por enganki al afiksa funkcio.

Eventa Tipo Priskribo
afikso.bs.afikso Ĉi tiu evento ekfunkcias tuj antaŭ ol la elemento estis fiksita.
alfiksita.bs.afikso Ĉi tiu evento estas lanĉita post kiam la elemento estis fiksita.
afikso-supro.bs.afikso Ĉi tiu evento ekfunkcias tuj antaŭ ol la elemento estis fiksita supre.
fiksita-supro.bs.afikso Ĉi tiu evento estas lanĉita post kiam la elemento estis fiksita supre.
afikso-fundo.bs.afikso Ĉi tiu evento ekfunkciigas tuj antaŭ ol la elemento estis alfiksita-malsupre.
alfiksita-fundo.bs.afikso Ĉi tiu evento estas lanĉita post kiam la elemento estis alfiksita malsupre.