twitter-bootstrap-3 – 字体很棒,带有图标语法的bootstrap按钮

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap-3 – 字体很棒,带有图标语法的bootstrap按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在引导程序中,带有图标的按钮是使用< button>的组合实现的.和< span>:

http://getbootstrap.com/components/#glyphicons-examples

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

在字体真棒中,按钮是使用< a>的组合实现的.和< i>:

http://fontawesome.io/examples/

<a class="btn btn-danger" href="#">
  <i class="fa fa-trash-o fa-lg"></i> Delete</a>

有没有更好的办法?或者这些标签的选择是完全随意的?

解决方法

这完全取决于使用情况.

在bootstrap中,您可以使用< a>的组合来实现按钮.和< i>.类似地,在带有图标的字体 – 真棒按钮中,可以使用< button>的组合来实现.和< span>.

例如:如果我们需要提交表单并且提交按钮包含一个字体真棒图标,那么我们这样做 –

<button type="button" class="btn btn-default" aria-label="Left Align">
 <span class="fa fa-trash-o fa-lg" aria-hidden="true"></span>
 </button>

另一个例子:如果我们需要使用普通链接并且链接包含一个bootstrap glyphicon图标,那么我们就可以这样做 –

<a class="btn btn-danger" href="#">
 <i class="glyphicon glyphicon-align-left"></i> Delete</a>
原文链接:https://www.f2er.com/bootstrap/233859.html

猜你在找的Bootstrap相关文章