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

发布时间：2020-12-18 00:22:54 所属栏目：安全来源：网络整理

导读：在引导程序中,带有图标的按钮是使用 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-hi

在引导程序中,带有图标的按钮是使用< 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!