Question

我正在使用getbootstrap.com的股票导航栏，我想在'折叠'导航栏上添加图标化链接。我找到的唯一方法是使用“navbar-brand”类属性，如此......

<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）'非品牌链接是否有特定的类属性，因为我认为这种方法会对使用辅助技术的访问者产生影响。我试过'navbar-btn'和一个普通的'按钮'，但都没有垂直排列，或者看起来不错。

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

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

Answer 1

回答1

是bootstrap具有'非品牌链接的类属性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>

将图标化链接添加到最小化的Twitter引导导航栏

1 个答案: