html – 添加文本提示引导Navbar切换按钮在移动视图

发布时间：2020-12-14 18:57:45 所属栏目：资源来源：网络整理

导读：一些测试表明,移动设备上可折叠菜单的“汉堡包”按钮是用户的谜,我想在“移动视图”中添加“启动”菜单按钮旁边的“菜单”. 为了进一步阅读,请阅读这篇文章：“汉堡包是坏的”：http://mor10.com/hamburger-bad/ 这是基本的Bootstrap代码： button type="but

一些测试表明,移动设备上可折叠菜单的“汉堡包”按钮是用户的谜,我想在“移动视图”中添加“启动”菜单按钮旁边的“菜单”.

为了进一步阅读,请阅读这篇文章：“汉堡包是坏的”：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/找到图标

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!