Organizing data-[*] attributes in Bootstrap

This article collects and organizes relevant knowledge about the data-[*] attribute in Bootstrap. Friends who are interested can take a look together

[1 data-attribute]

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

The stored (custom) data can be used in the JavaScript of the page.

data-* The attribute consists of two parts:

1. * The attribute name should not contain any uppercase letters, and there must be at least one character after the prefix "data-".

2. * 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 says 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 interactive events, and then used javascript and the HTML DOM tree to operate existing text objects to practice dynamic effects and other interactions.

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.

To put it bluntly, in the past, we had functional requirements first and then implemented them. Now the functions are basically covered for you, the js operation functions have been written, and the css styles have also 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 bootstrap.js can have different parameter values. These parameter values ​​are set according to the attributes you give to the tags. (In fact, js plug-ins now basically use this routine) The class="xxx" attribute of the

tag is mainly used to use bootstrap's css style and as a class name identifier for an identifiable 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） -->
<p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <p class="modal-dialog">
  <p class="modal-content">
   <p class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
     ×
    </button>
    code。。。
   </p>
  </p><!-- /.modal-content -->
 </p><!-- /.modal -->
</p>

2 data-dismiss

is commonly used in modal windows to close modal windows data-dismiss=”modal”

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

data-slide-to、data-slide、data -ride is used for carousel carousel.

Attribute data-slide accepts the keyword prev or next, which is used 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 will start counting from 0.

data-ride="carousel" attribute is used to mark the carousel to start animation playback when the page is loaded

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed examples of interaction between Servlet3.0 and pure javascript through Ajax

JQuery replacement of node elements Operation method

Detailed tutorial on using Angular CLI to generate Angular 5 projects

##

The above is the detailed content of Organizing data-[*] attributes in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!