Apžvalga

Individualus arba sudarytas

Papildiniai gali būti įtraukti atskirai (naudojant atskirus Bootstrap *.jsfailus) arba visus iš karto (naudojant bootstrap.jsarba sumažintą bootstrap.min.js).

Duomenų atributai

Visus „Bootstrap“ papildinius galite naudoti tik per žymėjimo API, neįrašydami nė vienos „JavaScript“ eilutės. Tai yra pirmos klasės „Bootstrap“ API ir pirmiausia turėtumėte į tai atsižvelgti, kai naudojate papildinį.

Tačiau kai kuriais atvejais gali būti pageidautina išjungti šią funkciją. Todėl taip pat suteikiame galimybę išjungti duomenų atributo API, atjungiant visus įvykius dokumente, kurio vardų sritis yra data-api. Tai atrodo taip:

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

Arba, jei norite taikyti konkretų papildinį, tiesiog įtraukite papildinio pavadinimą kaip vardų erdvę kartu su data-api vardų erdve, pvz.:

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

Programinė API

Taip pat manome, kad turėtumėte turėti galimybę naudoti visus „Bootstrap“ papildinius tik per „JavaScript“ API. Visos viešosios API yra pavieniai, grandininiai metodai ir grąžina rinkinį, pagal kurį buvo imtasi veiksmų.

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

Visi metodai turi priimti pasirenkamų parinkčių objektą, eilutę, kuri taikoma tam tikram metodui, arba nieko (kuris inicijuoja papildinį su numatytuoju elgesiu):

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

Kiekvienas papildinys taip pat atskleidžia savo neapdorotą konstruktorių Constructornuosavybėje: $.fn.popover.Constructor. Jei norite gauti konkretų papildinio egzempliorių, gaukite jį tiesiai iš elemento: $('[rel="popover"]').data('popover').

Numatytieji nustatymai

Galite pakeisti numatytuosius papildinio nustatymus pakeisdami papildinio Constructor.DEFAULTSobjektą:

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

Jokio konflikto

Kartais reikia naudoti Bootstrap papildinius su kitomis vartotojo sąsajos sistemomis. Tokiomis aplinkybėmis kartais gali įvykti vardų erdvės susidūrimai. Jei taip atsitiks, galite iškviesti .noConflictpapildinį, kurio vertę norite grąžinti.

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

Renginiai

„Bootstrap“ teikia tinkintus įvykius daugumos unikalių papildinių veiksmams. Paprastai jie būna įnagininko ir būtojo laiko formos – kai įnagininkas (pvz. show, ) suaktyvinamas įvykio pradžioje, o jo būtojo laiko forma (pvz. shown, ) – baigus veiksmą.

Nuo 3.0.0 visi „Bootstrap“ įvykiai yra vardų erdvėje.

Visi begaliniai įvykiai suteikia preventDefaultfunkcionalumo. Tai suteikia galimybę sustabdyti veiksmo vykdymą prieš jam pradedant.

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

Dezinfekavimo priemonė

Patarimai ir popovers naudoja mūsų integruotą dezinfekavimo priemonę, kad išvalytų parinktis, kurios priima HTML.

Numatytoji whiteListreikšmė yra tokia:

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

Jei prie šios numatytosios vertės norite pridėti naujų reikšmių, whiteListgalite atlikti šiuos veiksmus:

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)

Jei norite apeiti mūsų dezinfekavimo priemonę, nes norite naudoti tam skirtą biblioteką, pvz. , DOMpurify , turėtumėte atlikti šiuos veiksmus:

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

Versijų numeriai

Kiekvieno Bootstrap jQuery įskiepio versiją galima pasiekti per VERSIONpapildinio konstruktoriaus ypatybę. Pavyzdžiui, patarimo įskiepiui:

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

Jokių specialių atsarginių priemonių, kai „JavaScript“ išjungta

Kai „JavaScript“ išjungta, „Bootstrap“ įskiepiai neatsiranda ypač gražiai. Jei šiuo atveju jums rūpi naudotojo patirtis, naudokite <noscript>norėdami paaiškinti situaciją (ir kaip iš naujo įgalinti „JavaScript“) savo naudotojams ir (arba) pridėti savo pasirinktinių atsarginių variantų.

Perėjimai transfer.js

Apie perėjimus

Norėdami gauti paprastų perėjimo efektų, transition.jsvieną kartą įtraukite kartu su kitais JS failais. Jei naudojate kompiliuotą (arba sumažintą) bootstrap.js, nereikia to įtraukti – jis jau yra.

Kas viduje

Transition.js yra pagrindinis transitionEndįvykių pagalbininkas, taip pat CSS perėjimo emuliatorius. Jį naudoja kiti įskiepiai, norėdami patikrinti, ar yra CSS perėjimo palaikymas, ir užfiksuoti kabančius perėjimus.

Perėjimų išjungimas

Perėjimus galima visuotinai išjungti naudojant šį „JavaScript“ fragmentą, kuris turi būti įkeltas transition.js(arba bootstrap.jsarba bootstrap.min.js, atsižvelgiant į atvejį):

$.support.transition = false

Modalai modal.js

Modalai yra supaprastinti, bet lankstūs dialogo raginimai su minimaliomis būtinomis funkcijomis ir išmaniaisiais numatytais nustatymais.

Dėl to, kaip HTML5 apibrėžia savo semantiką, autofocusHTML atributas neturi jokios įtakos Bootstrap modalams. Norėdami pasiekti tą patį efektą, naudokite tam tikrą tinkintą „JavaScript“:

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

Pavyzdžiai

Statinis pavyzdys

Pateiktas modalas su antrašte, turiniu ir veiksmų rinkiniu poraštėje.

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

Tiesioginė demonstracija

Perjunkite modalą naudodami „JavaScript“ spustelėdami toliau esantį mygtuką. Jis slinks žemyn ir išnyks nuo puslapio viršaus.

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

Pasirenkami dydžiai

Modalai turi du pasirenkamus dydžius, kuriuos galima pateikti per modifikatorių klases .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>

Pašalinti animaciją

Modalams, kurie tiesiog pasirodo, o ne išnyksta, pašalinkite .fadeklasę iš modalinio žymėjimo.

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

Naudojant tinklelio sistemą

Norėdami pasinaudoti Bootstrap tinklelio sistema modale, tiesiog įdėkite .rows į modulį .modal-bodyir naudokite įprastas tinklelio sistemos klases.

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

Modalinio turinio keitimas pagal paleidimo mygtuką

Ar turite daugybę mygtukų, kurie visi paleidžia tą patį modalą, tik su šiek tiek skirtingu turiniu? Naudokite event.relatedTargetir HTML data-*atributus (galbūt per jQuery ), kad pakeistumėte modalo turinį, priklausomai nuo to, kuris mygtukas buvo spustelėtas. Daugiau informacijos apie , žr. Modalinių įvykių dokumentuose 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)
})

Naudojimas

Modalinis papildinys perjungia paslėptą turinį pagal poreikį, naudodamas duomenų atributus arba „JavaScript“. Jis taip pat papildo .modal-opennumatytąjį <body>slinkimo elgseną nepaisydamas ir sukuria .modal-backdropspustelėjimo sritį, skirtą atmesti rodomus modalus spustelėjus už modalo ribų.

Per duomenų atributus

Suaktyvinkite modalą neįrašę JavaScript. Nustatykite data-toggle="modal"valdiklio elementą, pvz., mygtuką, kartu su data-target="#foo"arba href="#foo", kad nukreiptumėte į konkretų modalą, kad perjungtumėte.

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

Per JavaScript

Iškvieskite modalą su ID myModalsu viena JavaScript eilute:

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

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-backdrop="".

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

Metodai

.modal(options)

Suaktyvina jūsų turinį kaip modalą. Priima pasirenkamas parinktis object.

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

.modal('toggle')

Rankiniu būdu perjungia modalą. Grįžta į skambinantįjį, kol modalas iš tikrųjų buvo parodytas arba paslėptas (ty prieš įvykstant shown.bs.modalarba hidden.bs.modalįvykiui).

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

.modal('show')

Modalą atidaro rankiniu būdu. Grįžta į skambinantįjį, kol modalas iš tikrųjų nebuvo parodytas (ty prieš shown.bs.modalįvykį).

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

.modal('hide')

Rankiniu būdu paslepia modalą. Grįžta į skambinantįjį, kol modalas iš tikrųjų buvo paslėptas (ty prieš hidden.bs.modalįvykį).

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

.modal('handleUpdate')

Iš naujo sureguliuoja modalo padėtį, kad būtų išvengta slinkties juostos, jei ji atsirastų, dėl kurios modalas šoktų į kairę.

Reikalingas tik tada, kai keičiasi modalo aukštis, kol jis atidarytas.

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

Renginiai

„Bootstrap“ modalinė klasė atskleidžia keletą įvykių, kad būtų galima prisijungti prie modalinės funkcijos.

Visi modaliniai įvykiai nukreipiami į patį modalą (ty į <div class="modal">).

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

Išskleidžiamieji meniu dropdown.js

Pavyzdžiai

Naudodami šį paprastą papildinį pridėkite išskleidžiamųjų meniu beveik prie bet ko, įskaitant naršymo juostą, skirtukus ir tabletes.

Naršymo juostoje

Tablečių viduje

Naudojimas

Naudodamas duomenų atributus arba „JavaScript“, išskleidžiamasis papildinys perjungia paslėptą turinį (išskleidžiamuosius meniu), perjungdamas .openklasę pirminio sąrašo elemente.

Mobiliuosiuose įrenginiuose atidarius išskleidžiamąjį meniu pridedama .dropdown-backdropkaip bakstelėjimo sritis, skirta uždaryti išskleidžiamuosius meniu, kai bakstelėjate už meniu, o tai yra tinkamo iOS palaikymo reikalavimas. Tai reiškia, kad norint perjungti iš atviro išskleidžiamojo meniu į kitą išskleidžiamąjį meniu, reikia papildomai bakstelėti mobiliajame telefone.

Pastaba: data-toggle="dropdown"atributu remiamasi uždarant išskleidžiamuosius meniu programos lygiu, todėl verta jį naudoti visada.

Per duomenų atributus

Pridėkite data-toggle="dropdown"prie nuorodos arba mygtuko, kad perjungtumėte išskleidžiamąjį meniu.

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

Jei norite, kad URL būtų nepažeisti su nuorodų mygtukais, naudokite data-targetatributą, o ne 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

Iškvieskite išskleidžiamuosius meniu naudodami „JavaScript“:

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

Galimybės

Nė vienas

Metodai

$().dropdown('toggle')

Perjungia tam tikros naršymo juostos arba skirtukų naršymo išskleidžiamąjį meniu.

Renginiai

Visi išskleidžiamojo meniu įvykiai suaktyvinami .dropdown-menupirminiame elemente.

Visi išskleidžiamojo meniu įvykiai turi relatedTargetsavybę, kurios reikšmė yra perjungimo prierašo elementas.

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

ScrollSpy scrollspy.js

Pavyzdys naršymo juostoje

„ScrollSpy“ papildinys skirtas automatiškai atnaujinti navigacijos taikinius pagal slinkties padėtį. Slinkite po naršymo juosta esančia sritimi ir stebėkite aktyvios klasės pasikeitimą. Taip pat bus paryškinti išskleidžiamieji antriniai elementai.

Naudojimas

Reikalingas santykinis padėties nustatymas

Nepriklausomai nuo diegimo metodo, „scrollspy“ reikalauja naudoti position: relative;elementą, kurį šnipinėjate. Daugeliu atvejų tai yra <body>. Slinkdami kitus elementus nei <body>, būtinai heightnustatykite ir overflow-y: scroll;pritaikykite.

Per duomenų atributus

Norėdami lengvai pridėti slinkties elgseną prie viršutinės juostos naršymo, pridėkite data-spy="scroll"elementą, kurį norite šnipinėti (dažniausiai tai būtų <body>). Tada pridėkite atributą su bet kurio Bootstrap komponento data-targetpirminio elemento ID arba klase ..nav

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

Pridėję position: relative;CSS, iškvieskite scrollspy naudodami „JavaScript“:

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

Metodai

.scrollspy('refresh')

Kai naudojate scrollspy kartu su elementų pridėjimu arba pašalinimu iš DOM, turėsite iškviesti atnaujinimo metodą, pavyzdžiui:

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

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-offset="".

Renginiai

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

Perjungiami skirtukai tab.js

Skirtukų pavyzdžiai

Pridėkite greitą, dinamišką skirtukų funkciją, kad galėtumėte pereiti per vietinio turinio sritis, net naudodami išskleidžiamuosius meniu. Įdėtieji skirtukai nepalaikomi.

Naudojimas

Įgalinti skirtukų skirtukus naudodami „JavaScript“ (kiekvieną skirtuką reikia suaktyvinti atskirai):

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

Atskirus skirtukus galite suaktyvinti keliais būdais:

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

Žymėjimas

Galite suaktyvinti skirtuką arba piliulės naršymą neįrašydami jokio „JavaScript“, tiesiog nurodydami data-toggle="tab"arba data-toggle="pill"ant elemento. Pridėjus navir nav-tabsklases prie skirtuko ulbus taikomas Bootstrap skirtuko stilius , o pridėjus navir nav-pillsklases bus taikomas tablečių stilius .

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

Išblukimo efektas

Jei norite, kad skirtukai išnyktų, pridėkite .fadeprie kiekvieno .tab-pane. Pirmojo skirtuko srityje taip pat turi būti .inmatomas pradinis turinys.

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

Metodai

$().tab

Suaktyvina skirtuko elementą ir turinio konteinerį. Skirtuko lape turi būti a data-targetarba hrefDOM sudėtinio rodinio mazgas. Aukščiau pateiktuose pavyzdžiuose skirtukai yra <a>s su data-toggle="tab"atributais.

.tab('show')

Parenka nurodytą skirtuką ir parodo su juo susijusį turinį. Bet kuris kitas anksčiau pasirinktas skirtukas bus nepažymėtas, o su juo susijęs turinys paslėptas. Grįžta į skambinantįjį, kol skirtuko sritis iš tikrųjų nebuvo parodyta (ty prieš shown.bs.tabįvykį).

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

Renginiai

Kai rodomas naujas skirtukas, įvykiai suaktyvinami tokia tvarka:

1. hide.bs.tab(dabartiniame aktyviame skirtuke)
2. show.bs.tab(skirtuke, kurį reikia rodyti)
3. hidden.bs.tab(ankstesniame aktyviame skirtuke tas pats, kaip ir hide.bs.tabįvykio)
4. shown.bs.tab(naujai suaktyvintame, ką tik parodytame skirtuke, tas pats kaip ir show.bs.tabįvykio)

Jei joks skirtukas dar nebuvo aktyvus, hide.bs.tabir hidden.bs.tabįvykiai nebus suaktyvinti.

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

Patarimai tooltip.js

Įkvėptas puikaus jQuery.tipsy įskiepio, kurį parašė Jason Frame; Patarimai yra atnaujinta versija, kuri nepriklauso nuo vaizdų, naudoja CSS3 animacijai ir duomenų atributus vietiniam pavadinimo saugojimui.

Patarimai su nulinio ilgio pavadinimais niekada nerodomi.

Pavyzdžiai

Užveskite pelės žymeklį ant toliau pateiktų nuorodų, kad pamatytumėte patarimus:

Statinis patarimas

Galimos keturios parinktys: viršuje, dešinėje, apačioje ir kairėje.

Keturios kryptys

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

Naudojimas

Patarimų papildinys generuoja turinį ir žymėjimą pagal poreikį ir pagal numatytuosius nustatymus pateikia patarimus po jų aktyviklio elemento.

Suaktyvinkite patarimą naudodami „JavaScript“:

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

Žymėjimas

Reikalingas patarimo žymėjimas yra tik dataatributas ir titleHTML elemente, kuriame norite turėti patarimą. Sugeneruotas patarimo žymėjimas yra gana paprastas, nors tam reikia padėties (pagal numatytuosius nustatymus, topkurią nustato papildinys).

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

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-animation="".

Metodai

$().tooltip(options)

Prie elementų rinkinio prideda patarimo tvarkyklę.

.tooltip('show')

Atskleidžia elemento patarimą. Grįžta į skambinantįjį, kol patarimas iš tikrųjų nebuvo parodytas (ty prieš shown.bs.tooltipįvykį). Tai laikoma „rankiniu“ patarimo paleidimu. Patarimai su nulinio ilgio pavadinimais niekada nerodomi.

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

.tooltip('hide')

Slepia elemento patarimą. Grįžta į skambinantįjį, kol patarimas iš tikrųjų buvo paslėptas (ty prieš hidden.bs.tooltipįvykį). Tai laikoma „rankiniu“ patarimo paleidimu.

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

.tooltip('toggle')

Perjungia elemento patarimą. Grįžta į skambinantįjį, kol patarimas iš tikrųjų buvo parodytas arba paslėptas (ty prieš įvykstant shown.bs.tooltiparba hidden.bs.tooltipįvykiui). Tai laikoma „rankiniu“ patarimo paleidimu.

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

.tooltip('destroy')

Slepia ir sunaikina elemento patarimą. Įrankių patarimai, kuriuose naudojamas delegavimas (kurie sukurti naudojant parinktį selector) , negali būti sunaikinami atskirai dėl palikuonių aktyviklio elementų.

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

Renginiai

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

Popovers popover.js

Prie bet kurio elemento pridėkite mažas turinio perdangas, pvz., esančias iPad.

Iššokantys langai, kurių pavadinimas ir turinys yra nulinio ilgio, niekada nerodomi.

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

Pavyzdžiai

Statinis iššokimas

Galimos keturios parinktys: viršuje, dešinėje, apačioje ir kairėje.

Tiesioginė demonstracija

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

Keturios kryptys

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

Atsisakyti kitą kartą spustelėjus

Naudokite focusaktyviklį, kad atsisakytumėte iššokančių langų po kito naudotojo paspaudimo.

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

Naudojimas

Įgalinti iššokančius langus naudojant „JavaScript“:

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

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-animation="".

Metodai

$().popover(options)

Inicijuoja elementų rinkinio iššokančius langus.

.popover('show')

Atskleidžia elemento iššokimą. Grįžta į skambinantįjį, kol iššokantis pranešimas iš tikrųjų nebuvo parodytas (ty prieš shown.bs.popoverįvykį). Tai laikoma „rankiniu“ iššokančiojo ekrano paleidimu. Iššokantys langai, kurių pavadinimas ir turinys yra nulinio ilgio, niekada nerodomi.

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

.popover('hide')

Slepia elemento iššokimą. Grįžta į skambinantįjį, kol iššokantis langas iš tikrųjų buvo paslėptas (ty prieš hidden.bs.popoverįvykį). Tai laikoma „rankiniu“ iššokančiojo ekrano paleidimu.

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

.popover('toggle')

Perjungia elemento iššokantįjį langą. Grįžta į skambinantįjį, kol iššokantis langas iš tikrųjų buvo parodytas arba paslėptas (ty prieš įvykstant shown.bs.popoverarba hidden.bs.popoverįvykiui). Tai laikoma „rankiniu“ iššokančiojo ekrano paleidimu.

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

.popover('destroy')

Slepia ir sunaikina elemento iššokimą. Iššokančių langų, kuriuose naudojamas delegavimas (kurie sukuriami naudojant parinktį selector) , negalima atskirai sunaikinti palikuonių aktyviklio elementuose.

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

Renginiai

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

Įspėjamieji pranešimai alert.js

Įspėjimų pavyzdžiai

Pridėkite atmetimo funkciją prie visų įspėjimų pranešimų naudodami šį papildinį.

Kai naudojamas .closemygtukas, jis turi būti pirmasis antrinis .alert-dismissibleir joks tekstinis turinys negali būti prieš jį žymėjime.

Naudojimas

Tiesiog pridėkite data-dismiss="alert"prie uždarymo mygtuko, kad automatiškai suteiktų įspėjimo uždarymo funkciją. Uždarius įspėjimą jis pašalinamas iš DOM.

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

Jei norite, kad įspėjimai uždarant naudotų animaciją, įsitikinkite, kad jiems jau pritaikytos .fadeir .inklasės.

Metodai

$().alert()

Įspėja apie paspaudimų įvykius ant palikuonių elementų, turinčių data-dismiss="alert"atributą. (Nebūtina, kai naudojamas duomenų API automatinis inicijavimas.)

$().alert('close')

Perspėjimas uždaromas pašalinus jį iš DOM. Jei elemente yra .fadeir .inklasės, įspėjimas išnyks prieš jį pašalinant.

Renginiai

„Bootstrap“ įspėjimo papildinys atskleidžia keletą įvykių, kad būtų galima prisijungti prie įspėjimo funkcijų.

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

Mygtukai button.js

Padarykite daugiau naudodami mygtukus. Valdykite mygtukų būsenas arba sukurkite mygtukų grupes daugiau komponentų, pvz., įrankių juostoms.

Valstybinis

Pridėti data-loading-text="Loading...", jei norite naudoti mygtuko įkėlimo būseną.

Ši funkcija nebenaudojama nuo 3.3.5 versijos ir buvo pašalinta iš 4 versijos.

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

Vienas perjungimas

Pridėti data-toggle="button", kad suaktyvintumėte perjungimą vienu mygtuku.

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

Žymės langelis / radijas

Įtraukite data-toggle="buttons"į .btn-groupžymimąjį laukelį arba radijo įvestis, kad galėtumėte perjungti atitinkamus stilius.

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

Metodai

$().button('toggle')

Perjungia stūmimo būseną. Mygtukui atrodo, kad jis buvo suaktyvintas.

$().button('reset')

Iš naujo nustato mygtuko būseną – pakeičia tekstą į pradinį tekstą. Šis metodas yra asinchroninis ir grąžinamas dar nepasibaigus iš naujo.

$().button(string)

Pakeičia tekstą į bet kurią duomenų apibrėžtą teksto būseną.

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

Sutraukti collapse.js

Lankstus papildinys, kuris naudoja keletą klasių, kad būtų lengva perjungti.

Pavyzdys

Spustelėkite toliau pateiktus mygtukus, kad peržiūrint klasę būtų rodomas ir paslėptas kitas elementas:

• .collapseslepia turinį
• .collapsingtaikomas perėjimų metu
• .collapse.inrodo turinį

Galite naudoti nuorodą su hrefatributu arba mygtuką su data-targetatributu. Abiem atvejais data-toggle="collapse"būtina.

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

Akordeono pavyzdys

Išplėskite numatytąjį sutraukimo veiksmą, kad sukurtumėte akordeoną su skydelio komponentu.

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

Taip pat galima pakeisti .panel-bodys su .list-groups.

Naudojimas

Sutraukimo papildinys naudoja keletą klasių, kad galėtų susidoroti su sunkiu kėlimu:

• .collapseslepia turinį
• .collapse.inrodo turinį
• .collapsingpridedamas, kai prasideda perėjimas, ir pašalinamas, kai jis baigiasi

Šias klases galima rasticomponent-animations.less .

Per duomenų atributus

Tiesiog pridėkite data-toggle="collapse"ir a data-targetprie elemento, kad automatiškai priskirtumėte sulankstomo elemento valdymą. data-targetAtributas priima CSS parinkiklį, kuriam taikomas sutraukimas . Būtinai pridėkite klasę collapseprie sutraukiamo elemento. Jei norite, kad jis būtų atidarytas pagal numatytuosius nustatymus, pridėkite papildomą klasęin .

Norėdami pridėti į akordeoną panašų grupės valdymą prie sutraukiamo valdiklio, pridėkite duomenų atributą data-parent="#selector". Peržiūrėkite demonstracinę versiją, kad pamatytumėte, kaip tai veikia.

Per JavaScript

Įgalinti rankiniu būdu su:

$('.collapse').collapse()

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-parent="".

Metodai

.collapse(options)

Suaktyvina turinį kaip sulankstomą elementą. Priima pasirenkamas parinktis object.

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

.collapse('toggle')

Perjungia sutraukiamą elementą į rodomą arba paslėptą. Grįžta į skambinantįjį, kol sutraukiamas elementas iš tikrųjų buvo parodytas arba paslėptas (ty prieš įvykį shown.bs.collapsearba hidden.bs.collapseįvykį).

.collapse('show')

Rodo sulankstomą elementą. Grįžta į skambinantįjį, kol iš tikrųjų nebuvo parodytas sutraukiamas elementas (ty prieš shown.bs.collapseįvykį).

.collapse('hide')

Paslepia sulankstomą elementą. Grįžta į skambinantįjį, kol sutraukiamas elementas iš tikrųjų buvo paslėptas (ty prieš hidden.bs.collapseįvykį).

Renginiai

„Bootstrap“ sutraukimo klasė atskleidžia keletą įvykių, kad būtų galima prisijungti prie sutraukimo funkcijos.

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

Carousel carousel.js

Skaidrių demonstravimo komponentas, skirtas važiuoti per elementus, pavyzdžiui, karuselę. Įdėtos karuselės nepalaikomos.

Pavyzdžiai

Ankstesnis Kitas

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

Neprivalomi antraštės

Lengvai pridėkite antraštes skaidrėse naudodami .carousel-captionelementą bet kuriame .item. Įdėkite ten beveik bet kokį pasirenkamą HTML ir jis bus automatiškai sulygiuotas ir suformatuotas.

Pirmosios skaidrės etiketė

Nulla vitae elit libero, pharetra augue mollis interdum.

Antros skaidrės etiketė

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Trečios skaidrės etiketė

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Ankstesnis Kitas

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

Naudojimas

Kelios karuselės

Kad karuselės valdikliai veiktų tinkamai id, tolimiausiame konteineryje ( ) reikia naudoti karuselės. .carouselPridėdami kelias karuseles arba keisdami karuselę idbūtinai atnaujinkite atitinkamus valdiklius.

Per duomenų atributus

Naudokite duomenų atributus, kad lengvai valdytumėte karuselės padėtį. data-slidepriima raktinius žodžius prevarba next, kuris pakeičia skaidrės padėtį, palyginti su dabartine padėtimi. Arba naudokite data-slide-to, jei norite perduoti neapdorotą skaidrės rodyklę į karuselę data-slide-to="2", kuri perkelia skaidrės padėtį į tam tikrą rodyklę, prasidedančią0 .

Atributas naudojamas data-ride="carousel"norint pažymėti karuselę kaip animacinę, pradedant nuo puslapio įkėlimo. Jo negalima naudoti kartu su (pertekline ir nereikalinga) aiškia tos pačios karuselės „JavaScript“ iniciacija.

Per JavaScript

Skambinkite į karuselę rankiniu būdu naudodami:

$('.carousel').carousel()

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-interval="".

Metodai

.carousel(options)

Inicijuoja karuselę su pasirenkamomis parinktimis objectir pradeda važiuoti per elementus.

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

.carousel('cycle')

Važiuoja per karuselės elementus iš kairės į dešinę.

.carousel('pause')

Sustabdo karuselės judėjimą per daiktus.

.carousel(number)

Perkelia karuselę į tam tikrą kadrą (pagrįsta 0, panašiai kaip masyvas).

.carousel('prev')

Perkeliama į ankstesnį elementą.

.carousel('next')

Perkeliama į kitą elementą.

Renginiai

„Bootstrap“ karuselės klasė atskleidžia du įvykius, kad būtų galima prisijungti prie karuselės funkcijų.

Abu įvykiai turi šias papildomas savybes:

• direction: kryptis, kuria slysta karuselė ( "left"arba "right").
• relatedTarget: DOM elementas, kuris stumiamas į vietą kaip aktyvus elementas.

Visi karuselės įvykiai suaktyvinami pačioje karuselėje (ty į <div class="carousel">).

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

Pritvirtinkite affix.js

Pavyzdys

Afix įskiepis įjungiamas position: fixed;ir išjungiamas, mėgdžiodamas efektą, rastą naudojant position: sticky;. Subnavigacija dešinėje yra tiesioginė priedėlio įskiepio demonstracija.

Naudojimas

Naudokite priedų papildinį naudodami duomenų atributus arba rankiniu būdu naudodami savo „JavaScript“. Abiem atvejais turite pateikti CSS, kad nustatytumėte pridėto turinio vietą ir plotį.

Pastaba: nenaudokite priedėlio papildinio elemente, esančiame santykinai išdėstytame elemente, pvz., ištrauktame arba stumtame stulpelyje dėl „ Safari“ pateikimo klaidos .

Padėties nustatymas per CSS

Prietaiso papildinys perjungia tris klases, kurių kiekviena reiškia tam tikrą būseną: .affix, .affix-top, ir .affix-bottom. Jūs turite patys pateikti šių klasių stilius (nepriklausomai position: fixed;nuo šio papildinio), kad galėtumėte tvarkyti faktines pozicijas..affix

Štai kaip veikia priedų papildinys:

1. Norėdami pradėti, papildinys prideda.affix-top , kad parodytų, kad elementas yra aukščiausioje padėtyje. Šiuo metu CSS padėties nustatymo nereikia.
2. Slenkant pro elementą, kurį norite pritvirtinti, turėtų būti pradėtas faktinis tvirtinimas. Čia .affixpakeičiami .affix-topir nustatomi position: fixed;(pateikiami Bootstrap CSS).
3. Jei nustatytas apatinis poslinkis, slenkant pro jį, jis turėtų būti .affixpakeistas .affix-bottom. Kadangi poslinkiai yra neprivalomi, norint juos nustatyti, reikia nustatyti atitinkamą CSS. Tokiu atveju pridėkite position: absolute;, kai reikia. Papildinys naudoja duomenų atributą arba „JavaScript“ parinktį, kad nustatytų, kur išdėstyti elementą.

Atlikite anksčiau nurodytus veiksmus, kad nustatytumėte CSS bet kuriai iš toliau pateiktų naudojimo parinkčių.

Per duomenų atributus

Norėdami lengvai pridėti prie bet kurio elemento priedą, tiesiog pridėkite data-spy="affix"prie elemento, kurį norite šnipinėti. Naudokite poslinkius, kad nustatytumėte, kada perjungti elemento prisegimą.

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

Per JavaScript

Iškvieskite affix papildinį naudodami „JavaScript“:

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

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-offset-top="200".

Metodai

.affix(options)

Suaktyvina jūsų turinį kaip pridėtą turinį. Priima pasirenkamas parinktis object.

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

.affix('checkPosition')

Perskaičiuoja priedėlio būseną pagal atitinkamų elementų matmenis, padėtį ir slinkties padėtį. , .affix, .affix-topir .affix-bottomklasės pridedamos prie pridėto turinio arba pašalinamos iš jo pagal naują būseną. Šį metodą reikia iškviesti kiekvieną kartą, kai keičiami pritvirtinto turinio arba tikslinio elemento matmenys, kad būtų užtikrinta teisinga pritvirtinto turinio padėtis.

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

Renginiai

„Bootstrap“ priedų papildinys atskleidžia kelis įvykius, kad būtų galima prisijungti prie priedų funkcijos.