Escolar Documentos
Profissional Documentos
Cultura Documentos
Awwyeah,Bootstrap4iscoming!
JavaScript
BringBootstrap'scomponentstolifewithoveradozencustomjQueryplugins.Easilyincludethemall,oronebyone.
Overview
Individualorcompiled
Pluginscanbeincludedindividually(usingBootstrap'sindividual *.js files),orallatonce(using bootstrap.js ortheminified bootstrap.min.js ).
UsingthecompiledJavaScript
Both bootstrap.js and bootstrap.min.js containallpluginsinasinglefile.Includeonlyone.
Plugindependencies
SomepluginsandCSScomponentsdependonotherplugins.Ifyouincludepluginsindividually,makesuretocheckforthesedependenciesinthedocs.Alsonotethatall
pluginsdependonjQuery(thismeansjQuerymustbeincludedbeforethepluginfiles).Consultour bower.json toseewhichversionsofjQueryaresupported.
Dataattributes
YoucanuseallBootstrappluginspurelythroughthemarkupAPIwithoutwritingasinglelineofJavaScript.ThisisBootstrap'sfirstclassAPIandshouldbeyourfirstconsideration
whenusingaplugin.
Thatsaid,insomesituationsitmaybedesirabletoturnthisfunctionalityoff.Therefore,wealsoprovidetheabilitytodisablethedataattributeAPIbyunbindingalleventsonthe
documentnamespacedwith dataapi .Thislookslikethis:
$(document).off('.dataapi')
Alternatively,totargetaspecificplugin,justincludetheplugin'snameasanamespacealongwiththedataapinamespacelikethis:
$(document).off('.alert.dataapi')
http://getbootstrap.com/javascript/#collapseexample 1/53
17/2/2017 JavaScriptBootstrap
Onlyonepluginperelementviadataattributes
Don'tusedataattributesfrommultiplepluginsonthesameelement.Forexample,abuttoncannotbothhaveatooltipandtoggleamodal.Toaccomplishthis,usea
wrappingelement.
ProgrammaticAPI
WealsobelieveyoushouldbeabletouseallBootstrappluginspurelythroughtheJavaScriptAPI.AllpublicAPIsaresingle,chainablemethods,andreturnthecollectionacted
upon.
$('.btn.danger').button('toggle').addClass('fat')
Allmethodsshouldacceptanoptionaloptionsobject,astringwhichtargetsaparticularmethod,ornothing(whichinitiatesapluginwithdefaultbehavior):
$('#myModal').modal()//initializedwithdefaults
$('#myModal').modal({keyboard:false})//initializedwithnokeyboard
$('#myModal').modal('show')//initializesandinvokesshowimmediately
Defaultsettings
Youcanchangethedefaultsettingsforapluginbymodifyingtheplugin's Constructor.DEFAULTS object:
$.fn.modal.Constructor.DEFAULTS.keyboard=false//changesdefaultforthemodalplugin's`keyboard`optiontofalse
Noconflict
SometimesitisnecessarytouseBootstrappluginswithotherUIframeworks.Inthesecircumstances,namespacecollisionscanoccasionallyoccur.Ifthishappens,youmaycall
.noConflict onthepluginyouwishtorevertthevalueof.
varbootstrapButton=$.fn.button.noConflict()//return$.fn.buttontopreviouslyassignedvalue
$.fn.bootstrapBtn=bootstrapButton//give$().bootstrapBtntheBootstrapfunctionality
Events
Bootstrapprovidescustomeventsformostplugins'uniqueactions.Generally,thesecomeinaninfinitiveandpastparticipleformwheretheinfinitive(ex. show )istriggeredatthe
startofanevent,anditspastparticipleform(ex. shown )istriggeredonthecompletionofanaction.
Asof3.0.0,allBootstrapeventsarenamespaced.
http://getbootstrap.com/javascript/#collapseexample 2/53
17/2/2017 JavaScriptBootstrap
$('#myModal').on('show.bs.modal',function(e){
if(!data)returne.preventDefault()//stopsmodalfrombeingshown
})
Versionnumbers
TheversionofeachofBootstrap'sjQuerypluginscanbeaccessedviathe VERSION propertyoftheplugin'sconstructor.Forexample,forthetooltipplugin:
$.fn.tooltip.Constructor.VERSION//=>"3.3.7"
NospecialfallbackswhenJavaScriptisdisabled
Bootstrap'spluginsdon'tfallbackparticularlygracefullywhenJavaScriptisdisabled.Ifyoucareabouttheuserexperienceinthiscase,use <noscript> toexplainthesituation(and
howtoreenableJavaScript)toyourusers,and/oraddyourowncustomfallbacks.
Thirdpartylibraries
BootstrapdoesnotofficiallysupportthirdpartyJavaScriptlibrarieslikePrototypeorjQueryUI.Despite .noConflict andnamespacedevents,theremaybe
compatibilityproblemsthatyouneedtofixonyourown.
Transitionstransition.js
Abouttransitions
Forsimpletransitioneffects,include transition.js oncealongsidetheotherJSfiles.Ifyou'reusingthecompiled(orminified) bootstrap.js ,thereisnoneedtoincludethisit's
alreadythere.
What'sinside
Transition.jsisabasichelperfor transitionEnd eventsaswellasaCSStransitionemulator.It'susedbytheotherpluginstocheckforCSStransitionsupportandtocatchhanging
transitions.
Disablingtransitions
http://getbootstrap.com/javascript/#collapseexample 3/53
17/2/2017 JavaScriptBootstrap
$.support.transition=false
Modalsmodal.js
Modalsarestreamlined,butflexible,dialogpromptswiththeminimumrequiredfunctionalityandsmartdefaults.
Multipleopenmodalsnotsupported
Besurenottoopenamodalwhileanotherisstillvisible.Showingmorethanonemodalatatimerequirescustomcode.
Modalmarkupplacement
Alwaystrytoplaceamodal'sHTMLcodeinatoplevelpositioninyourdocumenttoavoidothercomponentsaffectingthemodal'sappearanceand/orfunctionality.
Mobiledevicecaveats
Therearesomecaveatsregardingusingmodalsonmobiledevices.Seeourbrowsersupportdocsfordetails.
$('#myModal').on('shown.bs.modal',function(){
$('#myInput').focus()
})
Examples
Staticexample
Arenderedmodalwithheader,body,andsetofactionsinthefooter.
EXA MPLE
http://getbootstrap.com/javascript/#collapseexample 4/53
17/2/2017 JavaScriptBootstrap
Modaltitle
Onefinebody
Close Savechanges
<divclass="modalfade"tabindex="1"role="dialog">
<divclass="modaldialog"role="document">
<divclass="modalcontent">
<divclass="modalheader">
<buttontype="button"class="close"datadismiss="modal"arialabel="Close"><spanariahidden="true">×</span></button>
<h4class="modaltitle">Modaltitle</h4>
</div>
<divclass="modalbody">
<p>Onefinebody…</p>
</div>
<divclass="modalfooter">
<buttontype="button"class="btnbtndefault"datadismiss="modal">Close</button>
<buttontype="button"class="btnbtnprimary">Savechanges</button>
</div>
</div><!/.modalcontent>
</div><!/.modaldialog>
</div><!/.modal>
Livedemo
ToggleamodalviaJavaScriptbyclickingthebuttonbelow.Itwillslidedownandfadeinfromthetopofthepage.
EXA MPLE
Launchdemomodal
http://getbootstrap.com/javascript/#collapseexample 5/53
17/2/2017 JavaScriptBootstrap
<!Buttontriggermodal>
<buttontype="button"class="btnbtnprimarybtnlg"datatoggle="modal"datatarget="#myModal">
Launchdemomodal
</button>
<!Modal>
<divclass="modalfade"id="myModal"tabindex="1"role="dialog"arialabelledby="myModalLabel">
<divclass="modaldialog"role="document">
<divclass="modalcontent">
<divclass="modalheader">
<buttontype="button"class="close"datadismiss="modal"arialabel="Close"><spanariahidden="true">×</span></button>
<h4class="modaltitle"id="myModalLabel">Modaltitle</h4>
</div>
<divclass="modalbody">
...
</div>
<divclass="modalfooter">
<buttontype="button"class="btnbtndefault"datadismiss="modal">Close</button>
<buttontype="button"class="btnbtnprimary">Savechanges</button>
</div>
</div>
</div>
</div>
Makemodalsaccessible
Besuretoadd role="dialog" and arialabelledby="..." ,referencingthemodaltitle,to .modal ,and role="document" tothe .modaldialog itself.
EmbeddingYouTubevideos
EmbeddingYouTubevideosinmodalsrequiresadditionalJavaScriptnotinBootstraptoautomaticallystopplaybackandmore.SeethishelpfulStackOverflowpostformore
information.
Optionalsizes
Modalshavetwooptionalsizes,availableviamodifierclassestobeplacedona .modaldialog .
EXA MPLE
Largemodal Smallmodal
http://getbootstrap.com/javascript/#collapseexample 6/53
17/2/2017 JavaScriptBootstrap
<!Largemodal>
<buttontype="button"class="btnbtnprimary"datatoggle="modal"datatarget=".bsexamplemodallg">Largemodal</button>
<divclass="modalfadebsexamplemodallg"tabindex="1"role="dialog"arialabelledby="myLargeModalLabel">
<divclass="modaldialogmodallg"role="document">
<divclass="modalcontent">
...
</div>
</div>
</div>
<!Smallmodal>
<buttontype="button"class="btnbtnprimary"datatoggle="modal"datatarget=".bsexamplemodalsm">Smallmodal</button>
<divclass="modalfadebsexamplemodalsm"tabindex="1"role="dialog"arialabelledby="mySmallModalLabel">
<divclass="modaldialogmodalsm"role="document">
<divclass="modalcontent">
...
</div>
</div>
</div>
Removeanimation
Formodalsthatsimplyappearratherthanfadeintoview,removethe .fade classfromyourmodalmarkup.
<divclass="modal"tabindex="1"role="dialog"arialabelledby="...">
...
</div>
Usingthegridsystem
TotakeadvantageoftheBootstrapgridsystemwithinamodal,justnest .row swithinthe .modalbody andthenusethenormalgridsystemclasses.
EXA MPLE
Launchdemomodal
http://getbootstrap.com/javascript/#collapseexample 7/53
17/2/2017 JavaScriptBootstrap
<divclass="modalfade"tabindex="1"role="dialog"arialabelledby="gridSystemModalLabel">
<divclass="modaldialog"role="document">
<divclass="modalcontent">
<divclass="modalheader">
<buttontype="button"class="close"datadismiss="modal"arialabel="Close"><spanariahidden="true">×</span></button>
<h4class="modaltitle"id="gridSystemModalLabel">Modaltitle</h4>
</div>
<divclass="modalbody">
<divclass="row">
<divclass="colmd4">.colmd4</div>
<divclass="colmd4colmdoffset4">.colmd4.colmdoffset4</div>
</div>
<divclass="row">
<divclass="colmd3colmdoffset3">.colmd3.colmdoffset3</div>
<divclass="colmd2colmdoffset4">.colmd2.colmdoffset4</div>
</div>
<divclass="row">
<divclass="colmd6colmdoffset3">.colmd6.colmdoffset3</div>
</div>
<divclass="row">
<divclass="colsm9">
Level1:.colsm9
<divclass="row">
<divclass="colxs8colsm6">
Level2:.colxs8.colsm6
</div>
<divclass="colxs4colsm6">
Level2:.colxs4.colsm6
</div>
</div>
</div>
</div>
</div>
<divclass="modalfooter">
<buttontype="button"class="btnbtndefault"datadismiss="modal">Close</button>
<buttontype="button"class="btnbtnprimary">Savechanges</button>
</div>
</div><!/.modalcontent>
</div><!/.modaldialog>
</div><!/.modal>
Varyingmodalcontentbasedontriggerbutton
Haveabunchofbuttonsthatalltriggerthesamemodal,justwithslightlydifferentcontents?Use event.relatedTarget andHTML data* attributes(possiblyviajQuery)tovary
thecontentsofthemodaldependingonwhichbuttonwasclicked.SeetheModalEventsdocsfordetailson relatedTarget ,
http://getbootstrap.com/javascript/#collapseexample 8/53
17/2/2017 JavaScriptBootstrap
EXA MPLE
<buttontype="button"class="btnbtnprimary"datatoggle="modal"datatarget="#exampleModal"datawhatever="@mdo">Openmodalfor@mdo</button>
<buttontype="button"class="btnbtnprimary"datatoggle="modal"datatarget="#exampleModal"datawhatever="@fat">Openmodalfor@fat</button>
<buttontype="button"class="btnbtnprimary"datatoggle="modal"datatarget="#exampleModal"datawhatever="@getbootstrap">Openmodalfor
@getbootstrap</button>
...morebuttons...
<divclass="modalfade"id="exampleModal"tabindex="1"role="dialog"arialabelledby="exampleModalLabel">
<divclass="modaldialog"role="document">
<divclass="modalcontent">
<divclass="modalheader">
<buttontype="button"class="close"datadismiss="modal"arialabel="Close"><spanariahidden="true">×</span></button>
<h4class="modaltitle"id="exampleModalLabel">Newmessage</h4>
</div>
<divclass="modalbody">
<form>
<divclass="formgroup">
<labelfor="recipientname"class="controllabel">Recipient:</label>
<inputtype="text"class="formcontrol"id="recipientname">
</div>
<divclass="formgroup">
<labelfor="messagetext"class="controllabel">Message:</label>
<textareaclass="formcontrol"id="messagetext"></textarea>
</div>
</form>
</div>
<divclass="modalfooter">
<buttontype="button"class="btnbtndefault"datadismiss="modal">Close</button>
<buttontype="button"class="btnbtnprimary">Sendmessage</button>
</div>
</div>
</div>
</div>
http://getbootstrap.com/javascript/#collapseexample 9/53
17/2/2017 JavaScriptBootstrap
$('#exampleModal').on('show.bs.modal',function(event){
varbutton=$(event.relatedTarget)//Buttonthattriggeredthemodal
varrecipient=button.data('whatever')//Extractinfofromdata*attributes
//Ifnecessary,youcouldinitiateanAJAXrequesthere(andthendotheupdatinginacallback).
//Updatethemodal'scontent.We'llusejQueryhere,butyoucoulduseadatabindinglibraryorothermethodsinstead.
varmodal=$(this)
modal.find('.modaltitle').text('Newmessageto'+recipient)
modal.find('.modalbodyinput').val(recipient)
})
Usage
Themodalplugintogglesyourhiddencontentondemand,viadataattributesorJavaScript.Italsoadds .modalopen tothe <body> tooverridedefaultscrollingbehaviorand
generatesa .modalbackdrop toprovideaclickareafordismissingshownmodalswhenclickingoutsidethemodal.
Viadataattributes
ActivateamodalwithoutwritingJavaScript.Set datatoggle="modal" onacontrollerelement,likeabutton,alongwitha datatarget="#foo" or href="#foo" totargetaspecific
modaltotoggle.
<buttontype="button"datatoggle="modal"datatarget="#myModal">Launchmodal</button>
ViaJavaScript
Callamodalwithid myModal withasinglelineofJavaScript:
$('#myModal').modal(options)
Options
OptionscanbepassedviadataattributesorJavaScript.Fordataattributes,appendtheoptionnameto data ,asin databackdrop="" .
http://getbootstrap.com/javascript/#collapseexample 10/53
17/2/2017 JavaScriptBootstrap
<adatatoggle="modal"href="remote.html"datatarget="#modal">Clickme</a>
Methods
.modal(options)
Activatesyourcontentasamodal.Acceptsanoptionaloptions object .
$('#myModal').modal({
keyboard:false
})
.modal('toggle')
Manuallytogglesamodal.Returnstothecallerbeforethemodalhasactuallybeenshownorhidden(i.e.beforethe shown.bs.modal or hidden.bs.modal eventoccurs).
$('#myModal').modal('toggle')
.modal('show')
Manuallyopensamodal.Returnstothecallerbeforethemodalhasactuallybeenshown(i.e.beforethe shown.bs.modal eventoccurs).
$('#myModal').modal('show')
.modal('hide')
Manuallyhidesamodal.Returnstothecallerbeforethemodalhasactuallybeenhidden(i.e.beforethe hidden.bs.modal eventoccurs).
$('#myModal').modal('hide')
.modal('handleUpdate')
Readjuststhemodal'spositioningtocounterascrollbarincaseoneshouldappear,whichwouldmakethemodaljumptotheleft.
Onlyneededwhentheheightofthemodalchangeswhileitisopen.
http://getbootstrap.com/javascript/#collapseexample 11/53
17/2/2017 JavaScriptBootstrap
$('#myModal').modal('handleUpdate')
Events
Bootstrap'smodalclassexposesafeweventsforhookingintomodalfunctionality.
Allmodaleventsarefiredatthemodalitself(i.e.atthe <divclass="modal"> ).
EventType Description
shown.bs.modal Thiseventisfiredwhenthemodalhasbeenmadevisibletotheuser(willwaitforCSStransitionstocomplete).Ifcausedbyaclick,theclickedelementis
availableasthe relatedTarget propertyoftheevent.
hidden.bs.modal Thiseventisfiredwhenthemodalhasfinishedbeinghiddenfromtheuser(willwaitforCSStransitionstocomplete).
$('#myModal').on('hidden.bs.modal',function(e){
//dosomething...
})
Dropdownsdropdown.js
Examples
Adddropdownmenustonearlyanythingwiththissimpleplugin,includingthenavbar,tabs,andpills.
Withinanavbar
EXA MPLE
Withinpills
http://getbootstrap.com/javascript/#collapseexample 12/53
17/2/2017 JavaScriptBootstrap
Withinpills
EXA MPLE
Usage
ViadataattributesorJavaScript,thedropdownplugintoggleshiddencontent(dropdownmenus)bytogglingthe .open classontheparentlistitem.
Viadataattributes
Add datatoggle="dropdown" toalinkorbuttontotoggleadropdown.
<divclass="dropdown">
<buttonid="dLabel"type="button"datatoggle="dropdown"ariahaspopup="true"ariaexpanded="false">
Dropdowntrigger
<spanclass="caret"></span>
</button>
<ulclass="dropdownmenu"arialabelledby="dLabel">
...
</ul>
</div>
<divclass="dropdown">
<aid="dLabel"datatarget="#"href="http://example.com"datatoggle="dropdown"role="button"ariahaspopup="true"ariaexpanded="false">
Dropdowntrigger
<spanclass="caret"></span>
</a>
<ulclass="dropdownmenu"arialabelledby="dLabel">
...
</ul>
</div>
ViaJavaScript
http://getbootstrap.com/javascript/#collapseexample 13/53
17/2/2017 JavaScriptBootstrap
CallthedropdownsviaJavaScript:
$('.dropdowntoggle').dropdown()
datatoggle="dropdown" stillrequired
RegardlessofwhetheryoucallyourdropdownviaJavaScriptorinsteadusethedataapi, datatoggle="dropdown" isalwaysrequiredtobepresentonthedropdown's
triggerelement.
Options
None
Methods
$().dropdown('toggle')
Togglesthedropdownmenuofagivennavbarortabbednavigation.
Events
Alldropdowneventsarefiredatthe .dropdownmenu 'sparentelement.
EventType Description
show.bs.dropdown Thiseventfiresimmediatelywhentheshowinstancemethodiscalled.
shown.bs.dropdown Thiseventisfiredwhenthedropdownhasbeenmadevisibletotheuser(willwaitforCSStransitions,tocomplete).
hide.bs.dropdown Thiseventisfiredimmediatelywhenthehideinstancemethodhasbeencalled.
hidden.bs.dropdown Thiseventisfiredwhenthedropdownhasfinishedbeinghiddenfromtheuser(willwaitforCSStransitions,tocomplete).
$('#myDropdown').on('show.bs.dropdown',function(){
//dosomething
})
http://getbootstrap.com/javascript/#collapseexample 14/53
17/2/2017 JavaScriptBootstrap
ScrollSpyscrollspy.js
Exampleinnavbar
TheScrollSpypluginisforautomaticallyupdatingnavtargetsbasedonscrollposition.Scrolltheareabelowthenavbarandwatchtheactiveclasschange.Thedropdownsubitems
willbehighlightedaswell.
EXA MPLE
@fat
Adleggingskeytar,brunchidartpartydolorlabore.Pitchforkyrenimlofibeforetheysoldoutqui.Tumblrfarmtotablebicyclerightswhatever.Animkeffiyehcarlescardigan.
Velitseitanmcsweeney'sphotobooth3wolfmoonirure.Cosbysweaterlomojeanshorts,williamsburghoodieminimquiyouprobablyhaven'theardofthemetcardigantrust
fundculpabiodieselwesandersonaesthetic.Nihiltattooedaccusamus,credironybiodieselkeffiyehartisanullamcoconsequat.
@mdo
Veniammarfamustacheskateboard,adipisicingfugiatvelitpitchforkbeard.Freeganbeardaliquacupidatatmcsweeney'svero.Cupidatatfourlokonisi,eahelveticanullacarles.
Tattooedcosbysweaterfoodtruck,mcsweeney'squisnonfreeganvinyl.Lofiwesanderson+1sartorial.Carlesnonaestheticexercitationquisgentrify.Brooklynadipisicingcraft
beervicekeytardeserunt.
Usage
RequiresBootstrapnav
ScrollspycurrentlyrequirestheuseofaBootstrapnavcomponentforproperhighlightingofactivelinks.
ResolvableIDtargetsrequired
Navbarlinksmusthaveresolvableidtargets.Forexample,a <ahref="#home">home</a> mustcorrespondtosomethingintheDOMlike <divid="home"></div> .
Requiresrelativepositioning
http://getbootstrap.com/javascript/#collapseexample 15/53
17/2/2017 JavaScriptBootstrap
Viadataattributes
Toeasilyaddscrollspybehaviortoyourtopbarnavigation,add dataspy="scroll" totheelementyouwanttospyon(mosttypicallythiswouldbethe <body> ).Thenaddthe
datatarget attributewiththeIDorclassoftheparentelementofanyBootstrap .nav component.
body{
position:relative;
}
<bodydataspy="scroll"datatarget="#navbarexample">
...
<divid="navbarexample">
<ulclass="navnavtabs"role="tablist">
...
</ul>
</div>
...
</body>
ViaJavaScript
Afteradding position:relative; inyourCSS,callthescrollspyviaJavaScript:
$('body').scrollspy({target:'#navbarexample'})
Methods
.scrollspy('refresh')
WhenusingscrollspyinconjunctionwithaddingorremovingofelementsfromtheDOM,you'llneedtocalltherefreshmethodlikeso:
$('[dataspy="scroll"]').each(function(){
var$spy=$(this).scrollspy('refresh')
})
Options
OptionscanbepassedviadataattributesorJavaScript.Fordataattributes,appendtheoptionnameto data ,asin dataoffset="" .
http://getbootstrap.com/javascript/#collapseexample 16/53
17/2/2017 JavaScriptBootstrap
Events
EventType Description
activate.bs.scrollspy Thiseventfireswheneveranewitembecomesactivatedbythescrollspy.
$('#myScrollspy').on('activate.bs.scrollspy',function(){
//dosomething
})
Togglabletabstab.js
Exampletabs
Addquick,dynamictabfunctionalitytotransitionthroughpanesoflocalcontent,evenviadropdownmenus.Nestedtabsarenotsupported.
EXA MPLE
Rawdenimyouprobablyhaven'theardofthemjeanshortsAustin.Nesciunttofustumptownaliqua,retrosynthmastercleanse.Mustacheclichetempor,williamsburgcarlesvegan
helvetica.Reprehenderitbutcherretrokeffiyehdreamcatchersynth.Cosbysweatereubanhmi,quiirureterryrichardsonexsquid.Aliquipplaceatsalviacillumiphone.Seitan
aliquipquiscardiganamericanapparel,butchervoluptatenisiqui.
Extendstabbednavigation
Thispluginextendsthetabbednavigationcomponenttoaddtabbableareas.
Usage
EnabletabbabletabsviaJavaScript(eachtabneedstobeactivatedindividually):
http://getbootstrap.com/javascript/#collapseexample 17/53
17/2/2017 JavaScriptBootstrap
$('#myTabsa').click(function(e){
e.preventDefault()
$(this).tab('show')
})
Youcanactivateindividualtabsinseveralways:
$('#myTabsa[href="#profile"]').tab('show')//Selecttabbyname
$('#myTabsa:first').tab('show')//Selectfirsttab
$('#myTabsa:last').tab('show')//Selectlasttab
$('#myTabsli:eq(2)a').tab('show')//Selectthirdtab(0indexed)
Markup
YoucanactivateataborpillnavigationwithoutwritinganyJavaScriptbysimplyspecifying datatoggle="tab" or datatoggle="pill" onanelement.Addingthe nav and nav
tabs classestothetab ul willapplytheBootstraptabstyling,whileaddingthe nav and navpills classeswillapplypillstyling.
<div>
<!Navtabs>
<ulclass="navnavtabs"role="tablist">
<lirole="presentation"class="active"><ahref="#home"ariacontrols="home"role="tab"datatoggle="tab">Home</a></li>
<lirole="presentation"><ahref="#profile"ariacontrols="profile"role="tab"datatoggle="tab">Profile</a></li>
<lirole="presentation"><ahref="#messages"ariacontrols="messages"role="tab"datatoggle="tab">Messages</a></li>
<lirole="presentation"><ahref="#settings"ariacontrols="settings"role="tab"datatoggle="tab">Settings</a></li>
</ul>
<!Tabpanes>
<divclass="tabcontent">
<divrole="tabpanel"class="tabpaneactive"id="home">...</div>
<divrole="tabpanel"class="tabpane"id="profile">...</div>
<divrole="tabpanel"class="tabpane"id="messages">...</div>
<divrole="tabpanel"class="tabpane"id="settings">...</div>
</div>
</div>
Fadeeffect
Tomaketabsfadein,add .fade toeach .tabpane .Thefirsttabpanemustalsohave .in tomaketheinitialcontentvisible.
http://getbootstrap.com/javascript/#collapseexample 18/53
17/2/2017 JavaScriptBootstrap
<divclass="tabcontent">
<divrole="tabpanel"class="tabpanefadeinactive"id="home">...</div>
<divrole="tabpanel"class="tabpanefade"id="profile">...</div>
<divrole="tabpanel"class="tabpanefade"id="messages">...</div>
<divrole="tabpanel"class="tabpanefade"id="settings">...</div>
</div>
Methods
$().tab
Activatesatabelementandcontentcontainer.Tabshouldhaveeithera datatarget oran href targetingacontainernodeintheDOM.Intheaboveexamples,thetabsarethe
<a> swith datatoggle="tab" attributes.
.tab('show')
Selectsthegiventabandshowsitsassociatedcontent.Anyothertabthatwaspreviouslyselectedbecomesunselectedanditsassociatedcontentishidden.Returnstothecaller
beforethetabpanehasactuallybeenshown(i.e.beforethe shown.bs.tab eventoccurs).
$('#someTab').tab('show')
Events
Whenshowinganewtab,theeventsfireinthefollowingorder:
1. hide.bs.tab (onthecurrentactivetab)
2. show.bs.tab (onthetobeshowntab)
3. hidden.bs.tab (onthepreviousactivetab,thesameoneasforthe hide.bs.tab event)
4. shown.bs.tab (onthenewlyactivejustshowntab,thesameoneasforthe show.bs.tab event)
EventType Description
http://getbootstrap.com/javascript/#collapseexample 19/53
17/2/2017 JavaScriptBootstrap
$('a[datatoggle="tab"]').on('shown.bs.tab',function(e){
e.target//newlyactivatedtab
e.relatedTarget//previousactivetab
})
Tooltipstooltip.js
InspiredbytheexcellentjQuery.tipsypluginwrittenbyJasonFrameTooltipsareanupdatedversion,whichdon'trelyonimages,useCSS3foranimations,anddataattributesfor
localtitlestorage.
Tooltipswithzerolengthtitlesareneverdisplayed.
Examples
Hoveroverthelinksbelowtoseetooltips:
EXA MPLE
Tightpantsnextlevelkeffiyehyouprobablyhaven'theardofthem.Photoboothbeardrawdenimletterpressveganmessengerbagstumptown.Farmtotableseitan,mcsweeney's
fixiesustainablequinoa8bitamericanapparelhaveaterryrichardsonvinylchambray.Beardstumptown,cardigansbanhmilomothundercats.Tofubiodieselwilliamsburgmarfa,
fourlokomcsweeney'scleanseveganchambray.Areallyironicartisanwhateverkeytar,scenesterfarmtotablebanksyAustintwitterhandlefreegancredrawdenimsingleorigin
coffeeviral.
Statictooltip
Fouroptionsareavailable:top,right,bottom,andleftaligned.
EXA MPLE
Fourdirections
http://getbootstrap.com/javascript/#collapseexample 20/53
17/2/2017 JavaScriptBootstrap
EXA MPLE
<buttontype="button"class="btnbtndefault"datatoggle="tooltip"dataplacement="left"title="Tooltiponleft">Tooltiponleft</button>
<buttontype="button"class="btnbtndefault"datatoggle="tooltip"dataplacement="top"title="Tooltipontop">Tooltipontop</button>
<buttontype="button"class="btnbtndefault"datatoggle="tooltip"dataplacement="bottom"title="Tooltiponbottom">Tooltiponbottom</button>
<buttontype="button"class="btnbtndefault"datatoggle="tooltip"dataplacement="right"title="Tooltiponright">Tooltiponright</button>
Optinfunctionality
Forperformancereasons,theTooltipandPopoverdataapisareoptin,meaningyoumustinitializethemyourself.
$(function(){
$('[datatoggle="tooltip"]').tooltip()
})
Usage
Thetooltipplugingeneratescontentandmarkupondemand,andbydefaultplacestooltipsaftertheirtriggerelement.
TriggerthetooltipviaJavaScript:
$('#example').tooltip(options)
Markup
Therequiredmarkupforatooltipisonlya data attributeand title ontheHTMLelementyouwishtohaveatooltip.Thegeneratedmarkupofatooltipisrathersimple,thoughit
doesrequireaposition(bydefault,setto top bytheplugin).
http://getbootstrap.com/javascript/#collapseexample 21/53
17/2/2017 JavaScriptBootstrap
<!HTMLtowrite>
<ahref="#"datatoggle="tooltip"title="Sometooltiptext!">Hoveroverme</a>
<!Generatedmarkupbytheplugin>
<divclass="tooltiptop"role="tooltip">
<divclass="tooltiparrow"></div>
<divclass="tooltipinner">
Sometooltiptext!
</div>
</div>
Multiplelinelinks
Sometimesyouwanttoaddatooltiptoahyperlinkthatwrapsmultiplelines.Thedefaultbehaviorofthetooltippluginistocenterithorizontallyandvertically.Add white
space:nowrap; toyouranchorstoavoidthis.
Tooltipsinbuttongroups,inputgroups,andtablesrequirespecialsetting
Whenusingtooltipsonelementswithina .btngroup oran .inputgroup ,orontablerelatedelements( <td> , <th> , <tr> , <thead> , <tbody> , <tfoot> ),you'llhaveto
specifytheoption container:'body' (documentedbelow)toavoidunwantedsideeffects(suchastheelementgrowingwiderand/orlosingitsroundedcornerswhenthe
tooltipistriggered).
Don'ttrytoshowtooltipsonhiddenelements
Invoking $(...).tooltip('show') whenthetargetelementis display:none; willcausethetooltiptobeincorrectlypositioned.
Accessibletooltipsforkeyboardandassistivetechnologyusers
Forusersnavigatingwithakeyboard,andinparticularusersofassistivetechnologies,youshouldonlyaddtooltipstokeyboardfocusableelementssuchaslinks,form
controls,oranyarbitraryelementwitha tabindex="0" attribute.
Tooltipsondisabledelementsrequirewrapperelements
Toaddatooltiptoa disabled or .disabled element,puttheelementinsideofa <div> andapplythetooltiptothat <div> instead.
Options
OptionscanbepassedviadataattributesorJavaScript.Fordataattributes,appendtheoptionnameto data ,asin dataanimation="" .
http://getbootstrap.com/javascript/#collapseexample 22/53
17/2/2017 JavaScriptBootstrap
Objectstructureis: delay:{"show":500,"hide":100}
Whenafunctionisusedtodeterminetheplacement,itiscalledwiththetooltipDOMnodeasitsfirstargumentandthe
triggeringelementDOMnodeasitssecond.The this contextissettothetooltipinstance.
http://getbootstrap.com/javascript/#collapseexample 23/53
17/2/2017 JavaScriptBootstrap
Dataattributesforindividualtooltips
Optionsforindividualtooltipscanalternativelybespecifiedthroughtheuseofdataattributes,asexplainedabove.
Methods
$().tooltip(options)
Attachesatooltiphandlertoanelementcollection.
.tooltip('show')
Revealsanelement'stooltip.Returnstothecallerbeforethetooltiphasactuallybeenshown(i.e.beforethe shown.bs.tooltip eventoccurs).Thisisconsidereda"manual"
triggeringofthetooltip.Tooltipswithzerolengthtitlesareneverdisplayed.
$('#element').tooltip('show')
.tooltip('hide')
Hidesanelement'stooltip.Returnstothecallerbeforethetooltiphasactuallybeenhidden(i.e.beforethe hidden.bs.tooltip eventoccurs).Thisisconsidereda"manual"
triggeringofthetooltip.
$('#element').tooltip('hide')
.tooltip('toggle')
Togglesanelement'stooltip.Returnstothecallerbeforethetooltiphasactuallybeenshownorhidden(i.e.beforethe shown.bs.tooltip or hidden.bs.tooltip event
occurs).Thisisconsidereda"manual"triggeringofthetooltip.
$('#element').tooltip('toggle')
.tooltip('destroy')
Hidesanddestroysanelement'stooltip.Tooltipsthatusedelegation(whicharecreatedusingthe selector option)cannotbeindividuallydestroyedondescendanttrigger
elements.
http://getbootstrap.com/javascript/#collapseexample 24/53
17/2/2017 JavaScriptBootstrap
$('#element').tooltip('destroy')
Events
EventType Description
shown.bs.tooltip Thiseventisfiredwhenthetooltiphasbeenmadevisibletotheuser(willwaitforCSStransitionstocomplete).
hidden.bs.tooltip Thiseventisfiredwhenthetooltiphasfinishedbeinghiddenfromtheuser(willwaitforCSStransitionstocomplete).
$('#myTooltip').on('hidden.bs.tooltip',function(){
//dosomething
})
Popoverspopover.js
Addsmalloverlaysofcontent,likethoseontheiPad,toanyelementforhousingsecondaryinformation.
Popoverswhosebothtitleandcontentarezerolengthareneverdisplayed.
Plugindependency
PopoversrequirethetooltipplugintobeincludedinyourversionofBootstrap.
Optinfunctionality
Forperformancereasons,theTooltipandPopoverdataapisareoptin,meaningyoumustinitializethemyourself.
http://getbootstrap.com/javascript/#collapseexample 25/53
17/2/2017 JavaScriptBootstrap
$(function(){
$('[datatoggle="popover"]').popover()
})
Popoversinbuttongroups,inputgroups,andtablesrequirespecialsetting
Whenusingpopoversonelementswithina .btngroup oran .inputgroup ,orontablerelatedelements( <td> , <th> , <tr> , <thead> , <tbody> , <tfoot> ),you'llhave
tospecifytheoption container:'body' (documentedbelow)toavoidunwantedsideeffects(suchastheelementgrowingwiderand/orlosingitsroundedcornerswhenthe
popoveristriggered).
Don'ttrytoshowpopoversonhiddenelements
Invoking $(...).popover('show') whenthetargetelementis display:none; willcausethepopovertobeincorrectlypositioned.
Popoversondisabledelementsrequirewrapperelements
Toaddapopovertoa disabled or .disabled element,puttheelementinsideofa <div> andapplythepopovertothat <div> instead.
Multiplelinelinks
Sometimesyouwanttoaddapopovertoahyperlinkthatwrapsmultiplelines.Thedefaultbehaviorofthepopoverpluginistocenterithorizontallyandvertically.Add
whitespace:nowrap; toyouranchorstoavoidthis.
Examples
Staticpopover
Fouroptionsareavailable:top,right,bottom,andleftaligned.
EXA MPLE
Popoverleft
Sedposuereconsecteturestat
lobortis.Aeneaneuleoquam.
Pellentesqueornaresemlacinia
quamvenenatisvestibulum.
Livedemo
EXA MPLE
Clicktotogglepopover
<buttontype="button"class="btnbtnlgbtndanger"datatoggle="popover"title="Popovertitle"datacontent="Andhere'ssomeamazingcontent.It'svery
engaging.Right?">Clicktotogglepopover</button>
Fourdirections
EXA MPLE
http://getbootstrap.com/javascript/#collapseexample 27/53
17/2/2017 JavaScriptBootstrap
<buttontype="button"class="btnbtndefault"datacontainer="body"datatoggle="popover"dataplacement="left"datacontent="Vivamussagittislacusvel
auguelaoreetrutrumfaucibus.">
Popoveronleft
</button>
<buttontype="button"class="btnbtndefault"datacontainer="body"datatoggle="popover"dataplacement="top"datacontent="Vivamussagittislacusvel
auguelaoreetrutrumfaucibus.">
Popoverontop
</button>
<buttontype="button"class="btnbtndefault"datacontainer="body"datatoggle="popover"dataplacement="bottom"datacontent="Vivamus
sagittislacusvelauguelaoreetrutrumfaucibus.">
Popoveronbottom
</button>
<buttontype="button"class="btnbtndefault"datacontainer="body"datatoggle="popover"dataplacement="right"datacontent="Vivamussagittislacusvel
auguelaoreetrutrumfaucibus.">
Popoveronright
</button>
Dismissonnextclick
Usethe focus triggertodismisspopoversonthenextclickthattheusermakes.
Specificmarkuprequiredfordismissonnextclick
Forpropercrossbrowserandcrossplatformbehavior,youmustusethe <a> tag,notthe <button> tag,andyoualsomustincludethe role="button" and tabindex
attributes.
EXA MPLE
Dismissiblepopover
<atabindex="0"class="btnbtnlgbtndanger"role="button"datatoggle="popover"datatrigger="focus"title="Dismissiblepopover"datacontent="And
here'ssomeamazingcontent.It'sveryengaging.Right?">Dismissiblepopover</a>
Usage
EnablepopoversviaJavaScript:
$('#example').popover(options)
http://getbootstrap.com/javascript/#collapseexample 28/53
17/2/2017 JavaScriptBootstrap
Options
OptionscanbepassedviadataattributesorJavaScript.Fordataattributes,appendtheoptionnameto data ,asin dataanimation="" .
Objectstructureis: delay:{"show":500,"hide":100}
Whenafunctionisusedtodeterminetheplacement,itiscalledwiththepopoverDOMnodeasitsfirstargumentandthe
triggeringelementDOMnodeasitssecond.The this contextissettothepopoverinstance.
http://getbootstrap.com/javascript/#collapseexample 29/53
17/2/2017 JavaScriptBootstrap
Dataattributesforindividualpopovers
Optionsforindividualpopoverscanalternativelybespecifiedthroughtheuseofdataattributes,asexplainedabove.
Methods
$().popover(options)
Initializespopoversforanelementcollection.
.popover('show')
Revealsanelement'spopover.Returnstothecallerbeforethepopoverhasactuallybeenshown(i.e.beforethe shown.bs.popover eventoccurs).Thisisconsidereda
"manual"triggeringofthepopover.Popoverswhosebothtitleandcontentarezerolengthareneverdisplayed.
http://getbootstrap.com/javascript/#collapseexample 30/53
17/2/2017 JavaScriptBootstrap
$('#element').popover('show')
.popover('hide')
Hidesanelement'spopover.Returnstothecallerbeforethepopoverhasactuallybeenhidden(i.e.beforethe hidden.bs.popover eventoccurs).Thisisconsidereda
"manual"triggeringofthepopover.
$('#element').popover('hide')
.popover('toggle')
Togglesanelement'spopover.Returnstothecallerbeforethepopoverhasactuallybeenshownorhidden(i.e.beforethe shown.bs.popover or hidden.bs.popover event
occurs).Thisisconsidereda"manual"triggeringofthepopover.
$('#element').popover('toggle')
.popover('destroy')
Hidesanddestroysanelement'spopover.Popoversthatusedelegation(whicharecreatedusingthe selector option)cannotbeindividuallydestroyedondescendanttrigger
elements.
$('#element').popover('destroy')
Events
EventType Description
shown.bs.popover Thiseventisfiredwhenthepopoverhasbeenmadevisibletotheuser(willwaitforCSStransitionstocomplete).
hidden.bs.popover Thiseventisfiredwhenthepopoverhasfinishedbeinghiddenfromtheuser(willwaitforCSStransitionstocomplete).
$('#myPopover').on('hidden.bs.popover',function(){
//dosomething
})
http://getbootstrap.com/javascript/#collapseexample 31/53
17/2/2017 JavaScriptBootstrap
Alertmessagesalert.js
Examplealerts
Adddismissfunctionalitytoallalertmessageswiththisplugin.
EXA MPLE
Holyguacamole!Bestcheckyoself,you'renotlookingtoogood.
Ohsnap!Yougotanerror!
Changethisandthatandtryagain.Duismollis,estnoncommodoluctus,nisieratporttitorligula,egetlaciniaodiosemnecelit.Crasmattisconsecteturpurussitamet
fermentum.
Takethisaction Ordothis
Usage
Justadd datadismiss="alert" toyourclosebuttontoautomaticallygiveanalertclosefunctionality.ClosinganalertremovesitfromtheDOM.
<buttontype="button"class="close"datadismiss="alert"arialabel="Close">
<spanariahidden="true">×</span>
</button>
Methods
$().alert()
Makesanalertlistenforclickeventsondescendantelementswhichhavethe datadismiss="alert" attribute.(Notnecessarywhenusingthedataapi'sautoinitialization.)
$().alert('close')
ClosesanalertbyremovingitfromtheDOM.Ifthe .fade and .in classesarepresentontheelement,thealertwillfadeoutbeforeitisremoved.
Events
http://getbootstrap.com/javascript/#collapseexample 32/53
17/2/2017 JavaScriptBootstrap
Bootstrap'salertpluginexposesafeweventsforhookingintoalertfunctionality.
EventType Description
closed.bs.alert Thiseventisfiredwhenthealerthasbeenclosed(willwaitforCSStransitionstocomplete).
$('#myAlert').on('closed.bs.alert',function(){
//dosomething
})
Buttonsbutton.js
Domorewithbuttons.Controlbuttonstatesorcreategroupsofbuttonsformorecomponentsliketoolbars.
Crossbrowsercompatibility
Firefoxpersistsformcontrolstates(disablednessandcheckedness)acrosspageloads.Aworkaroundforthisistouse autocomplete="off" .SeeMozillabug#654072.
Stateful
Add dataloadingtext="Loading..." tousealoadingstateonabutton.
Thisfeatureisdeprecatedsincev3.3.5andhasbeenremovedinv4.
Usewhicheverstateyoulike!
Forthesakeofthisdemonstration,weareusing dataloadingtext and $().button('loading') ,butthat'snottheonlystateyoucanuse.Seemoreonthisbelowinthe
$().button(string) documentation.
EXA MPLE
Loadingstate
http://getbootstrap.com/javascript/#collapseexample 33/53
17/2/2017 JavaScriptBootstrap
<buttontype="button"id="myButton"dataloadingtext="Loading..."class="btnbtnprimary"autocomplete="off">
Loadingstate
</button>
<script>
$('#myButton').on('click',function(){
var$btn=$(this).button('loading')
//businesslogic...
$btn.button('reset')
})
</script>
Singletoggle
Add datatoggle="button" toactivatetogglingonasinglebutton.
EXA MPLE
Singletoggle
<buttontype="button"class="btnbtnprimary"datatoggle="button"ariapressed="false"autocomplete="off">
Singletoggle
</button>
Checkbox/Radio
Add datatoggle="buttons" toa .btngroup containingcheckboxorradioinputstoenabletogglingintheirrespectivestyles.
Preselectedoptionsneed .active
Forpreselectedoptions,youmustaddthe .active classtotheinput's label yourself.
Visualcheckedstateonlyupdatedonclick
http://getbootstrap.com/javascript/#collapseexample 34/53
17/2/2017 JavaScriptBootstrap
EXA MPLE
<divclass="btngroup"datatoggle="buttons">
<labelclass="btnbtnprimaryactive">
<inputtype="checkbox"autocomplete="off"checked>Checkbox1(prechecked)
</label>
<labelclass="btnbtnprimary">
<inputtype="checkbox"autocomplete="off">Checkbox2
</label>
<labelclass="btnbtnprimary">
<inputtype="checkbox"autocomplete="off">Checkbox3
</label>
</div>
EXA MPLE
<divclass="btngroup"datatoggle="buttons">
<labelclass="btnbtnprimaryactive">
<inputtype="radio"name="options"id="option1"autocomplete="off"checked>Radio1(preselected)
</label>
<labelclass="btnbtnprimary">
<inputtype="radio"name="options"id="option2"autocomplete="off">Radio2
</label>
<labelclass="btnbtnprimary">
<inputtype="radio"name="options"id="option3"autocomplete="off">Radio3
</label>
</div>
Methods
$().button('toggle')
Togglespushstate.Givesthebuttontheappearancethatithasbeenactivated.
$().button('reset')
http://getbootstrap.com/javascript/#collapseexample 35/53
17/2/2017 JavaScriptBootstrap
$().button('reset')
Resetsbuttonstateswapstexttooriginaltext.Thismethodisasynchronousandreturnsbeforetheresettinghasactuallycompleted.
$().button(string)
Swapstexttoanydatadefinedtextstate.
<buttontype="button"id="myStateButton"datacompletetext="finished!"class="btnbtnprimary"autocomplete="off">
...
</button>
<script>
$('#myStateButton').on('click',function(){
$(this).button('complete')//buttontextwillbe"finished!"
})
</script>
Collapsecollapse.js
Flexiblepluginthatutilizesahandfulofclassesforeasytogglebehavior.
Plugindependency
CollapserequiresthetransitionsplugintobeincludedinyourversionofBootstrap.
Example
Clickthebuttonsbelowtoshowandhideanotherelementviaclasschanges:
.collapse hidescontent
.collapsing isappliedduringtransitions
.collapse.in showscontent
EXA MPLE
Linkwithhref Buttonwithdatatarget
http://getbootstrap.com/javascript/#collapseexample 36/53
17/2/2017 JavaScriptBootstrap
<aclass="btnbtnprimary"role="button"datatoggle="collapse"href="#collapseExample"ariaexpanded="false"ariacontrols="collapseExample">
Linkwithhref
</a>
<buttonclass="btnbtnprimary"type="button"datatoggle="collapse"datatarget="#collapseExample"ariaexpanded="false"aria
controls="collapseExample">
Buttonwithdatatarget
</button>
<divclass="collapse"id="collapseExample">
<divclass="well">
...
</div>
</div>
Accordionexample
Extendthedefaultcollapsebehaviortocreateanaccordionwiththepanelcomponent.
EXA MPLE
CollapsibleGroupItem#1
CollapsibleGroupItem#2
CollapsibleGroupItem#3
http://getbootstrap.com/javascript/#collapseexample 37/53
17/2/2017 JavaScriptBootstrap
<divclass="panelgroup"id="accordion"role="tablist"ariamultiselectable="true">
<divclass="panelpaneldefault">
<divclass="panelheading"role="tab"id="headingOne">
<h4class="paneltitle">
<arole="button"datatoggle="collapse"dataparent="#accordion"href="#collapseOne"ariaexpanded="true"ariacontrols="collapseOne">
CollapsibleGroupItem#1
</a>
</h4>
</div>
<divid="collapseOne"class="panelcollapsecollapsein"role="tabpanel"arialabelledby="headingOne">
<divclass="panelbody">
Animpariaturclichereprehenderit,enimeiusmodhighlifeaccusamusterryrichardsonadsquid.3wolfmoonofficiaaute,noncupidatat
skateboarddolorbrunch.Foodtruckquinoanesciuntlaborumeiusmod.Brunch3wolfmoontempor,suntaliquaputabirdonitsquidsingleorigincoffee
nullaassumendashoreditchet.Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.Adveganexcepteur
butchervicelomo.Leggingsoccaecatcraftbeerfarmtotable,rawdenimaestheticsynthnesciuntyouprobablyhaven'theardofthemaccusamuslabore
sustainableVHS.
</div>
</div>
</div>
<divclass="panelpaneldefault">
<divclass="panelheading"role="tab"id="headingTwo">
<h4class="paneltitle">
<aclass="collapsed"role="button"datatoggle="collapse"dataparent="#accordion"href="#collapseTwo"ariaexpanded="false"aria
controls="collapseTwo">
CollapsibleGroupItem#2
</a>
</h4>
</div>
<divid="collapseTwo"class="panelcollapsecollapse"role="tabpanel"arialabelledby="headingTwo">
<divclass="panelbody">
Animpariaturclichereprehenderit,enimeiusmodhighlifeaccusamusterryrichardsonadsquid.3wolfmoonofficiaaute,noncupidatat
skateboarddolorbrunch.Foodtruckquinoanesciuntlaborumeiusmod.Brunch3wolfmoontempor,suntaliquaputabirdonitsquidsingleorigincoffee
nullaassumendashoreditchet.Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.Adveganexcepteur
butchervicelomo.Leggingsoccaecatcraftbeerfarmtotable,rawdenimaestheticsynthnesciuntyouprobablyhaven'theardofthemaccusamuslabore
sustainableVHS.
</div>
</div>
</div>
<divclass="panelpaneldefault">
<divclass="panelheading"role="tab"id="headingThree">
<h4class="paneltitle">
<aclass="collapsed"role="button"datatoggle="collapse"dataparent="#accordion"href="#collapseThree"ariaexpanded="false"aria
controls="collapseThree">
CollapsibleGroupItem#3
</a>
</h4>
</div>
<divid="collapseThree"class="panelcollapsecollapse"role="tabpanel"arialabelledby="headingThree">
<divclass="panelbody">
http://getbootstrap.com/javascript/#collapseexample 38/53
17/2/2017 JavaScriptBootstrap
<divclass="panelbody">
Animpariaturclichereprehenderit,enimeiusmodhighlifeaccusamusterryrichardsonadsquid.3wolfmoonofficiaaute,noncupidatat
skateboarddolorbrunch.Foodtruckquinoanesciuntlaborumeiusmod.Brunch3wolfmoontempor,suntaliquaputabirdonitsquidsingleorigincoffee
nullaassumendashoreditchet.Nihilanimkeffiyehhelvetica,craftbeerlaborewesandersoncrednesciuntsapienteeaproident.Adveganexcepteur
butchervicelomo.Leggingsoccaecatcraftbeerfarmtotable,rawdenimaestheticsynthnesciuntyouprobablyhaven'theardofthemaccusamuslabore
sustainableVHS.
</div>
</div>
</div>
</div>
Collapsiblelistgroup
Makeexpand/collapsecontrolsaccessible
Besuretoadd ariaexpanded tothecontrolelement.Thisattributeexplicitlydefinesthecurrentstateofthecollapsibleelementtoscreenreadersandsimilarassistive
technologies.Ifthecollapsibleelementisclosedbydefault,itshouldhaveavalueof ariaexpanded="false" .Ifyou'vesetthecollapsibleelementtobeopenbydefault
usingthe in class,set ariaexpanded="true" onthecontrolinstead.Thepluginwillautomaticallytogglethisattributebasedonwhetherornotthecollapsibleelementhas
beenopenedorclosed.
Usage
Thecollapsepluginutilizesafewclassestohandletheheavylifting:
.collapse hidesthecontent
.collapse.in showsthecontent
.collapsing isaddedwhenthetransitionstarts,andremovedwhenitfinishes
Theseclassescanbefoundin componentanimations.less .
Viadataattributes
Justadd datatoggle="collapse" anda datatarget totheelementtoautomaticallyassigncontrolofacollapsibleelement.The datatarget attributeacceptsaCSSselectorto
applythecollapseto.Besuretoaddtheclass collapse tothecollapsibleelement.Ifyou'dlikeittodefaultopen,addtheadditionalclass in .
ViaJavaScript
http://getbootstrap.com/javascript/#collapseexample 39/53
17/2/2017 JavaScriptBootstrap
Enablemanuallywith:
$('.collapse').collapse()
Options
OptionscanbepassedviadataattributesorJavaScript.Fordataattributes,appendtheoptionnameto data ,asin dataparent="" .
Methods
.collapse(options)
Activatesyourcontentasacollapsibleelement.Acceptsanoptionaloptions object .
$('#myCollapsible').collapse({
toggle:false
})
.collapse('toggle')
Togglesacollapsibleelementtoshownorhidden.Returnstothecallerbeforethecollapsibleelementhasactuallybeenshownorhidden(i.e.beforethe
shown.bs.collapse or hidden.bs.collapse eventoccurs).
.collapse('show')
Showsacollapsibleelement.Returnstothecallerbeforethecollapsibleelementhasactuallybeenshown(i.e.beforethe shown.bs.collapse eventoccurs).
.collapse('hide')
Hidesacollapsibleelement.Returnstothecallerbeforethecollapsibleelementhasactuallybeenhidden(i.e.beforethe hidden.bs.collapse eventoccurs).
Events
Bootstrap'scollapseclassexposesafeweventsforhookingintocollapsefunctionality.
EventType Description
http://getbootstrap.com/javascript/#collapseexample 40/53
17/2/2017 JavaScriptBootstrap
EventType Description
shown.bs.collapse Thiseventisfiredwhenacollapseelementhasbeenmadevisibletotheuser(willwaitforCSStransitionstocomplete).
hidden.bs.collapse Thiseventisfiredwhenacollapseelementhasbeenhiddenfromtheuser(willwaitforCSStransitionstocomplete).
$('#myCollapsible').on('hidden.bs.collapse',function(){
//dosomething
})
Carouselcarousel.js
Aslideshowcomponentforcyclingthroughelements,likeacarousel.Nestedcarouselsarenotsupported.
Examples
http://getbootstrap.com/javascript/#collapseexample 41/53
17/2/2017 JavaScriptBootstrap
EXA MPLE
Firstslide
http://getbootstrap.com/javascript/#collapseexample 42/53
17/2/2017 JavaScriptBootstrap
<divid="carouselexamplegeneric"class="carouselslide"dataride="carousel">
<!Indicators>
<olclass="carouselindicators">
<lidatatarget="#carouselexamplegeneric"dataslideto="0"class="active"></li>
<lidatatarget="#carouselexamplegeneric"dataslideto="1"></li>
<lidatatarget="#carouselexamplegeneric"dataslideto="2"></li>
</ol>
<!Wrapperforslides>
<divclass="carouselinner"role="listbox">
<divclass="itemactive">
<imgsrc="..."alt="...">
<divclass="carouselcaption">
...
</div>
</div>
<divclass="item">
<imgsrc="..."alt="...">
<divclass="carouselcaption">
...
</div>
</div>
...
</div>
<!Controls>
<aclass="leftcarouselcontrol"href="#carouselexamplegeneric"role="button"dataslide="prev">
<spanclass="glyphiconglyphiconchevronleft"ariahidden="true"></span>
<spanclass="sronly">Previous</span>
</a>
<aclass="rightcarouselcontrol"href="#carouselexamplegeneric"role="button"dataslide="next">
<spanclass="glyphiconglyphiconchevronright"ariahidden="true"></span>
<spanclass="sronly">Next</span>
</a>
</div>
Accessibilityissue
Thecarouselcomponentisgenerallynotcompliantwithaccessibilitystandards.Ifyouneedtobecompliant,pleaseconsiderotheroptionsforpresentingyourcontent.
TransitionanimationsnotsupportedinInternetExplorer8&9
BootstrapexclusivelyusesCSS3foritsanimations,butInternetExplorer8&9don'tsupportthenecessaryCSSproperties.Thus,therearenoslidetransitionanimations
whenusingthesebrowsers.WehaveintentionallydecidednottoincludejQuerybasedfallbacksforthetransitions.
http://getbootstrap.com/javascript/#collapseexample 43/53
17/2/2017 JavaScriptBootstrap
Initialactiveelementrequired
The .active classneedstobeaddedtooneoftheslides.Otherwise,thecarouselwillnotbevisible.
Glyphiconiconsnotnecessary
The .glyphicon.glyphiconchevronleft and .glyphicon.glyphiconchevronright classesarenotnecessarilyneededforthecontrols.Bootstrapprovides .iconprev
and .iconnext asplainunicodealternatives.
Optionalcaptions
Addcaptionstoyourslideseasilywiththe .carouselcaption elementwithinany .item .PlacejustaboutanyoptionalHTMLwithinthereanditwillbeautomaticallyalignedand
formatted.
EXA MPLE
900x500
Firstslidelabel
Nullavitaeelitlibero,apharetraauguemollisinterdum.
http://getbootstrap.com/javascript/#collapseexample 44/53
17/2/2017 JavaScriptBootstrap
<divclass="item">
<imgsrc="..."alt="...">
<divclass="carouselcaption">
<h3>...</h3>
<p>...</p>
</div>
</div>
Usage
Multiplecarousels
Carouselsrequiretheuseofan id ontheoutermostcontainer(the .carousel )forcarouselcontrolstofunctionproperly.Whenaddingmultiplecarousels,orwhenchanginga
carousel's id ,besuretoupdatetherelevantcontrols.
Viadataattributes
Usedataattributestoeasilycontrolthepositionofthecarousel. dataslide acceptsthekeywords prev or next ,whichalterstheslidepositionrelativetoitscurrentposition.
Alternatively,use dataslideto topassarawslideindextothecarousel dataslideto="2" ,whichshiftstheslidepositiontoaparticularindexbeginningwith 0 .
ViaJavaScript
Callcarouselmanuallywith:
$('.carousel').carousel()
Options
OptionscanbepassedviadataattributesorJavaScript.Fordataattributes,appendtheoptionnameto data ,asin datainterval="" .
pause string|null "hover" Ifsetto "hover" ,pausesthecyclingofthecarouselon mouseenter andresumesthecyclingofthecarouselon mouseleave .Ifsetto
null ,hoveringoverthecarouselwon'tpauseit.
Methods
http://getbootstrap.com/javascript/#collapseexample 45/53
17/2/2017 JavaScriptBootstrap
Methods
.carousel(options)
Initializesthecarouselwithanoptionaloptions object andstartscyclingthroughitems.
$('.carousel').carousel({
interval:2000
})
.carousel('cycle')
Cyclesthroughthecarouselitemsfromlefttoright.
.carousel('pause')
Stopsthecarouselfromcyclingthroughitems.
.carousel(number)
Cyclesthecarouseltoaparticularframe(0based,similartoanarray).
.carousel('prev')
Cyclestothepreviousitem.
.carousel('next')
Cyclestothenextitem.
Events
Bootstrap'scarouselclassexposestwoeventsforhookingintocarouselfunctionality.
Botheventshavethefollowingadditionalproperties:
Allcarouseleventsarefiredatthecarouselitself(i.e.atthe <divclass="carousel"> ).
EventType Description
slid.bs.carousel Thiseventisfiredwhenthecarouselhascompleteditsslidetransition.
$('#myCarousel').on('slide.bs.carousel',function(){
//dosomething
})
http://getbootstrap.com/javascript/#collapseexample 46/53
17/2/2017 JavaScriptBootstrap
Affixaffix.js
Example
Theaffixplugintoggles position:fixed; onandoff,emulatingtheeffectfoundwith position:sticky; .Thesubnavigationontherightisalivedemooftheaffixplugin.
Usage
UsetheaffixpluginviadataattributesormanuallywithyourownJavaScript.Inbothsituations,youmustprovideCSSforthepositioningandwidthofyouraffixedcontent.
Note:Donotusetheaffixpluginonanelementcontainedinarelativelypositionedelement,suchasapulledorpushedcolumn,duetoaSafarirenderingbug.
PositioningviaCSS
Theaffixplugintogglesbetweenthreeclasses,eachrepresentingaparticularstate: .affix , .affixtop ,and .affixbottom .Youmustprovidethestyles,withtheexceptionof
position:fixed; on .affix ,fortheseclassesyourself(independentofthisplugin)tohandletheactualpositions.
Here'showtheaffixpluginworks:
FollowtheabovestepstosetyourCSSforeitheroftheusageoptionsbelow.
Viadataattributes
Toeasilyaddaffixbehaviortoanyelement,justadd dataspy="affix" totheelementyouwanttospyon.Useoffsetstodefinewhentotogglethepinningofanelement.
<divdataspy="affix"dataoffsettop="60"dataoffsetbottom="200">
...
</div>
ViaJavaScript
CalltheaffixpluginviaJavaScript:
http://getbootstrap.com/javascript/#collapseexample 47/53
17/2/2017 JavaScriptBootstrap
$('#myAffix').affix({
offset:{
top:100,
bottom:function(){
return(this.bottom=$('.footer').outerHeight(true))
}
}
})
Options
OptionscanbepassedviadataattributesorJavaScript.Fordataattributes,appendtheoptionnameto data ,asin dataoffsettop="200" .
Methods
.affix(options)
Activatesyourcontentasaffixedcontent.Acceptsanoptionaloptions object .
$('#myAffix').affix({
offset:15
})
.affix('checkPosition')
Recalculatesthestateoftheaffixbasedonthedimensions,position,andscrollpositionoftherelevantelements.The .affix , .affixtop ,and .affixbottom classesareadded
toorremovedfromtheaffixedcontentaccordingtothenewstate.Thismethodneedstobecalledwheneverthedimensionsoftheaffixedcontentorthetargetelementare
changed,toensurecorrectpositioningoftheaffixedcontent.
$('#myAffix').affix('checkPosition')
Events
http://getbootstrap.com/javascript/#collapseexample 48/53
17/2/2017 JavaScriptBootstrap
Bootstrap'saffixpluginexposesafeweventsforhookingintoaffixfunctionality.
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.
Designedandbuiltwithalltheloveintheworldby@mdoand@fat.Maintainedbythecoreteamwiththehelpofourcontributors.
CodelicensedMIT,docsCCBY3.0.
http://getbootstrap.com/javascript/#collapseexample 49/53
17/2/2017 JavaScriptBootstrap
http://getbootstrap.com/javascript/#collapseexample 50/53
17/2/2017 JavaScriptBootstrap
http://getbootstrap.com/javascript/#collapseexample 51/53
17/2/2017 JavaScriptBootstrap
http://getbootstrap.com/javascript/#collapseexample 52/53
17/2/2017 JavaScriptBootstrap
http://getbootstrap.com/javascript/#collapseexample 53/53