向移动视图上的引导导航栏切换按钮添加文本提示
Posted
技术标签:
【中文标题】向移动视图上的引导导航栏切换按钮添加文本提示【英文标题】：Add Text Hint to Bootstrap Navbar Toggle Button on Mobile-View 【发布时间】：2014-05-19 18:40:03 【问题描述】：一些测试表明，移动设备上可折叠菜单的“汉堡”按钮对用户来说是个谜，我想在我的 Bootstrap 菜单按钮旁边添加“菜单”一词，如移动视图中所示。
如需进一步阅读，请查看这篇文章：“汉堡对你不利”：http://mor10.com/hamburger-bad/
这是基本的引导代码：
<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 上没有足够高的声誉来发布它。
在这里查看：https://imgur.com/M7hGS7F
仅供参考，这是一个模型，实际的 Bootstrap 页面不包含 MENU 文本，否则我只会查看源代码。如果您可以提供有关如何包含的信息，例如 (A) 按钮旁边的简单文本和 (B) 作为按钮的一部分，以便可以单击它，那就太棒了。提前感谢您对此解决方案的帮助！
【问题讨论】：
【参考方案1】：另一个只是 css 的解决方案：
.navbar-toggle:before
content:"Menu";
left:-50px;
top:4px;
position:absolute;
width:50px;
【讨论】：
【参考方案2】：我想最好使用 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>
如果 Bars 图标应该更大，只需将 fa-lg 或可以在 http://fortawesome.github.io/Font-Awesome/examples/ 找到的任何其他类添加到图标
【讨论】：
这是一个优雅的解决方案，我已经在使用 Font Awesome - 完美。只需要为按钮添加一些样式。我仍然想知道如何将“菜单”一词作为选项放在按钮之外。 我猜……像嵌套按钮可能是一个解决方案。但这不会是那么好的风格。外部按钮将无处链接，您必须删除内部按钮的某些样式（例如边框，阴影等......） 好主意，您现在还可以使用 glyphicon 来显示条形图。我这样做了 - 链接【参考方案3】：<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
.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;
【讨论】：
不幸的是，这使整个导航栏高了 8 个像素 我不得不删除 line-height 然后它对我来说很好。太好了！【参考方案4】：我有同样的问题，但不想添加 fontawesome。
这是我的解决方案（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>
少：
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;
警告：我只在最新的 Chrome 和 IE 11 中对此进行了测试。我没有设置任何其他 atm。
【讨论】：
以上是关于向移动视图上的引导导航栏切换按钮添加文本提示的主要内容，如果未能解决你的问题，请参考以下文章