Bootstrap 中： data-toggle 与 data-target 的作用_buttondata-toggle

作者：花生_TL007 | 2024-02-08 14:27:32

踩

buttondata-toggle

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。


   <button
      type="button"
      class="update-button"
      style="width:70px; height:40px;"
      data-toggle="modal"
      data-target=".update-Dialog"
    > 编辑
   </button>
 
 
 <div class="modal fade update-Dialog">
  ...
 </div>

点击编辑按钮，弹出一个静态框。

如上例子中的 button，Bootstrap 为这个元素都绑定了特定事件，覆盖了这些元素原本的行为，

data-toggle：触发事件的类型，如 modal，popover，tooltips 等

data-target ：事件的作用对象。

以上代码意思：把 class 为 “ update-Dialog ” 的 div 作用为一个 modal（静态框）。

运行效果：

参考：https://blog.csdn.net/yzllz001/article/details/73611442

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/69449