Us Modal-plugin is in super slanke take op 'e tradisjonele modal js-plugin, mei spesjale soarch om allinich de bleate funksjonaliteit op te nimmen dy't wy hjir op twitter nedich binne.

Download

Mei help fan bootstrap-modal

$ ( '#my-modal' ). modaal ( opsjes )

Opsjes

Namme	type	standert	beskriuwing
eftergrûn	boolean, string	falsk	Omfettet in modale eftergrûnelemint. Stel eftergrûn yn "static"as jo net wolle dat de modale sluten wurdt as de eftergrûn wurdt oanklikt.
toetseboerd	boolean	falsk	Slút de modale as escape-toets wurdt yndrukt
sjen litte	boolean	falsk	Iepenet modaal op klasse inisjalisaasje

Markup

Jo kinne modalen op jo side maklik aktivearje sûnder in inkele rigel fan javascript te skriuwen. Jou gewoan in elemint in data-controls-modalattribút dat oerienkomt mei in modale elemint id, en as jo klikke, sil it jo modal starte. Om modale opsjes ta te foegjen, befetsje se gewoan ek as gegevensattributen.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "statysk" > Launch Modal </a>    

Opmerking As jo ​​wolle dat jo modal yn en út animearret, foegje dan gewoan in .fadeklasse ta oan jo .modalelemint (ferwize nei de demo om dit yn aksje te sjen).

Metoaden

.modal(opsjes)

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

$ ( '#my-modal' ). modal ({
  toetseboerd : wier 
})

.modal('toggle')

Wizigje manuell in modaal.

$ ( '#my-modal' ). modaal ( 'wikselje' )

.modal('show')

Iepenet in modaal mei de hân.

$ ( '#my-modal' ). modaal ( 'show' )

.modal('ferbergje')

Ferberget in modaal mei de hân.

$ ( '#my-modal' ). modaal ( 'ferbergje' )

.modal(wier)

Jout in eleminten modale klasse eksimplaar werom.

$ ( '#my-modal' ). modaal ( wier )

Notice As alternatyf kin dit ophelle wurde mei $().data('modal').

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

$ ( '#my-modal' ). binde ( 'ferburgen' , funksje () {   
  // wat dwaan ...
})

Demo

Start Modal

Dizze plugin is foar it tafoegjen fan dropdown-ynteraksje oan 'e bootstrap-topbalke of ljeppernavigaasjes.

Download

Mei help fan bootstrap-dropdown.js

$ ( '#topbalke' ). dropdown ()

Markup

Om fluch tafoegje dropdown funksjonaliteit oan alle nav elemint, brûk it data-dropdownattribút. Elke jildige bootstrap dropdown sil automatysk wurde aktivearre.

<ul class = "tabs" > 
  <li class = "aktyf" ><a href = "#" > Thús </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Sekundêre keppeling </a></li> 
      <li><a href = "#" > Hjir noch wat </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > In oare keppeling </a></li> 
    </ul>
  </li>
</ul>

Opmerking As jo ​​​​ui ferskate dropdowns hat, beskôgje dan it tafoegjen fan it data-dropdownattribút oan in wichtiger kontenerelemint lykas .tabsof .topbar.

Metoaden

$().dropdown()

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

Demo

Dit plugin is foar it tafoegjen fan de scrollspy (auto bywurkjen nav) ynteraksje oan 'e bootstrap topbalke.

Download

Mei help fan bootstrap-scrollspy.js

$ ( '#topbalke' ). scrollSpy ()

Markup

Om maklik scrollspy-gedrach ta te foegjen oan jo nav, foegje gewoan it data-scrollspyattribút ta oan de .topbar.

<div class = "topbalke" data-scrollspy = "scrollspy" > ... </div>   

Metoaden

$().scrollSpy()

Automatysk aktivearret navigaasjeknoppen troch brûkersrollposysje.

$ ( 'body > .topbar' ). scrollSpy ()

Opmerking Topbar-ankertags moatte oplossbere id-doelen hawwe. Bygelyks, in <a href="#home">home</a>moat oerienkomme mei wat yn 'e dom lykas <div id="home"></div>.

.scrollSpy('ferfarskje')

De scrollspy cache nav knoppen en seksje koördinaten foar prestaasjes. As jo ​​​​dizze cache moatte bywurkje (wierskynlik as jo dynamyske ynhâld hawwe), skilje gewoan dizze ferfarskingsmetoade. As jo ​​​​de data-attribút hawwe brûkt om jo scrollspy te definiearjen, skilje gewoan ferfarsk op it lichem.

$ ( 'body' ). scrollSpy ( 'ferfarskje' )

Demo

Besjoch de topbalke-navigaasje op dizze side.

Dit plugin biedt ekstra funksjonaliteit foar it behearen fan knopstatus.

Download

Mei help fan bootstrap-buttons.js

$ ( '.tabs' ). knop ()

Metoaden

$().button('toggle')

Wizigje push-status. Jout btn it uterlik dat it is aktivearre.

Opmerking Jo kinne automatysk wikseljen fan in knop ynskeakelje troch it data-toggleattribút te brûken.

<button class = "btn" data-toggle = "wikselje" > ... </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').button('complete')
</skript>

Demo

Demo laden Skeakelje Demo

Dit plugin foeget rappe, dynamyske ljepper- en pilfunksjonaliteit ta.

Download

Mei help fan bootstrap-tabs.js

$ ( '.tabs' ). ljeppers ()

Markup

Jo kinne in ljepper of pilnavigaasje aktivearje sûnder javascript te skriuwen troch har gewoan in data-tabsof data-pillsattribút te jaan.

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

Metoaden

$().tabs of $().pills

Aktivearret ljepper en pil funksjonaliteit foar in opjûne container. Ljepkeppelings moatte ferwize nei id's yn it dokumint.

<ul class = "tabs" > 
  <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 = "pill-ynhâld" > 
  <div class = "active" id = "thús" > ... </div>  
  <div id = "profyl" > ... </div> 
  <div id = "berjochten" > ... </div> 
  <div id = "ynstellings" > ... </div> 
</div>
 
<skript>
  $ ( funksje () {  
    $ ( '.tabs' ). ljeppers ()
  })
</skript>

Eveneminten

Barren	Beskriuwing
wikseljild	Dit evenemint ûntspringt op ljepper feroaring. Brûk event.targeten event.relatedTargetom respektivelik de aktive ljepper en de foarige aktive ljepper te rjochtsjen.

$ ( '#.tabs' ). binde ( 'feroarje' , funksje ( e ) {   
  e . target // aktivearre ljepper
  e . relatedTarget // foarige ljepper
})

Demo

• Thús
• Profyl
• Berjochten
• Ynstellings
• Dropdown
  • @fet
  • @mdo

Op grûn fan de treflike jQuery.tipsy plugin skreaun troch Jason Frame; twipsy is in bywurke ferzje, dy't net fertrout op ôfbyldings, brûkt css3 foar animaasjes, en data-attributen foar opslach fan titels!

Download

Mei help fan bootstrap-twipsy.js

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

Opsjes

Namme	type	standert	beskriuwing
animearje	boolean	wier	tapasse in css-fade-oergong op de tooltip
fertrageIn	nûmer	0	fertraging foar it werjaan fan tooltip (ms)
delayOut	nûmer	0	fertraging foar it ferbergjen fan tooltip (ms)
weromfalle	string	''	tekst te brûken as der gjin tooltip-titel oanwêzich is
pleatsing	string	'boppe'	hoe't jo de tooltip pleatse - boppe | ûnder | lofts | rjochts
html	boolean	falsk	lit html ynhâld binnen tooltip
libje	boolean	falsk	brûke evenemint delegaasje ynstee fan yndividuele evenemint handlers
offset	nûmer	0	pixel offset fan tooltip fan doel elemint
titel	string, funksje	'titel'	attribút of metoade foar it opheljen fan titeltekst
trekker	string	'sweve'	hoe't tooltip wurdt aktivearre - hover | fokus | hantlieding
sjabloan	string	[standert markup]	De html-sjabloan brûkt foar it werjaan fan in twipsy.

Opmerking Yndividuele twipsy-eksimplaaropsjes kinne alternatyf wurde oantsjutte troch it brûken fan gegevensattributen.

<a href = "#" data-placement = "ûnder" rel = 'twipsy' title = 'Guon titeltekst' > tekst </a>    

Metoaden

$().twipsy(opsjes)

Hechtet in twipsy handler oan in elemint kolleksje.

.twipsy('show')

Bliuwt in eleminten twipsy.

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

.twipsy('ferbergje')

Ferberget in eleminten twipsy.

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

.twipsy(wier)

Jout in eleminten twipsy klasse eksimplaar.

$ ( '#element' ). twipsy ( wier )

Notice As alternatyf kin dit ophelle wurde mei $().data('twipsy').

Demo

De popover-plugin biedt in ienfâldige interface foar it tafoegjen fan popovers oan jo applikaasje. It wreidet de bootstrap-twipsy.js plugin út, dus wês der wis fan dat jo dat bestân ek pakke as jo popovers yn jo projekt opnimme!

Opmerking Jo moatte it bootstrap-twipsy.js-bestân opnimme foardat bootstrap-popover.js.

Download

Mei help fan bootstrap-popover.js

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

Opsjes

Namme	type	standert	beskriuwing
animearje	boolean	wier	tapasse in css-fade-oergong op de tooltip
fertrageIn	nûmer	0	fertraging foar it werjaan fan tooltip (ms)
delayOut	nûmer	0	fertraging foar it ferbergjen fan tooltip (ms)
weromfalle	string	''	tekst te brûken as der gjin tooltip-titel oanwêzich is
pleatsing	string	'rjochts'	hoe't jo de tooltip pleatse - boppe | ûnder | lofts | rjochts
html	boolean	falsk	lit html ynhâld binnen tooltip
libje	boolean	falsk	brûke evenemint delegaasje ynstee fan yndividuele evenemint handlers
offset	nûmer	0	pixel offset fan tooltip fan doel elemint
titel	string, funksje	'titel'	attribút of metoade foar it opheljen fan titeltekst
ynhâld	string, funksje	'data-ynhâld'	in tekenrige of metoade foar it opheljen fan ynhâldtekst. as der gjinien wurdt levere, sil ynhâld komme fan in data-ynhâld-attribút.
trekker	string	'sweve'	hoe't tooltip wurdt aktivearre - hover | fokus | hantlieding
sjabloan	string	[standert markup]	De html-sjabloan brûkt foar it werjaan fan in popover.

Opmerking Yndividuele popover-eksimplaaropsjes kinne alternatyf wurde oantsjutte troch it brûken fan gegevensattributen.

<a data-placement = "ûnder" href = "#" class = "btn gefaar" rel = "popover"> tekst </a>    

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

Demo

hover foar popover

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

Download

Mei help fan bootstrap-alerts.js

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

Markup

Foegje gewoan in data-alertattribút ta oan jo warskôgingsberjochten om se automatysk tichte funksjonaliteit te jaan.

Opsjes

Namme	type	standert	beskriuwing
selector	string	'.slute'	Hokker selector te rjochtsjen foar it sluten fan in warskôging.

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-berjocht" ). warskôging ( 'slute' )

Demo