Javascript programmai Bootstrap

Atdzīviniet Bootstrap komponentus — tagad ar 12 pielāgotiem jQuery spraudņiem.

Modāļi

Vienkāršots, bet elastīgs, izmantojot tradicionālo javascript modālo spraudni ar tikai minimālo nepieciešamo funkcionalitāti un viedajiem noklusējuma iestatījumiem.

Nolaižamās izvēlnes

Pievienojiet nolaižamās izvēlnes gandrīz visam Bootstrap, izmantojot šo vienkāršo spraudni. Bootstrap ir pieejams pilns nolaižamās izvēlnes atbalsts navigācijas joslā, cilnēs un tabletēs.

Scrollspy

Izmantojiet scrollspy, lai automātiski atjauninātu saites navigācijas joslā, lai parādītu pašreizējo aktīvo saiti, pamatojoties uz ritināšanas pozīciju.

Pārslēdzamas cilnes

Izmantojiet šo spraudni, lai padarītu cilnes un tabletes noderīgākas, ļaujot tām pārslēgties vietējā satura cilnēs.

Rīku padomi

Jauns jQuery Tipsy spraudņa veids, rīka padomi nepaļaujas uz attēliem — tie izmanto CSS3 animācijām un datu atribūtus vietējai nosaukumu glabāšanai.

Popovers *

Pievienojiet mazus satura pārklājumus, piemēram, iPad, jebkuram elementam, lai ievietotu sekundāro informāciju.

* Nepieciešams iekļaut rīka padomus

Brīdinājuma ziņojumi

Brīdinājumu spraudnis ir maza klase, lai brīdinājumiem pievienotu ciešu funkcionalitāti.

Pogas

Padariet vairāk ar pogām. Vadības pogu stāvokļi vai izveidot pogu grupas citiem komponentiem, piemēram, rīkjoslām.

Sakļaut

Iegūstiet pamata stilus un elastīgu atbalstu saliekamām sastāvdaļām, piemēram, akordeoniem un navigācijai.

Karuselis

Izveidojiet visu saturu, kurā vēlaties nodrošināt interaktīvu satura slaidrādi.

Ierakstiet uz priekšu

Vienkāršs, viegli paplašināms spraudnis, lai ātri izveidotu elegantas veidlapas ar jebkura veida teksta ievadi.

Pārejas *

Lai iegūtu vienkāršus pārejas efektus, vienreiz iekļaujiet bootstrap-transition.js, lai ieslēgtu modālus vai izzustu brīdinājumus.

* Nepieciešams spraudņu animācijai

Uzmanību! Visiem javascript spraudņiem ir nepieciešama jaunākā jQuery versija.

Par modāļiem

Vienkāršots, bet elastīgs, izmantojot tradicionālo javascript modālo spraudni ar tikai minimālo nepieciešamo funkcionalitāti un viedajiem noklusējuma iestatījumiem.

Lejupielādēt failu

Statisks piemērs

Zemāk ir statiski renderēts modāls.

Demo tiešraidē

Pārslēdziet modālu, izmantojot javascript, noklikšķinot uz tālāk esošās pogas. Tas noslīdēs uz leju un pazudīs no lapas augšdaļas.

Palaist demonstrācijas modālu

Izmantojot bootstrap-modal

Zvaniet modālam, izmantojot javascript:

  1. $ ( '#myModal' ). modāls ( opcijas )

Iespējas

Vārds veids noklusējuma apraksts
fons Būla taisnība Ietver modāla fona elementu. Vai arī norādiet staticfona kolāžu, kas neaizver modālu, noklikšķinot.
tastatūra Būla taisnība Aizver modālu, kad tiek nospiests evakuācijas taustiņš
parādīt Būla taisnība Parāda modālu inicializācijas laikā.

Atzīmes

Jūs varat viegli aktivizēt modāļus savā lapā, nerakstot nevienu JavaScript rindiņu. Vienkārši iestatiet data-toggle="modal"kontroliera elementu ar data-target="#foo"vai href="#foo", kas atbilst modālā elementa ID, un, noklikšķinot, tas palaiž modālu.

Turklāt, lai modālajai instancei pievienotu opcijas, vienkārši iekļaujiet tās kā papildu datu atribūtus vai nu vadības elementā, vai pašā modālajā iezīmējumā.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Palaist Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "aizvērt" data-dismiss = "modāls" > × </button>
  4. <h3> Modālā galvene </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Viens smalks ķermenis... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Aizvērt </a>
  11. <a href = "#" class = "btn btn-primary" > Saglabāt izmaiņas </a>
  12. </div>
  13. </div>
Uzmanību! Ja vēlaties, lai modāls tiktu animēts iekšā un ārā, vienkārši pievienojiet elementam .fadeklasi .modal(skatiet demonstrāciju, lai redzētu to darbībā) un iekļaujiet bootstrap-transition.js.

Metodes

.modal(options)

Aktivizē jūsu saturu kā modālu. Pieņem izvēles opcijas object.

  1. $ ( '#myModal' ). modāls ({
  2. tastatūra : viltus
  3. })

.modal('toggle')

Manuāli pārslēdz modālu.

  1. $ ( '#myModal' ). modāls ( 'pārslēgt' )

.modal('show')

Manuāli atver modālu.

  1. $ ( '#myModal' ). modāls ( 'show' )

.modal('hide')

Manuāli slēpj modālu.

  1. $ ( '#myModal' ). modāls ( 'slēpt' )

Pasākumi

Bootstrap modālā klase atklāj dažus notikumus, lai piesaistītu modālo funkcionalitāti.

Pasākums Apraksts
parādīt Šis notikums tiek aktivizēts nekavējoties, kad showtiek izsaukta instances metode.
parādīts Šis notikums tiek aktivizēts, kad modāls ir padarīts redzams lietotājam (tiks gaidīts, līdz tiks pabeigtas css pārejas).
paslēpties Šis notikums tiek aktivizēts nekavējoties, kad hideir izsaukta instances metode.
paslēptas Šis notikums tiek aktivizēts, kad modāls ir beidzis slēpt no lietotāja (tiks gaidīts, līdz tiks pabeigtas css pārejas).
  1. $ ( '#myModal' ). on ( 'slēpts' , funkcija () {
  2. // dari kaut ko…
  3. })

ScrollSpy spraudnis ir paredzēts automātiskai navigācijas mērķu atjaunināšanai, pamatojoties uz ritināšanas pozīciju.

Lejupielādēt failu

Navigācijas joslas piemērs ar scrollspy

Ritiniet tālāk redzamo apgabalu un skatieties navigācijas atjauninājumu. Tiks izcelti arī nolaižamās izvēlnes apakšvienumi. Pamēģini!

@resns

Reklāmas legingi keytar, branch id art party dolor labore. Pitchfork yr enim lo-fi, pirms tie tika izpārdoti. Tumblr velosipēdu tiesības no saimniecības līdz galdam neatkarīgi no tā. Anim keffiyeh carles jaka. Velit seitan mcsweeney's foto booth 3 wolf moon irure. Cosby džemperis lomo jean šorti, williamsburg hoodie minim qui jūs droši vien neesat dzirdējuši par tiem un jakas trasta fonds culpa biodiesel wes anderson estētiskā. Nihil tetovēts accusamus, cred ironija biodīzelis keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa ūsu skeitbords, pievilcīga fugiat velit dakšu bārda. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat četras loko nisi, ea helvetica nulla carles. Tetovēts Cosby džemperis food truck, Mcsweeney's quis non-freegan vinila. Lo-fi Vess Andersons +1 sartorial. Carles non-estētiskā vingrošana quis ģentrificēt. Brooklyn adipisicing amatniecības alus vice keytar deserunt.

viens

Occaecat commodo aliqua delectus. Fap craft beer deserunt skeitborda ea. Lomo velosipēdu tiesības adipisicing banh mi, velit ea sunt next level locavore vienas izcelsmes kafija magna veniam. High life ID vinils, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim kurjera soma. Cred ex in, ilgtspējīgs delectus consectetur fanny pack iphone.

divi

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 blog, culpa kurjersoma marfa whatever delectus food truck. Sapiente synth id uzņemties. Locavore sed helvetica klišeja ironija, pērkona kaķi, par kuriem jūs, iespējams, neesat dzirdējuši, consequat hoodie bez lipekļa lo-fi fap aliquip. Labore elit placeat, pirms tās izpārdotas, frotē Ričardsona proidents vēlās brokastis nesciunt quis cosby džemperis pariatur keffiyeh ut helvetica artisan. Cardigan craft alus seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Izmantojot bootstrap-scrollspy.js

Zvaniet scrollspy, izmantojot javascript:

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

Atzīmes

Lai augšējās joslas navigācijai viegli pievienotu scrollspy darbību, vienkārši pievienojiet data-spy="scroll"elementam, kuru vēlaties izspiegot (parasti tas ir pamatteksts).

  1. <body data-spy = "scroll" > ... </body>
Uzmanību! Navigācijas joslas saitēm ir jābūt atrisināmiem ID mērķiem. Piemēram, <a href="#home">home</a>ir jāatbilst kaut kam domēnā, piemēram, <div id="home"></div>.

Metodes

.scrollspy('refresh')

Izmantojot scrollspy kopā ar elementu pievienošanu vai noņemšanu no DOM, jums būs jāizsauc atsvaidzināšanas metode, piemēram:

  1. $ ( '[data-spy="scroll"]' ). katrs ( funkcija () {
  2. var $spy = $ ( šis ). scrollspy ( 'atsvaidzināt' )
  3. });

Iespējas

Vārds veids noklusējuma apraksts
kompensēt numuru 10 Pikseļi, kas jānobīda no augšas, aprēķinot ritināšanas pozīciju.

Pasākumi

Pasākums Apraksts
aktivizēt Šis notikums tiek aktivizēts ikreiz, kad scrollspy aktivizē jaunu vienumu.

Šis spraudnis pievieno ātru, dinamisku cilnes un tabletes funkcionalitāti, lai pārietu uz vietējo saturu.

Lejupielādēt failu

Cilņu piemēri

Noklikšķiniet uz tālāk esošajām cilnēm, lai pārslēgtos starp slēptajām rūtīm, pat izmantojot nolaižamās izvēlnes.

Neapstrādāti džinsi, jūs, iespējams, neesat dzirdējuši par tiem džinsu šorti Austin. Nesciunt tofu stumptown aliqua, retro sintēzes meistara tīrīšana. Ūsas klišeja tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh Dreamcatcher synth. Cosby džemperis eu banh mi, qui irure terry richardson ex squid. Aliquip placeat Salvia cillum iphone. Seitan aliquip quis kardigāns amerikāņu apģērbs, miesnieks 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.


Izmantojot bootstrap-tab.js

Iespējot cilnes, kurās var izmantot JavaScript (katra cilne ir jāaktivizē atsevišķi):

  1. $ ( '#myTab a' ). noklikšķiniet ( funkcija ( e ) {
  2. e . novērstNoklusējums ();
  3. $ ( šis ). cilne ( 'rādīt' );
  4. })

Atsevišķas cilnes var aktivizēt vairākos veidos:

  1. $ ( '#myTab a[href="#profile"]' ). cilne ( 'rādīt' ); // Atlasiet cilni pēc nosaukuma
  2. $ ( '#myTab a:first' ). cilne ( 'rādīt' ); // Atlasiet pirmo cilni
  3. $ ( '#myTab a:last' ). cilne ( 'rādīt' ); // Atlasīt pēdējo cilni
  4. $ ( '#myTab li:eq(2) a' ). cilne ( 'rādīt' ); // Atlasīt trešo cilni (indeksēts ar 0)

Atzīmes

Varat aktivizēt cilni vai tabletes navigāciju, nerakstot JavaScript, vienkārši norādot elementu data-toggle="tab"vai data-toggle="pill"uz tā. Pievienojot cilnei navun nav-tabsklases, ultiks lietots sāknēšanas cilnes stils.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Sākums </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profils </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Ziņojumi </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Iestatījumi </a></li>
  6. </ul>

Metodes

$().tab

Aktivizē cilnes elementu un satura konteineru. Cilnē DOM ir jābūt vai nu konteinera mezglam, data-targetvai tā mērķauditorijas atlasei.href

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Sākums </a></li>
  3. <li><a href = "#profile" > Profils </a></li>
  4. <li><a href = "#messages" > Ziņojumi </a></li>
  5. <li><a href = "#settings" > Iestatījumi </a></li>
  6. </ul>
  7.  
  8. <div class = "cilnes saturs" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profils" > ... </div>
  11. <div class = "tab-pane" id = "ziņojumi" > ... </div>
  12. <div class = "tab-pane" id = "iestatījumi" > ... </div>
  13. </div>
  14.  
  15. <skripts>
  16. $ ( funkcija () {
  17. $ ( '#myTab a:last' ). cilne ( 'rādīt' );
  18. })
  19. </script>

Pasākumi

Pasākums Apraksts
parādīt Šis notikums tiek aktivizēts cilnes rādīšanas laikā, bet pirms jaunās cilnes parādīšanas. Izmantojiet event.targetun event.relatedTarget, lai atlasītu attiecīgi aktīvo cilni un iepriekšējo aktīvo cilni (ja pieejama).
parādīts Šis notikums tiek aktivizēts cilnes rādīšanas laikā pēc cilnes parādīšanas. Izmantojiet event.targetun event.relatedTarget, lai atlasītu attiecīgi aktīvo cilni un iepriekšējo aktīvo cilni (ja pieejama).
  1. $ ( 'a[data-toggle="tab"]' ). on ( ' redzams ' , funkcija ( e ) {
  2. e . mērķis // aktivizēta cilne
  3. e . relatedTarget // iepriekšējā cilne
  4. })

Par rīka padomiem

Iedvesmojoties no izcilā spraudņa jQuery.tipsy, ko sarakstījis Džeisons Frame; Rīka padomi ir atjaunināta versija, kas nav atkarīga no attēliem, izmanto css3 animācijām un datu atribūtus vietējai nosaukumu glabāšanai.

Lejupielādēt failu

Rīka padomu izmantošanas piemērs

Virziet kursoru virs tālāk esošajām saitēm, lai skatītu rīka padomus:

Stingras bikses nākamā līmeņa keffiyeh jūs, iespējams , neesat dzirdējuši par tām. Foto kabīne bārda neapstrādāta džinsa augstspiedes vegāna kurjera soma stumptown. Seitans no lauku saimniecības līdz galdam, Mcsweeney's fixie ilgtspējīgs quinoa 8 bitu amerikāņu apģērbs ar frotē Ričardsona vinila šambreju. Beard stumptown, jakas banh mi lomo thundercats. Tofu biodīzeļdegviela williamsburg marfa, četras loko mcsweeney's cleanse vegan chambray. Patiešām ironisks amatnieks neatkarīgi no keytar , scenester no saimniecības līdz galdam banksy Austin twitter rokturis freegan cred neapstrādāta džinsa vienas izcelsmes kafijas vīruss.


Izmantojot bootstrap-tooltip.js

Aktivizējiet rīka padomu, izmantojot JavaScript:

  1. $ ( '#piemērs' ). rīka padoms ( opcijas )

Iespējas

Vārds veids noklusējuma apraksts
animācija Būla taisnība lietot css izbalēšanas pāreju uz rīka padomu
izvietojumu virkne|funkcija 'tops' kā novietot rīka padomu — augšpusē | apakšā | pa kreisi | pa labi
atlasītājs stīga viltus Ja ir nodrošināts atlasītājs, rīka padomu objekti tiks deleģēti norādītajiem mērķiem.
virsraksts stīga | funkciju '' noklusējuma nosaukuma vērtība, ja nav taga "title".
sprūda stīga 'lidināt' kā tiek aktivizēts rīka padoms — virziet kursoru | fokuss | rokasgrāmata
kavēšanās numurs | objektu 0

rīka padoma rādīšanas un slēpšanas aizkave (ms) — neattiecas uz manuālo palaišanas veidu

Ja tiek norādīts numurs, aizkave tiek piemērota gan slēpšanai/rādīšanai

Objekta struktūra ir šāda:delay: { show: 500, hide: 100 }

Uzmanību! Atsevišķu rīka padomu opcijas var norādīt arī, izmantojot datu atribūtus.

Atzīmes

Veiktspējas iemeslu dēļ ir izvēlēti rīka padoms un Popover datu apis. Ja vēlaties tos izmantot, vienkārši norādiet atlasītāja opciju.

  1. <a href = "#" rel = "tooltip" title = "pirmais rīka padoms" > virziet kursoru virs manis </a>

Metodes

$().rīka padoms(opcijas)

Elementu kolekcijai pievieno rīku padomu apdarinātāju.

.tooltip('show')

Parāda elementa rīka padomu.

  1. $ ( '#element' ). rīka padoms ( 'rādīt' )

.tooltip('hide')

Paslēpj elementa rīka padomu.

  1. $ ( '#element' ). rīka padoms ( 'slēpt' )

.tooltip('toggle')

Pārslēdz elementa rīka padomu.

  1. $ ( '#element' ). rīka padoms ( 'pārslēgt' )

Par popoveriem

Pievienojiet mazus satura pārklājumus, piemēram, iPad, jebkuram elementam, lai ievietotu sekundāro informāciju.

* Nepieciešams iekļaut rīka padomu

Lejupielādēt failu

Uznirstoša ekrāna piemērs

Virziet kursoru virs pogas, lai aktivizētu uznirstošo logu.


Izmantojot bootstrap-popover.js

Iespējot uznirstošos logus, izmantojot javascript:

  1. $ ( '#piemērs' ). popover ( opcijas )

Iespējas

Vārds veids noklusējuma apraksts
animācija Būla taisnība lietot css izbalēšanas pāreju uz rīka padomu
izvietojumu virkne|funkcija 'pa labi' kā novietot uznirstošo logu - augšdaļa | apakšā | pa kreisi | pa labi
atlasītājs stīga viltus ja ir nodrošināts atlasītājs, rīka padomu objekti tiks deleģēti norādītajiem mērķiem
sprūda stīga 'lidināt' kā tiek aktivizēts rīka padoms — virziet kursoru | fokuss | rokasgrāmata
virsraksts stīga | funkciju '' noklusējuma nosaukuma vērtība, ja nav atribūta "title".
saturu stīga | funkciju '' noklusējuma satura vērtība, ja nav atribūta "data-content".
kavēšanās numurs | objektu 0

uznirstošā loga rādīšanas un slēpšanas aizkave (ms) — neattiecas uz manuālo palaišanas veidu

Ja tiek norādīts numurs, aizkave tiek piemērota gan slēpšanai/rādīšanai

Objekta struktūra ir šāda:delay: { show: 500, hide: 100 }

Uzmanību! Atsevišķu uznirstošo logu opcijas var norādīt, izmantojot datu atribūtus.

Atzīmes

Veiktspējas iemeslu dēļ ir izvēlēti rīka padoms un Popover datu apis. Ja vēlaties tos izmantot, vienkārši norādiet atlasītāja opciju.

Metodes

$().popover(options)

Inicializē elementu kolekcijas uznirstošos logus.

.popover('show')

Atklāj elementu popover.

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

.popover('hide')

Slēp elementu uznirstošo logu.

  1. $ ( '#element' ). popover ( 'slēpt' )

.popover('toggle')

Pārslēdz elementu uznirstošo logu.

  1. $ ( '#element' ). popover ( 'pārslēgt' )

Par brīdinājumiem

Brīdinājumu spraudnis ir maza klase, lai brīdinājumiem pievienotu ciešu funkcionalitāti.

Lejupielādēt

Brīdinājumu piemēri

Brīdinājumu spraudnis darbojas ar parastajiem brīdinājuma ziņojumiem un bloķētajiem ziņojumiem.

Svētais gvakamole! Labāk pārbaudiet sevi, jūs neizskatāties pārāk labi.

Ak! Jums radās kļūda!

Mainiet to un to un mēģiniet vēlreiz. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Veiciet šo darbību Vai arī dariet to


Izmantojot bootstrap-alert.js

Iespējot brīdinājuma noraidīšanu, izmantojot JavaScript:

  1. $ ( ".alert" ). brīdinājums ()

Atzīmes

Vienkārši pievienojiet data-dismiss="alert"savai aizvēršanas pogai, lai automātiski piešķirtu brīdinājuma aizvēršanas funkcionalitāti.

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

Metodes

$().alert()

Apkopo visus brīdinājumus ar ciešu funkcionalitāti. Lai brīdinājumi tiktu aktivizēti, kad tie ir aizvērti, pārliecinieties, vai tiem jau ir piemērotas kategorijas un .fade..in

.alert('close')

Aizver brīdinājumu.

  1. $ ( ".alert" ). brīdinājums ( 'aizvērt' )

Pasākumi

Bootstrap brīdinājumu klase atklāj dažus notikumus, lai piesaistītu brīdinājuma funkcionalitāti.

Pasākums Apraksts
aizveriet Šis notikums tiek aktivizēts nekavējoties, kad closetiek izsaukta instances metode.
slēgts Šis notikums tiek aktivizēts, kad brīdinājums ir aizvērts (gaidīs, līdz tiks pabeigtas css pārejas).
  1. $ ( '#mans brīdinājums' ). bind ( 'slēgts' , funkcija () {
  2. // dari kaut ko…
  3. })

Par

Padariet vairāk ar pogām. Vadības pogu stāvokļi vai izveidot pogu grupas citiem komponentiem, piemēram, rīkjoslām.

Lejupielādēt failu

Izmantošanas piemēri

Izmantojiet pogu spraudni stāvokļiem un pārslēgšanai.

Stateful
Viens pārslēgs
Izvēles rūtiņa
Radio

Izmantojot bootstrap-button.js

Iespējot pogas, izmantojot javascript:

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

Atzīmes

Datu atribūti ir pogas spraudņa sastāvdaļa. Apskatiet tālāk sniegto koda piemēru dažādiem iezīmēšanas veidiem.

  1. <!-- Pievienojiet data-toggle="button", lai aktivizētu pārslēgšanu uz vienas pogas -->
  2. <button class = "btn" data-toggle = "button" > Viena pārslēgšana </button>
  3.  
  4. <!-- Pievienot data-toggle="buttons-checkbox" izvēles rūtiņas stila pārslēgšanai uz btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Pa kreisi </button>
  7. <button class = "btn" > Vidējā </button>
  8. <button class = "btn" > Pa labi </button>
  9. </div>
  10.  
  11. <!-- Pievienot data-toggle="buttons-radio" radio stila pārslēgšanai btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Pa kreisi </button>
  14. <button class = "btn" > Vidējā </button>
  15. <button class = "btn" > Pa labi </button>
  16. </div>

Metodes

$().button('toggle')

Pārslēdz push stāvokli. Piešķir pogai tādu izskatu, ka tā ir aktivizēta.

Uzmanību! Varat iespējot automātisku pogas pārslēgšanu, izmantojot data-toggleatribūtu.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('ielādē')

Iestata pogas stāvokli uz ielādi — atspējo pogu un apmaina tekstu ar teksta ielādi. Ielādes teksts ir jādefinē pogas elementā, izmantojot datu atribūtu data-loading-text.

  1. <button class = "btn" data-loading-text = "ielādē lietas..." > ... </button>
Uzmanību! Firefox saglabā atspējošanas stāvokli visā lapas ielādes laikā . Risinājums tam ir izmantot autocomplete="off".

$().button('atiestatīt')

Atiestata pogas stāvokli — apmaina tekstu ar sākotnējo tekstu.

$().poga(virkne)

Atiestata pogas stāvokli — maina tekstu uz jebkuru datu definēto teksta stāvokli.

  1. <button class = "btn" data-complete-text = "pabeigts!" > ... </button>
  2. <skripts>
  3. $ ( '.btn' ). poga ( 'pabeigt' )
  4. </script>

Par

Iegūstiet pamata stilus un elastīgu atbalstu saliekamām sastāvdaļām, piemēram, akordeoniem un navigācijai.

Lejupielādēt failu

* Nepieciešams iekļaut pāreju spraudni.

Akordeona piemērs

Izmantojot sakļautības spraudni, mēs izveidojām vienkāršu akordeona stila logrīku:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad kalmārs. 3 wolf moon officia aute, non cupidatat skateboard dolor branch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a put on it kalmārs vienas izcelsmes kafija nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Reklāma vegan izņemoteur miesnieks vice lomo. Legingi occaecat amatniecības alus no saimniecības līdz galdam, neapstrādāta džinsa estētiskā sintēze, iespējams, neesat par tiem dzirdējuši accusamus labore ilgtspējīgu VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad kalmārs. 3 wolf moon officia aute, non cupidatat skateboard dolor branch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a put on it kalmārs vienas izcelsmes kafija nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Reklāma vegan izņemoteur miesnieks vice lomo. Legingi occaecat amatniecības alus no saimniecības līdz galdam, neapstrādāta džinsa estētiskā sintēze, iespējams, neesat par tiem dzirdējuši accusamus labore ilgtspējīgu VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad kalmārs. 3 wolf moon officia aute, non cupidatat skateboard dolor branch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a put on it kalmārs vienas izcelsmes kafija nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Reklāma vegan izņemoteur miesnieks vice lomo. Legingi occaecat amatniecības alus no saimniecības līdz galdam, neapstrādāta džinsa estētiskā sintēze, iespējams, neesat par tiem dzirdējuši accusamus labore ilgtspējīgu VHS.

Izmantojot bootstrap-collapse.js

Iespējot, izmantojot javascript:

  1. $ ( ".sabrukums" ). sabrukt ()

Iespējas

Vārds veids noklusējuma apraksts
vecāks atlasītājs viltus Ja atlasītājs, tad visi sakļaujamie elementi zem norādītā vecāka tiks aizvērti, kad tiek parādīts šis saliekamais vienums. (līdzīgi tradicionālajai akordeona uzvedībai)
pārslēgt Būla taisnība Pārslēdz saliekamo elementu izsaukšanas laikā

Atzīmes

Vienkārši pievienojiet data-toggle="collapse"un data-targetelementam, lai automātiski piešķirtu saliekamā elementa vadību. Atribūts data-targetakceptē css atlasītāju, kam lietot sakļauto. Noteikti pievienojiet klasi collapsesaliekamajam elementam. Ja vēlaties, lai tas tiktu atvērts pēc noklusējuma, pievienojiet papildu klasi in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. vienkārši saliekams
  3. </button>
  4.  
  5. <div id = "demo" class = "sabrukt" > </div>
Uzmanību! Lai saliekamai vadīklai pievienotu akordeonam līdzīgu grupu pārvaldību, pievienojiet datu atribūtu data-parent="#selector". Skatiet demonstrāciju, lai redzētu to darbībā.

Metodes

.collapse(options)

Aktivizē jūsu saturu kā saliekamu elementu. Pieņem izvēles opcijas object.

  1. $ ( '#mySaliekams' ). sakļaut ({
  2. pārslēgt : viltus
  3. })

.collapse('toggle')

Pārslēdz saliekamo elementu uz parādīto vai paslēpto.

.collapse('show')

Parāda saliekamu elementu.

.collapse('slēpt')

Slēpj saliekamu elementu.

Pasākumi

Bootstrap sabrukšanas klase atklāj dažus notikumus, lai piesaistītu sabrukšanas funkcionalitāti.

Pasākums Apraksts
parādīt Šis notikums tiek aktivizēts nekavējoties, kad showtiek izsaukta instances metode.
parādīts Šis notikums tiek aktivizēts, kad sakļautais elements ir padarīts redzams lietotājam (tiks gaidīts, līdz tiks pabeigtas css pārejas).
paslēpties Šis notikums tiek aktivizēts nekavējoties, kad hidemetode ir izsaukta.
paslēptas Šis notikums tiek aktivizēts, kad lietotājam ir paslēpts sakļautais elements (tiks gaidīts, līdz tiks pabeigtas css pārejas).
  1. $ ( '#mySaliekams' ). on ( 'slēpts' , funkcija () {
  2. // dari kaut ko…
  3. })

Par

Vienkāršs, viegli paplašināms spraudnis, lai ātri izveidotu elegantas veidlapas ar jebkura veida teksta ievadi.

Lejupielādēt failu

Piemērs

Sāciet rakstīt tālāk esošajā laukā, lai parādītu priekšraksta rezultātus.


Izmantojot bootstrap-typeahead.js

Izsauciet ievadrakstu, izmantojot javascript:

  1. $ ( '.typeahead' ). uz priekšu ()

Iespējas

Vārds veids noklusējuma apraksts
avots masīvs [ ] Datu avots, pret kuru veikt vaicājumu.
preces numuru 8 Maksimālais vienumu skaits, kas jāparāda nolaižamajā izvēlnē.
saskaņotājs funkciju reģistrjutīgs Metode, ko izmanto, lai noteiktu, vai vaicājums atbilst vienumam. Pieņem vienu argumentu, itempret kuru pārbaudīt vaicājumu. Piekļūstiet pašreizējam vaicājumam, izmantojot this.query. Atgriež Būla vērtību, trueja vaicājums atbilst.
šķirotājs funkciju precīza atbilstība,
reģistrjutīgs,
reģistrjutīgs
Automātiskās pabeigšanas rezultātu kārtošanai izmantotā metode. Pieņem vienu argumentu items, un tam ir priekšraksta instances darbības joma. Atsauci uz pašreizējo vaicājumu ar this.query.
marķieris funkciju izceļ visas noklusējuma atbilstības Metode, ko izmanto, lai izceltu automātiskās pabeigšanas rezultātus. Pieņem vienu argumentu item, un tam ir priekšraksta instances darbības joma. Jāatgriež html.

Atzīmes

Pievienojiet datu atribūtus, lai reģistrētu elementu ar priekšraksta funkcionalitāti.

  1. <ievades veids = "teksts" data-provide = "ierakstīt priekšpusi" >

Metodes

.typeahead(options)

Inicializē ievadi ar ievadrakstu.