JavaSkript

Bring de komponinten fan Bootstrap ta libben - no mei 13 oanpaste jQuery-plugins.

Yndividueel of gearstald

Plugins kinne yndividueel opnommen wurde (hoewol guon hawwe fereaske ôfhinklikens), of alles yn ien kear. Sawol bootstrap.js en bootstrap.min.js befetsje alle plugins yn ien triem.

Data attributen

Jo kinne alle Bootstrap-plugins suver brûke fia de markup API sûnder ien inkelde line fan JavaScript te skriuwen. Dit is Bootstrap's earste klasse API en soe jo earste konsideraasje wêze moatte by it brûken fan in plugin.

Dat sei, yn guon situaasjes kin it winsklik wêze om dizze funksjonaliteit út te skeakeljen. Dêrom jouwe wy ek de mooglikheid om it data-attribút API út te skeakeljen troch alle eveneminten op it lichem te ûntbinen mei ''data-api'`. Dit sjocht der sa út:

  1. $ ( 'body' ). út ( '.data-api' )

As alternatyf, om in spesifyk plugin te rjochtsjen, befetsje gewoan de namme fan 'e plugin as in nammeromte tegearre mei de data-api nammeromte sa:

  1. $ ( 'body' ). út ( '.alert.data-api' )

Programmatyske API

Wy leauwe ek dat jo alle Bootstrap-plugins moatte kinne brûke suver fia de JavaScript API. Alle iepenbiere APIs binne single, chainable metoaden, en werom de kolleksje hannele op.

  1. $ ( ".btn.danger" ). knop ( "wikselje" ). addClass ( "fet" )

Alle metoaden moatte in opsjoneel opsjeobjekt akseptearje, in tekenrige dy't in bepaalde metoade rjochtet, of neat (wat in plugin inisjearret mei standertgedrach):

  1. $ ( "#myModal" ). modal () // inisjalisearre mei standerts
  2. $ ( "#myModal" ). modal ({ toetseboerd : false }) // inisjalisearre sûnder toetseboerd
  3. $ ( "#myModal" ). modal ( 'show' ) // inisjalisearret en ropt show fuortendaliks op

Elke plugin bleatstelt ek syn rauwe konstruktor op in 'Constructor'-eigenskip: $.fn.popover.Constructor. As jo ​​​​in bepaalde plugin-eksimplaar wolle krije, helje it dan direkt fan in elemint op: $('[rel=popover]').data('popover').

Gjin konflikt

Soms is it nedich om Bootstrap-plugins te brûken mei oare UI-kaders. Yn dizze omstannichheden kinne nammeromte botsingen soms foarkomme. As dit bart, kinne jo .noConflictde plugin oanroppe wêrfan jo de wearde weromsette wolle.

  1. var bootstrapButton = $ . fn . knop . noConflict () // werom $.fn.button nei earder tawiisd wearde
  2. $ . fn . bootstrapBtn = bootstrapButton // jou $().bootstrapBtn de bootstrap-funksjonaliteit

Eveneminten

Bootstrap leveret oanpaste eveneminten foar de measte unike aksjes fan plugin. Yn 't algemien komme dizze yn in ynfinityf- en dieltiidsfoarm - wêrby't de ynfinityf (bgl. show) oan it begjin fan in barren wurdt aktivearre, en de doetiidsfoarm (bgl. shown) wurdt aktivearre by it foltôgjen fan in aksje.

Alle infinitive eveneminten jouwe preventDefault funksjonaliteit. Dit jout de mooglikheid om de útfiering fan in aksje te stopjen foardat it begjint.

  1. $ ( '#myModal' ). on ( 'show' , funksje ( e ) {
  2. as (! gegevens ) weromkomme e . preventDefault () // stopet modaal te sjen
  3. })

Oer transysjes

Foar ienfâldige oergongseffekten, befetsje bootstrap-transition.js ien kear neist de oare JS-bestannen. As jo ​​​​de kompilearre (of minifisearre) bootstrap.js brûke , is it net nedich om dit op te nimmen - it is der al.

Brûk gefallen

In pear foarbylden fan 'e oergongsplugin:

  • Sliding of fading yn modalen
  • Fading út ljeppers
  • Fading out warskôgings
  • Sliding carrousel ruten

Foarbylden

Modalen binne streamlined, mar fleksibel, dialoochprompts mei de minimale fereaske funksjonaliteit en tûke standerts.

Statyske foarbyld

In werjûn modaal mei koptekst, lichem en set aksjes yn 'e fuottekst.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "slute" data-dismiss = "modaal" aria-hidden = "wier" > × </knop>
  4. <h3> Modale koptekst </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Ien moai lichem... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Slute </a>
  11. <a href = "#" class = "btn btn-primary" > Bewarje wizigingen </a>
  12. </div>
  13. </div>

Live demo

Skeakelje in modaal fia JavaScript troch op de knop hjirûnder te klikken. It sil nei ûnderen glide en ferdwine fan 'e boppekant fan' e side.

  1. <!-- Knop om modaal te triggeren -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Launch demo modal </a>
  3.  
  4. <!-- Modaal -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialooch" aria-labelledby = "myModalLabel" aria-hidden = "wier" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "slute" data-dismiss = "modaal" aria-hidden = "wier" > × </button>
  8. <h3 id = "myModalLabel" > Modale koptekst </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Ien moai lichem... </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modaal" aria-hidden = "wier" > Slute </button>
  15. <button class = "btn btn-primary" > Bewarje wizigingen </button>
  16. </div>
  17. </div>

Gebrûk

Fia data attributen

Aktivearje in modaal sûnder JavaScript te skriuwen. Set data-toggle="modal"op in controller-elemint, lykas in knop, tegearre mei in data-target="#foo"of href="#foo"om in spesifike modaal te rjochtsjen om te wikseljen.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Modaal starte </button>

Fia JavaScript

Rop in modaal mei id myModalmei ien line fan JavaScript:

  1. $ ( '#myModal' ). modaal ( opsjes )

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-backdrop="".

Namme type standert beskriuwing
eftergrûn boolean wier Omfettet in modale eftergrûnelemint. As alternatyf, spesifisearje staticfoar in eftergrûn dy't de modaal net slút by klik.
toetseboerd boolean wier Slút de modale as escape-toets wurdt yndrukt
sjen litte boolean wier Toant de modal as inisjalisearre.
ôfstân paad falsk

As in url op ôfstân wurdt levere, sil ynhâld wurde laden fia jQuery's loadmetoade en ynjeksje yn 'e .modal-body. As jo ​​​​de gegevens-api brûke, kinne jo as alternatyf de hreftag brûke om de boarne op ôfstân op te jaan. In foarbyld hjirfan wurdt hjirûnder werjûn:

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

Metoaden

.modal(opsjes)

Aktivearret jo ynhâld as modaal. Akseptearret in opsjonele opsjes object.

  1. $ ( '#myModal' ). modal ({
  2. toetseboerd : falsk
  3. })

.modal('toggle')

Wizigje manuell in modaal.

  1. $ ( '#myModal' ). modaal ( 'wikselje' )

.modal('show')

Iepenet in modaal mei de hân.

  1. $ ( '#myModal' ). modaal ( 'show' )

.modal('ferbergje')

Ferberget in modaal mei de hân.

  1. $ ( '#myModal' ). modaal ( 'ferbergje' )

Eveneminten

De modale klasse fan Bootstrap bleatsteld in pear eveneminten foar heakjen oan modale funksjonaliteit.

Barren Beskriuwing
sjen litte Dit evenemint fjoer fuortendaliks as de showeksimplaar metoade wurdt oanroppen.
sjen litten Dit evenemint wurdt ûntslein as de modal sichtber makke is foar de brûker (sil wachtsje op css-oergongen om te foltôgjen).
ferstopje Dit barren wurdt fuortendaliks ûntslein as de hideeksimplaarmetoade oanroppen is.
ferburgen Dit barren wurdt ûntslein as de modal klear is ferburgen foar de brûker (sil wachtsje op css-oergongen om te foltôgjen).
  1. $ ( '#myModal' ). on ( 'ferburgen' , funksje () {
  2. // wat dwaan…
  3. })

Foarbyld yn navbar

De ScrollSpy-plugin is foar it automatysk bywurkjen fan nav-doelen basearre op scrollposysje. Rôlje it gebiet ûnder de navigaasjebalke en besjoch de aktive klasse feroarje. De dellûk-subitems sille ek markearre wurde.

@fet

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi foardat se útferkocht qui. Tumblr pleats-tot-tafel fyts rjochten wat dan ek. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui jo hawwe wierskynlik net heard fan harren en cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa snor skateboard, adipisicing fugiat velit pitchfork baard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat fjouwer loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles net estetyske oefening quis gentrify. Brooklyn adipisicing craft bier vice keytar deserunt.

ien

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger tas. Cred ex in, duorsume delectus consectetur fanny pack iphone.

twa

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 messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats jo nei alle gedachten hawwe net heard fan harren consequat hoodie glutenfrije lo-fi fap aliquip. Labore elit placeat foardat se útferkocht binne, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft bier seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Gebrûk

Fia data attributen

Om maklik scrollspy-gedrach ta te foegjen oan jo topbalke-navigaasje, foegje gewoan ta data-spy="scroll"oan it elemint wêrop jo wolle bispiede (meast typysk soe dit it lichem wêze) en data-target=".navbar"selektearje hokker nav te brûken. Jo wolle scrollspy brûke mei in .navkomponint.

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

Fia JavaScript

Rop de scrollspy fia JavaScript:

  1. $ ( '#navbar' ). scrollspy ()
Heads up! Navbar-keppelings moatte oplossbere id-doelen hawwe. Bygelyks, in <a href="#home">home</a>moat oerienkomme mei wat yn 'e dom lykas <div id="home"></div>.

Metoaden

.scrollspy('ferfarskje')

By it brûken fan scrollspy yn kombinaasje mei it tafoegjen of ferwiderjen fan eleminten út 'e DOM, moatte jo de ferfarskingsmetoade sa neame:

  1. $ ( '[data-spy="scroll"]' ). each ( funksje () {
  2. var $spy = $ ( dizze ). scrollspy ( 'ferfarskje' )
  3. });

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-offset="".

Namme type standert beskriuwing
offset nûmer 10 Pixels om fan boppen ôf te kompensearjen by it berekkenjen fan posysje fan scroll.

Eveneminten

Barren Beskriuwing
aktivearje Dit evenemint ûntspringt as in nij item wurdt aktivearre troch de scrollspy.

Foarbyld ljeppers

Foegje rappe, dynamyske ljepperfunksjes ta oan oergong troch ruten fan lokale ynhâld, sels fia dellûkmenu's.

Raw denim jo nei alle gedachten hawwe net heard fan harren jeans shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip plak foar salvia cillum iphone. Seitan aliquip quis cardigan american apparel, slachter 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.


Gebrûk

Ljepblêden ynskeakelje fia JavaScript (elke ljepper moat yndividueel aktivearre wurde):

  1. $ ( '#myTab a' ). klik ( funksje ( e ) {
  2. e . foarkommeDefault ();
  3. $ ( dizze ). tab ( 'show' );
  4. })

Jo kinne yndividuele ljeppers op ferskate manieren aktivearje:

  1. $ ( '#myTab a[href="#profyl"]' ). tab ( 'show' ); // Selektearje ljepper by namme
  2. $ ( '#myTab a:first' ). tab ( 'show' ); // Selektearje earste ljepper
  3. $ ( '#myTab a:last' ). tab ( 'show' ); // Selektearje lêste ljepper
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'show' ); // Selektearje tredde ljepper (0-yndeksearre)

Markup

Jo kinne in ljepper of pilnavigaasje aktivearje sûnder JavaScript te skriuwen troch gewoan oan te jaan data-toggle="tab"of data-toggle="pill"op in elemint. It tafoegjen fan de naven nav-tabsklassen oan it ljepblêd ulsil de styling fan it ljepblêd Bootstrap tapasse.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Thús </a></li>
  3. <li><a href = "#profile" data-toggle = "tab"> Profyl </a> </li>
  4. <li><a href = "#messages" data-toggle = "tab"> Berjochten </a> </li>
  5. <li><a href = "#settings" data-toggle = "tab"> Ynstellings </a> </li>
  6. </ul>

Metoaden

$().tab

Aktivearret in ljepper elemint en ynhâld container. De ljepper moat in data-targetof in hrefrjochte op in kontenerknooppunt hawwe yn 'e DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "aktyf" ><a href = "#home"> Thús </a> </li>
  3. <li><a href = "#profile" > Profyl </a></li>
  4. <li><a href = "#messages" > Berjochten </a></li>
  5. <li><a href = "#settings" > Ynstellings </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-ynhâld" >
  9. <div class = "tab-pane active" id = "thús" > ... </div>
  10. <div class = "tab-pane" id = "profyl" > ... </div>
  11. <div class = "tab-pane" id = "berjochten" > ... </div>
  12. <div class = "tab-pane" id = "ynstellings" > ... </div>
  13. </div>
  14.  
  15. <skript>
  16. $ ( funksje () {
  17. $ ( '#myTab a:last' ). tab ( 'show' );
  18. })
  19. </skript>

Eveneminten

Barren Beskriuwing
sjen litte Dit evenemint ûntspringt op ljeppershow, mar foardat de nije ljepper is werjûn. Brûk event.targeten event.relatedTargetom respektivelik de aktive ljepper en de foarige aktive ljepper (as beskikber) te rjochtsjen.
sjen litten Dit evenemint ûntspringt op ljepper sjen nei in ljepper is werjûn. Brûk event.targeten event.relatedTargetom respektivelik de aktive ljepper en de foarige aktive ljepper (as beskikber) te rjochtsjen.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'sjoen' , funksje ( e ) {
  2. e . target // aktivearre ljepper
  3. e . relatedTarget // foarige ljepper
  4. })

Foarbylden

Ynspirearre troch de treflike jQuery.tipsy plugin skreaun troch Jason Frame; Tooltips binne in bywurke ferzje, dy't net fertrouwe op ôfbyldings, CSS3 brûke foar animaasjes, en data-attributen foar lokale titelopslach.

Om prestaasjesredenen binne de tooltip en popover-data-apis oanmeld, wat betsjut dat jo se sels moatte inisjalisearje .

Hoverje oer de keppelings hjirûnder om tooltips te sjen:

Strakke broek folgjende nivo keffiyeh jo hawwe wierskynlik net heard fan harren. Photo booth baard rau denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie duorsume quinoa 8-bit Amerikaanske klean hawwe in terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, fjouwer loko mcsweeney's reinigje vegan chambray. In echt iroanysk ambachtsman wat keytar , scenester farm-to-table banksy Austin twitter handle freegan cred rauwe denim single-origin kofje virale.

Fjouwer rjochtingen

Tooltips yn ynfiergroepen

By it brûken fan tooltips en popovers mei de Bootstrap-ynputgroepen, moatte jo de containeropsje (dokumintearre hjirûnder) ynstelle om unwanted by-effekten te foarkommen.


Gebrûk

Trigger de tooltip fia JavaScript:

  1. $ ( '#foarbyld' ). tooltip ( opsjes )

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-animation="".

Namme type standert beskriuwing
animaasje boolean wier tapasse in css-fade-oergong op de tooltip
html boolean falsk Foegje html yn 'e tooltip. As it falsk is, textsil de metoade fan jquery brûkt wurde om ynhâld yn 'e dom te foegjen. Brûk tekst as jo soargen meitsje oer XSS-oanfallen.
pleatsing string | funksje 'top' hoe te pleatsen de tooltip - top | ûnderen | lofts | rjochts
selector string falsk As in selector wurdt foarsjoen, sil tooltip objekten wurde delegearre oan de oantsjutte doelen.
titel string | funksje '' standert titelwearde as 'title' tag net oanwêzich is
trekker string 'fokus fokus' hoe tooltip wurdt triggered - klik | sweef | fokus | hantlieding. Tink derom dat jo gefal pass trigger multiple, romte skieden, trigger typen.
fertraging nûmer | objekt 0

fertraging sjen en ferbergjen fan de tooltip (ms) - jildt net foar hânmjittich triggertype

As in nûmer wurdt levere, wurdt fertraging tapast op sawol hide / show

Objektstruktuer is:delay: { show: 500, hide: 100 }

kontener string | falsk falsk

Foegje de tooltip ta oan in spesifyk elemintcontainer: 'body'

Heads up! Opsjes foar yndividuele tooltips kinne alternatyf wurde oantsjutte troch it brûken fan gegevensattributen.

Markup

  1. <a href = "#" data-toggle = "tooltip" title = "earste tooltip"> hâld de mûs oer my </a>

Metoaden

$().tooltip(opsjes)

Hechtet in tooltip handler oan in elemint kolleksje.

.tooltip('show')

Iepenet de tooltip fan in elemint.

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

.tooltip('ferbergje')

Ferberget de tooltip fan in elemint.

  1. $ ( '#element' ). tooltip ( 'ferbergje' )

.tooltip('toggle')

Skeakelt de tooltip fan in elemint.

  1. $ ( '#element' ). tooltip ( 'wikselje' )

.tooltip('destroy')

Ferberget en ferneatiget de tooltip fan in elemint.

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

Foarbylden

Foegje lytse overlays fan ynhâld ta, lykas dy op 'e iPad, oan elk elemint foar húsfesting fan sekundêre ynformaasje. Hoverje oer de knop om de popover te aktivearjen. Fereasket Tooltip om te wêzen opnommen.

Statyske popover

Fjouwer opsjes binne beskikber: boppe, rjochts, ûnder, en lofts rjochte.

Popover top

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

Popover rjochts

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

Popover ûnderkant

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

Popover links

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

Gjin markup werjûn as popovers wurde generearre út JavaScript en ynhâld binnen in dataattribút.

Live demo

Fjouwer rjochtingen


Gebrûk

Popovers ynskeakelje fia JavaScript:

  1. $ ( '#foarbyld' ). popover ( opsjes )

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-animation="".

Namme type standert beskriuwing
animaasje boolean wier tapasse in css-fade-oergong op de tooltip
html boolean falsk Foegje html yn 'e popover yn. As it falsk is, textsil de metoade fan jquery brûkt wurde om ynhâld yn 'e dom te foegjen. Brûk tekst as jo soargen meitsje oer XSS-oanfallen.
pleatsing string | funksje 'rjochts' hoe te pleatsen de popover - top | ûnderen | lofts | rjochts
selector string falsk as in selector wurdt foarsjoen, sil tooltip foarwerpen wurde delegearre oan de oantsjutte doelen
trekker string 'klik' hoe popover wurdt triggered - klik | sweef | fokus | hantlieding
titel string | funksje '' standert titelwearde as `title`-attribút net oanwêzich is
ynhâld string | funksje '' standert ynhâldwearde as it attribút `data-content` net oanwêzich is
fertraging nûmer | objekt 0

fertraging sjen en ferbergjen fan de popover (ms) - jildt net foar hânmjittich trigger type

As in nûmer wurdt levere, wurdt fertraging tapast op sawol hide / show

Objektstruktuer is:delay: { show: 500, hide: 100 }

kontener string | falsk falsk

Foegje de popover ta oan in spesifyk elemintcontainer: 'body'

Heads up! Opsjes foar yndividuele popovers kinne alternatyf wurde oantsjutte troch it brûken fan gegevensattributen.

Markup

Om prestaasjesredenen binne de Tooltip en Popover data-apis oanmelden. As jo ​​se brûke wolle, spesifisearje gewoan in selektoropsje.

Metoaden

$().popover(opsjes)

Inisjalisearje popovers foar in elemint kolleksje.

.popover('show')

Bliuwt in popover fan eleminten.

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

.popover('ferbergje')

Ferberget in eleminten popover.

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

.popover('toggle')

Skeakelt in popover fan eleminten.

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

.popover('destroy')

Ferberget en ferneatiget popover fan in elemint.

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

Foarbyld alerts

Foegje ûntslachfunksjonaliteit ta oan alle warskôgingsberjochten mei dizze plugin.

Hillige guacamole! Best kontrolearje jo sels, jo sjogge net te goed.

Oh snap! Jo hawwe in flater!

Feroarje dit en dat en besykje it nochris. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Nim dizze aksje Of doch dit


Gebrûk

Skeakelje it ûntslach fan in warskôging fia JavaScript yn:

  1. $ ( ".alert" ). warskôgje ()

Markup

Foegje gewoan ta data-dismiss="alert"oan jo slute knop om automatysk in warskôging slute funksjonaliteit te jaan.

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

Metoaden

$().alert()

Wraps alle warskôgings mei nauwe funksjonaliteit. Om jo warskôgings te animearjen as se sluten binne, soargje derfoar dat se de .fadeen .inklasse al op har tapast hawwe.

.alert('slute')

Slút in warskôging.

  1. $ ( ".alert" ). warskôging ( 'slute' )

Eveneminten

Bootstrap's warskôgingsklasse bleatstelt in pear eveneminten foar heakjen oan warskôgingsfunksjonaliteit.

Barren Beskriuwing
slute Dit evenemint fjoer fuortendaliks as de closeeksimplaar metoade wurdt oanroppen.
sletten Dit evenemint wurdt ûntslein as de warskôging is sletten (sil wachtsje op css-oergongen om te foltôgjen).
  1. $ ( '#myn-alert' ). binde ( 'sletten' , funksje () {
  2. // wat dwaan…
  3. })

Foarbyld gebrûk

Doch mear mei knoppen. Kontrolearje knop steaten of meitsje groepen fan knoppen foar mear komponinten lykas arkbalken.

Stateful

Taheakje data-loading-text="Loading..."om in laden steat te brûken op in knop.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Laden..." > Laadstatus </button>

Single skeakel

Foegje data-toggle="button"ta om wikseljen op ien knop te aktivearjen.

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Single Toggle </button>

Checkbox

Foegje ta data-toggle="buttons-checkbox"foar wikseljen fan karfakjestyl op btn-groep.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Lofts </button>
  3. <button type = "button" class = "btn btn-primary" > Midden </button>
  4. <button type = "button" class = "btn btn-primary" > Rjochts </button>
  5. </div>

Radio

Foegje ta data-toggle="buttons-radio"foar wikseljen fan radiostyl op btn-groep.

  1. <div class = "btn-group" data-toggle = "knoppen-radio" >
  2. <button type = "button" class = "btn btn-primary" > Lofts </button>
  3. <button type = "button" class = "btn btn-primary" > Midden </button>
  4. <button type = "button" class = "btn btn-primary" > Rjochts </button>
  5. </div>

Gebrûk

Knoppen ynskeakelje fia JavaScript:

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

Markup

Gegevensattributen binne yntegraal mei de knop-plugin. Besjoch de foarbyldkoade hjirûnder foar de ferskate markuptypen.

Opsjes

Gjin

Metoaden

$().button('toggle')

Wizigje push-status. Jout de knop it uterlik dat it is aktivearre.

Heads up! Jo kinne automatysk wikseljen fan in knop ynskeakelje troch it data-toggleattribút te brûken.
  1. <button type = "button" class = "btn" data-toggle = "knop" > </button>

$().button('laden')

Stelt knopstatus yn op laden - skeakelet knop út en wikselet tekst om tekst te laden. It laden fan tekst moat definieare wurde op it knopelemint mei it data-attribút data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "laden dingen..." > ... </button>
Heads up! Firefox behâldt de útskeakele steat oer sideladen . In oplossing foar dit is te brûken autocomplete="off".

$().button('reset')

Reset knopstatus - wikselt tekst nei orizjinele tekst.

$().button(string)

Reset knop tastân - wikselt tekst nei alle gegevens definiearre tekst steat.

  1. <button type = "button" class = "btn" data-complete-text = "klear!" > ... </knop>
  2. <skript>
  3. $ ( '.btn' ). knop ( 'folslein' )
  4. </skript>

Oer

Krij basisstilen en fleksibele stipe foar ynklapbere komponinten lykas akkordeons en navigaasje.

* Fereasket dat de Transitions-plugin wurdt opnommen.

Foarbyld fan akkordeon

Mei it ynstoarten plugin hawwe wy in ienfâldige widget foar akkordeonstyl boud:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sette in fûgel op it inktvis single-origin kofje nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat ambachtlike bier pleats-tot-tafel, rau denim estetyske synth nesciunt jo nei alle gedachten hawwe net heard fan harren accusamus labore duorsume VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sette in fûgel op it inktvis single-origin kofje nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat ambachtlike bier pleats-tot-tafel, rau denim estetyske synth nesciunt jo nei alle gedachten hawwe net heard fan harren accusamus labore duorsume VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua sette in fûgel op it inktvis single-origin kofje nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat ambachtlike bier pleats-tot-tafel, rau denim estetyske synth nesciunt jo nei alle gedachten hawwe net heard fan harren accusamus labore duorsume VHS.
  1. <div class = "akkordeon" id = "akkordeon2" >
  2. <div class = "akkordeongroep" >
  3. <div class = "akkordeon-heading" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne"> _
  5. Ynklapbere groep item #1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "akkordeon-lichem ynstoarten" >
  9. <div class = "accordeon-inner" >
  10. Anim pariatur cliche ...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "akkordeongroep" >
  15. <div class = "akkordeon-heading" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo"> _
  17. Ynklapbere groep item #2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "akkordeon-lichem ynstoarten" >
  21. <div class = "accordeon-inner" >
  22. Anim pariatur cliche ...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Jo kinne de plugin ek brûke sûnder de akkordeonmarkearring. Meitsje in knop wikselje it útwreidzjen en ynstoarten fan in oar elemint.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. ienfâldich ynklapber
  3. </knop>
  4.  
  5. <div id = "demo" class = "ynstoarten" > </div>

Gebrûk

Fia data attributen

Foegje gewoan data-toggle="collapse"en in data-targetoan elemint ta om automatysk kontrôle fan in ynklapber elemint ta te jaan. It data-targetattribút akseptearret in css-selektor om de ynstoarting oan te passen. Wês wis dat jo de klasse tafoegje collapseoan it ynklapbere elemint. As jo ​​​​wolle dat it standert iepen is, foegje dan de ekstra klasse ta in.

Om akkordeon-like groepbehear ta te foegjen oan in ynklapbere kontrôle, foegje it data-attribút ta data-parent="#selector". Ferwize nei de demo om dit yn aksje te sjen.

Fia JavaScript

Ynskeakelje manuell mei:

  1. $ ( ".kollapse" ). ynstoarten ()

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-parent="".

Namme type standert beskriuwing
âlder selector falsk As selector dan alle ynklapbere eleminten ûnder de oantsjutte âlder wurde sletten as dit ynklapbere item wurdt werjûn. (fergelykber mei tradisjoneel akkordeongedrach)
wikselje boolean wier Skeakelt it ynklapbere elemint by oprop

Metoaden

.collapse(opsjes)

Aktivearret jo ynhâld as in ynklapber elemint. Akseptearret in opsjonele opsjes object.

  1. $ ( '#myCollapsible' ). ynstoarten ({
  2. wikselje : falsk
  3. })

.collapse('toggle')

Skeakelt in ynklapber elemint nei werjûn of ferburgen.

.collapse('show')

Toant in ynklapber elemint.

.collapse('ferbergje')

Ferberget in ynklapber elemint.

Eveneminten

De ynstoartingsklasse fan Bootstrap bleatstelt in pear eveneminten foar heakjen oan ynstoartingsfunksjonaliteit.

Barren Beskriuwing
sjen litte Dit evenemint fjoer fuortendaliks as de showeksimplaar metoade wurdt oanroppen.
sjen litten Dit barren wurdt ûntslein as in ynstoartelemint sichtber makke is foar de brûker (sil wachtsje op css-oergongen om te foltôgjen).
ferstopje Dit evenemint wurdt ûntslein fuortendaliks as de hidemetoade is oanroppen.
ferburgen Dit barren wurdt ûntslein as in ynstoartelemint is ferburgen foar de brûker (sil wachtsje op css-oergongen om te foltôgjen).
  1. $ ( '#myCollapsible' ). on ( 'ferburgen' , funksje () {
  2. // wat dwaan…
  3. })

Foarbyld

In basis, maklik útwreide plugin foar it fluch meitsjen fan elegante typeaheads mei elke foarm fan tekstynfier.

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

Jo wolle ynstelle autocomplete="off"om foar te kommen dat standert browsermenu's ferskine oer de Bootstrap typeahead dropdown.


Gebrûk

Fia data attributen

Foegje gegevensattributen ta om in elemint te registrearjen mei typeahead-funksjonaliteit lykas werjûn yn it foarbyld hjirboppe.

Fia JavaScript

Rop de typeahead manuell mei:

  1. $ ( '.typeahead' ). typeahead ()

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-source="".

Namme type standert beskriuwing
boarne array, funksje [ ] De gegevensboarne om tsjin te freegjen. Kin in array fan snaren as in funksje wêze. De funksje wurdt trochjûn twa arguminten, de querywearde yn it ynfier fjild en de processcallback. De funksje kin syngroan brûkt wurde troch de gegevensboarne direkt of asynchronysk werom te jaan fia it processienige argumint fan 'e callback.
items nûmer 8 It maksimum oantal items om te werjaan yn it útklapmenu.
minLength nûmer 1 De minimale tekenlingte dy't nedich is foar it aktivearjen fan suggestjes foar autofolje
matcher funksje case insensitive De metoade brûkt om te bepalen oft in query oerienkomt mei in item. Akseptearret in inkeld argumint, it itemtsjin hokker de query te testen. Tagong ta de aktuele query mei this.query. Jou in boolean werom trueas query in oerienkomst is.
sorter funksje eksakte oerienkomst,
case sensitive,
case insensitive
Metoade brûkt om resultaten fan autofolje te sortearjen. Akseptearret ien argumint itemsen hat de omfang fan 'e typeahead-eksimplaar. Ferwize de aktuele fraach mei this.query.
updater funksje jout selektearre item werom De metoade brûkt om werom selektearre item. Akseptearret in inkeld argumint, de itemen hat de omfang fan 'e typeahead-eksimplaar.
highlighter funksje markearret alle standert wedstriden Metoade brûkt om resultaten fan autofolje te markearjen. Akseptearret ien argumint itemen hat de omfang fan 'e typeahead-eksimplaar. Moat weromkomme html.

Metoaden

.typeahead(opsjes)

Inisjalisearret in ynfier mei in typeahead.

Foarbyld

De subnavigaasje oan de linkerkant is in live demo fan it affix-plugin.


Gebrûk

Fia data attributen

Om maklik affixgedrach ta te foegjen oan elk elemint, foegje gewoan ta data-spy="affix"oan it elemint wêrop jo wolle bispiede. Brûk dan offsets om te definiearjen wannear't it pinjen fan in elemint oan- en útskeakelje moat.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Heads up! Jo moatte beheare de posysje fan in pinned elemint en it gedrach fan syn direkte âlder. Posysje wurdt regele troch affix, affix-top, en affix-bottom. Unthâld om te kontrolearjen op in potinsjeel ynstoarte âlder as de affix yntrapt, om't it ynhâld fan 'e normale stream fan' e side verwijdert.

Fia JavaScript

Rop de affix-plugin fia JavaScript:

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

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-offset-top="200".

Namme type standert beskriuwing
offset nûmer | funksje | objekt 10 Pixels om te kompensearjen fan it skerm by it berekkenjen fan posysje fan scroll. As in inkeld nûmer wurdt levere, sil de offset tapast wurde yn sawol boppe- as lofterrjochtingen. Om nei ien rjochting te harkjen, of meardere unike offsets, leverje gewoan in objekt offset: { x: 10 }. Brûk in funksje as jo dynamysk in offset moatte leverje (nuttich foar guon responsive ûntwerpen).