Bootstrap 3在移动设备上滑动菜单/导航栏 [英] Bootstrap 3 Slide in Menu / Navbar on Mobile

问题描述

我正在建立一个基于浏览器的移动应用程序，我决定使用Bootstrap 3作为设计的CSS框架。 Bootstrap 3在导航栏中提供了一个伟大的响应功能，如果它检测到关于浏览器的分辨率的特定断点，它会自动折叠。它在很多情况下工作。

I am building a browser-based mobile app and I've decided to use Bootstrap 3 as the css framework for the design. Bootstrap 3 comes with a great "responsive" feature in the navigation bar where it collapses automatically if it detects a specific "break point" regarding the resolution of the browser. It works in a lot of situations.

但是你最近注意到很多基于浏览器的移动应用程序的主导航隐藏在屏幕左边，并且当在右上角按下切换图标（切换）时，主导航会向右滑动约2/3的屏幕？这是一个越来越流行的解决方案，用于在移动设备上浏览基于浏览器的应用程序，我认为理论上应该很容易修改bootstrap css / js以适应导航折叠功能的此版本。

But have you noticed lately how a lot of browser-based mobile apps have the primary navigation hidden out of the left of the screen, and when the toggle icon is pressed (toggled) in the top-right corner, the primary navigation slides out to the right about 2/3 of the way into the screen? This is an increasingly popular solution for navigating through browser-based apps on mobile devices and I think in theory it should be pretty easy to modify bootstrap css/js to accommodate this version of the navigation collapse feature.

如何实现这些功能？它似乎不应该采取太多的修改。我真的很想听听你的想法/解决方案。此外，我认为这将是一个伟大的长期解决方案为Bootstrap实现作为一个内置的功能。

How can these feature be implemented? It seems like it shouldn't take too much modification. I'd really like to hear your thoughts/solutions on this matter. Also, I think it would be a great long-term solution for Bootstrap to implement as a built-in feature.

不幸的是我没有做任何尝试创建此功能因为虽然我熟悉这些技术，但我主要是一个PHP / MySQL开发人员，我认为一个有用的功能应该由专家构建，我有没有作为前端开发人员。

Unfortunately I have not made any attempts to create this feature because while I am familiar with these technologies, I am predominantly a PHP/MySQL developer and I believe a feature as useful as this should be built by experts with insight that I don't have as a front-end developer.

推荐答案

有一个流行的Bootstrap fork - Jasny Bootstrap。该fork有开箱即用的各种画布实现（滑入，推，显示）：
http ：//jasny.github.io/bootstrap/javascript/#offcanvas

There is a popular Bootstrap fork - Jasny Bootstrap. The fork has out of the box various off-canvas implementations (slide-in, push, reveal): http://jasny.github.io/bootstrap/javascript/#offcanvas

这篇关于Bootstrap 3在移动设备上滑动菜单/导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！