Dropdown:分离式下拉菜单

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

我们可以把这个触发显示下拉菜单的元素分离成两个部分 .. 点击文字可以去做它自己的事情,执行一些动作或者链接到某个地方 .. 然后让右边这个小箭头可以触发显示下拉菜单 ..

这里我们让这个 a 标签作为文字部分 .. 把它放在上面 .. 然后去掉它上面的 dropdown-toggle ,因为它不需要小箭头 . data-toggle 属性也可以去掉 .. 因为它不会触发显示下拉菜单 .. 它现在只是一个普通的链接按钮 ..

下面这个 button 元素的样式,可以换成跟 a 元素一样的样式 .. 都用一下 btn-success .. 然后在它上面,再添加一个 dropdown-toggle-split

它里面的文字可以隐藏起来 .. 用一组 span 标签,上面加上 sr-only ,表示 screen reader only ,用它包装的文字不会显示在界面上 .. 这个文字也可以换一下 .. Toggle Dropdown

最后让这两个链接合到一块儿,可以把它们的这个包装上的类,换成 btn-group ..

现在界面上会显示一个分离式的下拉菜单 .. 文字部分可以做它自己的事情 ... 按一下它旁边的小箭头 .. 可以触发显示下拉菜单 ....

Dropdown:分离式下拉菜单《 Bootstrap 4:界面组件 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点