在移动视图上添加文本提示到Bootstrap导航栏切换按钮 [英] Add Text Hint to Bootstrap Navbar Toggle Button on Mobile-View
问题描述
如需进一步阅读，请查阅本文：'汉堡对您不好'： http： 以下是基本的Bootstrap代码： 所以，我想在手机图标旁添加MENU一词。我做了一个我正在谈论的模型，但是我没有足够高的声望发布它。 在这里查看： https://imgur.com/M7hGS7F 如果你可以提供关于如何包括的信息（A）仅仅是按钮旁边的文本& （B）作为按钮的一部分，所以它可以被点击，这将是非常棒的。提前感谢您对此解决方案的帮助！ 我想这将是最好的使用fontawesome。 仅包含对fontawesome的引用（请参阅 http ：//fortawesome.github.io/Font-Awesome/get-started/ ），然后使用酒吧图标（ http://fortawesome.github.io/Font-Awesome/icon/bars/ ）
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse>
<！ - 代表较小屏幕上的导航栏折叠菜单 - >
< span class =sr-only>切换导航< / span>
<！ - 小屏幕上的3条水平导航导航按钮 - >
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< / button>
< head>
[...]
< link href =// netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css =stylesheet >
[...]
< / head>
< body>
[...]
<！ - 代表较小屏幕上的导航栏折叠菜单 - >
< span class =sr-only>切换导航< / span>
< i class =fa fa-barsaria-hidden =true>< / i>菜单
< / button>
如果Bars图标应该更大，只需添加 fa-lg 或其他任何可以在 http：//fortawesome.github上找到的类。 io / Font-Awesome / examples / 到图标
Some tests have shown that the "hamburger" button for collapsable menus on mobile devices are mysteries to users and I would like to add the word "Menu" next to my Bootstrap menu button as seen in mobile-view.
For further reading check out this article: 'The Hamburger is Bad for You': http://mor10.com/hamburger-bad/
Here is the basic Bootstrap Code:
<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>
So, I'd like to add the word "MENU" next to the icon on mobile. I made a mockup of what I'm talking about but I don't have a high enough reputation on SO to post it.
Check it out here: https://imgur.com/M7hGS7F
- FYI this is a mockup, the actual Bootstrap page does not contain the MENU text or else I'd just look at the source.
If you could provide info on how to include is as (A) simply text next to the button & (B) as part of the button so it could be clicked that'd be awesome. Thanks in advance for your help with this solution!
I guess it would be the best to use fontawesome.
simply include the references to fontawesome (see http://fortawesome.github.io/Font-Awesome/get-started/) and then use the bars icon (http://fortawesome.github.io/Font-Awesome/icon/bars/)
So your code would look sth. like that:
<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>
If the Bars icon should be bigger, simply add fa-lg or any other class which can be found at http://fortawesome.github.io/Font-Awesome/examples/ to the icon
这篇关于在移动视图上添加文本提示到Bootstrap导航栏切换按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
