javascript · bootstrap

28/6/2014 JavaScript Bootstrap

http://getbootstrap.com/javascript/ 1/42

JavaScriptBringBootstrap'scomponentstolifewithoveradozencustom

jQueryplugins.Easilyincludethemall,oronebyone.

(https://bs.serving

sys.com/BurstingPipe/adServer.bs?cn=brd&FlightID=8817843&Page=&PluID=0&Pos=524119787)

SendGridSMTPService:(https://bs.servingsys.com/BurstingPipe/adServer.bs?cn=brd&FlightID=8817843&Page=&PluID=0&Pos=524119787)AvoidSpamFolders&EnsureEmailDelivery.FreeSignup.

adsviaCarbon(http://carbonads.com)

OverviewIndividualorcompiledPluginscanbeincludedindividually(usingBootstrap'sindividual *.jsfiles),orallatonce(usingbootstrap.jsortheminified bootstrap.min.js).

UsingthecompiledJavaScriptBoth bootstrap.jsand bootstrap.min.jscontainallpluginsinasinglefile.Includeonlyone.

Componentdataattributes



Don'tusedataattributesfrommultiplepluginsonthesameelement.Forexample,abuttoncannotbothhaveatooltipandtoggleamodal.Toaccomplishthis,useawrappingelement.

PlugindependenciesSomepluginsandCSScomponentsdependonotherplugins.Ifyouincludepluginsindividually,makesuretocheckforthesedependenciesinthedocs.AlsonotethatallpluginsdependonjQuery(thismeansjQuerymustbeincludedbeforethepluginfiles).Consultourbower.json(https://github.com/twbs/bootstrap/blob/v3.2.0/bower.json)toseewhichversionsofjQueryaresupported.

DataattributesYoucanuseallBootstrappluginspurelythroughthemarkupAPIwithoutwritingasinglelineofJavaScript.ThisisBootstrap'sfirstclassAPIandshouldbeyourfirstconsiderationwhenusingaplugin.

Thatsaid,insomesituationsitmaybedesirabletoturnthisfunctionalityoff.Therefore,wealsoprovidetheabilitytodisablethedataattributeAPIbyunbindingalleventsonthedocumentnamespacedwith dataapi.Thislookslikethis:

$(document).off('.dataapi')

Alternatively,totargetaspecificplugin,justincludetheplugin'snameasanamespacealongwiththedataapinamespacelikethis:

$(document).off('.alert.dataapi')

ProgrammaticAPIWealsobelieveyoushouldbeabletouseallBootstrappluginspurelythroughtheJavaScriptAPI.AllpublicAPIsaresingle,chainablemethods,andreturnthecollectionactedupon.

$('.btn.danger').button('toggle').addClass('fat')

Allmethodsshouldacceptanoptionaloptionsobject,astringwhichtargetsaparticularmethod,ornothing(whichinitiatesapluginwithdefaultbehavior):

$('#myModal').modal()//initializedwithdefaults$('#myModal').modal({keyboard:false})//initializedwithnokeyboard$('#myModal').modal('show')//initializesandinvokesshowimmediately

Eachpluginalsoexposesitsrawconstructorona Constructorproperty:$.fn.popover.Constructor.Ifyou'dliketogetaparticularplugininstance,retrieveitdirectlyfromanelement: $('[rel="popover"]').data('popover').



NoconflictSometimesitisnecessarytouseBootstrappluginswithotherUIframeworks.Inthesecircumstances,namespacecollisionscanoccasionallyoccur.Ifthishappens,youmaycall .noConflictonthepluginyouwishtorevertthevalueof.

varbootstrapButton=$.fn.button.noConflict()//return$.fn.buttontopreviouslyassignedvalue$.fn.bootstrapBtn=bootstrapButton//give$().bootstrapBtntheBootstrapfunctionality

EventsBootstrapprovidescustomeventsformostplugins'uniqueactions.Generally,thesecomeinaninfinitiveandpastparticipleformwheretheinfinitive(ex. show)istriggeredatthestartofanevent,anditspastparticipleform(ex. shown)istriggeredonthecompletionofanaction.

Asof3.0.0,allBootstrapeventsarenamespaced.

Allinfinitiveeventsprovide preventDefaultfunctionality.Thisprovidestheabilitytostoptheexecutionofanactionbeforeitstarts.

$('#myModal').on('show.bs.modal',function(e){if(!data)returne.preventDefault()//stopsmodalfrombeingshown})

ThirdpartylibrariesBootstrapdoesnotofficiallysupportthirdpartyJavaScriptlibrarieslikePrototypeorjQueryUI.Despite .noConflictandnamespacedevents,theremaybecompatibilityproblemsthatyouneedtofixonyourown.

Transitionstransition.jsAbouttransitionsForsimpletransitioneffects,include transition.jsoncealongsidetheotherJSfiles.Ifyou'reusingthecompiled(orminified) bootstrap.js,thereisnoneedtoincludethisit'salreadythere.

What'sinsideTransition.jsisabasichelperfor transitionEndeventsaswellasaCSStransitionemulator.It'susedbytheotherpluginstocheckforCSStransitionsupportandtocatchhangingtransitions.



Modalsmodal.jsExamplesModalsarestreamlined,butflexible,dialogpromptswiththeminimumrequiredfunctionalityandsmartdefaults.

OverlappingmodalsnotsupportedBesurenottoopenamodalwhileanotherisstillvisible.Showingmorethanonemodalatatimerequirescustomcode.

ModalmarkupplacementAlwaystrytoplaceamodal'sHTMLcodeinatoplevelpositioninyourdocumenttoavoidothercomponentsaffectingthemodal'sappearanceand/orfunctionality.

MobiledevicecaveatsTherearesomecaveatsregardingusingmodalsonmobiledevices.Seeourbrowsersupportdocs(../gettingstarted/#supportfixedpositionkeyboards)fordetails.

StaticexampleArenderedmodalwithheader,body,andsetofactionsinthefooter.

EXAMPLE

Modaltitle

Close Savechanges

Onefinebody



&timesClose

ModaltitleOnefinebody&hellipCloseSavechanges

LivedemoToggleamodalviaJavaScriptbyclickingthebuttonbelow.Itwillslidedownandfadeinfromthetopofthepage.

Launchdemomodal

EXAMPLE



Launchdemomodal

&timesClose

Modaltitle...CloseSavechanges

MakemodalsaccessibleBesuretoadd role="dialog"to .modal, arialabelledby="myModalLabel"attributetoreferencethemodaltitle,and ariahidden="true"totellassistivetechnologiestoskipthemodal'sDOMelements.

Additionally,youmaygiveadescriptionofyourmodaldialogwith ariadescribedbyon.modal.

EmbeddingYouTubevideosEmbeddingYouTubevideosinmodalsrequiresadditionalJavaScriptnotinBootstraptoautomaticallystopplaybackandmore.SeethishelpfulStackOverflowpost(http://stackoverflow.com/questions/18622508/bootstrap3andyoutubeinmodal)formoreinformation.

OptionalsizesModalshavetwooptionalsizes,availableviamodifierclassestobeplacedona .modaldialog.



Largemodal

...

Smallmodal

...

RemoveanimationFormodalsthatsimplyappearratherthanfadeintoview,removethe .fadeclassfromyourmodalmarkup.

...

UsageThemodalplugintogglesyourhiddencontentondemand,viadataattributesorJavaScript.Italsoadds .modalopentothe tooverridedefaultscrollingbehaviorandgeneratesa .modalbackdroptoprovideaclickareafordismissingshownmodalswhenclickingoutsidethemodal.

Viadataattributes

Largemodal Smallmodal

EXAMPLE



ActivateamodalwithoutwritingJavaScript.Set datatoggle="modal"onacontrollerelement,likeabutton,alongwitha datatarget="#foo"or href="#foo"totargetaspecificmodaltotoggle.

Launchmodal

ViaJavaScriptCallamodalwithid myModalwithasinglelineofJavaScript:

$('#myModal').modal(options)

OptionsOptionscanbepassedviadataattributesorJavaScript.Fordataattributes,appendtheoptionnameto data,asin databackdrop="".

Name type default description

backdrop booleanorthestring'static'

true Includesamodalbackdropelement.Alternatively,specifystaticforabackdropwhichdoesn'tclosethemodalonclick.

keyboard boolean true Closesthemodalwhenescapekeyispressed

show boolean true Showsthemodalwheninitialized.

remote path false IfaremoteURLisprovided,contentwillbeloadedonetimeviajQuery's loadmethodandinjectedintothe.modalcontentdiv.Ifyou'reusingthedataapi,youmayalternativelyusethe hrefattributetospecifytheremotesource.Anexampleofthisisshownbelow:

Clickme

Methods.modal(options)Activatesyourcontentasamodal.Acceptsanoptionaloptions object.

$('#myModal').modal({keyboard:false})

.modal('toggle')



Manuallytogglesamodal.Returnstothecallerbeforethemodalhasactuallybeenshownorhidden(i.e.beforethe shown.bs.modalor hidden.bs.modaleventoccurs).

$('#myModal').modal('toggle')

.modal('show')Manuallyopensamodal.Returnstothecallerbeforethemodalhasactuallybeenshown(i.e.beforethe shown.bs.modaleventoccurs).

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

.modal('hide')Manuallyhidesamodal.Returnstothecallerbeforethemodalhasactuallybeenhidden(i.e.beforethe hidden.bs.modaleventoccurs).

$('#myModal').modal('hide')

EventsBootstrap'smodalclassexposesafeweventsforhookingintomodalfunctionality.

EventType Description

show.bs.modal Thiseventfiresimmediatelywhenthe showinstancemethodiscalled.Ifcausedbyaclick,theclickedelementisavailableasthe relatedTargetpropertyoftheevent.

shown.bs.modal Thiseventisfiredwhenthemodalhasbeenmadevisibletotheuser(willwaitforCSStransitionstocomplete).Ifcausedbyaclick,theclickedelementisavailableasthe relatedTargetpropertyoftheevent.

hide.bs.modal Thiseventisfiredimmediatelywhenthe hideinstancemethodhasbeencalled.

hidden.bs.modal Thiseventisfiredwhenthemodalhasfinishedbeinghiddenfromtheuser(willwaitforCSStransitionstocomplete).

loaded.bs.modal Thiseventisfiredwhenthemodalhasloadedcontentusingtheremoteoption.

$('#myModal').on('hidden.bs.modal',function(e){//dosomething...})



Dropdownsdropdown.jsExamplesAdddropdownmenustonearlyanythingwiththissimpleplugin,includingthenavbar,tabs,andpills.

Withinanavbar

Withinpills

UsageViadataattributesorJavaScript,thedropdownplugintoggleshiddencontent(dropdownmenus)bytogglingthe .openclassontheparentlistitem.Whenopened,thepluginalsoadds .dropdownbackdropasaclickareaforclosingdropdownmenuswhenclickingoutsidethemenu.Note:Thedatatoggle=dropdownattributeisreliedonforclosingdropdownmenusatanapplicationlevel,soit'sagoodideatoalwaysuseit.

ViadataattributesAdd datatoggle="dropdown"toalinkorbuttontotoggleadropdown.

Dropdowntrigger...

TokeepURLsintact,usethe datatargetattributeinsteadof href="#".

EXAMPLE

Regularlink Dropdown Dropdown2 Dropdown3

EXAMPLE



Dropdown

...

ViaJavaScriptCallthedropdownsviaJavaScript:

$('.dropdowntoggle').dropdown()

datatoggle="dropdown"stillrequiredRegardlessofwhetheryoucallyourdropdownviaJavaScriptorinsteadusethedataapi,datatoggle="dropdown"isalwaysrequiredtobepresentonthedropdown'striggerelement.

OptionsNone

Methods$().dropdown('toggle')Togglesthedropdownmenuofagivennavbarortabbednavigation.

EventsAlldropdowneventsarefiredatthe .dropdownmenu'sparentelement.


show.bs.dropdown Thiseventfiresimmediatelywhentheshowinstancemethodiscalled.Thetogglinganchorelementisavailableasthe relatedTargetpropertyoftheevent.

shown.bs.dropdown Thiseventisfiredwhenthedropdownhasbeenmadevisibletotheuser(willwaitforCSStransitions,tocomplete).Thetogglinganchorelementisavailableasthe relatedTargetpropertyoftheevent.

hide.bs.dropdown Thiseventisfiredimmediatelywhenthehideinstancemethodhasbeen



called.Thetogglinganchorelementisavailableasthe relatedTargetpropertyoftheevent.

hidden.bs.dropdown Thiseventisfiredwhenthedropdownhasfinishedbeinghiddenfromtheuser(willwaitforCSStransitions,tocomplete).Thetogglinganchorelementisavailableasthe relatedTargetpropertyoftheevent.

$('#myDropdown').on('show.bs.dropdown',function(){//dosomething})

ScrollSpyscrollspy.jsExampleinnavbarTheScrollSpypluginisforautomaticallyupdatingnavtargetsbasedonscrollposition.Scrolltheareabelowthenavbarandwatchtheactiveclasschange.Thedropdownsubitemswillbehighlightedaswell.

UsageRequiresrelativepositioningNomattertheimplementationmethod,scrollspyrequirestheuseof position:relativeontheelementyou'respyingon.Inmostcasesthisisthe .

Viadataattributes

@fatAdleggingskeytar,brunchidartpartydolorlabore.Pitchforkyrenimlofibeforetheysoldoutqui.Tumblrfarmtotablebicyclerightswhatever.Animkeffiyehcarlescardigan.Velitseitanmcsweeney'sphotobooth3wolfmoonirure.Cosbysweaterlomojeanshorts,williamsburghoodieminimquiyouprobablyhaven'theardofthemetcardigantrustfundculpabiodieselwesandersonaesthetic.Nihiltattooedaccusamus,credironybiodieselkeffiyehartisanullamcoconsequat.

@mdoVeniammarfamustacheskateboard,adipisicingfugiatvelitpitchforkbeard.Freeganbeardaliqua

EXAMPLE



Toeasilyaddscrollspybehaviortoyourtopbarnavigation,add dataspy="scroll"totheelementyouwanttospyon(mosttypicallythiswouldbethe ).Thenaddthe datatargetattributewiththeIDorclassoftheparentelementofanyBootstrap .navcomponent.

body{position:relative}

.........

ViaJavaScriptAfteradding position:relativeinyourCSS,callthescrollspyviaJavaScript:

$('body').scrollspy({target:'.navbarexample'})

ResolvableIDtargetsrequiredNavbarlinksmusthaveresolvableidtargets.Forexample,a homemustcorrespondtosomethingintheDOMlike .

Non:visibletargetelementsignoredTargetelementsthatarenot :visibleaccordingtojQuery(http://api.jquery.com/visibleselector/)willbeignoredandtheircorrespondingnavitemswillneverbehighlighted.

Methods.scrollspy('refresh')WhenusingscrollspyinconjunctionwithaddingorremovingofelementsfromtheDOM,you'llneedtocalltherefreshmethodlikeso:

$('[dataspy="scroll"]').each(function(){var$spy=$(this).scrollspy('refresh')})

Options



OptionscanbepassedviadataattributesorJavaScript.Fordataattributes,appendtheoptionnameto data,asin dataoffset="".


offset number 10 Pixelstooffsetfromtopwhencalculatingpositionofscroll.

EventsEventType Description

activate.bs.scrollspy Thiseventfireswheneveranewitembecomesactivatedbythescrollspy.

$('#myScrollspy').on('activate.bs.scrollspy',function(){//dosomething})

Togglabletabstab.jsExampletabsAddquick,dynamictabfunctionalitytotransitionthroughpanesoflocalcontent,evenviadropdownmenus.

ExtendstabbednavigationThispluginextendsthetabbednavigationcomponent(../components/#navtabs)toaddtabbableareas.

Rawdenimyouprobablyhaven'theardofthemjeanshortsAustin.Nesciunttofustumptownaliqua,retrosynthmastercleanse.Mustacheclichetempor,williamsburgcarlesveganhelvetica.Reprehenderitbutcherretrokeffiyehdreamcatchersynth.Cosbysweatereubanhmi,quiirureterryrichardsonexsquid.Aliquipplaceatsalviacillumiphone.Seitanaliquipquiscardiganamericanapparel,butchervoluptatenisiqui.

Home Profile Dropdown

EXAMPLE



UsageEnabletabbabletabsviaJavaScript(eachtabneedstobeactivatedindividually):

$('#myTaba').click(function(e){e.preventDefault()$(this).tab('show')})

Youcanactivateindividualtabsinseveralways:

$('#myTaba[href="#profile"]').tab('show')//Selecttabbyname$('#myTaba:first').tab('show')//Selectfirsttab$('#myTaba:last').tab('show')//Selectlasttab$('#myTabli:eq(2)a').tab('show')//Selectthirdtab(0indexed)

MarkupYoucanactivateataborpillnavigationwithoutwritinganyJavaScriptbysimplyspecifying datatoggle="tab"or datatoggle="pill"onanelement.Addingthe navand navtabsclassestothetab ulwillapplytheBootstraptabstyling(../components/#navtabs),whileaddingthe navand navpillsclasseswillapplypillstyling(../components/#navpills).

HomeProfileMessages

Settings

............

FadeeffectTomaketabsfadein,add .fadetoeach .tabpane.Thefirsttabpanemustalsohave .intoproperlyfadeininitialcontent.



............

Methods$().tabActivatesatabelementandcontentcontainer.Tabshouldhaveeithera datatargetoran hreftargetingacontainernodeintheDOM.

HomeProfileMessages

Settings

............

$(function(){$('#myTaba:last').tab('show')})


show.bs.tab Thiseventfiresontabshow,butbeforethenewtabhasbeenshown.Useevent.targetand event.relatedTargettotargettheactivetabandthepreviousactivetab(ifavailable)respectively.

shown.bs.tab Thiseventfiresontabshowafteratabhasbeenshown.Useevent.targetand event.relatedTargettotargettheactivetabandthepreviousactivetab(ifavailable)respectively.



$('a[datatoggle="tab"]').on('shown.bs.tab',function(e){e.target//activatedtabe.relatedTarget//previoustab})

Tooltipstooltip.jsExamplesInspiredbytheexcellentjQuery.tipsypluginwrittenbyJasonFrameTooltipsareanupdatedversion,whichdon'trelyonimages,useCSS3foranimations,anddataattributesforlocaltitlestorage.

Hoveroverthelinksbelowtoseetooltips:

Fourdirections

Tooltiponleft

Tooltipontop

Tooltiponbottom

Tooltiponright

Tightpantsnextlevelkeffiyehyouprobablyhaven'theardofthem.Photoboothbeardrawdenimletterpressveganmessengerbagstumptown.Farmtotableseitan,mcsweeney'sfixiesustainablequinoa8bitamericanapparelhaveaterryrichardsonvinylchambray.Beardstumptown,cardigansbanhmilomothundercats.Tofubiodieselwilliamsburgmarfa,fourlokomcsweeney'scleanseveganchambray.Areallyironicartisanwhateverkeytar,scenesterfarmtotablebanksyAustintwitterhandlefreegancredrawdenimsingleorigincoffeeviral.

EXAMPLE

Tooltiponleft Tooltipontop Tooltiponbottom Tooltiponright

EXAMPLE



OptinfunctionalityForperformancereasons,theTooltipandPopoverdataapisareoptin,meaningyoumustinitializethemyourself.

TooltipsinbuttongroupsandinputgroupsrequirespecialsettingWhenusingtooltipsonelementswithina .btngrouporan .inputgroup,you'llhavetospecifytheoption container:'body'(documentedbelow)toavoidunwantedsideeffects(suchastheelementgrowingwiderand/orlosingitsroundedcornerswhenthetooltipistriggered).

Don'ttrytoshowtooltipsonhiddenelementsInvoking $(...).tooltip('show')whenthetargetelementis display:nonewillcausethetooltiptobeincorrectlypositioned.

TooltipsondisabledelementsrequirewrapperelementsToaddatooltiptoa disabledor .disabledelement,puttheelementinsideofa andapplythetooltiptothat instead.

UsageThetooltipplugingeneratescontentandmarkupondemand,andbydefaultplacestooltipsaftertheirtriggerelement.

TriggerthetooltipviaJavaScript:

$('#example').tooltip(options)

MarkupTherequiredmarkupforatooltipisonlya dataattributeand titleontheHTMLelementyouwishtohaveatooltip.Thegeneratedmarkupofatooltipisrathersimple,thoughitdoesrequireaposition(bydefault,setto topbytheplugin).

MultiplelinelinksSometimesyouwanttoaddatooltiptoahyperlinkthatwrapsmultiplelines.Thedefaultbehaviorofthetooltippluginistocenterithorizontallyandvertically.Add whitespace:nowraptoyouranchorstoavoidthis.



12Hoveroverme345678Sometooltiptext!910

OptionsOptionscanbepassedviadataattributesorJavaScript.Fordataattributes,appendtheoptionnameto data,asin dataanimation="".

Name Type Default Description

animation boolean true ApplyaCSSfadetransitiontothetooltip

container string|false

false Appendsthetooltiptoaspecificelement.Example: container:'body'.Thisoptionisparticularlyusefulinthatitallowsyoutopositionthetooltipintheflowofthedocumentnearthetriggeringelementwhichwillpreventthetooltipfromfloatingawayfromthetriggeringelementduringawindowresize.

delay number|object

0 Delayshowingandhidingthetooltip(ms)doesnotapplytomanualtriggertype

Ifanumberissupplied,delayisappliedtobothhide/show

Objectstructureis: delay:{show:500,hide:100}

html boolean false InsertHTMLintothetooltip.Iffalse,jQuery'stextmethodwillbeusedtoinsertcontentintotheDOM.Usetextifyou'reworriedaboutXSSattacks.

placement string|function

'top' Howtopositionthetooltiptop|bottom|left|right|auto.When"auto"isspecified,itwilldynamicallyreorientthetooltip.Forexample,ifplacementis"autoleft",thetooltipwilldisplaytotheleftwhenpossible,otherwiseitwilldisplayright.



selector string false Ifaselectorisprovided,tooltipobjectswillbedelegatedtothespecifiedtargets.Inpractice,thisisusedtoenabledynamicHTMLcontenttohavetooltipsadded.Seethis(https://github.com/twbs/bootstrap/issues/4215)andaninformativeexample(http://jsfiddle.net/fScua/).

template string '

'

BaseHTMLtousewhencreatingthetooltip.

Thetooltip's titlewillbeinjectedintothe.tooltipinner.

.tooltiparrowwillbecomethetooltip'sarrow.

Theoutermostwrapperelementshouldhavethe .tooltipclass.

title string|function

'' Defaulttitlevalueif titleattributeisn'tpresent

trigger string 'hoverfocus' Howtooltipistriggeredclick|hover|focus|manual.Youmaypassmultipletriggersseparatethemwithaspace.

viewport string|object

{selector:'body',padding:0}

Keepsthetooltipwithintheboundsofthiselement.Example: viewport:'#viewport'or {selector:'#viewport',padding:0}

DataattributesforindividualtooltipsOptionsforindividualtooltipscanalternativelybespecifiedthroughtheuseofdataattributes,asexplainedabove.

Methods$().tooltip(options)Attachesatooltiphandlertoanelementcollection.

.tooltip('show')Revealsanelement'stooltip.

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



.tooltip('hide')Hidesanelement'stooltip.

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

.tooltip('toggle')Togglesanelement'stooltip.

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

.tooltip('destroy')Hidesanddestroysanelement'stooltip.

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


show.bs.tooltip Thiseventfiresimmediatelywhenthe showinstancemethodiscalled.

shown.bs.tooltip Thiseventisfiredwhenthetooltiphasbeenmadevisibletotheuser(willwaitforCSStransitionstocomplete).

hide.bs.tooltip Thiseventisfiredimmediatelywhenthe hideinstancemethodhasbeencalled.

hidden.bs.tooltip Thiseventisfiredwhenthetooltiphasfinishedbeinghiddenfromtheuser(willwaitforCSStransitionstocomplete).

$('#myTooltip').on('hidden.bs.tooltip',function(){//dosomething})

Popoverspopover.jsExamplesAddsmalloverlaysofcontent,likethoseontheiPad,toanyelementforhousingsecondaryinformation.



PlugindependencyPopoversrequirethetooltipplugintobeincludedinyourversionofBootstrap.

OptinfunctionalityForperformancereasons,theTooltipandPopoverdataapisareoptin,meaningyoumustinitializethemyourself.

PopoversinbuttongroupsandinputgroupsrequirespecialsettingWhenusingpopoversonelementswithina .btngrouporan .inputgroup,you'llhavetospecifytheoption container:'body'(documentedbelow)toavoidunwantedsideeffects(suchastheelementgrowingwiderand/orlosingitsroundedcornerswhenthepopoveristriggered).

Don'ttrytoshowpopoversonhiddenelementsInvoking $(...).popover('show')whenthetargetelementis display:nonewillcausethepopovertobeincorrectlypositioned.

PopoversondisabledelementsrequirewrapperelementsToaddapopovertoa disabledor .disabledelement,puttheelementinsideofaandapplythepopovertothat instead.

StaticpopoverFouroptionsareavailable:top,right,bottom,andleftaligned.

EXAMPLE

Popovertop

Sedposuereconsecteturestatlobortis.Aeneaneuleoquam.Pellentesqueornaresemlaciniaquamvenenatisvestibulum.

Popoverright


Popoverbottom Popoverleft



Livedemo

Clicktotogglepopover

Fourdirections

Popoveronleft

Popoverontop

Popoveronbottom

Popoveronright

Clicktotogglepopover

EXAMPLE

Popoveronleft Popoverontop Popoveronbottom Popoveronright

EXAMPLE





DismissonnextclickUsethe focustriggertodismisspopoversonthenextclickthattheusermakes.

Dismissiblepopover

$('.popoverdismiss').popover({trigger:'focus'})

MultiplelinelinksSometimesyouwanttoaddapopovertoahyperlinkthatwrapsmultiplelines.Thedefaultbehaviorofthepopoverpluginistocenterithorizontallyandvertically.Add whitespace:nowraptoyouranchorstoavoidthis.

UsageEnablepopoversviaJavaScript:

$('#example').popover(options)

OptionsOptionscanbepassedviadataattributesorJavaScript.Fordataattributes,appendtheoptionnameto data,asin dataanimation="".

Name Type Default Description

animation boolean true ApplyaCSSfadetransitiontothepopover

container string|false

false Appendsthepopovertoaspecificelement.Example: container:'body'.Thisoptionisparticularlyusefulinthatitallowsyoutopositionthepopoverintheflowofthedocumentnearthetriggeringelementwhich

Dismissiblepopover

EXAMPLE



willpreventthepopoverfromfloatingawayfromthetriggeringelementduringawindowresize.

content string|function

'' Defaultcontentvalueif datacontentattributeisn'tpresent.

Ifafunctionisgiven,itwillbecalledwith1argument,whichistheelementthatthepopoverisattachedto.

delay number|object

0 Delayshowingandhidingthepopover(ms)doesnotapplytomanualtriggertype

Ifanumberissupplied,delayisappliedtobothhide/show

Objectstructureis: delay:{show:500,hide:100}

html boolean false InsertHTMLintothepopover.Iffalse,jQuery'stextmethodwillbeusedtoinsertcontentintotheDOM.Usetextifyou'reworriedaboutXSSattacks.

placement string|function

'right' Howtopositionthepopovertop|bottom|left|right|auto.When"auto"isspecified,itwilldynamicallyreorientthepopover.Forexample,ifplacementis"autoleft",thepopoverwilldisplaytotheleftwhenpossible,otherwiseitwilldisplayright.

selector string false Ifaselectorisprovided,popoverobjectswillbedelegatedtothespecifiedtargets.Inpractice,thisisusedtoenabledynamicHTMLcontenttohavepopoversadded.Seethis(https://github.com/twbs/bootstrap/issues/4215)andaninformativeexample(http://jsfiddle.net/fScua/).

template string '

BaseHTMLtousewhencreatingthepopover.

Thepopover's titlewillbeinjectedintothe.popovertitle.



'

Thepopover's contentwillbeinjectedintothe .popovercontent.

.arrowwillbecomethepopover'sarrow.

Theoutermostwrapperelementshouldhavethe .popoverclass.

title string|function

'' Defaulttitlevalueif titleattributeisn'tpresent

trigger string 'click' Howpopoveristriggeredclick|hover|focus|manual.Youmaypassmultipletriggersseparatethemwithaspace.

viewport string|object

{selector:'body',padding:0}

Keepsthepopoverwithintheboundsofthiselement.Example: viewport:'#viewport'or {selector:'#viewport',padding:0}

DataattributesforindividualpopoversOptionsforindividualpopoverscanalternativelybespecifiedthroughtheuseofdataattributes,asexplainedabove.

Methods$().popover(options)Initializespopoversforanelementcollection.

.popover('show')Revealsanelementspopover.

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

.popover('hide')Hidesanelementspopover.

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

.popover('toggle')Togglesanelementspopover.

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



.popover('destroy')Hidesanddestroysanelement'spopover.

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


show.bs.popover Thiseventfiresimmediatelywhenthe showinstancemethodiscalled.

shown.bs.popover Thiseventisfiredwhenthepopoverhasbeenmadevisibletotheuser(willwaitforCSStransitionstocomplete).

hide.bs.popover Thiseventisfiredimmediatelywhenthe hideinstancemethodhasbeencalled.

hidden.bs.popover Thiseventisfiredwhenthepopoverhasfinishedbeinghiddenfromtheuser(willwaitforCSStransitionstocomplete).

$('#myPopover').on('hidden.bs.popover',function(){//dosomething})

Alertmessagesalert.jsExamplealertsAdddismissfunctionalitytoallalertmessageswiththisplugin.

Holyguacamole!Bestcheckyoself,you'renotlookingtoogood.

EXAMPLE

Ohsnap!Yougotanerror!

EXAMPLE



UsageEnabledismissalofanalertviaJavaScript:

$(".alert").alert()

MarkupJustadd datadismiss="alert"toyourclosebuttontoautomaticallygiveanalertclosefunctionality.

&timesClose

Methods$().alert()Wrapsallalertswithclosefunctionality.Tohaveyouralertsanimateoutwhenclosed,makesuretheyhavethe .fadeand .inclassalreadyappliedtothem.

.alert('close')Closesanalert.

$(".alert").alert('close')

EventsBootstrap'salertclassexposesafeweventsforhookingintoalertfunctionality.


close.bs.alert Thiseventfiresimmediatelywhenthe closeinstancemethodiscalled.

closed.bs.alert Thiseventisfiredwhenthealerthasbeenclosed(willwaitforCSStransitionstocomplete).

$('#myalert').on('closed.bs.alert',function(){//dosomething})

Changethisandthatandtryagain.Duismollis,estnoncommodoluctus,nisieratporttitorligula,egetlaciniaodiosemnecelit.Crasmattisconsecteturpurussitametfermentum.

Takethisaction Ordothis



Buttonsbutton.jsExampleusesDomorewithbuttons.Controlbuttonstatesorcreategroupsofbuttonsformorecomponentsliketoolbars.

StatefulAdd dataloadingtext="Loading..."tousealoadingstateonabutton.

Loadingstate

$('#loadingexamplebtn').click(function(){varbtn=$(this)btn.button('loading')$.ajax(...).always(function(){btn.button('reset')})})

SingletoggleAdd datatoggle="button"toactivatetogglingonasinglebutton.

Singletoggle

CheckboxAdd datatoggle="buttons"toagroupofcheckboxesforcheckboxstyletogglingonbtngroup.

Loadingstate

EXAMPLE

Singletoggle

EXAMPLE



Precheckedoptionsneed.activeForprecheckedoptions,youmustaddthe .activeclasstotheinput's labelyourself.

Option1(prechecked)Option2Option3

RadioAdd datatoggle="buttons"toagroupofradioinputsforradiostyletogglingonbtngroup.

Preselectedoptionsneed.activeForpreselectedoptions,youmustaddthe .activeclasstotheinput's labelyourself.

Option1(preselected)Option2Option3

Option2 Option3

EXAMPLE

Option2 Option3

EXAMPLE

Option1(prechecked)

Option1(preselected)



UsageEnablebuttonsviaJavaScript:

$('.btn').button()

MarkupDataattributesareintegraltothebuttonplugin.Checkouttheexamplecodebelowforthevariousmarkuptypes.

OptionsNone

Methods$().button('toggle')Togglespushstate.Givesthebuttontheappearancethatithasbeenactivated.

AutotogglingYoucanenableautotogglingofabuttonbyusingthe datatoggleattribute.

...

$().button('loading')Setsbuttonstatetoloadingdisablesbuttonandswapstexttoloadingtext.Loadingtextshouldbedefinedonthebuttonelementusingthedataattribute dataloadingtext.

...

$('#loadingexamplebtn').click(function(){varbtn=$(this)btn.button('loading')$.ajax(...).always(function(){btn.button('reset')})})

Crossbrowsercompatibility



Firefoxpersistsformcontrolstatesacrosspageloads(https://github.com/twbs/bootstrap/issues/793).Aworkaroundforthisistouseautocomplete="off".

$().button('reset')Resetsbuttonstateswapstexttooriginaltext.

$().button(string)Resetsbuttonstateswapstexttoanydatadefinedtextstate.

...

$('.btn').button('complete')

Collapsecollapse.jsAboutGetbasestylesandflexiblesupportforcollapsiblecomponentslikeaccordionsandnavigation.

PlugindependencyCollapserequiresthetransitionsplugintobeincludedinyourversionofBootstrap.

ExampleaccordionUsingthecollapseplugin,webuiltasimpleaccordionbyextendingthepanelcomponent.

CollapsibleGroupItem#1

Animpariaturclichereprehenderit,enimeiusmodhighlifeaccusamusterryrichardsonadsquid.3wolfmoonofficiaaute,noncupidatatskateboarddolorbrunch.Foodtruckquinoanesciuntlaborumeiusmod.Brunch3wolfmoontempor,suntaliquaputabirdonitsquidsingleorigincoffeenullaassumendashoreditchet.Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.Adveganexcepteurbutchervicelomo.Leggingsoccaecatcraftbeerfarmtotable,rawdenimaestheticsynthnesciuntyouprobablyhaven'theardofthemaccusamuslaboresustainableVHS.

EXAMPLE



CollapsibleGroupItem#1Animpariaturclichereprehenderit,enimeiusmodhighlifeaccusamusterryrichardsonadsquid.3wolfmoonofficiaaute,noncupidatatskateboarddolorbrunch.Foodtruckquinoanesciuntlaborumeiusmod.Brunch3wolfmoontempor,suntaliquaputabirdonitsquidsingleorigincoffeenullaassumendashoreditchet.Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.Adveganexcepteurbutchervicelomo.Leggingsoccaecatcraftbeerfarmtotable,rawdenimaestheticsynthnesciuntyouprobablyhaven'theardofthemaccusamuslaboresustainableVHS.CollapsibleGroupItem#2Animpariaturclichereprehenderit,enimeiusmodhighlifeaccusamusterryrichardsonadsquid.3wolfmoonofficiaaute,noncupidatatskateboarddolorbrunch.Foodtruckquinoanesciuntlaborumeiusmod.Brunch3wolfmoontempor,suntaliquaputabirdonitsquidsingleorigincoffeenullaassumendashoreditchet.Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.Adveganexcepteurbutchervicelomo.Leggingsoccaecatcraftbeerfarmtotable,rawdenimaestheticsynthnesciuntyouprobablyhaven'theardofthemaccusamuslaboresustainableVHS.





CollapsibleGroupItem#3Animpariaturclichereprehenderit,enimeiusmodhighlifeaccusamusterryrichardsonadsquid.3wolfmoonofficiaaute,noncupidatatskateboarddolorbrunch.Foodtruckquinoanesciuntlaborumeiusmod.Brunch3wolfmoontempor,suntaliquaputabirdonitsquidsingleorigincoffeenullaassumendashoreditchet.Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.Adveganexcepteurbutchervicelomo.Leggingsoccaecatcraftbeerfarmtotable,rawdenimaestheticsynthnesciuntyouprobablyhaven'theardofthemaccusamuslaboresustainableVHS.

Youcanalsousethepluginwithouttheaccordionmarkup.Makeabuttontoggletheexpandingandcollapsingofanotherelement.

simplecollapsible

...

UsageThecollapsepluginutilizesafewclassestohandletheheavylifting:

.collapsehidesthecontent

.collapse.inshowsthecontent

.collapsingisaddedwhenthetransitionstarts,andremovedwhenitfinishes

Theseclassescanbefoundin componentanimations.less.

ViadataattributesJustadd datatoggle="collapse"anda datatargettoelementtoautomaticallyassigncontrolofacollapsibleelement.The datatargetattributeacceptsaCSSselectortoapplythecollapseto.Besuretoaddtheclass collapsetothecollapsibleelement.Ifyou'dlikeittodefaultopen,addtheadditionalclass in.



Toaddaccordionlikegroupmanagementtoacollapsiblecontrol,addthedataattribute dataparent="#selector".Refertothedemotoseethisinaction.

ViaJavaScriptEnablemanuallywith:

$('.collapse').collapse()

OptionsOptionscanbepassedviadataattributesorJavaScript.Fordataattributes,appendtheoptionnameto data,asin dataparent="".


parent selector false Ifselectorthenallcollapsibleelementsunderthespecifiedparentwillbeclosedwhenthiscollapsibleitemisshown.(similartotraditionalaccordionbehaviorthisdependentonthe panelclass)

toggle boolean true Togglesthecollapsibleelementoninvocation

Methods.collapse(options)Activatesyourcontentasacollapsibleelement.Acceptsanoptionaloptions object.

$('#myCollapsible').collapse({toggle:false})

.collapse('toggle')Togglesacollapsibleelementtoshownorhidden.

.collapse('show')Showsacollapsibleelement.

.collapse('hide')Hidesacollapsibleelement.

EventsBootstrap'scollapseclassexposesafeweventsforhookingintocollapsefunctionality.


show.bs.collapse Thiseventfiresimmediatelywhenthe showinstancemethodiscalled.



shown.bs.collapse Thiseventisfiredwhenacollapseelementhasbeenmadevisibletotheuser(willwaitforCSStransitionstocomplete).

hide.bs.collapse Thiseventisfiredimmediatelywhenthe hidemethodhasbeencalled.

hidden.bs.collapse Thiseventisfiredwhenacollapseelementhasbeenhiddenfromtheuser(willwaitforCSStransitionstocomplete).

$('#myCollapsible').on('hidden.bs.collapse',function(){//dosomething})

Carouselcarousel.jsExamplesTheslideshowbelowshowsagenericpluginandcomponentforcyclingthroughelementslikeacarousel.

Thirdslide

EXAMPLE



.........

TransitionanimationsnotsupportedinInternetExplorer8&9BootstrapexclusivelyusesCSS3foritsanimations,butInternetExplorer8&9don'tsupportthenecessaryCSSproperties.Thus,therearenoslidetransitionanimationswhenusingthesebrowsers.WehaveintentionallydecidednottoincludejQuerybasedfallbacksforthetransitions.

OptionalcaptionsAddcaptionstoyourslideseasilywiththe .carouselcaptionelementwithinany .item.PlacejustaboutanyoptionalHTMLwithinthereanditwillbeautomaticallyalignedandformatted.



......

AccessibilityissueThecarouselcomponentisgenerallynotcompliantwithaccessibilitystandards.Ifyouneedtobecompliant,pleaseconsiderotheroptionsforpresentingyourcontent.

UsageMultiplecarouselsCarouselsrequiretheuseofan idontheoutermostcontainer(the .carousel)forcarouselcontrolstofunctionproperly.Whenaddingmultiplecarousels,orwhenchangingacarousel's id,besuretoupdatetherelevantcontrols.

ViadataattributesUsedataattributestoeasilycontrolthepositionofthecarousel. dataslideacceptsthekeywordsprevor next,whichalterstheslidepositionrelativetoitscurrentposition.Alternatively,usedataslidetotopassarawslideindextothecarousel dataslideto="2",whichshiftstheslidepositiontoaparticularindexbeginningwith 0.

900x500

EXAMPLE

ThirdslidelabelPraesentcommodocursusmagna,velscelerisquenislconsectetur.



The dataride="carousel"attributeisusedtomarkacarouselasanimatingstartingatpageload.

ViaJavaScriptCallcarouselmanuallywith:

$('.carousel').carousel()

OptionsOptionscanbepassedviadataattributesorJavaScript.Fordataattributes,appendtheoptionnameto data,asin datainterval="".


interval number 5000 Theamountoftimetodelaybetweenautomaticallycyclinganitem.Iffalse,carouselwillnotautomaticallycycle.

pause string "hover" Pausesthecyclingofthecarouselonmouseenterandresumesthecyclingofthecarouselonmouseleave.

wrap boolean true Whetherthecarouselshouldcyclecontinuouslyorhavehardstops.

Methods.carousel(options)Initializesthecarouselwithanoptionaloptions objectandstartscyclingthroughitems.

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

.carousel('cycle')Cyclesthroughthecarouselitemsfromlefttoright.

.carousel('pause')Stopsthecarouselfromcyclingthroughitems.

.carousel(number)Cyclesthecarouseltoaparticularframe(0based,similartoanarray).

.carousel('prev')Cyclestothepreviousitem.

.carousel('next')Cyclestothenextitem.



EventsBootstrap'scarouselclassexposestwoeventsforhookingintocarouselfunctionality.

Botheventshavethefollowingadditionalproperties:

direction:Thedirectioninwhichthecarouselissliding(either "left"or "right").relatedTarget:TheDOMelementthatisbeingslidintoplaceastheactiveitem.


slide.bs.carousel Thiseventfiresimmediatelywhenthe slideinstancemethodisinvoked.

slid.bs.carousel Thiseventisfiredwhenthecarouselhascompleteditsslidetransition.

$('#myCarousel').on('slide.bs.carousel',function(){//dosomething})

Affixaffix.jsExampleThesubnavigationontherightisalivedemooftheaffixplugin.

UsageUsetheaffixpluginviadataattributesormanuallywithyourownJavaScript.Inbothsituations,youmustprovideCSSforthepositioningandwidthofyouraffixedcontent.

PositioningviaCSSTheaffixplugintogglesbetweenthreeclasses,eachrepresentingaparticularstate: .affix,.affixtop,and .affixbottom.Youmustprovidethestylesfortheseclassesyourself(independentofthisplugin)tohandletheactualpositions.

Here'showtheaffixpluginworks:

1. Tostart,thepluginadds .affixtoptoindicatetheelementisinitstopmostposition.AtthispointnoCSSpositioningisrequired.

2. Scrollingpasttheelementyouwantaffixedshouldtriggertheactualaffixing.Thisiswhere.affixreplaces .affixtopandsets position:fixed(providedbyBootstrap'scodeCSS).

3. Ifabottomoffsetisdefined,scrollingpastthatshouldreplace .affixwith .affixbottom.



Sinceoffsetsareoptional,settingonerequiresyoutosettheappropriateCSS.Inthiscase,add position:absolutewhennecessary.ThepluginusesthedataattributeorJavaScriptoptiontodeterminewheretopositiontheelementfromthere.

FollowtheabovestepstosetyourCSSforeitheroftheusageoptionsbelow.

ViadataattributesToeasilyaddaffixbehaviortoanyelement,justadd dataspy="affix"totheelementyouwanttospyon.Useoffsetstodefinewhentotogglethepinningofanelement.

...

ViaJavaScriptCalltheaffixpluginviaJavaScript:

$('#myaffix').affix({offset:{top:100,bottom:function(){return(this.bottom=$('.footer').outerHeight(true))}}})

OptionsOptionscanbepassedviadataattributesorJavaScript.Fordataattributes,appendtheoptionnameto data,asin dataoffsettop="200".


offset number|function|object

10 Pixelstooffsetfromscreenwhencalculatingpositionofscroll.Ifasinglenumberisprovided,theoffsetwillbeappliedinbothtopandbottomdirections.Toprovideaunique,bottomandtopoffsetjustprovideanobjectoffset:{top:10}or offset:{top:10,bottom:5}.Useafunctionwhenyouneedtodynamicallycalculateanoffset.

target selector|node|jQueryelement

thewindow

object

Specifiesthetargetelementoftheaffix.

Events



Star 69,178 Fork 25,440 Follow@twbootstrap 177Kfollowers Tweet 4,685

Designedandbuiltwithalltheloveintheworldby@mdo(http://twitter.com/mdo)and@fat(http://twitter.com/fat).

Maintainedbythecoreteam(https://github.com/twbs?tab=members)withthehelpofourcontributors(https://github.com/twbs/bootstrap/graphs/contributors).

CodelicensedunderMIT(https://github.com/twbs/bootstrap/blob/master/LICENSE),documentationunderCCBY3.0(http://creativecommons.org/licenses/by/3.0/).

Currentlyv3.2.0 GitHub(https://github.com/twbs/bootstrap) Examples(../gettingstarted/#examples) v2.3.2docs(../2.3.2/) About(../about/) Expo

(http://expo.getbootstrap.com) Blog(http://blog.getbootstrap.com) Issues(https://github.com/twbs/bootstrap/issues?state=open) Releases

(https://github.com/twbs/bootstrap/releases)

Bootstrap'saffixclassexposesafeweventsforhookingintoaffixfunctionality.


affix.bs.affix Thiseventfiresimmediatelybeforetheelementhasbeenaffixed.

affixed.bs.affix Thiseventisfiredaftertheelementhasbeenaffixed.

affixtop.bs.affix Thiseventfiresimmediatelybeforetheelementhasbeenaffixedtop.

affixedtop.bs.affix Thiseventisfiredaftertheelementhasbeenaffixedtop.

affixbottom.bs.affix Thiseventfiresimmediatelybeforetheelementhasbeenaffixedbottom.

affixedbottom.bs.affix

Thiseventisfiredaftertheelementhasbeenaffixedbottom.

javascript · bootstrap

Documents