sin*_*nge 12 html mobile user-experience jquery-mobile twitter-bootstrap
一些测试表明,移动设备上可折叠菜单的"汉堡包"按钮对于用户来说是个谜,我想在移动视图中看到我的Bootstrap菜单按钮旁边添加"菜单"一词.
如需进一步阅读,请查看这篇文章:"汉堡包对你不利":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"这个词.我制作了一个我正在谈论的模型,但是我没有足够的声誉来发布它.
请在此处查看:https://imgur.com/M7hGS7F
如果您可以提供有关如何包含的信息为(A)只是按钮旁边的文本和(B)作为按钮的一部分,所以可以点击它是很棒的.在此先感谢您对此解决方案的帮助!
Alv*_*aro 12
另一个只是css解决方案:
.navbar-toggle:before {
content:"Menu";
left:-50px;
top:4px;
position:absolute;
width:50px;
}
我想这将是最好的使用fontawesome.
只需包含对fontawesome的引用(参见http://fortawesome.github.io/Font-Awesome/get-started/),然后使用条形图标(http://fortawesome.github.io/Font-Awesome/icon/酒吧/)
所以你的代码看起来很...... 像那样:
<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/找到的任何其他类到图标
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
.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;
}
| 归档时间： |
|
| 查看次数： |
15123 次 |
| 最近记录： |