如何将按钮从bootstrap3更改为4

Question

我一直在bootstrap 3中使用这种按钮。通常是 Action 来更新或修改表格中的行。

我想使用bootstrap 4，但此按钮无法正确呈现。 我知道这已经改变了，但我该如何解决这个问题？

这是按钮的代码：

<button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>

Answer 1

而不是glyphicons Bootstrap 4建议使用font-awesome。您可以阅读有关迁移的更多信息here。虽然迁移文档指出btn-default现在是btn-secondary，但要使您的按钮呈现的方式与您现在要使用的按钮类似btn-light。

以下是您更新后的代码的样子。

<button type="button" class="btn btn-light">
    <i class="fa fa-pencil fa-2x" aria-hidden="true"></i>
</button>

以下是工作codeply project中的代码。

Answer 2

从迁移页面： https://v4-alpha.getbootstrap.com/migration/

  

将.btn-default重命名为.btn-secondary

     

删除了Glyphicons图标字体。如果您需要图标，可以选择以下选项：

     

  
• Glyphicons的上游版本
  
• Octicons
  
• Font Awesome