Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the data attributes in bootstrap". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the data attributes in bootstrap".

In bootstrap, data means to define custom attributes. Custom attributes usually start with "data-". The application of data attributes allows HTML tags to implicitly attach some data, and Javascript can read and write these attribute data.

Operating environment of this tutorial: Windows10 system, bootstrap3.3.7 version, DELL G3 computer

What is the meaning of data in bootstrap

[1 data- attribute]

The data property is a new property of HTML5. Allow developers to freely add attributes to their tags and store data, which usually starts with "data-".

The stored (custom) data can be accessed and utilized by the JavaScript of the page.

The data-* property consists of 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, so that HTML tags can implicitly attach some data, and Javascript can read / write these attribute data, and then can make corresponding actions and events.

[2 data attribute in Bootstrap]

There is a section on the official website that says you can use all Bootstrap plug-ins simply through the data attribute API without having to write a single line of JavaScript code. This is the first-class API in Bootstrap, and it should be your first choice.

In the past, when we used native javascrpt, we first determined the front-end style layout and the required interactive events, and then used Javascript and HTML's DOM tree to manipulate existing text objects to achieve dynamic effects and other interactions.

Later, facebook found that many basic web effects are more commonly used and frequently used, such as drop-down menus, folding, modal boxes, and so on. Why not extract these commonly used models into a set of standard models, and then work out the rules for use, and use them directly according to these rules, thus giving birth to Bootstrap.

To put it simply, in the past, there were functional requirements before they were realized. Now that the functions are basically overwritten for you, the js-related 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 diversified, the functions in Bootstrap.js can have different parameter values, which are set according to the attributes you give to the tag. (in fact, js plug-ins basically follow this routine nowadays, as do all kinds of Java class libraries.)

The class= "xxx" attribute of the tag, which is mainly used to use bootstrap's css style

And the identification of the class name as a recognizable object.

The data- [xx] = "yy" attribute of the tag is mainly used to use and invoke bootstrap components and plug-ins, even if bootstrap.js is used to achieve some interactions.

[3 Bootstrap common data attributes]

1 data-toggle

Data-toggle refers to the type of event to trigger, which is commonly used as follows.

Data-toggle= "dropdown" / / drop-down menu data-toggle= "model" / / modal box event data-toggle= "tooltip" / / prompt box event data-toggle= "tab" / / tab data-toggle= "collapse" / / collapse data-toggle= "popover" / / pop-up box data-toggle= "button" / / button event

A general event acts on a tag object, and if it is another tag object, you need to use data-target to refer to the tag target of the event. So data-loggle and data-target are sometimes used together. As follows

Start demonstrating modal box × code.

2 data-dismiss

It is common to close the modal window data-dismiss= "modal" in the modal window

3 data-slide-to 、 data-slide 、 data-ride

Data-slide-to, data-slide and data-ride are used for carousel graph carousel.

Thank you for your reading, these are the contents of "what are the data attributes in bootstrap". After the study of this article, I believe you have a deeper understanding of what the data attributes in bootstrap have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.