twitter-bootstrap 将文本提示添加到移动视图上的 Bootstrap 导航栏切换按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23744914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add Text Hint to Bootstrap Navbar Toggle Button on Mobile-View
提问by sinisterOrange
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.
一些测试表明，移动设备上可折叠菜单的“汉堡包”按钮对用户来说是个谜，我想在移动视图中看到的 Bootstrap 菜单按钮旁边添加“菜单”这个词。
For further reading check out this article: 'The Hamburger is Bad for You': http://mor10.com/hamburger-bad/
如需进一步阅读，请查看这篇文章：“汉堡包对你有害”：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.
因此，我想在移动设备上的图标旁边添加“菜单”一词。我制作了我正在谈论的内容的模型，但我在 SO 上没有足够的声誉来发布它。
Check it out here: https://imgur.com/M7hGS7F
在这里查看：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.
- 仅供参考，这是一个模型，实际的 Bootstrap 页面不包含 MENU 文本，否则我只会查看源代码。
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!
如果您可以提供有关如何包含的信息，则为 (A) 按钮旁边的简单文本 & (B) 作为按钮的一部分，这样就可以单击它，那就太棒了。预先感谢您对此解决方案的帮助！
采纳答案by nozzleman
I guess it would be the best to use fontawesome.
我想最好使用 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/)
只需包含对 fontawesome 的引用（参见http://fortawesome.github.io/Font-Awesome/get-started/），然后使用条形图标（http://fortawesome.github.io/Font-Awesome/icon/条/)
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-lgor any other class which can be found at http://fortawesome.github.io/Font-Awesome/examples/to the icon
如果 Bars 图标应该更大，只需将http://fortawesome.github.io/Font-Awesome/examples/中的fa-lg任何其他类添加到图标
回答by Alvaro
Another just css solution:
另一个只是 css 解决方案：
.navbar-toggle:before {
content:"Menu";
left:-50px;
top:4px;
position:absolute;
width:50px;
}
回答by Mohammad Dayeh
HTML
HTML
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="button-label">Menu</span>
<div class="button-bars">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</button>
CSS
CSS
.navbar-toggle .button-label {
display: inline-block;
float: left;
font-weight: bold;
line-height: 14px;
padding-right: 10px;
}
.button-bars {
display: inline-block;
float: left;
}
回答by yacuzo
I had the same problem, but didn't feel like adding fontawesome.
我遇到了同样的问题，但不想添加 fontawesome。
Here is my solution (HTML and LESS):
这是我的解决方案（HTML 和 LESS）：
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="button-label">Meny</span>
<div class="button-hamburger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</button>
LESS:
较少的：
button {
.button-label {
display: table-cell;
vertical-align: middle;
font-weight: 700;
padding-right: 3px;
}
.button-hamburger {
display: table-cell;
padding: 8px;
border: 1px solid #333;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
.icon-bar {
background: #333;
}
}
}
.navbar-toggle {
border: none;
padding: 0;
}
WARNING: I'v only tested this in lastest Chrome and IE 11. I do not have anything else set up atm.
警告：我只在最新的 Chrome 和 IE 11 中测试过这个。我没有设置其他任何东西。
