一些测试表明,移动设备上可折叠菜单的“汉堡包”按钮是用户的谜,我想在“移动视图”中添加“启动”菜单按钮旁边的“菜单”.
为了进一步阅读,请阅读这篇文章:“汉堡包是坏的”:http://mor10.com/hamburger-bad/
这是基本的Bootstrap代码:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <!-- Represents navbar collapsed menu on smaller screens --> <span class="sr-only">Toggle navigation</span> <!-- 3 horizontal lines on small screen nav button --> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
所以,我想在手机上添加图标旁边的“MENU”.我做了一个我正在谈论的模型,但我没有足够的声誉在SO发布.
在这里查看:https://imgur.com/M7hGS7F
> FYI这是一个模型,实际的Bootstrap页面不包含MENU文本,否则我只是来看看.
如果您可以提供有关如何包含的信息,则为(A)只需按钮& (B)作为按钮的一部分,所以它可以被点击,将是非常棒的.提前感谢您的帮助解决方案!
解决方法
我想这将是最好的使用fontawesome.
只需包含对fontawesome的引用(参见http://fortawesome.github.io/Font-Awesome/get-started/),然后使用条形图标(http://fortawesome.github.io/Font-Awesome/icon/bars/)
所以你的代码会看起来很好像那样:
<head> [...] <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> [...] </head> <body> [...] <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <!-- Represents navbar collapsed menu on smaller screens --> <span class="sr-only">Toggle navigation</span> <i class="fa fa-bars" aria-hidden="true"></i> Menu </button>
如果酒吧图标应该更大,只需添加fa-lg或任何其他类可以在http://fortawesome.github.io/Font-Awesome/examples/找到图标