Add iconified links to a minimised twitter bootstrap navbar
Question
I am using a stock navbar from getbootstrap.com, I would like to put iconified links on a 'collapsed' navbar. The only way I have found is to use the "navbar-brand" class attribute like so ...
<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. I tried 'navbar-btn' and a regular 'button', but neither line up vertically, or look nice.
2) I would like to hide these iconified links when using the app on a laptop (if possible). 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.
1 answers
solution1
1 ACCPTED 2017-02-09 03:34:29
Answer 1
Yes bootstrap has class attribute for 'non-branded links it is class="navbar-text" .
Answer 2
Use bootstrap hidden-lg to hide these links on desktop app.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.