JavaScript

Atgaivinkite „Bootstrap“ komponentus – dabar su 13 tinkintų „jQuery“ papildinių.

Galvas aukštyn! Šie dokumentai skirti 2.3.2 versijai, kuri oficialiai nebepalaikoma. Peržiūrėkite naujausią „Bootstrap“ versiją!

Individualus arba sudarytas

Papildiniai gali būti įtraukti atskirai (nors kai kurie turi būtinų priklausomybių) arba visi iš karto. Tiek bootstrap.js , tiek bootstrap.min.js yra visi papildiniai viename faile.

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, esančius pagrindiniame vardų srityje su „data-api“. Tai atrodo taip:

  1. $ ( „kūnas“ ). išjungta ( '.data-api' )

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

  1. $ ( „kūnas“ ). išjungtas ( '.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ų.

  1. $ ( ".btn.pavojus" ). mygtuką ( "perjungti" ). addClass ( "riebalai" )

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

  1. $ ( „#myModal“ ). modal () // inicijuojama pagal numatytuosius nustatymus
  2. $ ( „#myModal“ ). modalinis ({ klaviatūra : false }) // inicijuotas be klaviatūros
  3. $ ( „#myModal“ ). modal ( 'show' ) // iš karto inicijuoja ir iškviečia šou

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

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.

  1. var bootstrapButton = $ . fn . mygtukas . noConflict () // grąžina mygtuką $.fn. į anksčiau priskirtą reikšmę
  2. $ . fn . bootstrapBtn = bootstrapButton // suteikite $().bootstrapBtn įkrovos funkciją

Renginiai

„Bootstrap“ teikia pasirinktinius įvykius daugeliui unikalių papildinio veiksmų. 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ą.

Visi begaliniai įvykiai suteikia „preventionDefault“ funkciją. Tai suteikia galimybę sustabdyti veiksmo vykdymą prieš jam pradedant.

  1. $ ( '#myModal' ). on ( 'show' , function ( e ) {
  2. jei (! duomenys ) grąžinti e . preventDefault () // sustabdo modalo rodymą
  3. })

Apie perėjimus

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

Naudojimo atvejai

Keli perėjimo papildinio pavyzdžiai:

  • Slydimas arba blukimas modaluose
  • Išnyksta skirtukai
  • Išnykę įspėjimai
  • Stumdomos karuselės stiklai

Pavyzdžiai

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

Statinis pavyzdys

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

  1. <div class = "modalinis paslėptas išnykimas" >
  2. <div class = "modalinė antraštė" >
  3. <button type = "button" class = "uždaryti" data-dismiss = "modalinis" aria-hidden = "true" > × </button>
  4. <h3> Modalinė antraštė </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Vienas puikus kūnas... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Uždaryti </a>
  11. <a href = "#" class = "btn btn-primary" > Išsaugoti pakeitimus </a>
  12. </div>
  13. </div>

Tiesioginė demonstracija

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

  1. <!-- Modalinio įjungimo mygtukas -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Paleisti demonstracinį modalą </a>
  3.  
  4. <!-- Modalinis -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modalinė antraštė" >
  7. <button type = "button" class = "uždaryti" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Modalinė antraštė </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Vienas puikus kūnas... </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Uždaryti </button>
  15. <button class = "btn btn-primary" > Išsaugoti pakeitimus </button>
  16. </div>
  17. </div>

Naudojimas

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.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Paleisti modalinį </button>

Per JavaScript

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

  1. $ ( '#myModal' ). modalinis ( parinktys )

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

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

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

Metodai

.modal(parinktys)

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

  1. $ ( '#myModal' ). modalinis ({
  2. klaviatūra : klaidinga
  3. })

.modal('toggle')

Rankiniu būdu perjungia modalą.

  1. $ ( '#myModal' ). modalinis ( 'perjungti' )

.modal('show')

Modalą atidaro rankiniu būdu.

  1. $ ( '#myModal' ). modalinis ( „šou“ )

.modal('hide')

Rankiniu būdu paslepia modalą.

  1. $ ( '#myModal' ). modalinis ( „paslėpti“ )

Renginiai

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

Renginys apibūdinimas
Rodyti Šis įvykis suaktyvinamas iš karto, kai showiškviečiamas egzemplioriaus metodas.
parodyta Šis įvykis suaktyvinamas, kai modalas tampa matomas vartotojui (lauks, kol bus baigti css perėjimai).
paslėpti Šis įvykis suaktyvinamas iš karto, kai hideiškviečiamas egzemplioriaus metodas.
paslėptas Šis įvykis suaktyvinamas, kai modalas baigiamas paslėpti nuo vartotojo (lauks, kol bus baigti css perėjimai).
  1. $ ( '#myModal' ). on ( 'slėptas' , funkcija () {
  2. // daryk ką nors...
  3. })

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

Per duomenų atributus

Jei norite lengvai pridėti slinkties elgseną prie viršutinės juostos naršymo, tiesiog pridėkite data-spy="scroll"prie elemento, kurį norite šnipinėti (dažniausiai tai būtų korpusas) ir data-target=".navbar"pasirinkite, kurią naršymą naudoti. Su komponentu norėsite naudoti scrollspy .nav.

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

Per JavaScript

Iškvieskite scrollspy naudodami „JavaScript“:

  1. $ ( '#navbar' ). scrollspy ()
Galvas aukštyn! Naršymo juostos nuorodos turi turėti išsprendžiamus ID tikslus. Pavyzdžiui, <a href="#home">home</a>turi atitikti kažką dom, pavyzdžiui, <div id="home"></div>.

Metodai

.scrollspy('refresh')

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

  1. $ ( '[data-spy="scroll"]' ). kiekvienas ( funkcija () {
  2. var $spy = $ ( tai ). scrollspy ( 'atnaujinti' )
  3. });

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

Renginys apibūdinimas
aktyvuoti Šis įvykis suaktyvinamas, kai scrollspy suaktyvina naują elementą.

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.

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.


Naudojimas

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

  1. $ ( '#myTab a' ). spustelėkite ( funkcija ( e ) {
  2. e . užkirsti keliąNumatytasis ();
  3. $ ( tai ). skirtukas ( 'rodyti' );
  4. })

Atskirus skirtukus galite suaktyvinti keliais būdais:

  1. $ ( '#myTab a[href="#profile"]' ). skirtukas ( 'rodyti' ); // Pasirinkite skirtuką pagal pavadinimą
  2. $ ( '#myTab a:first' ). skirtukas ( 'rodyti' ); // Pasirinkite pirmąjį skirtuką
  3. $ ( '#myTab a:last' ). skirtukas ( 'rodyti' ); // Pasirinkite paskutinį skirtuką
  4. $ ( '#myTab li:eq(2) a' ). skirtukas ( 'rodyti' ); // Pasirinkti trečią skirtuką (indeksuotas 0)

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

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Pagrindinis </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profilis </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Pranešimai </a></li>
  5. <li><a href = "#settings" data-toggle = "skirtukas" > Nustatymai </a></li>
  6. </ul>

Metodai

$().tab

Suaktyvina skirtuko elementą ir turinio konteinerį. Skirtuko lape turi būti a data-targetarba hrefDOM sudėtinio rodinio mazgas.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "aktyvus" ><a href = "#home" > Pagrindinis puslapis </a></li>
  3. <li><a href = "#profile" > Profilis </a></li>
  4. <li><a href = "#messages" > Žinutės </a></li>
  5. <li><a href = "#settings" > Nustatymai </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profilis" > ... </div>
  11. <div class = "tab-pane" id = "pranešimai" > ... </div>
  12. <div class = "tab-pane" id = "nustatymai" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( funkcija () {
  17. $ ( '#myTab a:last' ). skirtukas ( 'rodyti' );
  18. })
  19. </script>

Renginiai

Renginys apibūdinimas
Rodyti Š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).
parodyta Š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).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'rodoma' , funkcija ( e ) {
  2. e . taikinys // suaktyvintas skirtukas
  3. e . relatedTarget // ankstesnis skirtukas
  4. })

Pavyzdžiai

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

Dėl našumo galima pasirinkti patarimą ir iškylančius duomenis, tai reiškia, kad turite juos inicijuoti patys .

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.

Keturios kryptys

Patarimai įvesties grupėse

Naudodami patarimus ir iššokančius langus su „Bootstrap“ įvesties grupėmis, turėsite nustatyti containerparinktį (dokumentuota toliau), kad išvengtumėte nepageidaujamo šalutinio poveikio.


Naudojimas

Suaktyvinkite patarimą naudodami „JavaScript“:

  1. $ ( '#pavyzdys' ). patarimas ( parinktys )

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 tipo numatytas apibūdinimas
animacija loginis tiesa patarimui pritaikykite css fade perėjimą
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 nustatyti patarimo vietą – viršuje | apačioje | paliko | teisingai
parinkiklis styga klaidinga Jei yra parinkiklis, patarimo objektai bus deleguoti nurodytiems tikslams.
titulą styga | funkcija '' numatytoji pavadinimo reikšmė, jei nėra žymos „title“.
paleidiklis styga „fokusuoti ant pelės žymeklio“ kaip suaktyvinamas patarimas – spustelėkite | užveskite | fokusuoti | vadovas. Atkreipkite dėmesį, kad didžiųjų ir mažųjų raidžių perdavimo aktyviklio kartojimas, atskirtas tarpais, paleidimo tipai.
uždelsimas numeris | objektas 0

delsa rodyti ir slėpti patarimą (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 }

konteineris styga | klaidinga klaidinga

Prideda patarimą prie konkretaus elementocontainer: 'body'

Galvas aukštyn! Atskirų patarimų parinktis taip pat galima nurodyti naudojant duomenų atributus.

Žymėjimas

  1. <a href = "#" data-toggle = "tooltip" title = "pirmas patarimas" > užveskite pelės žymeklį virš manęs </a>

Metodai

$().tooltip(parinktys)

Prie elementų rinkinio prideda patarimo tvarkyklę.

.tooltip('show')

Atskleidžia elemento patarimą.

  1. $ ( „#elementas“ ). patarimas ( „rodyti“ )

.tooltip('hide')

Slepia elemento patarimą.

  1. $ ( „#elementas“ ). patarimas ( 'slėpti' )

.tooltip('toggle')

Perjungia elemento patarimą.

  1. $ ( „#elementas“ ). patarimas ( 'perjungti' )

.tooltip('destroy')

Slepia ir sunaikina elemento patarimą.

  1. $ ( „#elementas“ ). patarimas ( „sunaikinti“ )

Pavyzdžiai

Prie bet kurio elemento pridėkite mažas turinio perdangas, pvz., esančias iPad. Užveskite pelės žymeklį virš mygtuko, kad suaktyvintumėte iššokantįjį ekraną. Reikia įtraukti patarimą .

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.

Joks žymėjimas, rodomas kaip iššokantis langas, negeneruojamas iš „JavaScript“ ir dataatributo turinio.

Tiesioginė demonstracija

Keturios kryptys


Naudojimas

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

  1. $ ( '#pavyzdys' ). popover ( parinktys )

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 tipo numatytas apibūdinimas
animacija loginis tiesa patarimui pritaikykite css fade perėjimą
html loginis klaidinga Įdėkite html į iškylantįjį laukelį. 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 | teisingai
parinkiklis styga klaidinga jei yra parinkiklis, patarimo objektai bus deleguoti nurodytiems tikslams
paleidiklis styga 'spustelėkite' kaip suaktyvinamas iššokimas – spustelėkite | užveskite | fokusuoti | vadovas
titulą styga | funkcija '' numatytoji pavadinimo reikšmė, jei nėra atributo „title“.
turinys styga | funkcija '' numatytoji turinio vertė, jei atributo „data-content“ nėra
uždelsimas numeris | objektas 0

delsa rodyti ir slėpti iškylantįjį langą (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 }

konteineris styga | klaidinga klaidinga

Prideda iššokantįjį langą prie konkretaus elementocontainer: 'body'

Galvas aukštyn! Atskirų iššokančių langų parinktys gali būti nurodytos naudojant duomenų atributus.

Žymėjimas

Dėl našumo priežasčių pasirenkamas įrankių patarimas ir Popover duomenų apis. Jei norite jas naudoti, tiesiog nurodykite parinkiklio parinktį.

Metodai

$().popover(parinktys)

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

.popover('show')

Atskleidžia elementų iššokimą.

  1. $ ( „#elementas“ ). popover ( "show" )

.popover('hide')

Slepia elementų iššokimą.

  1. $ ( „#elementas“ ). popover ( „paslėpti“ )

.popover('toggle')

Perjungia elementų iššokimą.

  1. $ ( „#elementas“ ). popover ( 'perjungti' )

.popover('sunaikinti')

Slepia ir sunaikina elemento iššokimą.

  1. $ ( „#elementas“ ). popover ( „sunaikinti“ )

Įspėjimų pavyzdžiai

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

Šventoji gvakamolė! Geriausiai patikrink save, tu neatrodai per gerai.

Oi! Gavote klaidą!

Pakeiskite šį bei tą ir bandykite dar kartą. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Imkitės šio veiksmo Arba tai padaryti


Naudojimas

Įgalinti įspėjimo atmetimą naudojant „JavaScript“:

  1. $ ( ".alert" ). įspėjimas ()

Žymėjimas

Tiesiog pridėkite data-dismiss="alert"prie uždarymo mygtuko, kad automatiškai suteiktų įspėjimo uždarymo funkciją.

  1. <a class = "uždaryti" data-dismiss = "alert" href = "#" > × </a>

Metodai

$().alert()

Apima visus įspėjimus glaudžiais funkcionalumu. Jei norite, kad įspėjimai būtų aktyvūs uždarius, įsitikinkite, kad juose yra .fadeir.in klasė.

.alert('close')

Uždaro įspėjimą.

  1. $ ( ".alert" ). įspėjimas ( 'uždaryti' )

Renginiai

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

Renginys apibūdinimas
Uždaryti Šis įvykis suaktyvinamas iš karto, kai closeiškviečiamas egzemplioriaus metodas.
uždaryta Šis įvykis suaktyvinamas, kai įspėjimas uždaromas (lauks, kol bus baigti css perėjimai).
  1. $ ( '#mano įspėjimas' ). bind ( 'closed' , function () {
  2. // daryk ką nors...
  3. })

Naudojimo pavyzdžiai

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

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Įkeliama..." > Įkeliama būsena </button>

Vienas perjungimas

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

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Vienas perjungimas </button>

Žymimasis langelis

Pridėti data-toggle="buttons-checkbox"žymės langelio stiliaus perjungimui btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Kairėn </button>
  3. <button type = "button" class = "btn btn-primary" > Vidurinis </button>
  4. <button type = "button" class = "btn btn-primary" > Dešinėn </button>
  5. </div>

Radijas

Pridėti data-toggle="buttons-radio"radijo stiliaus perjungimui btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > Kairėn </button>
  3. <button type = "button" class = "btn btn-primary" > Vidurinis </button>
  4. <button type = "button" class = "btn btn-primary" > Dešinėn </button>
  5. </div>

Naudojimas

Įgalinti mygtukus per „JavaScript“:

  1. $ ( '.nav-tabs' ). mygtukas ()

Žymėjimas

Duomenų atributai yra neatsiejami mygtuko papildinio dalis. Peržiūrėkite toliau pateiktą įvairių žymėjimo tipų kodo pavyzdį.

Galimybės

Nė vienas

Metodai

$().button('toggle')

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

Galvas aukštyn! Galite įjungti automatinį mygtuko perjungimą naudodami data-toggleatributą.
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

$().button('kraunama')

Nustato mygtuko būseną į įkėlimą – išjungia mygtuką ir pakeičia tekstą į įkeliamą tekstą. Įkeliamas tekstas turi būti apibrėžtas mygtuko elemente naudojant duomenų atributą data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "įkeliama medžiaga..." > ... </button>
Galvas aukštyn! Įkeliant puslapį „Firefox“ išlieka išjungta . Išeitis yra naudoti autocomplete="off".

$().button('atstatyti')

Iš naujo nustato mygtuko būseną – pakeičia tekstą į pradinį tekstą.

$().mygtukas(eilutė)

Iš naujo nustato mygtuko būseną – pakeičia tekstą į bet kurią duomenų apibrėžtą teksto būseną.

  1. <button type = "button" class = "btn" data-complete-text = "baigta!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). mygtukas ( 'užbaigti' )
  4. </script>

Apie

Gaukite pagrindinius stilius ir lankstų sulankstomų komponentų, pvz., akordeonų ir navigacijos, palaikymą.

* Reikia įtraukti Transitions įskiepį.

Pavyzdys akordeonas

Naudodami sutraukimo papildinį sukūrėme paprastą akordeono stiliaus valdiklį:

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.
  1. <div class = "akordeonas" id = "akordeonas2" >
  2. <div class = "akordeonų grupė" >
  3. <div class = "akordeono antraštė" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Sutraukiamas grupės elementas Nr. 1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "akordeono korpuso griūtis" >
  9. <div class = "akordeonas-vidinis" >
  10. Anim pariatur klišė...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "akordeonų grupė" >
  15. <div class = "akordeono antraštė" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Sutraukiamas grupės elementas Nr. 2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "akordeono korpuso žlugimas" >
  21. <div class = "akordeonas-vidinis" >
  22. Anim pariatur klišė...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Taip pat galite naudoti papildinį be akordeono žymėjimo. Padarykite mygtuką, kad perjungtumėte kito elemento išplėtimą ir sutraukimą.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "sutraukti" data-target = "#demo" >
  2. paprastas sulankstomas
  3. </button>
  4.  
  5. <div id = "demo" class = "sutraukti" > </div>

Naudojimas

Per duomenų atributus

Tiesiog pridėkite data-toggle="collapse"ir 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:

  1. $ ( ".sutraukti" ). griūti ()

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 parinkiklis, tada visi sutraukiami elementai pagal nurodytą pirminį elementą bus uždaryti, kai rodomas šis sutraukiamas elementas. (panašus į tradicinį akordeono elgesį)
perjungti loginis tiesa Perjungia sutraukiamą elementą iškvietimo metu

Metodai

.collapse(parinktys)

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

  1. $ ( '#myCollapsible' ). sutraukti ({
  2. perjungti : klaidinga
  3. })

.collapse('toggle')

Perjungia sutraukiamą elementą į rodomą arba paslėptą.

.collapse('show')

Rodo sulankstomą elementą.

.collapse('slėpti')

Paslepia sulankstomą elementą.

Renginiai

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

Renginys apibūdinimas
Rodyti Šis įvykis suaktyvinamas iš karto, kai showiškviečiamas egzemplioriaus metodas.
parodyta Šis įvykis suaktyvinamas, kai sutraukimo elementas tampa matomas vartotojui (lauks, kol bus baigti css perėjimai).
paslėpti Šis įvykis suaktyvinamas iš karto, kai hideiškviečiamas metodas.
paslėptas Šis įvykis suaktyvinamas, kai sutraukimo elementas buvo paslėptas nuo vartotojo (lauks, kol bus baigti css perėjimai).
  1. $ ( '#myCollapsible' ). on ( 'slėptas' , funkcija () {
  2. // daryk ką nors...
  3. })

Pavyzdys

Pagrindinis, lengvai išplečiamas papildinys, skirtas greitai sukurti elegantiškas antraštes naudojant bet kokios formos teksto įvestį.

  1. <input type = "text" data-provide = "typeahead" >

Norėsite nustatyti autocomplete="off", kad numatytieji naršyklės meniu nebūtų rodomi išskleidžiamajame meniu „Bootstrap typeahead“.


Naudojimas

Per duomenų atributus

Pridėkite duomenų atributus, kad užregistruotumėte elementą su įžanginio tipo funkcijomis, kaip parodyta anksčiau pateiktame pavyzdyje.

Per JavaScript

Rankiniu būdu iškvieskite antraštę naudodami:

  1. $ ( '.typeahead' ). į priekį ()

Galimybės

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

vardas tipo numatytas apibūdinimas
šaltinis masyvas, funkcija [ ] Duomenų šaltinis, dėl kurio reikia pateikti užklausą. Gali būti eilučių masyvas arba funkcija. Funkcijai perduodami du argumentai: queryreikšmė įvesties lauke ir processatgalinis skambutis. Funkcija gali būti naudojama sinchroniškai grąžinant duomenų šaltinį tiesiogiai arba asinchroniškai per vieną processatgalinio skambinimo argumentą.
daiktų numerį 8 Didžiausias išskleidžiamajame meniu rodytinų elementų skaičius.
minIlgis numerį 1 Mažiausias simbolių ilgis, kurio reikia prieš suaktyvinant automatinio užbaigimo pasiūlymus
atitikmuo funkcija didžiosios ir mažosios raidės neskiriamos Metodas, naudojamas nustatyti, ar užklausa atitinka elementą. Priima vieną argumentą, itemprieš kurį tikrinama užklausa. Pasiekite dabartinę užklausą naudodami this.query. Grąžinkite loginį reikšmę true, jei užklausa atitinka.
rūšiuotojas funkcija tiksli atitiktis, didžiosios ir
mažosios raidės,
neskiriamos didžiosios ir mažosios raidės
Metodas, naudojamas automatinio užbaigimo rezultatams rūšiuoti. Priima vieną argumentą itemsir turi pirminio tipo egzemplioriaus apimtį. Nurodykite dabartinę užklausą naudodami this.query.
atnaujintojas funkcija grąžina pasirinktą prekę Metodas, naudojamas grąžinant pasirinktą prekę. Priima vieną argumentą itemir turi pirminio tipo egzemplioriaus apimtį.
paryškintuvas funkcija paryškina visus numatytuosius atitikmenis Metodas, naudojamas automatinio užbaigimo rezultatams paryškinti. Priima vieną argumentą itemir turi pirminio tipo egzemplioriaus apimtį. Turėtų grąžinti html.

Metodai

.typeahead(parinktys)

Inicijuoja įvestį su į priekį.

Pavyzdys

Kairėje esanti subnavigacija yra tiesioginė priedėlio įskiepio demonstracija.


Naudojimas

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. Tada naudokite poslinkius, kad nustatytumėte, kada įjungti ir išjungti elemento prisegimą.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Galvas aukštyn! Turite valdyti prisegto elemento padėtį ir jo tiesioginio pirminio elgseną. Padėtį valdo affix, affix-top, ir affix-bottom. Nepamirškite patikrinti, ar nėra potencialiai sutraukto pirminio elemento, kai įsijungia priedas, nes jis pašalina turinį iš įprasto puslapio srauto.

Per JavaScript

Iškvieskite affix papildinį naudodami „JavaScript“:

  1. $ ( '#navbar' ). pritvirtinti ()

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 kairėje. Norėdami klausytis vienos krypties arba kelių unikalių poslinkių, tiesiog pateikite objektą offset: { x: 10 }. Naudokite funkciją, kai reikia dinamiškai pateikti poslinkį (naudinga kai kuriems jautriems projektams).