Bootstrap中的data-target和data-toggle实现组件隐藏/显示

data-target和data-toggle介绍

在学习bootstrap框架时候，相信大家在前端设计时候也都有遇到data-target和data-toggle，这是我们在隐藏组件和展开组件最常用的，现在做前端时候用到这个属性，分享给大家希望有所帮助，具体详情请参https://www.bootcss.com/ Bootstrap中文网。

data-toggle介绍

data-toggle主要事做事件绑定的，表以什么事件触发，如modal,popover,tooltips,collapse等；

1. modal： ，表示模态框也就是我们平时见得到的弹出框等；
2. popover： 弹出框,如需激活弹出框，用户只需把鼠标悬停在元素上即可；
3. tooltips： 提示工具插件根据需求生成内容和标记；
4. collapse： 表示需要显示或隐藏的组件，点击事件后会在显示和隐藏之间切换，非常好用；
5. **tag:**标签页.

data-target介绍

data-target表示事件触发的目标，可以是class也可以是id(其他还没做测试)

使用示例

使用方式都大同小异，这里主要介绍一种。前提是需要先导入boostrap的样式文件。
目标对象：先定义隐藏的，这个可以自定义

按钮触发对象：

指定位置图

总结

在Bootstrap中使用组件隐藏和显示最常用的，其他data-toggle属性的使用方式一样。在class 中加入 .collapse 会让组件默认隐藏。
具体详情请参考https://www.bootcss.com/ Bootstrap中文网