【1 data-properties】
The data attribute is a new attribute in HTML5. Allow developers to freely add attributes to their tags and store data. This custom attribute generally starts with "data-".
The stored (custom) data can be utilized in the page's JavaScript.
The data-* property includes two parts:
- * The attribute name should not contain any uppercase letters and must have at least one character after the prefix "data-".
- * The attribute value can be any string.
To put it bluntly, it is the application of data attributes, which allows HTML tags to implicitly attach some data, and JavaScript can read/write these attribute data, and then make corresponding actions and events.
【2 data attributes in Bootstrap】There is a paragraph on the official website that says that you can use all Bootstrap plugins just through the data attribute API, without writing a line of JavaScript code. This is a first-class API in Bootstrap and should be your preferred method.
In the past, when we used native javascript, we first determined the front-end style layout and interaction events, and then used javascript and HTML DOM trees to operate existing text objects, thereby interning in dynamic effects and other interactions.
Later, Facebook found that many basic web page effects are commonly used and frequently used, such as drop-down menus, folding, modal boxes, etc. Why not extract these commonly used models into a standard model and formulate usage rules, and use them directly according to these rules when using them, so bootstrap was born.
To put it bluntly, in the past, there were functional requirements first and then implemented. Now all the functions are basically covered for you, the js operation functions have been written, and the css style has been written. If you want to use it, just call it according to its rules. Then in order to be more diverse, the functions in it can have different parameter values, which are set according to the attributes you give to the tag. (In fact, JS plug-ins are basically the same routine now)
The class="xxx" property of the tag is mainly used to use the css style of bootstrap and the class name identification as a recognizable object object.
The data-[xx]="yy" attribute of the tag is mainly used to use and call bootstrap components and plug-ins, even if it is used to achieve some interactive effects.
【3 Common data attributes of Bootstrap】
1 data-toggle data-toggle refers to what type of event is triggered, and the commonly used ones are as follows.
data-toggle="dropdown"//Drop down menudata-toggle="model" //Modal box eventdata-toggle="tooltip"// Prompt box eventdata-toggle="tab"//Tagsdata-toggle="collapse"//folddata-toggle="popover"//Popt-up boxdata-toggle="button"//Button Event
Generally, events will act on a tag object. If it is another tag object, data-target needs to be used to refer to the tag target of the event. So data-loggle and data-target are sometimes used together. as follows
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Start demonstrating modal box
</button>
<!-- Modal Box（Modal） -->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
code。。。
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
2 data-dismiss
Commonly used to close the modal window data-dismiss="modal"
3 data-slide-to、data-slide、data-ride
data-slide-to, data-slide, and data-ride are used for carousel images.
The property data-slide accepts the keyword prev or next to change the position of the slide relative to the current position.
Use data-slide-to to pass a raw sliding index to the carousel. data-slide-to="2" will move the slider to a specific index, and the index counts from 0.
The data-ride="carousel" property is used to mark the carousel that starts animation playback when the page is loaded.
Summarize