Menu
I've been searching the web about the data attributes in bootstrap, like data-toggle, data-trigger, data-ride.... but I can't seem to find a list about all of them.
I'm also wondering what are the possible values for them, for example: data-trigger="focus". Instead of focus, it could be hover, and many others. Where can I find a list about all of them? Thanks!
686
HTML | data-* Attributes It is used to store custom data in private to the page or application. There are mainly 2 parts of the Data Attributes: Attribute Name: Must be at least one character long, contain no capital letters and be prefixed with 'data-'. Attribute Value: Can be any string.
The data-toggle is an HTML-5 data attribute defined in Bootstrap. The advantage of using this is that, you can select a class or an id and hook up the element with a particular widget.
data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM.
The toggle tells Bootstrap what to do and the target tells Bootstrap which element is going to open. So whenever a link like that is clicked, a modal with an id of “basicModal” will appear.
The reference is based on the data exists in the bootstrap 3 manual page, divided by the different modules.
data-toggle="modal" - Triggers click to open a modal dialog referenced by data-target="element"
data-target="target-element" - The element that the modal should open (can be #id or .class)data-dismiss="modal" - Triggers close of the modal on click
data-toggle="dropdown" - Triggers click to open a drop-downdata-target="#" - Only exists to help when use the dropdown on link to prevent url change
data-spy="scroll" - Triggers the SpyScroll on the element (usually goes to <body>data-target="target-element" - The element that the scroll-spy should by applied todata-offset="X" - X represents the number of pixels from top when calculating position of scroll
data-toggle="tab" - Triggers click to open the relevant tab referenced by data-target="element"data-toggle="pill" - Same as tab but for pill-stylingdata-target="target-element" - The element that the modal should open (can be #id or .class)
Note that it's also possible to use
href="#target-element-id"and not onlydata-targethere
data-toggle="tooltip" - Triggers adding a tooltip to the element
The tooltip has many data attributes, so this is only the list of all of them with the available values. Complete explanation of all of them is in this link.
data-animationdata-containerdata-delaydata-htmldata-placementdata-selectordata-templatedata-titledata-triggerdata-viewport
data-toggle="popover" - Triggers click to open a popover
The popovers has many data attributes, so this is only the list of all of them with the available values. Complete explanation of all of them is in this link.
data-animationdata-containerdata-contentdata-delaydata-htmldata-placementdata-selectordata-templatedata-titledata-triggerdata-viewport
data-dismiss="alert" - Triggers click to close the alert box created by bootstrap
data-loading-text="Loading..." - Show a text while loading (note that it's deprecated)data-toggle="button" - note the singular Makes a button single toggle-button
data-toggle="buttons" - note the plural Makes a group of buttons a toggle-buttonsdata-complete-text="Finished" - Text to change on button when the method complete is called
data-toggle="collapse" - Triggers click to collapse the referenced elementdata-target="element" - The referenced elementdata-parent="element" - The parent element, used for accordion-style collapsing
data-ride="carousel" - Triggers a slide-show (carousel) on the containerdata-target="element" - The referenced carousel element that this element is part ofdata-slide-to="X" - X is the number of the next slidedata-slide="prev|next" - Triggers click to toggle the carousel to the prev|next slidedata-interval="X" - The amount of time to delay between automatically cycling an itemdata-pause="hover" - Pause the cycling on mouse overdata-wrap="true" - Whether the carousel should cycle continuously or have hard stopsdata-keyboard="true" - Whether the carousel should react to keyboard events
data-spy="affix" - Triggers affix (emulating the sticky positioning effect)data-offset-top="X" - Number of pixels to offset the element from topdata-offset-bottom="X" - Number of pixels to offset the element from bottom
102
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
