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

Naudojant sukompiliuotą JavaScript

Abu bootstrap.jsir bootstrap.min.jsyra visi papildiniai viename faile. Įtraukite tik vieną.

Papildinių priklausomybės

Kai kurie papildiniai ir CSS komponentai priklauso nuo kitų papildinių. Jei įskiepius įtraukiate atskirai, būtinai patikrinkite, ar dokumentuose nėra šių priklausomybių. Taip pat atminkite, kad visi papildiniai priklauso nuo jQuery (tai reiškia, kad jQuery turi būti įtrauktas prieš papildinio failus). Norėdami sužinoti, kurios jQuery versijos palaikomos, kreipkitės į mus .bower.json

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

Tik vienas papildinys kiekvienam elementui naudojant duomenų atributus

Tam pačiame elemente nenaudokite kelių papildinių duomenų atributų. Pavyzdžiui, mygtukas negali turėti ir patarimo, ir perjungti modalą. Norėdami tai padaryti, naudokite vyniojimo elementą.

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

Versijų numeriai

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

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

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

Trečiųjų šalių bibliotekos

„Bootstrap“ oficialiai nepalaiko trečiųjų šalių „JavaScript“ bibliotekų , tokių kaip „Prototype“ arba „jQuery“ vartotojo sąsaja. Nepaisant .noConflictįvykių su pavadinimais, gali kilti suderinamumo problemų, kurias turėsite išspręsti patys.

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.

Keli atviri modalai nepalaikomi

Būtinai neatidarykite modalo, kol dar matomas kitas. Norint vienu metu rodyti daugiau nei vieną modalą, reikia pasirinktinio kodo.

Modalinio žymėjimo išdėstymas

Visada stenkitės modalo HTML kodą įdėti į aukščiausio lygio dokumentą, kad išvengtumėte kitų komponentų, turinčių įtakos modalo išvaizdai ir (arba) funkcionalumui.

Mobiliojo įrenginio įspėjimai

Yra keletas įspėjimų, susijusių su modalų naudojimu mobiliuosiuose įrenginiuose. Daugiau informacijos rasite mūsų naršyklės palaikymo dokumentuose .

Dėl to, kaip HTML5 apibrėžia savo semantiką, autofocusHTML atributas Bootstrap modaluose neveikia. 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>

Padarykite modalus prieinamus

Būtinai pridėkite role="dialog"ir aria-labelledby="...", nurodydami modalinį pavadinimą, .modalir role="document"į .modal-dialogpatį pavadinimą.

Be to, galite pateikti modalinio dialogo aprašą aria-describedbynaudodami .modal.

„YouTube“ vaizdo įrašų įterpimas

Norint įterpti „YouTube“ vaizdo įrašus modaluose, reikia papildomo „JavaScript“, ne „Bootstrap“, kad būtų automatiškai sustabdytas atkūrimas ir kt. Norėdami gauti daugiau informacijos, žr. šį naudingą „Stack Overflow“ įrašą .

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

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

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

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

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,

...daugiau mygtukų...
<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 veiksmą 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="".

vardas tipo numatytas apibūdinimas
fonas boolean arba eilutę'static' tiesa Apima modalinio fono elementą. Arba nurodykite staticfoną, kuris neuždaro modalo spustelėjus.
klaviatūra loginis tiesa Uždaromas modalas, kai paspaudžiamas pabėgimo klavišas
Rodyti loginis tiesa Rodo modalą, kai jis inicijuojamas.
Nuotolinis kelias klaidinga

Ši parinktis nebenaudojama nuo 3.3.0 ir buvo pašalinta iš 4 versijos. Vietoj to rekomenduojame naudoti kliento šabloną arba duomenų susiejimo sistemą arba pačiam iškviesti jQuery.load .

Jei pateikiamas nuotolinis URL, turinys bus įkeltas vieną kartą naudojant jQuery loadmetodą ir įterpiamas į .modal-contentdiv. Jei naudojate duomenų API, hrefnuotoliniam šaltiniui nurodyti galite naudoti atributą. To pavyzdys parodytas žemiau:

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

Metodai

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

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

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ą atidaro rankiniu būdu. Grįžta į skambinantįjį, kol modalas iš tikrųjų nebuvo parodytas (ty prieš shown.bs.modalįvykį).

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

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

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

Renginio tipas apibūdinimas
show.bs.modal Šis įvykis suaktyvinamas iš karto, kai showiškviečiamas egzemplioriaus metodas. Jei jį sukėlė paspaudimas, spustelėtas elementas pasiekiamas kaip relatedTargetįvykio nuosavybė.
parodyta.bs.modal Šis įvykis suaktyvinamas, kai modalas tampa matomas vartotojui (lauks, kol bus baigti CSS perėjimai). Jei jį sukėlė paspaudimas, spustelėtas elementas pasiekiamas kaip relatedTargetįvykio nuosavybė.
slėpti.bs.modal Šis įvykis suaktyvinamas iš karto, kai hideiškviečiamas egzemplioriaus metodas.
paslėptas.bs.modalinis Šis įvykis suaktyvinamas, kai modalas baigiamas paslėpti nuo vartotojo (lauks, kol bus baigti CSS perėjimai).
pakrautas.bs.modal Šis įvykis suaktyvinamas, kai modalas įkelia turinį naudodamas remoteparinktį.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Išskleidžiamieji meniu dropdown.js

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

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

data-toggle="dropdown"vis dar reikalingas

Nepriklausomai nuo to, ar iškviečiate išskleidžiamąjį meniu naudodami „JavaScript“, ar vietoj to naudojate duomenų API, data-toggle="dropdown"visada turi būti išskleidžiamojo meniu aktyviklio elemente.

Nė vienas

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

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.

Renginio tipas apibūdinimas
Rodyti.bs.išskleidžiamąjį meniu Šis įvykis suaktyvinamas iš karto, kai iškviečiamas rodyti egzempliorių metodas.
rodomas.bs.išskleidžiamasis meniu Šis įvykis suaktyvinamas, kai išskleidžiamasis meniu tampa matomas vartotojui (lauks, kol bus atliktas CSS perėjimas).
paslėpti.bs.išskleidžiamąjį meniu Šis įvykis suaktyvinamas iš karto, kai iškviečiamas slėpimo egzemplioriaus metodas.
paslėptas.bs.išskleidžiamasis meniu Šis įvykis suaktyvinamas, kai išskleidžiamasis meniu baigiamas paslėpti nuo vartotojo (lauks, kol bus atlikti CSS perėjimai).
$('#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.

@riebus

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi, kol jie nebuvo išparduoti. Tumblr dviračių teisės nuo ūkio iki stalo. Anim keffiyeh carles megztinis. Velit seitan mcsweeney foto kabina 3 wolf moon irure. Cosby megztinis lomo jean šortai, williamsburg hoodie minim qui tikriausiai nesate apie juos girdėję ir kardiganų patikos fondas culpa biodyzel wes anderson estetika. Nihil tatuiruotas accusamus, cred ironija biodyzelinas keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa riedlentė su ūsais, prigludusi fugiat velit šakių barzda. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tatuiruotas cosby megztinis maisto sunkvežimis, Mcsweeney quis non freegan vinilas. Lo-fi Wesas Andersonas +1 sartorial. Carles ne estetinis pratimas quis gentrify. Brooklyn adipisicing craft alaus vice keytar deseruntas.

vienas

Occaecat commodo aliqua delectus. Fap craft beer deserunt riedlentė ea. Lomo dviračių teisės adipisicing banh mi, velit ea sunt next level locavore vienos kilmės kava magna veniam. High life ID vinilas, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi „pasidaryk pats“ minimalus pasiuntinių krepšys. Cred ex in, tvarus delectus consectetur fanny pack iphone.

du

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

three

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

Keytar twee tinklaraštis, culpa pasiuntinių krepšys marfa whatever delectus food truck. Sapiente synth id guessnda. Locavore sed helvetica klišinė ironija, perkūno katės, apie kurias tikriausiai negirdėjote, konsequat gobtuvas be glitimo lo-fi fap aliquip. Labore elit placeat prieš išparduodant, Terry richardson proident priešpiečiai nesciunt quis cosby megztinis pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Naudojimas

Reikalinga Bootstrap navigacija

„Scrollspy“ šiuo metu reikalauja naudoti „ Bootstrap“ navigacijos komponentą , kad būtų tinkamai paryškintos aktyvios nuorodos.

Reikalingi išsprendžiami ID tikslai

Naršymo juostos nuorodos turi turėti išsprendžiamus ID tikslus. Pavyzdžiui, <a href="#home">home</a>turi atitikti kažką DOM, pvz ., <div id="home"></div>.

Nepaisomi :visiblenetiksliniai elementai

Tiksliniai elementai, neatitinkantys :visible„jQuery “, bus ignoruojami, o atitinkami navigacijos elementai niekada nebus paryškinti.

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

vardas tipo numatytas apibūdinimas
kompensuoti numerį 10 Pikseliai, skirti nuo viršaus, skaičiuojant slinkties padėtį.

Renginiai

Renginio tipas apibūdinimas
activate.bs.scrollspy Šis įvykis suaktyvinamas, kai scrollspy suaktyvina naują elementą.
$('#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.

Neapdorotas džinsas, ko gero, apie juos negirdėjote džinsų šortai Austin. Nesciunt tofu stumptown aliqua, retro synth master valymo priemonė. Ūsų klišė tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh Dreamcatcher synth. Cosby megztinis eu banh mi, qui irure Terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis megztinis amerikietiškas drabužis, mėsininkas voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Išplečiama skirtukų naršymas

Šis papildinys išplečia naršymo skirtukų komponentą , kad būtų pridėta skirtukų sričių.

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.

Renginio tipas apibūdinimas
Rodyti.bs.tab Šis įvykis suaktyvinamas rodant skirtuką, bet anksčiau nei rodomas naujas skirtukas. Naudokite event.targetir event.relatedTarget, kad nukreiptumėte atitinkamai į aktyvų skirtuką ir ankstesnį aktyvų skirtuką (jei yra).
rodomas.bs.tab Šis įvykis suaktyvinamas rodant skirtuką, kai rodomas skirtukas. Naudokite event.targetir event.relatedTarget, kad nukreiptumėte atitinkamai į aktyvų skirtuką ir ankstesnį aktyvų skirtuką (jei yra).
hide.bs.tab Šis įvykis suaktyvinamas, kai turi būti rodomas naujas skirtukas (taigi, ankstesnis aktyvus skirtukas turi būti paslėptas). Naudokite event.targetir event.relatedTarget, kad nukreiptumėte atitinkamai į dabartinį aktyvų skirtuką ir į naują, kuris netrukus bus aktyvus.
paslėptas.bs.tab Šis įvykis suaktyvinamas, kai parodomas naujas skirtukas (taigi ankstesnis aktyvus skirtukas yra paslėptas). Naudokite event.targetir event.relatedTarget, kad nukreiptumėte atitinkamai į ankstesnį aktyvų skirtuką ir naują aktyvų skirtuką.
$('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:

Aptemptos kelnės kito lygio keffiyeh tikriausiai nesate apie jas girdėję. Nuotraukų kabina barzda, neapdorotas džinsas, veganiškas pasiuntinių krepšys stumptown. 8 bitų amerikietiški drabužiai nuo ūkio iki stalo, mcsweeney's fixie tvarūs quinoa , turi kilpinį richardson vinilo chambray. Beard stumptown, megztiniai banh mi lomo thundercats. Tofu biodyzelinas williamsburg marfa, keturių loko mcsweeney's cleanse vegan chambray. Tikrai ironiškas amatininkas , kad ir koks būtų raktas , scenografija nuo ūkio iki stalo banksy Austin twitter rankena freegan cred neapdoroto džinsinio vienos kilmės kavos virusas.

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>

Pasirinkimo funkcija

Dėl našumo galima pasirinkti „Tooltip“ ir „Popover“ duomenų apis, o tai reiškia, kad turite juos inicijuoti patys .

Vienas iš būdų inicijuoti visus patarimus puslapyje būtų pasirinkti juos pagal data-toggleatributą:

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

Kelių eilučių nuorodos

Kartais prie hipersaito, apvyniojančio kelias eilutes, norite pridėti patarimą. Numatytasis patarimo įskiepio elgesys yra centruoti jį horizontaliai ir vertikaliai. Pridėkite white-space: nowrap;prie savo inkarų, kad to išvengtumėte.

Mygtukų grupių, įvesties grupių ir lentelių patarimams reikia specialaus nustatymo

Naudodami patarimus apie elementus, esančius a .btn-grouparba .input-group, arba su lentele susijusius elementus ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), turėsite nurodyti parinktį container: 'body'(dokumentuota toliau), kad išvengtumėte nepageidaujamų šalutinių poveikių (pvz., elemento platėjimo ir/ arba praranda užapvalintus kampus, kai suveikia patarimas).

Nebandykite rodyti patarimų apie paslėptus elementus

Iškvietus $(...).tooltip('show')tikslinį elementą display: none;, patarimas bus neteisingai išdėstytas.

Prieinami patarimai klaviatūros ir pagalbinių technologijų naudotojams

Naudotojams, naršantiesiems naudojant klaviatūrą, ypač pagalbinių technologijų naudotojams, patarimai turėtų būti pridėti tik prie klaviatūros elementų, pvz., nuorodų, formų valdiklių ar bet kokio savavališko elemento su tabindex="0"atributu.

Išjungtų elementų patarimams reikalingi apvyniojimo elementai

Norėdami pridėti patarimą prie elemento disabledarba .disabledelemento, įdėkite elementą į a <div>ir pritaikykite patarimą <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="".

vardas Tipas Numatytas apibūdinimas
animacija loginis tiesa Patarimui pritaikykite CSS išnykimo perėjimą
konteineris styga | klaidinga klaidinga

Prideda patarimą prie konkretaus elemento. Pavyzdys container: 'body':. Ši parinktis ypač naudinga, nes leidžia įdėti patarimą dokumento sraute šalia paleidimo elemento – tai neleis patarimui nuslysti nuo paleidimo elemento keičiant lango dydį.

uždelsimas numeris | objektas 0

Patarimo rodymo ir slėpimo delsa (ms) – netaikoma rankinio paleidimo tipui

Jei numeris pateikiamas, uždelsimas taikomas abiem slėptuvėms/rodyti

Objekto struktūra yra tokia:delay: { "show": 500, "hide": 100 }

html loginis klaidinga Įdėkite HTML į patarimą. Jei klaidinga, textturiniui įterpti į DOM bus naudojamas jQuery metodas. Jei nerimaujate dėl XSS atakų, naudokite tekstą.
išdėstymas styga | funkcija "viršuje"

Kaip išdėstyti patarimo vietą – viršuje | apačioje | paliko | dešinėje | automatinis.
Kai nurodyta „automatinis“, jis dinamiškai pakeis patarimo kryptį. Pavyzdžiui, jei vieta yra „automatiškai į kairę“, patarimas, kai įmanoma, bus rodomas kairėje, kitu atveju jis bus rodomas dešinėje.

Kai funkcija naudojama vietai nustatyti, ji iškviečiama, kai pirmasis argumentas yra patarimo DOM mazgas, o antrasis – aktyvuojantis elementas DOM mazgas. Kontekstas thisnustatytas į patarimo egzempliorių.

parinkiklis styga klaidinga Jei yra parinkiklis, patarimo objektai bus deleguoti nurodytiems tikslams. Praktiškai tai naudojama norint įgalinti dinaminį HTML turinį įtraukti patarimus. Žiūrėkite tai ir informatyvų pavyzdį .
šabloną styga '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Pagrindinis HTML, naudojamas kuriant patarimą.

Įrankio antgalis titlebus įšvirkščiamas į .tooltip-inner.

.tooltip-arrowtaps patarimo rodykle.

Tolimiausias apvyniojimo elementas turi turėti .tooltipklasę.

titulą styga | funkcija ''

Numatytoji pavadinimo reikšmė, jei titleatributo nėra.

Jei funkcija duota, ji bus iškviesta thisnurodant elementą, prie kurio pridėtas patarimas.

paleidiklis styga „fokusuoti ant pelės žymeklio“ Kaip suaktyvinamas patarimas – spustelėkite | užveskite | fokusuoti | vadovas. Galite perduoti kelis aktyviklius; atskirkite juos tarpu. manualnegali būti derinamas su jokiu kitu paleidikliu.
peržiūros sritis styga | objektas | funkcija { parinkiklis: 'body', padding: 0 }

Patarimas išlaikomas šio elemento ribose. Pavyzdys: viewport: '#viewport'arba{ "selector": "#viewport", "padding": 0 }

Jei funkcija yra pateikta, ji iškviečiama su paleidimo elementu DOM mazgas kaip vieninteliu argumentu. Kontekstas thisnustatytas į patarimo egzempliorių.

Duomenų atributai atskiriems patarimams

Atskirų patarimų parinktis taip pat galima nurodyti naudojant duomenų atributus, kaip paaiškinta aukščiau.

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

Renginio tipas apibūdinimas
Rodyti.bs.patarimą Šis įvykis suaktyvinamas iš karto, kai showiškviečiamas egzemplioriaus metodas.
parodyta.bs.patarimas Šis įvykis suaktyvinamas, kai patarimas tampa matomas vartotojui (lauks, kol bus baigti CSS perėjimai).
paslėpti.bs.patarimas Šis įvykis suaktyvinamas iš karto, kai hideiškviečiamas egzemplioriaus metodas.
paslėptas.bs.patarimas Šis įvykis suaktyvinamas, kai patarimas baigiamas paslėpti nuo vartotojo (lauks, kol bus baigti CSS perėjimai).
įterptas.bs.patarimas Šis įvykis suaktyvinamas po show.bs.tooltipįvykio, kai patarimo šablonas buvo įtrauktas į DOM.
$('#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.

Priklausomybė nuo įskiepių

Iššokant reikia, kad į jūsų „Bootstrap“ versiją būtų įtrauktas patarimo įskiepis .

Pasirinkimo funkcija

Dėl našumo galima pasirinkti „Tooltip“ ir „Popover“ duomenų apis, o tai reiškia, kad turite juos inicijuoti patys .

Vienas iš būdų inicijuoti visus puslapio iššokančius langus būtų pasirinkti juos pagal data-toggleatributą:

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

Iššokantiesiems mygtukų grupėse, įvesties grupėse ir lentelėse reikia specialaus nustatymo

Kai naudojate iššokančius elementus elementuose, esančiuose a .btn-grouparba .input-group, arba su lentele susijusiuose elementuose ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), turėsite nurodyti parinktį container: 'body'(dokumentuota toliau), kad išvengtumėte nepageidaujamų šalutinių poveikių (pvz., elemento platėjimo ir/ arba praranda užapvalintus kampus, kai suaktyvinamas iššokimas).

Nebandykite rodyti iššokančių langų ant paslėptų elementų

Iškvietimas $(...).popover('show'), kai tikslinis elementas yra display: none;, iššokantis langas bus neteisingai išdėstytas.

Išjungtų elementų iššokimui reikalingi įvyniojimo elementai

Norėdami pridėti iššokantįjį langą prie elemento disabledarba .disabled, įdėkite elementą į a <div>ir pritaikykite iššokantįjį langą <div>.

Kelių eilučių nuorodos

Kartais prie hipersaito, apvyniojančio kelias eilutes, norite pridėti iššokantįjį langą. Numatytasis iššokančiojo įskiepio elgesys yra centruoti jį horizontaliai ir vertikaliai. Pridėkite white-space: nowrap;prie savo inkarų, kad to išvengtumėte.

Pavyzdžiai

Statinis iššokimas

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

Popover viršus

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

Popover dešinėje

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

Iššokantis dugnas

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

Popoveris išėjo

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

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.

Norint atmesti spustelėjus kitą kartą, reikalingas konkretus žymėjimas

Norėdami tinkamai veikti įvairiose naršyklėse ir įvairiose platformose, turite naudoti <a>žymą, o ne<button> žymą, taip pat turite įtraukti atributus role="button"ir .tabindex

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

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

vardas Tipas Numatytas apibūdinimas
animacija loginis tiesa Iššokančiai langui pritaikykite CSS išnykimo perėjimą
konteineris styga | klaidinga klaidinga

Prideda iššokantįjį langą prie konkretaus elemento. Pavyzdys container: 'body':. Ši parinktis yra ypač naudinga, nes leidžia jums išdėstyti iššokantįjį langą dokumento sraute šalia paleidimo elemento – tai neleis iškylančiajam elementui nuslysti nuo paleidžiančio elemento keičiant lango dydį.

turinys styga | funkcija ''

Numatytoji turinio vertė ifdata-content atributo nėra.

Jei funkcija duota, ji bus iškviesta thisnurodant elementą, prie kurio prijungtas iššokantis langas.

uždelsimas numeris | objektas 0

Iššokančiojo lango rodymo ir slėpimo delsa (ms) – netaikoma rankinio paleidimo tipui

Jei numeris pateikiamas, uždelsimas taikomas abiem slėptuvėms/rodyti

Objekto struktūra yra tokia:delay: { "show": 500, "hide": 100 }

html loginis klaidinga Įdėkite HTML į iškylantįjį langą. Jei klaidinga, textturiniui įterpti į DOM bus naudojamas jQuery metodas. Jei nerimaujate dėl XSS atakų, naudokite tekstą.
išdėstymas styga | funkcija 'teisingai'

Kaip išdėstyti iššokantįjį langą - viršuje | apačioje | paliko | dešinėje | automatinis.
Kai nurodoma „auto“, jis dinamiškai perorientuos iššokantįjį ekraną. Pavyzdžiui, jei vieta yra „automatiškai į kairę“, iššokantis langas, kai įmanoma, bus rodomas kairėje, kitu atveju jis bus rodomas dešinėje.

Kai funkcija naudojama vietai nustatyti, ji iškviečiama, kai pirmasis argumentas yra iššokantis DOM mazgas, o antrasis – aktyvuojantis elementas DOM mazgas. Kontekstas thisnustatytas į iššokantįjį egzempliorių.

parinkiklis styga klaidinga Jei yra parinkiklis, iššokantys objektai bus deleguojami nurodytiems tikslams. Praktiškai tai naudojama norint įgalinti dinaminį HTML turinį pridėti iššokančių langų. Žiūrėkite tai ir informatyvų pavyzdį .
šabloną styga '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Pagrindinis HTML, naudojamas kuriant iššokantįjį langą.

Popover titlebus švirkščiamas į .popover-title.

Popover contentbus švirkščiamas į .popover-content.

.arrowtaps iššokančiojo rodykle.

Tolimiausias apvyniojimo elementas turi turėti .popoverklasę.

titulą styga | funkcija ''

Numatytoji pavadinimo reikšmė, jei titleatributo nėra.

Jei funkcija duota, ji bus iškviesta thisnurodant elementą, prie kurio prijungtas iššokantis langas.

paleidiklis styga 'spustelėkite' Kaip suaktyvinamas iššokantis langas – spustelėkite | užveskite | fokusuoti | vadovas. Galite perduoti kelis aktyviklius; atskirkite juos tarpu. manualnegali būti derinamas su jokiu kitu paleidikliu.
peržiūros sritis styga | objektas | funkcija { parinkiklis: 'body', padding: 0 }

Išlaiko iššokantįjį elementą šio elemento ribose. Pavyzdys: viewport: '#viewport'arba{ "selector": "#viewport", "padding": 0 }

Jei funkcija yra pateikta, ji iškviečiama su paleidimo elementu DOM mazgas kaip vieninteliu argumentu. Kontekstas thisnustatytas į iššokantįjį egzempliorių.

Atskirų iššokančių langų duomenų atributai

Atskirų iššokančių langų parinktys gali būti nurodytos naudojant duomenų atributus, kaip paaiškinta aukščiau.

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

Renginio tipas apibūdinimas
rodyti.bs.popover Šis įvykis suaktyvinamas iš karto, kai showiškviečiamas egzemplioriaus metodas.
parodyta.bs.popover Šis įvykis suaktyvinamas, kai iššokantis langas tampa matomas vartotojui (lauks, kol bus baigti CSS perėjimai).
paslėpti.bs.popover Šis įvykis suaktyvinamas iš karto, kai hideiškviečiamas egzemplioriaus metodas.
paslėptas.bs.popover Šis įvykis suaktyvinamas, kai iššokantis ekranas baigiamas paslėpti nuo vartotojo (lauks, kol bus baigti CSS perėjimai).
įterpta.bs.popover Šis įvykis suaktyvinamas po show.bs.popoverįvykio, kai prie DOM pridedamas iššokantis šablonas.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Įspėjimo 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ų.

Renginio tipas apibūdinimas
uždaryti.bs.alert Šis įvykis suaktyvinamas iš karto, kai closeiškviečiamas egzemplioriaus metodas.
uždarytas.bs.alert Šis įvykis suaktyvinamas, kai įspėjimas uždaromas (lauks, kol bus baigti CSS perėjimai).
$('#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.

Suderinamumas tarp naršyklių

Įkeliant puslapį „Firefox“ išlieka formos valdymo būsenos (neįgalumas ir patikrinimas) . Išeitis yra naudoti autocomplete="off". Žr . „Mozilla“ klaidą Nr. 654072 .

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.

Naudokite bet kurią jums patinkančią būseną!

Šiam demonstravimui naudojame data-loading-textir $().button('loading'), bet tai nėra vienintelė būsena, kurią galite naudoti. Daugiau apie tai skaitykite toliau pateiktoje $().button(string)dokumentacijoje .

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

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

Vienas perjungimas

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

Iš anksto perjungiamiems mygtukams reikia .activeiraria-pressed="true"

Jei mygtukai yra iš anksto perjungti, turite pridėti .activeklasę ir aria-pressed="true"atributą prie buttonsavęs.

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

Reikia iš anksto pasirinktų parinkčių.active

Jei norite pasirinkti iš anksto pasirinktas parinktis, turite patys pridėti .activeklasę prie įvesties label.

Vizualiai patikrinta būsena atnaujinama tik spustelėjus

Jei pažymėta žymimojo laukelio mygtuko būsena atnaujinama nesuaktyvinant mygtuko clickįvykio (pvz., per <input type="reset">arba per nustatant checkedįvesties ypatybę), turėsite patys perjungti .activeįvesties klasę label.

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

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" autocomplete="off">
  ...
</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.

Priklausomybė nuo įskiepių

Sutraukti reikia, kad į jūsų „Bootstrap“ versiją būtų įtrauktas perėjimų papildinys .

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.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Akordeono pavyzdys

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad kalmarai. 3 wolf moon officia aute, non cupidatat skateboard dolor priešpiečiai. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua įdėti paukštį ant jo kalmaras vienos kilmės kava nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Reklama vegan, išskyrus mėsininką, vice lomo. Antblauzdžiai occaecat craft beer nuo fermos iki stalo, neapdoroto džinsinio audinio estetinis sintezatorius, tikriausiai negirdėjote apie juos accusamus labore tvarios VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad kalmarai. 3 wolf moon officia aute, non cupidatat skateboard dolor priešpiečiai. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua įdėti paukštį ant jo kalmaras vienos kilmės kava nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Reklama vegan, išskyrus mėsininką, vice lomo. Antblauzdžiai occaecat craft beer nuo fermos iki stalo, neapdoroto džinsinio audinio estetinis sintezatorius, tikriausiai negirdėjote apie juos accusamus labore tvarios VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad kalmarai. 3 wolf moon officia aute, non cupidatat skateboard dolor priešpiečiai. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua įdėti paukštį ant jo kalmaras vienos kilmės kava nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Reklama vegan, išskyrus mėsininką, vice lomo. Antblauzdžiai occaecat craft beer nuo fermos iki stalo, neapdoroto džinsinio audinio estetinis sintezatorius, tikriausiai negirdėjote apie juos accusamus labore tvarios VHS.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

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

  • Bootply
  • Vienas itmus ac facilin
  • Antrasis erosas

Padarykite išplėtimo / sutraukimo valdiklius pasiekiamus

Būtinai pridėkite aria-expandedprie valdymo elemento. Šis atributas aiškiai apibrėžia dabartinę sutraukiamo elemento būseną ekrano skaitytuvams ir panašioms pagalbinėms technologijoms. Jei sutraukiamas elementas uždarytas pagal numatytuosius nustatymus, jo vertė turėtų būti aria-expanded="false". Jei naudodami inklasę nustatėte, kad sutraukiamasis elementas būtų atidarytas pagal numatytuosius nustatymus, aria-expanded="true"vietoj jo nustatykite valdiklį. Papildinys automatiškai perjungs šį atributą, atsižvelgdamas į tai, ar sutraukiamas elementas buvo atidarytas ar uždarytas.

Be to, jei jūsų valdymo elementas taikomas vienam sutraukiamam elementui – ty data-targetatributas nurodo idparinkiklį – prie valdymo elemento galite pridėti papildomą aria-controlsatributą, kuriame yra idsutraukiamas elementas. Šiuolaikiniai ekrano skaitytuvai ir panašios pagalbinės technologijos naudoja šį atributą, kad suteiktų vartotojams papildomų sparčiųjų klavišų, leidžiančių tiesiogiai pereiti prie paties sutraukiamo elemento.

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

vardas tipo numatytas apibūdinimas
tėvas parinkiklis klaidinga Jei pateikiamas parinkiklis, visi sutraukiami elementai pagal nurodytą pirminį elementą bus uždaryti, kai bus parodytas šis sutraukiamas elementas. (panašus į tradicinį akordeono elgesį – tai priklauso nuo panelklasės)
perjungti loginis tiesa Perjungia sutraukiamą elementą iškvietimo metu

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

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

Renginio tipas apibūdinimas
parodyti.bs.griūti Šis įvykis suaktyvinamas iš karto, kai showiškviečiamas egzemplioriaus metodas.
parodyta.bs.griūtis Šis įvykis suaktyvinamas, kai sutraukimo elementas tampa matomas vartotojui (lauks, kol bus baigti CSS perėjimai).
paslėpti.bs.griūti Šis įvykis suaktyvinamas iš karto, kai hideiškviečiamas metodas.
paslėptas.bs.žlugimas Šis įvykis suaktyvinamas, kai sutraukimo elementas buvo paslėptas nuo vartotojo (lauks, kol bus baigti CSS perėjimai).
$('#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.

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

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

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-toneapdorotą skaidrės rodyklę perduoti į karuselę data-slide-to="2", kuri perkelia skaidrės padėtį į tam tikrą indeksą, prasidedantį 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()

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

vardas tipo numatytas apibūdinimas
intervalas numerį 5000 Laikas, per kurį reikia uždelsti tarp automatinio elemento paleidimo. Jei klaidinga, karuselė automatiškai nepasikeis.
Pauzė styga | nulinis "svyruoti" Jei nustatyta "hover", pristabdo karuselės judėjimą mouseenterir atnaujina karuselės judėjimą mouseleave. Jei nustatyta į null, užvedus pelės žymeklį virš karuselės ji nebus pristabdyta.
apvynioti loginis tiesa Ar karuselė turi važiuoti nuolat, ar sunkiai sustoti.
klaviatūra loginis tiesa Ar karuselė turėtų reaguoti į klaviatūros įvykius.

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

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

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

Sustabdo karuselės judėjimą per daiktus.

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

Perkeliama į ankstesnį elementą.

Perkeliama į kitą elementą.

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

Renginio tipas apibūdinimas
skaidrė.bs.karuselė Šis įvykis suaktyvinamas iš karto, kai slideiškviečiamas egzemplioriaus metodas.
slid.bs.karuselė Šis įvykis suaktyvinamas, kai karuselė baigia skaidrės perėjimą.
$('#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".

vardas tipo numatytas apibūdinimas
kompensuoti numeris | funkcija | objektas 10 Pikseliai, skirti nuo ekrano, skaičiuojant slinkties padėtį. Jei pateikiamas vienas skaičius, poslinkis bus taikomas ir viršuje, ir apačioje. Norėdami pateikti unikalų poslinkį apačioje ir viršuje, tiesiog pateikite objektą offset: { top: 10 }arba offset: { top: 10, bottom: 5 }. Naudokite funkciją, kai reikia dinamiškai apskaičiuoti poslinkį.
taikinys parinkiklis | mazgas | jQuery elementas windowobjektą _ Nurodo tikslinį afikso elementą.

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.

Renginio tipas apibūdinimas
affix.bs.affix Šis įvykis suaktyvinamas prieš pat elemento pritvirtinimą.
pritvirtintas.bs.afiksas Šis įvykis suaktyvinamas priklijavus elementą.
affix-top.bs.affix Šis įvykis suaktyvinamas prieš pat elemento pritvirtinimą viršuje.
affixed-top.bs.affix Šis įvykis suaktyvinamas po to, kai elementas yra pritvirtintas viršuje.
affix-bottom.bs.affix Šis įvykis suaktyvinamas prieš pat elemento pritvirtinimą apačioje.
affixed-bottom.bs.affix Šis įvykis suaktyvinamas po to, kai elementas yra pritvirtintas apačioje.