我正在使用来自 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>
结果是:
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/