如何使用Bootstrap制作自定义按钮？

Question

如何使用bootstrap制作自定义按钮。 “获取引用”按钮的左侧必须有一个放大镜符号，类似地，“清除”按钮必须具有左侧的符号，如下图所示。另外，如何更改“获取引用”按钮的颜色以将其更改为天蓝色。

带有获取报价和清除按钮的图像：

Answer 1

在Bootstrap 4中，他们dropped the Glyphicon icons。您可以使用：

• 上游版Glyphicons
• Octicons
• Font Awesome

回到您的要求，您可以签出http://fontawesome.io/examples/，其中给出了将Font Awesome图标与Bootstrap 3按钮集成的示例。同样，它可以使用Bootstrap 4按钮完成。检查提供的代码段。

此外，要将按钮的颜色更改为除available options之外的自定义颜色，您显然必须更改它的CSS。更好的方法是浏览源代码中的SASS文件，并使用mixins生成新的自定义按钮。查看下面的链接以获得一些想法：

• https://bootbites.com/articles/bootstrap-4-button-customisation/
• https://coursetro.com/posts/design/73/How-to-Customize-Bootstrap-4-with-Sass

＆＃13;

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<a class="btn btn-info" href="#">
 <i class="fa fa-search"></i> Get Quote
</a>
<a class="btn btn-secondary" href="#">
 <i class="fa fa-refresh"></i> Clear
</a>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个网站，对新手和有经验的人都很有用。很好的教程。

https://www.w3schools.com/bootstrap/bootstrap_buttons.asp