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

标签 html css twitter-bootstrap twitter-bootstrap-3 navbar

我正在使用来自 getbootstrap.com 的常用导航栏,我想将图标化链接放在 'collapsed' 导航栏上。我发现的唯一方法是像这样使用“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>

结果是:

Screenshot of collapsed navbar with icon's

1) 是否有用于“非品牌链接”的特定类属性,因为我认为此方法会对使用辅助技术的访问者产生影响。我试过“navbar-btn”和一个普通的“按钮”,但它们都没有垂直排列,也不好看。

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

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

最佳答案

答案 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>

关于html - 将图标化链接添加到最小化的 Twitter Bootstrap 导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42127504/

相关文章:

html - 将 <button> 插入层样式文本溢出 :ellipsis 的末尾

html - 将页脚固定到页面底部

javascript - 固定列表的固定标题根据宽度不响应

html - 是最大宽度 :auto == max-width:100%?

html - 无法向左浮动表单和图标

javascript - 在img标签中添加一个新值来检查它是否是用Javascript点击的?

javascript - 在控制台或日志中显示jquery自定义属性

html - Bootstrap布局设计

twitter-bootstrap - Bootstrap 弹出框 - 删除箭头

css - 多重网格重新排序