Yfirlit

Einstök eða samsett

Viðbætur geta verið innifalin fyrir sig (með því að nota einstakar *.jsskrár Bootstrap), eða allar í einu (með því að nota bootstrap.jseða minnkað bootstrap.min.js).

Gagnaeiginleikar

Þú getur notað allar Bootstrap viðbætur eingöngu í gegnum markup API án þess að skrifa eina línu af JavaScript. Þetta er fyrsta flokks API frá Bootstrap og ætti að vera fyrsta íhugun þín þegar þú notar viðbót.

Sem sagt, í sumum tilfellum getur verið æskilegt að slökkva á þessari virkni. Þess vegna bjóðum við einnig upp á möguleikann á að slökkva á gagnaeigininni API með því að afbinda alla atburði á skjalinu með nafnabili data-api. Þetta lítur svona út:

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

Að öðrum kosti, til að miða á ákveðna viðbót, skaltu bara láta nafn viðbótarinnar fylgja með sem nafnrými ásamt data-api nafnrýminu eins og þetta:

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

Forritað API

Við teljum líka að þú ættir að geta notað öll Bootstrap viðbætur eingöngu í gegnum JavaScript API. Öll opinber API eru stakar, keðjanlegar aðferðir og skila söfnuninni sem brugðist hefur verið við.

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

Allar aðferðir ættu að samþykkja valfrjálsan valmöguleikahlut, streng sem miðar á tiltekna aðferð eða ekkert (sem kemur af stað viðbót með sjálfgefna hegðun):

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

Hver tappi afhjúpar einnig hráan smið á Constructoreign: $.fn.popover.Constructor. Ef þú vilt fá tiltekið viðbótatilvik skaltu sækja það beint úr frumefni: $('[rel="popover"]').data('popover').

Sjálfgefnar stillingar

Þú getur breytt sjálfgefnum stillingum fyrir viðbót með því að breyta Constructor.DEFAULTShlut viðbótarinnar:

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

Engin átök

Stundum er nauðsynlegt að nota Bootstrap viðbætur með öðrum UI ramma. Við þessar aðstæður geta árekstrar í nafnrými átt sér stað einstaka sinnum. Ef þetta gerist geturðu hringt .noConflictí viðbótina sem þú vilt breyta gildinu á.

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

Viðburðir

Bootstrap býður upp á sérsniðna atburði fyrir einstaka aðgerðir flestra viðbætur. Yfirleitt koma þær í óendanlegu formi og þátíð - þar sem óendanlegur (til dæmis show) er ræstur í upphafi atburðar, og þátíðarform hans (til dæmis shown) er ræst þegar aðgerð er lokið.

Frá og með 3.0.0 eru allir Bootstrap viðburðir með nafnabili.

Allir óendanlegir atburðir veita preventDefaultvirkni. Þetta veitir möguleika á að stöðva framkvæmd aðgerða áður en hún hefst.

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

Hreinsiefni

Tooltips og Popovers nota innbyggða sótthreinsiefnið okkar til að hreinsa valkosti sem samþykkja HTML.

Sjálfgefið whiteListgildi er eftirfarandi:

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: []
}

Ef þú vilt bæta nýjum gildum við þetta sjálfgefið whiteListgeturðu gert eftirfarandi:

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)

Ef þú vilt komast framhjá hreinsiefninu okkar vegna þess að þú vilt frekar nota sérstakt bókasafn, til dæmis DOMPurify , ættirðu að gera eftirfarandi:

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

Útgáfunúmer

Hægt er að nálgast útgáfuna af hverri jQuery viðbót Bootstrap í gegnum VERSIONeign byggingaraðila viðbótarinnar. Til dæmis, fyrir tooltip viðbótina:

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

Engar sérstakar frávik þegar JavaScript er óvirkt

Viðbætur Bootstrap falla ekki sérstaklega tignarlega til baka þegar JavaScript er óvirkt. Ef þér er annt um notendaupplifunina í þessu tilviki, notaðu <noscript>þá til að útskýra aðstæður (og hvernig á að virkja JavaScript aftur) fyrir notendum þínum og/eða bæta við eigin sérsniðnum fallbacks.

Umskipti transition.js

Um umskipti

Til að fá einföld umbreytingaráhrif skaltu setja transition.jseinu sinni ásamt öðrum JS skrám. Ef þú ert að nota samsetta (eða minnkaða) bootstrap.js, þá er engin þörf á að hafa þetta með – það er þegar til staðar.

Hvað er inni

Transition.js er grunnhjálp fyrir transitionEndviðburði sem og CSS umbreytingarhermi. Það er notað af öðrum viðbótum til að athuga hvort stuðningur við CSS umskipti sé og til að ná hangandi umbreytingum.

Slökkva á umskiptum

Hægt er að slökkva á umbreytingum á heimsvísu með því að nota eftirfarandi JavaScript bút, sem verður að koma eftir að transition.js(eða bootstrap.jseða bootstrap.min.js, eftir atvikum) hefur verið hlaðið:

$.support.transition = false

Modals modal.js

Modals eru straumlínulagaðar, en sveigjanlegar, svarglugga með lágmarks virkni og snjöllum sjálfgefnum stillingum.

Vegna þess hvernig HTML5 skilgreinir merkingarfræði sína, hefur autofocusHTML eigindin engin áhrif í Bootstrap aðferðum. Til að ná sömu áhrifum skaltu nota sérsniðið JavaScript:

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

Dæmi

Statískt dæmi

Útgjört form með haus, meginmáli og aðgerðasetti í síðufæti.

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

Sýning í beinni

Skiptu um form í gegnum JavaScript með því að smella á hnappinn hér að neðan. Það mun renna niður og hverfa inn efst á síðunni.

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

Valfrjálsar stærðir

Modals hafa tvær valfrjálsar stærðir, fáanlegar í gegnum breytingaflokka til að setja á .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>

Fjarlægðu hreyfimyndir

Fyrir snið sem einfaldlega birtast frekar en að hverfa inn til að skoða, fjarlægðu .fadeflokkinn úr aðferðamerkingunni þinni.

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

Notkun netkerfisins

Til að nýta Bootstrap grid kerfið innan forms, hreiðurðu bara .rows innan .modal-bodyog notaðu síðan venjulega grid kerfisflokkana.

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

Breytilegt efni byggt á kveikjuhnappi

Ertu með fullt af hnöppum sem kveikja allir á sama forminu, bara með aðeins mismunandi innihaldi? Notaðu event.relatedTargetog HTML data-*eiginleika (hugsanlega í gegnum jQuery ) til að breyta innihaldi formsins eftir því hvaða hnapp var smellt á. Sjá Modal Events skjölin fyrir upplýsingar um 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)
})

Notkun

Modal viðbótin skiptir um falið efni eftir beiðni, með gagnaeiginleikum eða JavaScript. Það bætir einnig við .modal-openað <body>hnekkja sjálfgefnum skrunhegðun og býr .modal-backdroptil smellisvæði til að hafna sýndum aðferðum þegar smellt er utan aðferðarinnar.

Í gegnum gagnaeiginleika

Virkjaðu form án þess að skrifa JavaScript. Stillt data-toggle="modal"á stjórnunareiningu, eins og hnapp, ásamt a data-target="#foo"eða href="#foo"til að miða á ákveðna aðferð til að skipta.

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

Með JavaScript

Hringdu í modal með auðkenni myModalmeð einni línu af JavaScript:

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

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-backdrop="".

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

Aðferðir

.modal(options)

Virkjar efnið þitt sem form. Samþykkir valfrjálsa valkosti object.

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

.modal('toggle')

Skiptir handvirkt um form. Snýr aftur til þess sem hringir áður en aðferðin hefur verið sýnd eða falin (þ.e. áður en atburðurinn shown.bs.modaleða hidden.bs.modalá sér stað).

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

.modal('show')

Opnar form handvirkt. Snýr aftur til þess sem hringir áður en aðferðin hefur verið sýnd (þ.e. áður en shown.bs.modalatburðurinn á sér stað).

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

.modal('hide')

Felur form handvirkt. Snýr aftur til þess sem hringir áður en aðferðin hefur verið falin (þ.e. áður en hidden.bs.modalatburðurinn á sér stað).

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

.modal('handleUpdate')

Endurstillir staðsetningu módelsins til að vinna gegn skrunstiku ef einhver ætti að birtast, sem myndi láta aðferðina hoppa til vinstri.

Aðeins þörf þegar hæð mótsins breytist á meðan hún er opin.

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

Viðburðir

Modal flokkur Bootstrap afhjúpar nokkra atburði til að tengja við formlega virkni.

Öllum mótunarviðburðum er skotið á mótalið sjálft (þ.e. á <div class="modal">).

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

Dropdowns dropdown.js

Dæmi

Bættu fellivalmyndum við næstum hvað sem er með þessari einföldu viðbót, þar á meðal navbar, flipa og pillur.

Innan siglingastiku

Innan pilla

Notkun

Í gegnum gagnaeiginleika eða JavaScript breytir fellivalmyndinni falið efni (fellivalmyndir) með því að skipta um .openbekk á yfirliðinu á listanum.

Í farsímum bætir það við að opna fellivalmynd .dropdown-backdropsem tappasvæði til að loka fellivalmyndum þegar bankað er utan valmyndarinnar, sem er krafa um réttan iOS stuðning. Þetta þýðir að til að skipta úr opinni fellivalmynd yfir í aðra fellivalmynd þarf aukasmellingu á farsíma.

Athugið: data-toggle="dropdown"Stuðst er við eiginleikann til að loka fellivalmyndum á forritastigi, svo það er góð hugmynd að nota hann alltaf.

Í gegnum gagnaeiginleika

Bættu data-toggle="dropdown"við tengil eða hnapp til að skipta um fellilista.

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

Til að halda vefslóðum óskertum með tenglahnöppum skaltu nota data-targeteigindina í stað 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>

Með JavaScript

Hringdu í fellilistana í gegnum JavaScript:

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

Valmöguleikar

Enginn

Aðferðir

$().dropdown('toggle')

Skiptir á fellivalmynd tiltekinnar siglingastiku eða flipaleiðsögu.

Viðburðir

Allir fellilistann atburðir eru ræstir á .dropdown-menu's parent element.

Allir atburðir í fellilistanum eru með relatedTargeteiginleika þar sem gildi hans er kveikjankeri.

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Dæmi í navbar

ScrollSpy viðbótin er til að uppfæra siglingamarkmið sjálfkrafa á grundvelli skrunstöðu. Skrunaðu svæðið fyrir neðan siglingastikuna og horfðu á virka bekkinn breytast. Undirliðir í fellilistanum verða einnig auðkenndir.

Notkun

Krefst hlutfallslegrar staðsetningar

Sama innleiðingaraðferðina, scrollspy krefst þess að þú notir position: relative;þáttinn sem þú ert að njósna um. Í flestum tilfellum er þetta <body>. Þegar þú flettir á aðra þætti en <body>, vertu viss um að hafa heightsett og overflow-y: scroll;notað.

Í gegnum gagnaeiginleika

Til að bæta scrollspy hegðun auðveldlega við toppstikuna þína skaltu bæta data-spy="scroll"við þættinum sem þú vilt njósna um (oftast væri þetta <body>). Bættu síðan við data-targeteigindinni með auðkenninu eða flokki móðurþáttar hvers Bootstrap .navíhluta.

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>

Með JavaScript

Eftir að þú hefur bætt position: relative;við CSS skaltu hringja í scrollspy í gegnum JavaScript:

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

Aðferðir

.scrollspy('refresh')

Þegar þú notar scrollspy í tengslum við að bæta við eða fjarlægja þætti úr DOM þarftu að kalla á endurnýjunaraðferðina svona:

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

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-offset="".

Viðburðir

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Skiptanlegur flipar tab.js

Dæmi flipar

Bættu við skjótum, kraftmiklum flipavirkni til að skipta í gegnum svæðisrúður, jafnvel með fellivalmyndum. Hreiður flipar eru ekki studdir.

Notkun

Virkjaðu flipa sem hægt er að nota með JavaScript (hvern flipa þarf að virkja fyrir sig):

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

Þú getur virkjað einstaka flipa á nokkra vegu:

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

Markup

Þú getur virkjað flipa eða pilluleiðsögn án þess að skrifa JavaScript með því einfaldlega að tilgreina data-toggle="tab"eða data-toggle="pill"á frumefni. Ef þú bætir flokkunum navog nav-tabsvið flipann ulverður Bootstrap flipasniðið notað , en ef þú bætir navog nav-pillsflokkunum verður notað pillusnið .

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

Til að láta flipa hverfa inn skaltu bæta .fadevið hvern .tab-pane. Fyrsta fliparúðan verður einnig .inað gera upphafsefnið sýnilegt.

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

Aðferðir

$().tab

Virkjar flipaþátt og innihaldsílát. Tab ætti að hafa annað hvort a data-targeteða hrefmiða á gámahnút í DOM. Í ofangreindum dæmum eru fliparnir <a>s með data-toggle="tab"eiginleikum.

.tab('show')

Velur tiltekinn flipa og sýnir tengt efni hans. Allir aðrir flipar sem áður voru valdir verða ekki valdir og tengt efni hans er falið. Fer aftur til þess sem hringir áður en flipaglugginn hefur verið sýndur (þ.e. áður en shown.bs.tabatburðurinn á sér stað).

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

Viðburðir

Þegar nýr flipi er sýndur kvikna atburðir í eftirfarandi röð:

1. hide.bs.tab(á núverandi virka flipa)
2. show.bs.tab(á flipanum sem á að sýna)
3. hidden.bs.tab(á fyrri virka flipanum, sá sami og fyrir hide.bs.tabviðburðinn)
4. shown.bs.tab(á flipanum sem nýlega var sýndur, sá sami og fyrir show.bs.tabviðburðinn)

Ef enginn flipi var þegar virkur, þá verða hide.bs.tabog hidden.bs.tabviðburðir ekki ræstir.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

Innblásin af frábæru jQuery.tipsy viðbótinni skrifað af Jason Frame; Verkfæraráð eru uppfærð útgáfa, sem treystir ekki á myndir, notar CSS3 fyrir hreyfimyndir og gagnaeiginleika fyrir staðbundna titlageymslu.

Verkfæraleiðbeiningar með núlllengdar titlum birtast aldrei.

Dæmi

Farðu yfir tenglana hér að neðan til að sjá verkfæraráð:

Statísk verkfæri

Fjórir valkostir eru í boði: efst, hægri, neðst og vinstri stillt.

Fjórar áttir

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

Notkun

The tooltip tappi býr til efni og álagningu á eftirspurn og setur sjálfgefið verkfæraábendingar á eftir kveikjuhlutanum.

Kveiktu á tóli í gegnum JavaScript:

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

Markup

Nauðsynleg merking fyrir verkfæraleiðbeiningar er aðeins dataeiginleiki og titleá HTML-einingunni viltu hafa verkfæraleiðbeiningar. Mynduð merking tækjaráðs er frekar einföld, þó hún krefjist stöðu (sjálfgefið, stillt á topaf viðbótinni).

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

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-animation="".

Aðferðir

$().tooltip(options)

Hengir verkfæraleiðbeiningum við einingarsafn.

.tooltip('show')

Sýnir verkfæraábendingu frumefnis. Snýr aftur til þess sem hringir áður en verkfæraráðið hefur verið sýnt (þ.e. áður en shown.bs.tooltipatburðurinn á sér stað). Þetta er talið „handvirk“ kveikja á tólabendingunni. Verkfæraleiðbeiningar með núlllengdar titlum birtast aldrei.

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

.tooltip('hide')

Felur ábendingu frumefnis. Snýr aftur til þess sem hringir áður en verkfæraráðið hefur verið falið (þ.e. áður en hidden.bs.tooltipatburðurinn á sér stað). Þetta er talið „handvirk“ kveikja á tólabendingunni.

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

.tooltip('toggle')

Breytir ábendingum frumefnis. Snýr aftur til þess sem hringir áður en verkfæraábendingin hefur verið sýnd eða falin (þ.e. áður en atburðurinn shown.bs.tooltipeða hidden.bs.tooltipá sér stað). Þetta er talið „handvirk“ kveikja á tólabendingunni.

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

.tooltip('destroy')

Felur og eyðileggur ábendingu frumefnis. Verkfæraábendingar sem nota úthlutun (sem eru búnar til með valmöguleikanum selector) er ekki hægt að eyða fyrir sig á afkvæma kveikjuþáttum.

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

Viðburðir

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

Popovers popover.js

Bættu litlum yfirlagi af efni, eins og á iPad, við hvaða þátt sem er til að hýsa aukaupplýsingar.

Popovers þar sem bæði titill og innihald eru núll lengd birtast aldrei.

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

Dæmi

Static popover

Fjórir valkostir eru í boði: efst, hægri, neðst og vinstri stillt.

Sýning í beinni

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

Fjórar áttir

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

Hunsa við næsta smell

Notaðu focuskveikjuna til að hafna sprettiglugga við næsta smell sem notandinn gerir.

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

Notkun

Virkja popover í gegnum JavaScript:

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

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-animation="".

Aðferðir

$().popover(options)

Frumstillir sprettiglugga fyrir þáttasafn.

.popover('show')

Sýnir popover frumefnis. Snýr aftur til þess sem hringir áður en sprettigluggan hefur verið sýnd (þ.e. áður en shown.bs.popoveratburðurinn á sér stað). Þetta er talið „handvirk“ kveikja á popover. Popovers þar sem bæði titill og innihald eru núll lengd birtast aldrei.

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

.popover('hide')

Felur sprettiglugga frumefnis. Snýr aftur til þess sem hringir áður en popover hefur verið falið (þ.e. áður en hidden.bs.popoveratburðurinn á sér stað). Þetta er talið „handvirk“ kveikja á popover.

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

.popover('toggle')

Kveikir á sprettiglugga frumefnis. Snýr aftur til þess sem hringir áður en sprettigluggan hefur verið sýnd eða falin (þ.e. áður en atburðurinn shown.bs.popovereða hidden.bs.popoverá sér stað). Þetta er talið „handvirk“ kveikja á popover.

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

.popover('destroy')

Felur og eyðileggur popover frumefnis. Popovers sem nota úthlutun (sem eru búnar til með valmöguleikanum selector) er ekki hægt að eyða hver fyrir sig á afkvæma kveikjuþáttum.

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

Viðburðir

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

Viðvörunarskilaboð alert.js

Dæmi um viðvaranir

Bættu við að hafna virkni við öll viðvörunarskilaboð með þessari viðbót.

Þegar .closehnappur er notaður verður hann að vera fyrsta barnið .alert-dismissibleog ekkert textaefni má koma á undan honum í merkingunni.

Notkun

Bættu bara við data-dismiss="alert"lokunarhnappinn þinn til að gefa sjálfkrafa viðvörunarlokunarvirkni. Lokun viðvörunar fjarlægir hana úr DOM.

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

Til að láta tilkynningar þínar nota hreyfimyndir við lokun skaltu ganga úr skugga um að þær hafi .fadeog .inflokkar þegar notaðir fyrir þær.

Aðferðir

$().alert()

Gerir viðvörun til að hlusta eftir smellaviðburðum á afkomandi þáttum sem hafa data-dismiss="alert"eiginleikann. (Ekki nauðsynlegt þegar þú notar sjálfvirka frumstillingu gagnaforritsins.)

$().alert('close')

Lokar viðvörun með því að fjarlægja hana úr DOM. Ef .fadeog .inflokkarnir eru til staðar á frumefninu mun viðvörunin hverfa áður en hún er fjarlægð.

Viðburðir

Viðvörunarviðbót Bootstrap afhjúpar nokkra atburði til að tengjast viðvörunarvirkni.

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Hnappar button.js

Gerðu meira með hnöppum. Stjórna hnappastöður eða búa til hópa af hnöppum fyrir fleiri hluti eins og tækjastikur.

Staðhæft

Bæta við data-loading-text="Loading..."til að nota hleðslustöðu á hnapp.

Þessi eiginleiki er úreltur frá v3.3.5 og hefur verið fjarlægður í 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>

Einn rofi

Bættu við data-toggle="button"til að virkja kveikt á einum hnappi.

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

Gátreitur / útvarp

Bættu data-toggle="buttons"við .btn-groupgátreit sem inniheldur gátreit eða útvarpsinntak til að gera það kleift að skipta í viðkomandi stíl.

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

Aðferðir

$().button('toggle')

Skiptir á ýtastöðu. Gefur hnappinum það útlit að hann hafi verið virkjaður.

$().button('reset')

Endurstillir stöðu hnapps - skiptir texta yfir í upprunalegan texta. Þessi aðferð er ósamstillt og skilar sér áður en endurstillingunni er í raun lokið.

$().button(string)

Skiptir texta í hvaða gagnaskilgreinda textastöðu sem er.

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

Collapse collapse.js

Sveigjanleg viðbót sem notar handfylli af flokkum til að auðvelda skiptahegðun.

Dæmi

Smelltu á hnappana hér að neðan til að sýna og fela annan þátt með bekkjarbreytingum:

• .collapsefelur efni
• .collapsinger beitt við umskipti
• .collapse.insýnir efni

Þú getur notað tengil með hrefeigindinni eða hnapp með data-targeteigindinni. Í báðum tilvikum data-toggle="collapse"er krafist.

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

Harmonikku dæmi

Framlengdu sjálfgefna fallhegðun til að búa til harmonikku með spjaldíhlutnum.

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

Það er líka hægt að skipta út .panel-bodys með .list-groups.

Notkun

Hrunviðbótin notar nokkra flokka til að takast á við þungar lyftingar:

• .collapsefelur innihaldið
• .collapse.insýnir innihaldið
• .collapsinger bætt við þegar umskiptin hefjast og fjarlægð þegar þeim lýkur

Þessa flokka er að finna í component-animations.less.

Í gegnum gagnaeiginleika

Bættu bara við data-toggle="collapse"og a data-targetvið þáttinn til að úthluta sjálfkrafa stjórn á fellanlegum þætti. Eigindin data-targetsamþykkir CSS val til að beita hruninu á. Vertu viss um að bæta bekknum collapsevið samanbrjótanlega þáttinn. Ef þú vilt að það opni sjálfgefið skaltu bæta við viðbótarflokknum in.

Til að bæta harmónikkulíkri hópstjórnun við samanbrjótanlega stýringu skaltu bæta við gagnaeigindinni data-parent="#selector". Skoðaðu kynninguna til að sjá þetta í aðgerð.

Með JavaScript

Virkja handvirkt með:

$('.collapse').collapse()

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-parent="".

Aðferðir

.collapse(options)

Virkjar efnið þitt sem samanbrjótanlegan þátt. Samþykkir valfrjálsa valkosti object.

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

.collapse('toggle')

Skiptir um að fellanlegur þáttur sé sýndur eða falinn. Snýr aftur til þess sem hringir áður en fellanlegur þáttur hefur verið sýndur eða falinn (þ.e. áður en atburðurinn shown.bs.collapseeða hidden.bs.collapseá sér stað).

.collapse('show')

Sýnir samanbrjótanlegan þátt. Snýr aftur til þess sem hringir áður en fellanlegur þáttur hefur verið sýndur (þ.e. áður en shown.bs.collapseatburðurinn á sér stað).

.collapse('hide')

Felur samanbrjótanlegt frumefni. Snýr aftur til þess sem hringir áður en fellanlegur þáttur hefur raunverulega verið falinn (þ.e. áður en hidden.bs.collapseatburðurinn á sér stað).

Viðburðir

Hrunflokkur Bootstrap afhjúpar nokkra atburði til að tengja sig við hrunvirkni.

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

Carousel carousel.js

Skyggnusýningarhluti til að hjóla í gegnum þætti, eins og hringekju. Hreiður hringekjur eru ekki studdar.

Dæmi

Fyrri Næst

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

Valfrjáls myndatexti

Bættu texta við skyggnurnar þínar auðveldlega með .carousel-captionþættinum í hvaða .item. Settu næstum hvaða valfrjálsa HTML þar inn og það verður sjálfkrafa stillt og sniðið.

Fyrsta skyggnumerki

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Fyrri Næst

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

Notkun

Margar hringekjur

Hringekjur krefjast þess að notað sé idysta ílátið ( .carousel) til að stjórntæki hringekjunnar virki rétt. Þegar þú bætir við mörgum hringekjum, eða þegar skipt er um hringekju id, vertu viss um að uppfæra viðeigandi stýringar.

Í gegnum gagnaeiginleika

Notaðu gagnaeiginleika til að stjórna staðsetningu hringekjunnar auðveldlega. data-slidesamþykkir lykilorðin preveða next, sem breytir staðsetningu skyggnunnar miðað við núverandi staðsetningu. Að öðrum kosti er hægt að nota data-slide-totil að senda hráa skyggnuvísitölu í hringekjuna data-slide-to="2", sem færir skyggnustöðuna yfir á tiltekna vísitölu sem byrjar á 0.

Eigindin data-ride="carousel"er notuð til að merkja hringekju sem hreyfimynd frá og með hleðslu síðu. Það er ekki hægt að nota það ásamt (óþarfi og óþarfa) skýrri JavaScript frumstillingu á sömu hringekjunni.

Með JavaScript

Hringdu handvirkt í hringekju með:

$('.carousel').carousel()

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-interval="".

Aðferðir

.carousel(options)

Frumstillir hringekjuna með valkvæðum valkostum objectog byrjar að hjóla í gegnum hluti.

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

.carousel('cycle')

Hringur í gegnum hringekjuhlutina frá vinstri til hægri.

.carousel('pause')

Kemur í veg fyrir að hringekjan hjóli í gegnum hluti.

.carousel(number)

Hringir hringekjuna að tilteknum ramma (miðað við 0, svipað og fylki).

.carousel('prev')

Fer að fyrra atriði.

.carousel('next')

Fer í næsta atriði.

Viðburðir

Hringekjuflokkur Bootstrap afhjúpar tvo atburði til að tengjast hringekjuvirkni.

Báðir viðburðir hafa eftirfarandi viðbótareiginleika:

• direction: Sú átt sem hringekjan rennur í (annaðhvort "left"eða "right").
• relatedTarget: DOM-einingunni sem verið er að renna á sinn stað sem virki hluturinn.

Allir hringekjuviðburðir eru skotnir á hringekjuna sjálfa (þ.e. á <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Festið affix.js

Dæmi

Kveikt og slökkt er á affix viðbótinni position: fixed;og líkir eftir áhrifunum sem finnast með position: sticky;. Undirleiðsögnin til hægri er lifandi kynning á affix viðbótinni.

Notkun

Notaðu affix viðbótina í gegnum gagnaeiginleika eða handvirkt með þínu eigin JavaScript. Í báðum tilfellum verður þú að gefa upp CSS fyrir staðsetningu og breidd efnis sem þú festir á.

Athugið: Ekki nota áfestingarviðbótina á einingu sem er í tiltölulega staðsettri einingu, eins og dreginn eða ýttan dálk, vegna Safari flutningsvillu .

Staðsetning í gegnum CSS

Affix viðbótin skiptir á milli þriggja flokka, sem hver táknar tiltekið ástand: .affix, .affix-top, og .affix-bottom. Þú verður að útvega stílana, að undanskildum position: fixed;á .affix, fyrir þessa flokka sjálfur (óháð þessari viðbót) til að sjá um raunverulegar stöður.

Svona virkar affix viðbótin:

1. Til að byrja, bætir viðbótin við .affix-toptil að gefa til kynna að þátturinn sé í efstu stöðu sinni. Á þessum tímapunkti er ekki krafist CSS staðsetningar.
2. Að fletta framhjá þættinum sem þú vilt festa ætti að koma af stað raunverulegri festingu. Þetta er þar sem kemur í .affixstað .affix-topog setur position: fixed;(veitt af CSS Bootstrap).
3. Ef botnjöfnun er skilgreind ætti að fletta framhjá því að skipta .affixút fyrir .affix-bottom. Þar sem mótfærslur eru valfrjálsar, þarf að setja einn upp á að þú stillir viðeigandi CSS. Í þessu tilviki skaltu bæta við position: absolute;þegar þörf krefur. Viðbótin notar gagnaeiginleikann eða JavaScript valkostinn til að ákvarða hvar á að staðsetja frumefnið þaðan.

Fylgdu ofangreindum skrefum til að stilla CSS þinn fyrir annan hvorn af notkunarmöguleikunum hér að neðan.

Í gegnum gagnaeiginleika

Til að bæta við festuhegðun auðveldlega við hvaða þátt sem er, bættu bara við data-spy="affix"þáttinn sem þú vilt njósna um. Notaðu frávik til að skilgreina hvenær á að skipta um festingu á þætti.

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

Með JavaScript

Hringdu í affix viðbótina í gegnum JavaScript:

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

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-offset-top="200".

Aðferðir

.affix(options)

Virkjar efnið þitt sem ásætt efni. Samþykkir valfrjálsa valkosti object.

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

.affix('checkPosition')

Endurreiknar stöðu festingarinnar út frá víddum, staðsetningu og skrunstöðu viðkomandi þátta. The .affix,.affix-top og .affix-bottomflokkarnir eru bætt við eða fjarlægðir úr áfestu efninu samkvæmt nýju ástandi. Kalla þarf þessa aðferð í hvert sinn sem víddum áfesta efnisins eða markþáttar er breytt, til að tryggja rétta staðsetningu á áfestu efninu.

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

Viðburðir

Bootstrap's fix tappi afhjúpar nokkra atburði til að tengja við affix virkni.