Javascript, skirtas Bootstrap

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

Modalai

Supaprastintas, bet lankstus, pritaikytas tradiciniam javascript modaliniam papildiniui, turintis tik minimalias reikalingas funkcijas ir išmaniuosius numatytuosius nustatymus.

Išskleidžiamieji meniu

Naudodami šį paprastą įskiepį pridėkite išskleidžiamuosius meniu prie beveik bet ko „Bootstrap“. „Bootstrap“ turi visą išskleidžiamojo meniu palaikymą naršymo juostoje, skirtukuose ir tabletėse.

Scrollspy

Naudokite scrollspy, kad automatiškai atnaujintumėte nuorodas naršymo juostoje, kad būtų rodoma dabartinė aktyvi nuoroda pagal slinkties padėtį.

Perjungiami skirtukai

Naudokite šį papildinį, kad skirtukai ir tabletės būtų naudingesnės, leisdami jiems perjungti vietinio turinio skirtukus.

Patarimai

Naujas „jQuery Tipsy“ įskiepis, įrankių patarimai nesiremia vaizdais – jie naudoja CSS3 animacijai ir duomenų atributus vietiniam pavadinimų saugojimui.

Popovers *

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

* Reikia įtraukti patarimus

Įspėjamieji pranešimai

Įspėjimų įskiepis yra maža klasė, skirta įspėjimams papildyti artimą funkciją.

Mygtukai

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

Sutraukti

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

Karuselė

Sukurkite bet kokio turinio linksmybes, kuriose norite pateikti interaktyvią turinio skaidrių demonstraciją.

Įveskite į priekį

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

Perėjimai *

Norėdami gauti paprastų perėjimo efektų, vieną kartą įtraukite bootstrap-transition.js, kad įjungtumėte modalą arba išblėstumėte įspėjimus.

* Reikalingas animacijai papildiniuose

Galvas aukštyn! Visiems javascript papildiniams reikalinga naujausia jQuery versija.

Apie modalus

Supaprastintas, bet lankstus, pritaikytas tradiciniam javascript modaliniam papildiniui, turintis tik minimalias reikalingas funkcijas ir išmaniuosius numatytuosius nustatymus.

Atsisiųsti failą

Statinis pavyzdys

Žemiau yra statiškai pateiktas modalas.

Tiesioginė demonstracija

Perjunkite modalą per javascript spustelėdami toliau esantį mygtuką. Jis slinks žemyn ir išnyks nuo puslapio viršaus.

Paleisti demonstracinį modalą

Naudojant bootstrap-modal

Iškvieskite modalą per javascript:

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

Galimybės

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.

Žymėjimas

Galite lengvai suaktyvinti modalus savo puslapyje, neparašydami nė vienos JavaScript eilutės. Tiesiog nustatykite data-toggle="modal"valdiklio elementą su data-target="#foo"arba href="#foo", kuris atitinka modalinio elemento ID, ir spustelėjus jis paleis jūsų modalą.

Be to, norėdami pridėti parinkčių prie savo modalinio egzemplioriaus, tiesiog įtraukite jas kaip papildomus duomenų atributus valdymo elemente arba pačiame modaliniame žymėjime.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Paleisti Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modalinė antraštė" >
  3. <button type = "button" class = "uždaryti" data-dismiss = "modalinis" > × </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" data-dismiss = "modal" > Uždaryti </a>
  11. <a href = "#" class = "btn btn-primary" > Išsaugoti pakeitimus </a>
  12. </div>
  13. </div>
Galvas aukštyn! Jei norite, kad jūsų modalas būtų animuotas, tiesiog pridėkite .fadeklasę prie .modalelemento (žr. demonstracinę versiją, kad pamatytumėte tai veikiant) ir įtraukite bootstrap-transition.js.

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

„ScrollSpy“ papildinys skirtas automatiškai atnaujinti navigacijos taikinius pagal slinkties padėtį.

Atsisiųsti failą

Pavyzdys naršymo juosta su scrollspy

Slinkite toliau esančia sritimi ir žiūrėkite navigacijos atnaujinimą. Taip pat bus paryškinti išskleidžiamieji antriniai elementai. Pabandyk tai!

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


Naudojant bootstrap-scrollspy.js

Paskambinkite scrollspy per javascript:

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

Žymėjimas

Jei norite, kad viršutinės juostos naršymas būtų lengvai įtrauktas į šnipinėjimą, tiesiog pridėkite data-spy="scroll"prie elemento, kurį norite šnipinėti (dažniausiai tai būtų korpusas).

  1. <body data-spy = "slinkti" > ... </body>
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

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

Šis papildinys prideda greitą, dinamišką skirtukų ir tablečių funkciją, kad būtų galima pereiti per vietinį turinį.

Atsisiųsti failą

Skirtukų pavyzdžiai

Spustelėkite toliau pateiktus skirtukus, kad perjungtumėte paslėptas 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.


Naudojant bootstrap-tab.js

Į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ą nerašydami jokio javascript, tiesiog nurodydami data-toggle="tab"arba data-toggle="pill"ant elemento. Pridėjus navir nav-tabsklases prie skirtuko ulbus taikomas įkrovos 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. })

Apie patarimus

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

Atsisiųsti failą

Patarimų naudojimo pavyzdys

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.


Naudojant bootstrap-tooltip.js

Suaktyvinkite patarimą naudodami javascript:

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

Galimybės

vardas tipo numatytas apibūdinimas
animacija loginis tiesa patarimui pritaikykite css fade perėjimą
išdėstymas stygos|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 'svyruok' kaip suaktyvinamas patarimas – užveskite pelės žymeklį | fokusuoti | vadovas
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 }

Galvas aukštyn! Atskirų patarimų parinktis taip pat galima nurodyti 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į.

  1. <a href = "#" rel = "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' )

Apie popovers

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

* Reikia įtraukti patarimą

Atsisiųsti failą

Užvedimo ant pelės žymeklio pavyzdys

Užveskite pelės žymeklį virš mygtuko, kad suaktyvintumėte iššokantįjį ekraną.


Naudojant bootstrap-popover.js

Įgalinti iššokančius langus per javascript:

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

Galimybės

vardas tipo numatytas apibūdinimas
animacija loginis tiesa patarimui pritaikykite css fade perėjimą
išdėstymas stygos|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 'svyruok' kaip suaktyvinamas patarimas – užveskite pelės žymeklį | 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 }

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

Apie įspėjimus

Įspėjimų įskiepis yra maža klasė, skirta įspėjimams papildyti artimą funkciją.

parsisiųsti

Įspėjimų pavyzdžiai

Įspėjimų papildinys veikia su įprastais įspėjimo pranešimais ir blokuoja pranešimus.

Š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


Naudojant bootstrap-alert.js

Į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 jiems jau pritaikyta .fadeir .inklasė.

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

Apie

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

Atsisiųsti failą

Naudojimo pavyzdžiai

Būsenoms ir perjungimams naudokite mygtukų papildinį.

Valstybinis
Vienas perjungimas
Žymimasis langelis
Radijas

Naudojant bootstrap-button.js

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

  1. <!-- Add data-toggle="button", kad suaktyvintumėte perjungimą ant vieno mygtuko -->
  2. <button class = "btn" data-toggle = "button" > Vienas perjungimas </button>
  3.  
  4. <!-- Pridėkite data-toggle="buttons-checkbox", kad perjungtumėte žymimąjį laukelį btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Kairėn </button>
  7. <button class = "btn" > Vidurinis </button>
  8. <button class = "btn" > Dešinėn </button>
  9. </div>
  10.  
  11. <!-- Pridėkite data-toggle="buttons-radio", kad perjungtumėte radijo stilių btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Kairėn </button>
  14. <button class = "btn" > Vidurinis </button>
  15. <button class = "btn" > Dešinėn </button>
  16. </div>

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

Atsisiųsti failą

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

Naudojant bootstrap-collapse.js

Įgalinti per javascript:

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

Galimybės

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

Žymėjimas

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.

  1. <button class = "btn btn-danger" data-toggle = "sutraukti" data-target = "#demo" >
  2. paprastas sulankstomas
  3. </button>
  4.  
  5. <div id = "demo" class = "sutraukti" > </div>
Galvas aukštyn! 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.

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

Apie

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

Atsisiųsti failą

Pavyzdys

Pradėkite vesti tekstą į žemiau esantį lauką, kad būtų rodomi išankstiniai rezultatai.


Naudojant bootstrap-typeahead.js

Iškvieskite įvestį per javascript:

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

Galimybės

vardas tipo numatytas apibūdinimas
šaltinis masyvas [ ] Duomenų šaltinis, dėl kurio reikia pateikti užklausą.
daiktų numerį 8 Didžiausias išskleidžiamajame meniu rodytinų elementų skaičius.
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.
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.

Žymėjimas

Pridėkite duomenų atributus, kad užregistruotumėte elementą su išankstinio rašymo funkcija.

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

Metodai

.typeahead(parinktys)

Inicijuoja įvestį su į priekį.