What is the `data-target` attribute in Bootstrap 3?

twitter-bootstrap-3

Solution

`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.

Modal Example Code from BS3:

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  [...]
</div>

In this example, the button has `data-target="#myModal"`, if you click on it, `<div id="myModal">...</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: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

Problem

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.

Original source