在移动的设备上,Bootstrap 3默认情况下会将导航栏(navbar)缩小为一个汉堡图标。当点击汉堡时,JavaScript会切换导航菜单项的显示--展开或折叠导航栏。但是
如何在不需要JavaScript的情况下切换 Bootstrap 移动的导航栏的折叠/展开?
如果这是可能的,它将具有很好的性能优势:用户已经可以在JavaScript执行之前导航了(这对脆弱的移动的连接是一个很好的加分点),并且较小的项目可能能够完全放弃对jQuery + bootstrap javascript的依赖,节省了大约45 k的第一个页面加载。2另外,网站在JS错误的情况下变得更加健壮--至少页面导航仍然可用。
或者,可以对导航栏执行re-implement the bootstrap JS without jQuery dependency- done here。
以下是static navbar top示例在移动的模式下的外观,以供参考:
1条答案
按热度按时间pqwbnv8z1#
是的,有可能!
在不使用JavaScript的情况下切换BS 3移动的导航栏
1.创建包含导航栏状态的隐藏复选框(如果选中则展开)
1.将导航栏
button
更改为label
以用于此不可见复选框1.使用CSS General Sibling Selector切换导航栏的显示.
如何在没有JavaScript的情况下更改CSS属性之前在SO上讨论过,并且那里显示了1的原理。应用这个 Bootstrap 很简单。
试用**Live demo**(得益于rawgit)或在flexponsive上查看其生产情况
完整的演示可以在Github项目bs3-navbar-collapse-without-javascript上找到。
浏览器支持
限制
详细步骤
首先,您需要添加自定义CSS:
然后按如下所示更改导航栏HTML: