打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
bootstrap4 折叠导航栏

通常,小屏幕上我们都会折叠导航栏,通过点击来显示导航选项。

要创建折叠导航栏,可以在按钮上添加 class="navbar-toggler", data-toggle="collapse" 与 data-target="#thetarget" 类。然后在设置了 class="collapse navbar-collapse" 类的 div 上包裹导航内容(链接), div 元素上的 id 匹配按钮 data-target 的上指定的 id:

<nav class="navbar navbar-expand-md bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Navbar</a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">

Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">

Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">

Link</a> </li> </ul> </div> </nav>

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
第二十节,Bootstrap项目实战--响应式导航
实现 Bootstrap 基本布局
bootstrap入门示例
学会Twitter Bootstrap不再难
导航条(一)
前端|BootStrap 布局组件
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服