What is the `data-target` attribute in Bootstrap 3?
Matthew Barrera
Can you tell me what is the system or behavior behind the data-target attribute used by Bootstrap 3?
I know that data-toggle used to aim API JavaScript of Bootstrap of graphical functionality.
2 Answers
data-target is used by bootstrap to make your life easier. You (mostly) do not need to write a single line of Javascript to use their pre-made JavaScript components.
The data-target attribute should contain a CSS selector that points to the HTML Element that will be changed.
<!-- Button trigger modal -->
<button> Launch demo modal
</button>
<!-- Modal -->
<div tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true"> [...]
</div>In this example, the button has data-target="#myModal", if you click on it, <div>...</div> will be modified (in this case faded in).
This happens because #myModal in CSS selectors points to elements that have an id attribute with the myModal value.
Further information about the HTML5 "data-" attribute:
2The 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.