您的位置:首页 > Web前端 > BootStrap

关于bootstrap的data-toggle和data-target

2017-08-02 18:28 761 查看
最近在学习关于bootstrap模态框,代码

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Adialog">
<div class="modal fade" role="dialog" tabindex="-1" aria-labelledby="Adialog1" aria-hidden="true" id="Adialog">
<div class="modal-dialog">


尝试着删除data-toggle属性和data-target属性,是的没错,不能实现想要的效果。

已经不止一次遇到data-toggle和data-target了,之前用bootstrap的下拉列表也有

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"  value="button">下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="Menu1"><!--dropdown-menu-right可以使得下拉列表显示在右边,一般不适用-->
<li role="presentation" class="dropdown-header">小写的1-5</li><!--使用header一般在手机比较多,比如微信的联系人-->
<li><a href="#" role="menuitem">1</a></li>
<li><a href="#" role="menuitem">2</a></li>
<li><a href="#" role="menuitem">3</a></li>
<li><a href="#" role="menuitem">4</a></li>
<li><a href="#" role='menuitem'>5</a></li>

查了一下资料,data-toggle指以什么事件触发,常用的如modal,popover,tooltips还有上面贴的代码中的dropdown等,而data-target指事件的目标,可以为id属性或者类等等,

可以参考:http://blog.sina.com.cn/s/blog_c21a857b0102wbvj.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  data-toggle data-target