Oer modals

In streamlined, mar fleksibel, nimt it tradisjonele javascript modale plugin oan mei allinich de minimale fereaske funksjonaliteit en tûke standerts.

Statyske foarbyld

Hjirûnder is in statysk werjûn modal.

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.

Mei help fan bootstrap-modal

Rop de modal fia javascript:

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

Opsjes

Markup

Jo kinne modalen op jo side maklik aktivearje sûnder in inkele rigel fan javascript te skriuwen. Gewoan ynstelle data-toggle="modal"op in controller elemint mei in data-target="#foo"of href="#foo"dy't oerienkomt mei in modale elemint id, en as jo klikke, dan sil starte jo modal.

Ek, om opsjes ta te foegjen oan jo modale eksimplaar, befetsje se gewoan as ekstra gegevensattributen op it kontrôleelemint of de modale markup sels.

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

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "slute" data-dismiss = "modaal" > × </button>   
    <h3> Modale koptekst </h3>
  </div>
  <div class = "modal-body" > 
    <p> Ien moai lichem... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modaal" > Slute </a>   
    <a href = "#" class = "btn btn-primary" > Bewarje wizigingen </a>  
  </div>
</div>

Metoaden

.modal(opsjes)

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

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

.modal('toggle')

Wizigje manuell in modaal.

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

.modal('show')

Iepenet in modaal mei de hân.

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

.modal('ferbergje')

Ferberget in modaal mei de hân.

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

Eveneminten

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

$ ( '#myModal' ). on ( 'ferburgen' , funksje () {   
  // wat dwaan…
})

Oer dropdowns

Foegje dropdown-menu's ta oan hast alles yn Bootstrap mei dizze ienfâldige plugin. Bootstrap hat folsleine útklapmenu-stipe yn 'e navigaasjebalke, ljeppers en pillen.

Foarbylden

Klikje op de dellûk-nav-keppelings yn 'e navigaasjebalke en pillen hjirûnder om dropdowns te testen.

• Reguliere keppeling
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 3
  • Action
  • Another action
  • Something else here
  • Separated link

Mei help fan bootstrap-dropdown.js

Skilje de dropdowns fia javascript:

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

Markup

Om dropdown-funksjonaliteit fluch ta te foegjen oan elk elemint, foegje gewoan ta data-toggle="dropdown"en elke jildige bootstrap-dropdown sil automatysk wurde aktivearre.

<ul class = "nav nav-pillen" > 
  <li class = "aktyf" ><a href = "#" > Gewoane keppeling </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1"> _   
      Dropdown
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Aksje </a></li> 
      <li><a href = "#" > In oare aksje </a></li> 
      <li><a href = "#" > Hjir noch wat </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Skieden keppeling </a></li> 
    </ul>
  </li>
  ...
</ul>

Om URL's yntakt te hâlden, brûk it data-targetattribút ynstee fan href="#".

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

Metoaden

$().dropdown()

In programmatyske api foar it aktivearjen fan menu's foar in opjûne navigaasjebalke of navigaasje mei ljeppers.

De ScrollSpy-plugin is foar it automatysk bywurkjen fan nav-doelen basearre op scrollposysje.

Foarbyld navbar mei scrollspy

Rôlje troch it gebiet hjirûnder en besjoch de navigaasje-update. De dellûk-subitems sille ek markearre wurde. Besykje it!

Mei help fan bootstrap-scrollspy.js

Skilje de scrollspy fia javascript:

$ ( '#navbar' ). scrollspy ()

Markup

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

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

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:

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

Opsjes

Eveneminten

Dit plugin foeget rappe, dynamyske ljepper- en pilfunksjonaliteit ta foar oergong troch lokale ynhâld.

Foarbyld ljeppers

Klikje op de ljeppers hjirûnder om te wikseljen tusken ferburgen ruten, sels fia dellûkmenu's.

• Thús
• Profyl
• Dropdown
  • @fat
  • @mdo

Mei help fan bootstrap-tab.js

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

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

Jo kinne yndividuele ljeppers op ferskate manieren aktivearje:

$ ( '#myTab a[href="#profyl"]' ). tab ( 'show' ); // Selektearje ljepper by namme 
$ ( '#myTab a:first' ). tab ( 'show' ); // Selektearje earste ljepper 
$ ( '#myTab a:last' ). tab ( 'show' ); // Selektearje lêste ljepper 
$ ( '#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 op 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 'e bootstrap-ljepper tapasse.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Thús </a></li>  
  <li><a href = "#profile" data-toggle = "tab"> Profyl </a> </li>  
  <li><a href = "#messages" data-toggle = "tab"> Berjochten </a> </li>  
  <li><a href = "#settings" data-toggle = "tab"> Ynstellings </a> </li>  
</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.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "aktyf" ><a href = "#home"> Thús </a> </li>  
  <li><a href = "#profile" > Profyl </a></li> 
  <li><a href = "#messages" > Berjochten </a></li> 
  <li><a href = "#settings" > Ynstellings </a></li> 
</ul>
 
<div class = "tab-ynhâld" > 
  <div class = "tab-pane active" id = "thús" > ... </div>  
  <div class = "tab-pane" id = "profyl" > ... </div>  
  <div class = "tab-pane" id = "berjochten" > ... </div>  
  <div class = "tab-pane" id = "ynstellings" > ... </div>  
</div>
 
<skript>
  $ ( funksje () {  
    $ ( '#myTab a:last' ). tab ( 'show' );
  })
</skript>

Eveneminten

$ ( 'a[data-toggle="tab"]' ). on ( 'sjoen' , funksje ( e ) {   
  e . target // aktivearre ljepper
  e . relatedTarget // foarige ljepper
})

Oer Tooltips

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.

Foarbyld gebrûk fan Tooltips

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

Mei help fan bootstrap-tooltip.js

Trigger de tooltip fia javascript:

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

Opsjes

Markup

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

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

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

.tooltip('ferbergje')

Ferberget de tooltip fan in elemint.

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

.tooltip('toggle')

Skeakelt de tooltip fan in elemint.

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

Oer popovers

Foegje lytse overlays fan ynhâld ta, lykas dy op 'e iPad, oan elk elemint foar húsfesting fan sekundêre ynformaasje.

* Fereasket Tooltip om te wêzen opnommen

Foarbyld hover popover

Hoverje oer de knop om de popover te aktivearjen.

Mei help fan bootstrap-popover.js

Popovers ynskeakelje fia javascript:

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

Opsjes

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.

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

.popover('ferbergje')

Ferberget in eleminten popover.

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

.popover('toggle')

Skeakelt in popover fan eleminten.

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

Oer warskôgings

De warskôgingsplugin is in lytse klasse foar it tafoegjen fan nauwe funksjonaliteit oan warskôgings.

Foarbyld alerts

De warskôgingsplugin wurket op reguliere warskôgingsberjochten, en blokkearje berjochten.

Mei help fan bootstrap-alert.js

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

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

Markup

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

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

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

Eveneminten

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

$ ( '#myn-alert' ). binde ( 'sletten' , funksje () {   
  // wat dwaan…
})

Oer

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

Foarbyld gebrûk

Brûk de knop-plugin foar steaten en skeakels.

Mei help fan bootstrap-button.js

Knoppen ynskeakelje fia javascript:

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

Markup

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

<!-- Foegje data-toggle="knop" ta om wikseljen op ien knop te aktivearjen -->
<button class = "btn" data-toggle = "button" > Single Toggle </button>  
 
<!-- Foegje data-toggle="buttons-checkbox" ta foar it wikseljen fan karfakjestyl op btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Lofts </button> 
  <button class = "btn" > Middel </button> 
  <button class = "btn" > Rjochts </button> 
</div>
 
<!-- Foegje data-toggle="buttons-radio" ta foar it wikseljen fan radiostyl op btn-group -->
<div class = "btn-group" data-toggle = "knoppen-radio" >  
  <button class = "btn" > Lofts </button> 
  <button class = "btn" > Middel </button> 
  <button class = "btn" > Rjochts </button> 
</div>

Metoaden

$().button('toggle')

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

<button class = "btn" data-toggle = "button" > … </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.

<button class = "btn" data-loading-text = "laden dingen..." > ... </button>   

$().button('reset')

Reset knopstatus - wikselt tekst nei orizjinele tekst.

$().button(string)

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

<button class = "btn" data-complete-text = "klear!" > ... </knop>   
<skript>
  $ ( '.btn' ). knop ( 'folslein' )
</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:

Mei help fan bootstrap-collapse.js

Ynskeakelje fia javascript:

$ ( ".kollapse" ). ynstoarten ()

Opsjes

Markup

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.

<button class = "btn btn-danger" data-toggle = "ynstoarten" data-target = "#demo" >   
  ienfâldich ynklapber
</knop>
 
<div id = "demo" class = "ynstoarten" > … </div>  

Metoaden

.collapse(opsjes)

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

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

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

$ ( '#myCollapsible' ). on ( 'ferburgen' , funksje () {   
  // wat dwaan…
})

Oer

In generike plugin foar it fytsen troch eleminten. In merry-go-round.

Foarbyld fan carousel

Besjoch de diashow hjirûnder.

Earste miniatuerlabel

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

Twadde miniatuerlabel

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

Tredde miniatuerlabel

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

‹ ›

Mei help fan bootstrap-carousel.js

Skilje fia javascript:

$ ( '.carousel' ). karrousel ()

Opsjes

Markup

Gegevensattributen wurde brûkt foar de foarige en folgjende kontrôles. Besjoch de foarbyldmarkearring hjirûnder.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- Carousel items -->
  <div class = "carousel-inner" > 
    <div class = "aktyf item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "foarige"> & lsaquo ; </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "folgjende"> & rsaquo ; </a>   
</div>

Metoaden

.carousel(opsjes)

Inisjalisearret de karrousel mei in opsjonele opsjes objecten begjint te fytsen troch items.

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

.carousel('syklus')

Cycles troch de karrousel items fan links nei rjochts.

.carousel('pauze')

Stopt de karrousel fan it fytsen troch items.

.carousel(nûmer)

Sylt de karrousel nei in bepaald frame (0 basearre, fergelykber mei in array).

.carousel('foarige')

Cycles nei it foarige item.

.carousel('folgjende')

Cycles nei it folgjende item.

Eveneminten

De karrouselklasse fan Bootstrap bleatstelt twa eveneminten foar heakjen oan karrouselfunksjonaliteit.

Oer

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

Foarbyld

Begjin te typen yn it fjild hjirûnder om de typeahead-resultaten te sjen.

Mei help fan bootstrap-typeahead.js

Rop de typeahead fia javascript:

$ ( '.typeahead' ). typeahead ()

Opsjes

Markup

Foegje gegevensattributen ta om in elemint te registrearjen mei typeahead-funksjonaliteit.

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

Metoaden

.typeahead(opsjes)

Inisjalisearret in ynfier mei in typeahead.