Oor modale

'n Gestroomlynde, maar buigsame, gebruik die tradisionele javascript-modale inprop met slegs die minimum vereiste funksionaliteit en slim verstekke.

Statiese voorbeeld

Hieronder is 'n staties weergegee modaal.

Regstreekse demo

Wissel 'n modaal via javascript deur op die knoppie hieronder te klik. Dit sal afgly en vervaag vanaf die bokant van die bladsy.

Gebruik bootstrap-modal

Bel die modaal via javascript:

$ ( '#myModal' ). modaal ( opsies )

Opsies

Opmerk

Jy kan maklik modale op jou bladsy aktiveer sonder om 'n enkele reël JavaScript te hoef te skryf. Stel net data-toggle="modal"op 'n kontroleerderelement met 'n data-target="#foo"of href="#foo"wat ooreenstem met 'n modale element-ID, en wanneer daarop geklik word, sal dit jou modaal begin.

Om ook opsies by jou modale instansie te voeg, sluit dit net as bykomende data-kenmerke in op óf die beheerelement óf die modale opmaak self.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Begin Modal </a>    

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    <button class = "close" data-dismiss = "modal" > × </button>  
    <h3> Modale kopskrif </h3>
  </div>
  <div class = "modal-body" > 
    <p> Een fyn lyf … </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Maak toe </a>  
    <a href = "#" class = "btn btn-primêr" > Stoor veranderinge </a>  
  </div>
</div>

Metodes

.modal(opsies)

Aktiveer jou inhoud as 'n modaal. Aanvaar 'n opsionele opsie object.

$ ( '#myModal' ). modaal ({
  sleutelbord : vals 
})

.modal('toggle')

Wissel 'n modaal handmatig.

$ ( '#myModal' ). modaal ( 'wissel' )

.modal('show')

Maak 'n modaal handmatig oop.

$ ( '#myModal' ). modaal ( 'wys' )

.modal('versteek')

Versteek 'n modaal handmatig.

$ ( '#myModal' ). modaal ( 'versteek' )

Gebeurtenisse

Bootstrap se modale klas stel 'n paar gebeurtenisse bloot om by modale funksionaliteit in te skakel.

$ ( '#myModal' ). aan ( 'versteek' , funksie () {   
  // doen iets…
})

Oor dropdowns

Voeg aftrekkieslys by byna enigiets in Bootstrap met hierdie eenvoudige inprop. Bootstrap het volledige aftreklysondersteuning in die navigasiebalk, oortjies en pille.

Voorbeelde

Klik op die aftreklys nav-skakels in die navigasiebalk en pille hieronder om aftreklys te toets.

• Gereelde skakel
• Aftreklys
  • Action
  • Another action
  • Something else here
  • Separated link
• Aftreklys 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Aftreklys 3
  • Action
  • Another action
  • Something else here
  • Separated link

Gebruik bootstrap-dropdown.js

Bel die dropdowns via javascript:

$ ( '.dropdown-toggle' ). aftreklys ()

Opmerk

Om aftrekfunksies vinnig by enige element te voeg , voeg net by data-toggle="dropdown"en enige geldige selflaai-aftreklys sal outomaties geaktiveer word.

<ul klas = "nav nav-pille" > 
  <li class = "aktief" ><a href = "#" > Gereelde skakel </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Aftreklys
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Handeling </a></li> 
      <li><a href = "#" > Nog 'n handeling </a></li> 
      <li><a href = "#" > Iets anders hier </a></li> 
      <li klas = "verdeler" ></li> 
      <li><a href = "#" > Afgesonderde skakel </a></li> 
    </ul>
  </li>
  ...
</ul>

Om URL's ongeskonde te hou, gebruik die data-targetkenmerk in plaas van href="#".

<ul klas = "nav nav-pille" > 
  <li klas = "aftreklys" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html"> _    
      Aftreklys
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Metodes

$().dropdown()

'n Programmatiese API vir die aktivering van spyskaarte vir 'n gegewe navigasiebalk of navigasie met oortjies.

Die ScrollSpy-inprop is vir die outomatiese opdatering van navigasieteikens gebaseer op rolposisie.

Voorbeeld navigasiebalk met scrollspy

Blaai deur die area hieronder en kyk na die navigasieopdatering. Die aftrek-subitems sal ook uitgelig word. Probeer dit!

Met behulp van bootstrap-scrollspy.js

Bel die scrollspy via javascript:

$ ( '#navbar' ). scrollspy ()

Opmerk

Om maklik scrollspy-gedrag by jou bobalknavigasie te voeg, voeg net by data-spy="scroll"die element waarop jy wil spioeneer (meestal sal dit die liggaam wees).

<body data-spy = "scroll" > ... </body>  

Metodes

.scrollspy('refresh')

Wanneer jy scrollspy gebruik in samewerking met die byvoeging of verwydering van elemente uit die DOM, moet jy die herlaaimetode soos volg noem:

$ ( '[data-spy="scroll"]' ). elk ( funksie () {  
  var $spioen = $ ( hierdie ). scrollspy ( 'verfris' )
});

Opsies

Gebeurtenisse

Hierdie inprop voeg vinnige, dinamiese oortjie- en pilfunksies by om deur plaaslike inhoud oor te skakel.

Voorbeeld oortjies

Klik op die oortjies hieronder om tussen versteekte ruite te wissel, selfs via aftrekkieslyste.

• Tuis
• Profiel
• Aftreklys
  • @fat
  • @mdo

Gebruik bootstrap-tab.js

Aktiveer tabbare oortjies via JavaScript (elke oortjie moet individueel geaktiveer word):

$ ( '#myTab a' ). klik ( funksie ( e ) {  
  e . verhoedDefault ();
  $ ( hierdie ). tab ( 'wys' );
})

Jy kan individuele oortjies op verskeie maniere aktiveer:

$ ( '#myTab a[href="#profiel"]' ). tab ( 'wys' ); // Kies oortjie volgens naam 
$ ( '#myTab a:eerste' ). tab ( 'wys' ); // Kies eerste oortjie 
$ ( '#myTab a:laaste' ). tab ( 'wys' ); // Kies laaste oortjie 
$ ( '#myTab li:eq(2) a' ). tab ( 'wys' ); // Kies derde oortjie (0-geïndexeer) 

Opmerk

Jy kan 'n oortjie- of pilnavigasie aktiveer sonder om enige javascript te skryf deur bloot 'n element te spesifiseer data-toggle="tab"of data-toggle="pill"op 'n element. Deur die naven nav-tabsklasse by die oortjie te voeg ul, sal die selflaai-oortjie-stilering toepas.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Tuis </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profiel </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Boodskappe </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Instellings </a></li>  
</ul>

Metodes

$().tab

Aktiveer 'n oortjie-element en inhoudhouer. Tab moet óf 'n data-targetóf 'n hrefteiken 'n houer nodus in die DOM hê.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li klas = "aktief" ><a href = "#huis" > Tuis </a></li>  
  <li><a href = "#profile" > Profiel </a></li> 
  <li><a href = "#messages" > Boodskappe </a></li> 
  <li><a href = "#settings" > Instellings </a></li> 
</ul>
 
<div class = "tab-inhoud" > 
  <div class = "tab-pane active" id = "tuis" > ... </div>  
  <div class = "tab-pane" id = "profiel" > ... </div>  
  <div class = "tab-pane" id = "boodskappe" > ... </div>  
  <div class = "tab-pane" id = "instellings" > ... </div>  
</div>
 
<skrif>
  $ ( funksie () {  
    $ ( '#myTab a:laaste' ). tab ( 'wys' );
  })
</script>

Gebeurtenisse

$ ( 'a[data-toggle="tab"]' ). aan ( 'getoon' , funksie ( e ) {   
  e . teiken // geaktiveerde blad
  e . relatedTarget // vorige oortjie
})

Oor Tooltips

Geïnspireer deur die uitstekende jQuery.tipsy-inprop geskryf deur Jason Frame; Tooltips is 'n opgedateerde weergawe wat nie op beelde staatmaak nie, css3 vir animasies en data-kenmerke vir plaaslike titelberging gebruik.

Voorbeeld gebruik van Tooltips

Beweeg oor die skakels hieronder om nutswenke te sien:

Gebruik bootstrap-tooltip.js

Aktiveer die nutswenk via javascript:

$ ( '#voorbeeld' ). nutswenk ( opsies )

Opsies

Opmerk

Vir prestasie redes, is die Tooltip en Popover data-api's intekening. As jy dit wil gebruik, spesifiseer net 'n kieser opsie.

<a href = "#" rel = "tooltip" title = "eerste tooltip" > beweeg oor my </a>   

Metodes

$().tooltip(opsies)

Heg 'n nutswenk-hanteerder aan 'n elementversameling.

.tooltip('wys')

Onthul 'n element se nutswenk.

$ ( '#element' ). nutswenk ( 'wys' )

.tooltip('versteek')

Versteek 'n element se nutswenk.

$ ( '#element' ). tooltip ( 'versteek' )

.tooltip('toggle')

Wissel 'n element se nutswenk.

$ ( '#element' ). nutswenk ( 'wissel' )

Oor popovers

Voeg klein oorlegsels van inhoud, soos dié op die iPad, by enige element om sekondêre inligting te huisves.

* Vereis Tooltip om ingesluit te word

Voorbeeld sweef popover

Beweeg oor die knoppie om die popover te aktiveer.

Gebruik bootstrap-popover.js

Aktiveer popovers via javascript:

$ ( '#voorbeeld' ). popover ( opsies )

Opsies

Opmerk

Vir prestasie redes, is die Tooltip en Popover data-api's intekening. As jy dit wil gebruik, spesifiseer net 'n kieser opsie.

Metodes

$().popover(opsies)

Inisialiseer popovers vir 'n elementversameling.

.popover('wys')

Onthul 'n element-oorspring.

$ ( '#element' ). popover ( 'wys' )

.popover('versteek')

Versteek 'n element-opspringer.

$ ( '#element' ). popover ( 'versteek' )

.popover('toggle')

Wissel 'n element-opspringer.

$ ( '#element' ). popover ( 'wissel' )

Oor waarskuwings

Die waarskuwing-inprop is 'n klein klas om noue funksionaliteit by waarskuwings te voeg.

Voorbeeld waarskuwings

Die waarskuwings-inprop werk op gereelde waarskuwingsboodskappe en blokkeer boodskappe.

Gebruik bootstrap-alert.js

Aktiveer afwysing van 'n waarskuwing via javascript:

$ ( ".alert" ). waarskuwing ()

Opmerk

Voeg net data-dismiss="alert"by jou toemaakknoppie om outomaties 'n waarskuwingssluitingfunksie te gee.

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

Metodes

$().alert()

Omvou alle waarskuwings met noue funksionaliteit. Om jou waarskuwings te laat animeer wanneer dit gesluit is, maak seker dat die .fadeen .inklas reeds op hulle toegepas is.

.alert('close')

Maak 'n waarskuwing toe.

$ ( ".alert" ). waarskuwing ( 'toe' )

Gebeurtenisse

Bootstrap se waarskuwingsklas ontbloot 'n paar gebeurtenisse om by waarskuwingsfunksionaliteit in te skakel.

$ ( '#my-waarskuwing' ). bind ( 'geslote' , funksie () {   
  // doen iets…
})

Oor

Doen meer met knoppies. Beheer knoppie state of skep groepe knoppies vir meer komponente soos nutsbalke.

Voorbeeld gebruike

Gebruik die knoppies-inprop vir state en skakelaars.

Gebruik bootstrap-button.js

Aktiveer knoppies via javascript:

$ ( '.nav-tabs' ). knoppie ()

Opmerk

Data-kenmerke is 'n integrale deel van die knoppie-inprop. Kyk na die voorbeeldkode hieronder vir die verskillende opmaaktipes.

<!-- Voeg data-toggle="knoppie" by om skakeling op 'n enkele knoppie te aktiveer -->
<button class = "btn" data-toggle = "button" > Enkelwisseling </button>  
 
<!-- Voeg data-toggle="buttons-checkbox" by vir merkblokkiestyl-wisseling op btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Links </button> 
  <button class = "btn" > Middel </button> 
  <button class = "btn" > Regs </button> 
</div>
 
<!-- Voeg data-toggle="buttons-radio" by vir radiostyl-wisseling op btn-group -->
<div class = "btn-group" data-toggle = "knoppies-radio" >  
  <button class = "btn" > Links </button> 
  <button class = "btn" > Middel </button> 
  <button class = "btn" > Regs </button> 
</div>

Metodes

$().button('wissel')

Wissel stootstatus. Gee die knoppie die voorkoms dat dit geaktiveer is.

<button class = "btn" data-toggle = "button" > … </button>   

$().button('laai')

Stel knoppiestatus na laai - deaktiveer knoppie en ruil teks om na laai teks. Laaiteks moet op die knoppie-element gedefinieer word deur die data-kenmerk te gebruik data-loading-text.

<button class = "btn" data-loading-text = "laai goed..." > ... </button>   

$().button('reset')

Stel knoppiestatus terug - ruil teks na oorspronklike teks.

$().button(string)

Stel knoppiestatus terug - ruil teks na enige data-gedefinieerde tekstoestand.

<button class = "btn" data-complete-text = "klaar!" > ... </knoppie>   
<skrif>
  $ ( '.btn' ). knoppie ( 'voltooi' )
</script>

Oor

Kry basisstyle en buigsame ondersteuning vir opvoubare komponente soos trekklaviere en navigasie.

* Vereis dat die Transitions-inprop ingesluit moet word.

Voorbeeld trekklavier

Met behulp van die ineenvou-inprop het ons 'n eenvoudige trekklavierstyl-legstuk gebou:

Gebruik bootstrap-collapse.js

Aktiveer via javascript:

$ ( ".collapse" ). ineenstort ()

Opsies

Opmerk

Voeg net by data-toggle="collapse"en 'n data-targetby-element om outomaties beheer van 'n opvoubare element toe te ken. Die data-targetkenmerk aanvaar 'n css-kieser om die ineenstorting op toe te pas. Maak seker dat jy die klas collapseby die opvoubare element voeg. As jy wil hê dit moet verstek oopmaak, voeg die bykomende klas by in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  eenvoudig opvoubaar
</knoppie>
 
<div id = "demo" class = "vou in" > … </div>  

Metodes

.collapse(opsies)

Aktiveer jou inhoud as 'n opvoubare element. Aanvaar 'n opsionele opsie object.

$ ( '#myOpvoubaar' ). ineenstort ({
  wissel : vals 
})

.collapse('toggle')

Wissel 'n opvoubare element na gewys of versteek.

.collapse('wys')

Toon 'n opvoubare element.

.collapse('versteek')

Versteek 'n opvoubare element.

Gebeurtenisse

Bootstrap se ineenstortingsklas ontbloot 'n paar gebeurtenisse vir inskakeling by ineenstortingsfunksionaliteit.

$ ( '#myOpvoubaar' ). aan ( 'versteek' , funksie () {   
  // doen iets…
})

Oor

'n Generiese inprop om deur elemente te fiets. ’n Merry-go-round.

Voorbeeld karrousel

Kyk na die skyfievertoning hieronder.

Eerste kleinkiekie-etiket

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida by eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Tweede kleinkiekie-etiket

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida by eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Derde Kleinkiekie-etiket

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida by eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

Gebruik bootstrap-carousel.js

Bel via javascript:

$ ( '.carousel' ). karrousel ()

Opsies

Opmerk

Data-kenmerke word gebruik vir die vorige en volgende kontroles. Kyk na die voorbeeldopmerk hieronder.

<div id = "myCarousel" class = "carrousel" >  
  <!-- Karrousel items -->
  <div class = "carousel-inner" > 
    <div class = "aktiewe item" > … </div> 
    <div klas = "item" > … </div> 
    <div klas = "item" > … </div> 
  </div>
  <!-- Carrousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "vorige" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "volgende" > › </a>   
</div>

Metodes

.carousel(opsies)

Inisialiseer die karrousel met 'n opsionele opsies objecten begin deur items ry.

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

.carousel('siklus')

Blaai deur die karrousel-items van links na regs.

.carousel('pouse')

Stop die karrousel om deur items te fiets.

.carousel(nommer)

Sit die karrousel na 'n spesifieke raam (0 gebaseer, soortgelyk aan 'n skikking).

.carousel('vorige')

Blaai na die vorige item.

.carousel('volgende')

Blaai na die volgende item.

Gebeurtenisse

Bootstrap se karrouselklas stel twee gebeurtenisse bloot vir inhaak by karrouselfunksionaliteit.

Oor

'n Basiese, maklik uitgebreide inprop vir vinnige skep van elegante tikkoppe met enige vorm teksinvoer.

Voorbeeld

Begin tik in die veld hieronder om die tikvooruit-resultate te wys.

Gebruik bootstrap-typeahead.js

Bel die tikvooruit via javascript:

$ ( '.typeahead' ). tik voor ()

Opsies

Opmerk

Voeg data-kenmerke by om 'n element met tikvooraf-funksionaliteit te registreer.

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

Metodes

.typeahead(opsies)

Inisialiseer 'n invoer met 'n voorsprong.