What does data in bootstrap mean?

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

The operating environment of this tutorial: Windows 10 system, bootstrap version 3.3.7, DELL G3 computer

What does data in bootstrap mean

【1 data-attribute】

The data attribute is a new attribute of HTML5. Developers are allowed to freely add attributes to their tags and store data. Such custom attributes generally start with "data-".

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

data-* The attribute consists of two parts:

• * The attribute name should not contain any uppercase letters, and there must be 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 you can do Produce corresponding actions and events.

[2 Data attributes in Bootstrap]

There is an introduction on the official website that you can use all Bootstrap plug-ins 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 first choice.

In the past, when we used native javascrpt, we first determined the front-end style layout and required interactive events, and then used Javascript and HTML DOM trees to operate existing text objects to achieve dynamic effects, etc. Interaction.

Later Facebook discovered 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 ones into a set of standard models, and then formulate usage rules. When using, just use them directly according to these rules, and thus Bootstrap was born.

In other words, in the past, we had functional requirements first and then implemented them. Now the functions are basically covered and written for you. The js related operation functions have been written, and the css style has also been written. If you want to use it, just call it directly according to its rules. Then in order to be more diverse, the functions in Bootstrap.js can have different parameter values. These parameter values ​​​​are set according to the attributes you give to the tags. (In fact, now js plug-ins basically follow this routine, as do various Java class libraries) The class="xxx" attribute of the

tag is mainly used to use bootstrap's css style,

and Identified as a class name of an identifiable object object. The data-[xx]="yy" attribute of the

tag is mainly used to use and call bootstrap components and plug-ins, that is, using bootstrap.js to achieve some interactive effects.

[3 Bootstrap common data attributes]

1 data-toggle

data-toggle refers to what event type is triggered, the commonly used ones are as follows.

data-toggle="dropdown"//下拉菜单
data-toggle="model" //模态框事件
data-toggle="tooltip"//提示框事件
data-toggle="tab"//标签页
data-toggle="collapse"//折叠
data-toggle="popover"//弹出框
data-toggle="button"//按钮事件

General events will affect a label object. If it is another label object, you need to use data-target to refer to the label 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">
    开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" 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">
                    &times;
                </button>
                code。。。
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

2 data-dismiss

Commonly used in modal windows to close the modal window data-dismiss="modal"

3 data-slide- to, data-slide, data-ride

data-slide-to, data-slide, data-ride are used for carousel carousel.

Related recommendations: bootstrap tutorial

The above is the detailed content of What does data in bootstrap mean?. For more information, please follow other related articles on the PHP Chinese website!