將圖標鏈接添加到最小化的Twitter引導導航欄
[英]Add iconified links to a minimised twitter bootstrap navbar
問題描述
我正在使用來自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應用程序，並且下拉菜單在電話上非常繁瑣。
1 個解決方案
解決方案1
1 已采納 2017-02-09 03:34:29
答案1
是，引導程序具有“非品牌鏈接”的類屬性，它是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引導程序Navbar帶有徽標/品牌的合理鏈接
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.