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

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

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

Sanitizer

Konsiletoj kaj Popovers uzas nian enkonstruitan sanigilon por malpurigi opciojn kiuj akceptas HTML.

La defaŭlta whiteListvaloro estas la sekva:

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

Se vi volas aldoni novajn valorojn al ĉi tiu defaŭlto whiteList, vi povas fari la jenon:

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

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

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

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

Se vi volas preteriri nian sanigilon ĉar vi preferas uzi dediĉitan bibliotekon, ekzemple DOMPurify , vi devus fari la jenon:

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

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

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 laŭmendajn kompensojn.

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.jsaŭ bootstrap.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.

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

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

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

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

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

Forigi animacion

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

Varianta modala enhavo bazita sur ellasilbutono

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

<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 movuman konduton kaj generas .modal-backdroppor disponigi klakan areon por forĵeti montritajn modalojn kiam klakado 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"aŭ 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="".

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

Metodoj

.modal(options)

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

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

.modal('toggle')

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

.modal('show')

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

.modal('hide')

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

.modal('handleUpdate')

Reĝustigas la pozicion 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">).

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

Dropdowns dropdown.js

Ekzemploj

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

Uzado

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

Opcioj

Neniu

Metodoj

$().dropdown('toggle')

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

Eventoj

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

$('#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 bazitajn sur rulpozicio. Rulumu la areon sub la navbar kaj rigardu la aktivan klasŝanĝon. La submenuaj suberoj ankaŭ estos reliefigitaj.

Uzado

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

Eventoj

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

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"aŭ data-toggle="pill"sur elemento. Aldonante la navkaj nav-tabsklasojn al la langeto aplikas la stilon de la langetoul Bootstrap , dum aldonado de la kaj klasoj aplosos pilolstilon .navnav-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>

Fade efiko

Por ke klapetoj 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 langeto-elementon kaj enhavujon. Tab devus havi aŭ a data-targetaŭ hrefcelanta ujo-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.

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

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>

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

Opcioj

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

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ŭ lahidden.bs.tooltip evento 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

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

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

Ekzemploj

Senmova popover

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

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.

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

Metodoj

$().popover(options)

Inicializas 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ŭ lahidden.bs.popover evento 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

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

Avertmesaĝoj alert.js

Ekzemplaj atentigoj

Aldonu malakceptan funkcion al ĉiuj atentaj 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.in klasoj ĉ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.

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

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.

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

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

Ununura baskulo

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

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  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.

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

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

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">
  ...
</button>

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

Kolapsi collapse.js

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

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.

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

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

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

Tiuj ĉi klasoj troviĝas en component-animations.less.

Per datumaj atributoj

Nur aldonu data-toggle="collapse"kaj a data-targetal la elemento por aŭtomate atribui 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 klason in.

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

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.collapseaŭ hidden.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ŭ ol la hidden.bs.collapseevento okazas).

Eventoj

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

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

Karuselo carousel.js

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

Ekzemploj

Antaŭa Poste

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

Unua glita etikedo

Nulla vitae elit libero, a pharetra augue mollis interdum.

Dua glita etikedo

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tria glita etikedo

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Antaŭa Poste

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

Uzado

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 prevaŭ next, 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 mane per:

$('.carousel').carousel()

Opcioj

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

Metodoj

.carousel(options)

Inicializas la karuselon kun laŭvolaj opciojobject kaj komencas bicikli tra eroj.

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

.carousel('cycle')

Biciklas tra la karuselaj eroj de maldekstre dekstren.

.carousel('pause')

Maldaŭrigas la karuselon de bicikli tra eroj.

.carousel(number)

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

.carousel('prev')

Ciklas al la antaŭa ero.

.carousel('next')

Bicikloj al la sekva ero.

Eventoj

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

Ambaŭ okazaĵoj havas la sekvajn kromajn trajtojn:

• direction: La direkto en kiu la karuselo glitas (aŭ "left"aŭ"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">).

$('#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 tirata 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 aldonudata-spy="affix" al la elemento, kiun vi volas spioni. Uzu kompensojn 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".

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.