内容简介:翻译自:https://stackoverflow.com/questions/15086459/bootstrap-how-to-use-icons-in-lists-tabs
我试图在Twitter Bootstrap中获得一些效果,但我正在努力,我相信它必须在之前完成.两者都非常相似所以我已经归结为一个问题.
我想要做的是让图标在列表和导航栏中工作.通过一些绘画快速说明我想要实现的每个效果:
名单
<div class="well span4"> <ul class="nav nav-list"> <li class="active"><a href="#">Value 1</a></li> <li><a href="#">Value 2</a></li> <li><a href="#">Value 3</a></li> </ul> </div>
我试过包括<img>和<span>和<div>所有与class =“close”但似乎没有一个正常工作,我可以得到的最近的是让他们显示在下一行.
导航栏
<div class="navbar"> <div class="navbar-inner"> <div class="container" style="width: auto;"> <a class="brand" href="#">NavBar</a> <div class="nav-collapse"> <ul class="nav"> <li class="divider-vertical"></li> <li class="active"> <img src="edit.png" width="16" height="16"/> <a href="#">Nav 1</a> </li> <li> <img src="play.png" width="16" height="16"/> <a href="#">Nav 2</a> </li> </ul> </div> </div> </div> </div>
我想要的是在导航栏项旁边显示两个图标(并在第一个导航栏项的活动区域内).与列表类似的问题,图像被推到这个时间之上.我已经对Nav2进行了拍照,以说明我想要实现的效果.
我试过<img>,我确实尝试了<i>但我相信这些都是神奇的,总是指向某种字形图标 – 我需要阅读这些.我真正想要的是在这里使用自定义图像.
任何建议/小例子都会很棒.谢谢.
我使用了比图像更好的fontawesome图标.
在引导程序中使用图标的语法是使用带有类名图标的标记.
默认情况下,glyphicons存在于bootstrap中,但fontawesome有更多图标并且完全免费.
你可以在这里了解更多关于font-awesome的信息: http://fortawesome.github.com/Font-Awesome/#integration
这是您使用图标创建导航和列表的方法:
Jsfiddle for you http://jsfiddle.net/shail/GKsSd/2/
for Lists : <div class="well span4"> <ul class="nav nav-list"> <li class="active"><a href="#">Value 1 <i class=" icon-remove pull-right"></i></a> </li> <li class="active"><a href="#">Value 2 <i class=" icon-remove pull-right"></i></a></li> <li class="active"><a href="#">Value 3 <i class=" icon-remove pull-right"></i></a></li> </ul>
结果在浏览器中:
对于导航,您可以执行类似的操作:
<div class="navbar"> <div class="navbar-inner"> <a data-toggle="collapse" data-target=".nav-collapse" class="btn btn-navbar"> <i class="icon-bar"></i> </a> <a class="brand" href="">New Icon Menu</a> <div class="nav-collapse"> <ul class="nav nav-pills pull-right"> <li><a href=""><i class="icon-home icon-2x"></i> Home<br></a> </li> <li><a href=""><i class=" icon-pencil icon-2x"></i>About Us</a> </li> <li><a href=""><i class=" icon-briefcase icon-2x"></i>Portfolio</a> </li> <li><a href=""><i class=" icon-envelope icon-2x"></i>Contact Us</a> </li> </ul> </div> </div> </div>
以防你迫切需要使用图像.您必须创建类并将图标图像放入其中.如下:
.icon-edit { background:url('/images/edit.png') 0 0 no-repeat; height: 16px; line-height: 16px; width: 16px; }
翻译自:https://stackoverflow.com/questions/15086459/bootstrap-how-to-use-icons-in-lists-tabs
以上所述就是小编给大家介绍的《twitter-bootstrap – Bootstrap – 如何在列表/标签中使用图标?》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- c# – 如何将两个图标合并在一起? (在另一个图标上叠加一个图标)
- Bootstrap 图标集 v1.2.0 发布 —— 喜提 CSS 图标字体!
- Bootstrap 图标集 v1.2.0 发布 —— 喜提 CSS 图标字体!
- 9012年了你还在用单色图标?(iconfont多色图标详解)
- 开源图标字体 uiw-iconfont v1.2.6 发布,新增图标
- 最新版字体图标元件库分享,一套绝佳的矢量字体图标元件库
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
网站转换率优化之道
[美] Khalid Saleh、[美] Ayat Shukairy / 顾 毅 / 人民邮电出版社 / 2012-4 / 45.00元
内容简介: 怎样才能将访问者转化为顾客? 本书提供了一些切实可行的建议,比如如何说服访问者作出购买决定,如何避免用户因信息过量或导航繁琐而离开网站等。不论你是在设计或营销大型电子商务网站,还是在管理中小型在线业务,都可以从本书学会怎样使用市场营销原则、设计方法、可用性原则和分析数据来持续提升网站的转换率。 作者帮助过众多公司吸引在线顾客,有着丰富的实战经验,在书中细致讨论了从访问......一起来看看 《网站转换率优化之道》 这本书的介绍吧!