Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 205
darkomen Avatar asked Feb 21 '14 20:02

darkomen


People also ask

What is a target attribute?

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

What does data-Target mean?

The information subject to a given process, typically including most or all information on a piece of storage media.

What is data-target in anchor tag?

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.

What is data toggle attribute in bootstrap?

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.


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

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

like image 159
Pascalmh Avatar answered Sep 18 '22 08:09

Pascalmh