Dropdown:下拉菜单

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

Dropdown,下拉菜单 .. 先给下拉菜单添加一个容器,上面加上 dropdown 这个类 .. 它里面放一个下拉菜单 .. 包装上可以添加一个 dropdown-menu ,在这个包装上添加一个 show 这个类可以显示菜单里的内容 ..

下拉菜单里面可以有个 header,元素上可以添加一个 dropdown-header .. 设置一下文字内容 .. Web Language ..

每个菜单项目可以是个链接 .. 项目上添加一个 dropdown-item .. 设置一下文字 .. html .. 复制一份 .. css .. 再复制一份 ... javascript ..

菜单里面可以带一个分隔线 .. 分隔元素上可以添加一个 dropdown-divider ..

在它下面再添加一个菜单项目 .. 项目的文字是 more ..

现在你看到的就是一个下拉菜单里面的这个菜单的样式 .. 再去给它添加一个触发显示的元素 .. 去掉下拉菜单上的这个 show .. 这样它会隐藏起来..

在它上面可以添加一个 button 元素 .. 上面加上 btn.btn-outline-warning 按钮上的文字是 Dropdown

这个元素上可以再添加个小箭头 .. 在元素上再添加一个 dropdown-toggle ..

然后在元素上添加一个 data-toggle 属性,值设置成 dropdown,这样会触发它的行为 ..

按一下这个 Dropdown .. 会显示出下拉菜单里的内容 ..

这个触发显示下拉菜单的元素也可以是个普通的链接 .. 复制一份 .. 把 button 换成 a 标签 ... 添加一个 href 属性 .. 换个按钮的样式 .. btn-success ..

再去试一下 .. 按一下这个绿色的按钮 ... 同样会在它下面显示一个下拉菜单 ...

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

统计

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

社会化网络

关于

微信订阅号

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