将图标化链接添加到最小化的推特 bootstrap 导航栏

Question

我正在使用 getbootstrap.com 的常用导航栏，我想将图标化链接放在 'collapsed' 导航栏上。我发现的唯一方法是像这样使用 "navbar-brand" class 属性 ...

<a class="navbar-brand" href="#link1">My Brand</a>
<a class="navbar-brand" href="#link2"><span class="glyphicon glyphicon-home" aria-hidden="true"></a>
<a class="navbar-brand" href="#link3"><span class="glyphicon glyphicon-user" aria-hidden="true"></a>

结果是：

1) 是否有针对“非品牌链接”的特定 class 属性，因为我认为此方法会对使用辅助技术的访问者产生影响。我尝试了 'navbar-btn' 和常规 'button'，但既不垂直排列，也不好看。

2) 我想在笔记本电脑上使用该应用程序时隐藏这些图标化链接（如果可能）。 IE。在手机上使用图标，在桌面上使用菜单。

这适用于功能有限的 CRUD 应用程序，下拉菜单在 phone 上很麻烦。

Answer 1

回答 1

是 bootstrap 有 class 属性用于 'non-branded 链接它是 class="navbar-text".

回答2

使用 bootstrap hidden-lg 在桌面应用程序上隐藏这些链接。

工作示例

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          </head>
          <body>

    <a class="navbar-brand" href="#link1">My Brand</a>
<a class="navbar-text hidden-lg hidden-md hidden-sm" href="#link2"><span class="glyphicon glyphicon-home" aria-hidden="true"></a>
<a class="navbar-text hidden-lg hidden-md hidden-sm" href="#link3"><span class="glyphicon glyphicon-user" aria-hidden="true"></a>
  </body>
  </html>

将图标化链接添加到最小化的推特 bootstrap 导航栏

Add iconified links to a minimised twitter bootstrap navbar

html

css

navbar

twitter-bootstrap

twitter-bootstrap-3