将图标链接添加到最小化的Twitter引导导航栏
[英]Add iconified links to a minimised twitter bootstrap navbar
问题描述
I am using a stock navbar from getbootstrap.com, I would like to put iconified links on a 'collapsed' navbar. 
我正在使用来自getbootstrap.com的股票导航栏，我想将图标化的链接放在“折叠的”导航栏上。 The only way I have found is to use the "navbar-brand" class attribute like so ... 我发现的唯一方法是像这样使用“ 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>
resulting in this : 结果：
1) Is there a specific class attribute for 'non-branded links, as I assume this method would have repercussions for visitors using assistive technology. 1）“非品牌链接”是否有特定的类别属性，因为我认为此方法会对使用辅助技术的访问者产生影响。 I tried 'navbar-btn' and a regular 'button', but neither line up vertically, or look nice. 我尝试了“ navbar-btn”和常规的“按钮”，但都没有垂直排列或看上去不错。
2) I would like to hide these iconified links when using the app on a laptop (if possible). 2）我想在笔记本电脑上使用应用程序时隐藏这些图标化的链接（如果可能）。 ie. 即。 use icons on mobile, menus on desktop. 在手机上使用图标，在桌面上使用菜单。
This will be for a CRUD application with limited functionality, and the drop down menu is cumbersome on a phone. 这将用于功能受限的CRUD应用程序，并且下拉菜单在电话上非常繁琐。
1 个解决方案
解决方案1
1 已采纳 2017-02-09 03:34:29
Answer 1 答案1
Yes bootstrap has class attribute for 'non-branded links it is class="navbar-text" . 是，引导程序具有“非品牌链接”的类属性，它是class="navbar-text" 。
Answer 2 答案2
Use bootstrap hidden-lg to hide these links on desktop app. 使用bootstrap hidden-lg隐藏桌面应用程序上的这些链接。
Working example 工作实例
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.