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.
The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. The target attribute defines a name of, or keyword for, a browsing context (e.g. tab, window, or inline frame).
The information subject to a given process, typically including most or all information on a piece of storage media.
The "data-target" attribute is a custom HTML data attribute used by bootstrap, it can help take the use of specific classes and ID's away from your JS. I had a read of this a while back when I first came across them myself :) here is the link.
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-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
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