javascript · bootstrap
TRANSCRIPT
-
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
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 2/42
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').
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 3/42
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.
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 4/42
Modalsmodal.jsExamplesModalsarestreamlined,butflexible,dialogpromptswiththeminimumrequiredfunctionalityandsmartdefaults.
OverlappingmodalsnotsupportedBesurenottoopenamodalwhileanotherisstillvisible.Showingmorethanonemodalatatimerequirescustomcode.
ModalmarkupplacementAlwaystrytoplaceamodal'sHTMLcodeinatoplevelpositioninyourdocumenttoavoidothercomponentsaffectingthemodal'sappearanceand/orfunctionality.
MobiledevicecaveatsTherearesomecaveatsregardingusingmodalsonmobiledevices.Seeourbrowsersupportdocs(../gettingstarted/#supportfixedpositionkeyboards)fordetails.
StaticexampleArenderedmodalwithheader,body,andsetofactionsinthefooter.
EXAMPLE
Modaltitle
Close Savechanges
Onefinebody
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 5/42
×Close
ModaltitleOnefinebody&hellipCloseSavechanges
LivedemoToggleamodalviaJavaScriptbyclickingthebuttonbelow.Itwillslidedownandfadeinfromthetopofthepage.
Launchdemomodal
EXAMPLE
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 6/42
Launchdemomodal
×Close
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.
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 7/42
Largemodal
...
Smallmodal
...
RemoveanimationFormodalsthatsimplyappearratherthanfadeintoview,removethe .fadeclassfromyourmodalmarkup.
...
UsageThemodalplugintogglesyourhiddencontentondemand,viadataattributesorJavaScript.Italsoadds .modalopentothe tooverridedefaultscrollingbehaviorandgeneratesa .modalbackdroptoprovideaclickareafordismissingshownmodalswhenclickingoutsidethemodal.
Viadataattributes
Largemodal Smallmodal
EXAMPLE
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 8/42
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')
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 9/42
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...})
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 10/42
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
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 11/42
Dropdown
...
ViaJavaScriptCallthedropdownsviaJavaScript:
$('.dropdowntoggle').dropdown()
datatoggle="dropdown"stillrequiredRegardlessofwhetheryoucallyourdropdownviaJavaScriptorinsteadusethedataapi,datatoggle="dropdown"isalwaysrequiredtobepresentonthedropdown'striggerelement.
OptionsNone
Methods$().dropdown('toggle')Togglesthedropdownmenuofagivennavbarortabbednavigation.
EventsAlldropdowneventsarefiredatthe .dropdownmenu'sparentelement.
EventType Description
show.bs.dropdown Thiseventfiresimmediatelywhentheshowinstancemethodiscalled.Thetogglinganchorelementisavailableasthe relatedTargetpropertyoftheevent.
shown.bs.dropdown Thiseventisfiredwhenthedropdownhasbeenmadevisibletotheuser(willwaitforCSStransitions,tocomplete).Thetogglinganchorelementisavailableasthe relatedTargetpropertyoftheevent.
hide.bs.dropdown Thiseventisfiredimmediatelywhenthehideinstancemethodhasbeen
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 12/42
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
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 13/42
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
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 14/42
OptionscanbepassedviadataattributesorJavaScript.Fordataattributes,appendtheoptionnameto data,asin dataoffset="".
Name type default description
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
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 15/42
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.
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 16/42
............
Methods$().tabActivatesatabelementandcontentcontainer.Tabshouldhaveeithera datatargetoran hreftargetingacontainernodeintheDOM.
HomeProfileMessages
Settings
............
$(function(){$('#myTaba:last').tab('show')})
EventsEventType Description
show.bs.tab Thiseventfiresontabshow,butbeforethenewtabhasbeenshown.Useevent.targetand event.relatedTargettotargettheactivetabandthepreviousactivetab(ifavailable)respectively.
shown.bs.tab Thiseventfiresontabshowafteratabhasbeenshown.Useevent.targetand event.relatedTargettotargettheactivetabandthepreviousactivetab(ifavailable)respectively.
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 17/42
$('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
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 18/42
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.
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 19/42
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.
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 20/42
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')
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 21/42
.tooltip('hide')Hidesanelement'stooltip.
$('#element').tooltip('hide')
.tooltip('toggle')Togglesanelement'stooltip.
$('#element').tooltip('toggle')
.tooltip('destroy')Hidesanddestroysanelement'stooltip.
$('#element').tooltip('destroy')
EventsEventType Description
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.
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 22/42
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
Sedposuereconsecteturestatlobortis.Aeneaneuleoquam.Pellentesqueornaresemlaciniaquamvenenatisvestibulum.
Popoverbottom Popoverleft
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 23/42
Livedemo
Clicktotogglepopover
Fourdirections
Popoveronleft
Popoverontop
Popoveronbottom
Popoveronright
Clicktotogglepopover
EXAMPLE
Popoveronleft Popoverontop Popoveronbottom Popoveronright
EXAMPLE
Sedposuereconsecteturestatlobortis.Aeneaneuleoquam.Pellentesqueornaresemlaciniaquamvenenatisvestibulum.
Sedposuereconsecteturestatlobortis.Aeneaneuleoquam.Pellentesqueornaresemlaciniaquamvenenatisvestibulum.
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 24/42
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
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 25/42
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.
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 26/42
'
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')
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 27/42
.popover('destroy')Hidesanddestroysanelement'spopover.
$('#element').popover('destroy')
EventsEventType Description
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
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 28/42
UsageEnabledismissalofanalertviaJavaScript:
$(".alert").alert()
MarkupJustadd datadismiss="alert"toyourclosebuttontoautomaticallygiveanalertclosefunctionality.
×Close
Methods$().alert()Wrapsallalertswithclosefunctionality.Tohaveyouralertsanimateoutwhenclosed,makesuretheyhavethe .fadeand .inclassalreadyappliedtothem.
.alert('close')Closesanalert.
$(".alert").alert('close')
EventsBootstrap'salertclassexposesafeweventsforhookingintoalertfunctionality.
EventType Description
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
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 29/42
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
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 30/42
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)
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 31/42
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
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 32/42
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
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 33/42
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#2
CollapsibleGroupItem#3
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 34/42
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.
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 35/42
Toaddaccordionlikegroupmanagementtoacollapsiblecontrol,addthedataattribute dataparent="#selector".Refertothedemotoseethisinaction.
ViaJavaScriptEnablemanuallywith:
$('.collapse').collapse()
OptionsOptionscanbepassedviadataattributesorJavaScript.Fordataattributes,appendtheoptionnameto data,asin dataparent="".
Name type default description
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.
EventType Description
show.bs.collapse Thiseventfiresimmediatelywhenthe showinstancemethodiscalled.
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 36/42
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
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 37/42
.........
TransitionanimationsnotsupportedinInternetExplorer8&9BootstrapexclusivelyusesCSS3foritsanimations,butInternetExplorer8&9don'tsupportthenecessaryCSSproperties.Thus,therearenoslidetransitionanimationswhenusingthesebrowsers.WehaveintentionallydecidednottoincludejQuerybasedfallbacksforthetransitions.
OptionalcaptionsAddcaptionstoyourslideseasilywiththe .carouselcaptionelementwithinany .item.PlacejustaboutanyoptionalHTMLwithinthereanditwillbeautomaticallyalignedandformatted.
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 38/42
......
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.
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 39/42
The dataride="carousel"attributeisusedtomarkacarouselasanimatingstartingatpageload.
ViaJavaScriptCallcarouselmanuallywith:
$('.carousel').carousel()
OptionsOptionscanbepassedviadataattributesorJavaScript.Fordataattributes,appendtheoptionnameto data,asin datainterval="".
Name type default description
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.
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 40/42
EventsBootstrap'scarouselclassexposestwoeventsforhookingintocarouselfunctionality.
Botheventshavethefollowingadditionalproperties:
direction:Thedirectioninwhichthecarouselissliding(either "left"or "right").relatedTarget:TheDOMelementthatisbeingslidintoplaceastheactiveitem.
EventType Description
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.
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 41/42
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".
Name type default description
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
-
28/6/2014 JavaScript Bootstrap
http://getbootstrap.com/javascript/ 42/42
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.
EventType Description
affix.bs.affix Thiseventfiresimmediatelybeforetheelementhasbeenaffixed.
affixed.bs.affix Thiseventisfiredaftertheelementhasbeenaffixed.
affixtop.bs.affix Thiseventfiresimmediatelybeforetheelementhasbeenaffixedtop.
affixedtop.bs.affix Thiseventisfiredaftertheelementhasbeenaffixedtop.
affixbottom.bs.affix Thiseventfiresimmediatelybeforetheelementhasbeenaffixedbottom.
affixedbottom.bs.affix
Thiseventisfiredaftertheelementhasbeenaffixedbottom.