bootstrap中导航条data-toggle=collapse与data-target的联动

理想效果:

当浏览器页面大于768px时,导航条最右侧的菜单按钮隐藏

在这里插入图片描述
当浏览器页面小于768px时,可以点击菜单按钮显示、隐藏下拉菜单
在这里插入图片描述
在这里插入图片描述

代码:

其中navbar-toggle效果是隐藏菜单小图标,当屏幕分辨率小于768px时,移除此效果。

data-gottle="collaspse"效果为此元素会与另一个元素联动,联动效果是显示与隐藏。

data-target效果是选中与本元素联动的元素,“引号”内填目标元素的类名或id名,

在这里插入图片描述
data-toggle用于控制隐藏无序列表,data-target用于指定被作用无序列表

data-toggle的其他属性:
在这里插入图片描述


版权声明:本文为weixin_44649210原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。