按钮是一个重要的元素网页设计．它们可以帮助吸引访问者的眼球，为他们提供重要信息，或说服他们对你的网站采取行动。
了解前端开发工具包这个设计元素的重要性引导CSS提供按钮的现成模板。这些模板允许您快速、轻松地创建和自定义Bootstrap站点上的按钮。你只需要掌握一些技术知识超文本标记语言和CSS这样做。
在这篇文章中，我们将解释如何创建按钮，按钮类是什么，以及Bootstrap中可能的样式是什么。
如何在引导中创建一个按钮
在Bootstrap中创建按钮很容易，这要归功于工具包中包含的预先设计的模板。您可以简单地将任何预定义样式(如下所示)的代码复制并粘贴到HTML文件的主体部分，以便在站点中添加按钮。
然而，您并不局限于这些默认选项。无论你是想要更接近网站的品牌，还是想用按钮做更多的事情，Bootstrap都支持多种颜色、大小和状态，这样你就可以改变按钮的外观和行为。
要理解如何改变它们的外观和行为，我们首先必须理解按钮类。
引导按钮类
引导按钮类是。btn。将这个按钮类与
下面是按钮的代码:
结果:
为了让网站前端的访问者更容易看到(和点击!)按钮，您可以添加修改器类。
引导按钮有9个默认修改器类，如前一节的截图所示。每个都有不同的用例。让我们仔细看看下面这些默认修饰符类。
.btn-primary
“主要”类可以用来为按钮提供更多的视觉权重，同时为访问者在页面上采取的主要操作。
例如，在一个商业网站的主页上，主按钮可能会邀请访问者购买他们的产品。
.btn-secondary
“二级”类可用于为按钮提供更多的视觉权重，同时为访问者在页面上采取的二级操作提供二级操作。
一个主按钮可能会邀请访问者在商业网站的主页上购买产品，而第二个按钮可能会邀请访问者演示产品。
.btn-success
“成功”类可以用来表示成功的或积极的行动。
例如，在表单的末尾，成功按钮可以鼓励访问者提交。
.btn-danger
“危险”类可以用来表示潜在的危险或消极的行为。
虽然成功按钮可以鼓励访问者提交表单，但您可能希望使用危险按钮来确保访问者在提交之前查看他们的信息。如果他们提交后不能返回并更改他们的信息，这一点尤其重要。
.btn-warning
类似地，“warning”类可以表示一个警告。
例如，如果用户正在创建帐户，则警告按钮可能表明缺少一些必需的字段，必须在继续注册之前填写这些字段。
.btn-info
“info”类可以表示信息性警报。
在帐户注册表单上，信息按钮可能表示用户可以单击来编辑他们的个人资料。
.btn-light
“light”类是在Bootstrap扩展其默认颜色选项时添加的。对于背景颜色较暗的网页来说，这是一个不错的选择。
.btn-dark
当Bootstrap扩展其默认颜色选项时，还添加了“dark”类。对于背景颜色较浅的网页来说，这是一个不错的选择。
.btn-link
如果你想弱化按钮的外观，你可以使用“link”类。最后一个默认修改器类将使按钮看起来像一个链接，但行为仍然像一个按钮。
例如，您可以发送一份包含最近博客文章的电子邮件简报。raybetapp在文章标题下面，你可以包括一个简短的描述，以及一个链接类按钮，邀请读者阅读更多内容。下面是单击按钮时的显示方式。
要获得更多定制选项，您可以替换这些默认修饰符类，或者将它们与其他修饰符类组合CSS类以获取其他颜色、大小和状态选项。在我们深入研究这些样式选项之前，需要注意的是.btn类可以与Bootstrap中的其他元素一起使用。
如何使用引导按钮类
虽然Bootstrap的按钮类被设计为与
您还可以在元素上设置按钮类，以折叠内容或以其他方式触发页面内功能。在这种情况下，应该给这些链接一个role="button"，以适当地向屏幕阅读器等辅助技术传达它们的目的，如下所示。
Link . txt
以下是这些元素如何出现在Bootstrap站点的前端。
现在我们了解了按钮类在
引导按钮样式
如前所述，您可以通过替换九个默认修饰符类中的任何一个或将它们与其他类结合来为Bootstrap按钮创建新的样式。这两种方法都允许您以其他颜色、大小和状态创建按钮。
让我们仔细看看这些按钮设计下面的选项。
引导按钮的颜色
使用默认的修改器类会改变按钮的文本颜色和背景颜色，.btn- danger会让按钮变成红色，字体变成白色，而.btn-warning会让按钮变成黄色，字体变成黑色，依此类推。但是如果你想给按钮应用不同的文本和背景颜色。
你可以在HTML中使用.btn类，在CSS中使用类选择器。假设我想让按钮的背景色为深海绿色，文本为白色。然后我会用CSS选择器.btn，样式属性color和background-color，以及十六进制颜色代码对于深海绿色(#8FBC8F)和白色(#FFFFFF)。
这是我的HTML:
这是我的CSS:
.btn {
颜色:# FFFFFF;
background - color: # 8 fbc8f
｝
结果:
要了解关于重写Bootstrap默认样式的更多信息，请查看如何编辑，自定义和覆盖引导CSS以适合您的品牌．
引导大纲按钮
如果你希望你的按钮有彩色的轮廓，而不是彩色的背景，那么你可以使用修饰类。btn-outline。按钮颜色的默认选项也可以用于轮廓按钮，如下所示。使用任何这些样式都不需要CSS。
如果您正在寻找更多的设计选项，您可以使用上面概述的相同方法将轮廓颜色更改为任何您想要的颜色。你只需在HTML中使用类。btn btn-outline而不是。btn，使用CSS样式属性border-color而不是background-color。为了好玩，我们还将为鲑鱼使用十六进制颜色代码。否则，你将使用相同的CSS类选择器。btn和样式属性color to更改文本颜色．
这是我的HTML:
这是我的CSS:
.btn {
颜色:# FA8072;
边框颜色:# FA8072
｝
结果:
引导按钮大小
在Bootstrap中，你可以控制按钮的大小和颜色。要改变按钮的大小，你可以在你的HTML中添加以下修改器类:
- .btn-lg
- .btn-sm
让我们使用下面的HTML来比较这些大小:
结果:
您还可以通过组合.btn-large修饰符类和.btn-block来创建块级别的按钮(跨越父元素的整个宽度的按钮)。
这是我的HTML:
结果:
引导按钮状态
如果你想改变按钮的外观状态，那么你可以使用类。active使按钮看起来像被按过一样。它将有一个较暗的背景，较暗的边界，和嵌入的阴影。
为了达到相反的效果，可以使用disabled属性使按钮看起来就像无法按下它一样。注意，disabled是一个属性，而不是一个类，因此它将在HTML中的撇号之外显示。
还需要注意的是，元素不支持disabled属性。因此，必须使用.disabled类使元素显示为非活动的。事实上，由于.disabled类禁用了元素的链接功能，这些修改后的元素不仅会显示为不可点击的——它们将是不可点击的。
下面让我们看看每个按钮状态的不同代码，以及它们如何在前端显示。
这是我的HTML:
. class="btn btn-info
结果:
引导切换按钮
如果你想让引导按钮在访客点击时从默认状态切换到活动状态，你可以在。btn类后添加data-toggle="button"。一旦单击，这些按钮将保留其较深的背景、较深的边框和嵌入的阴影。(当访问者点击页面的其他地方时，嵌入的阴影确实会消失。)
这里是我的HTML，包括几个按钮颜色:
结果:
引导单选按钮
单选按钮通常出现在一组预定义的相关选项中(称为单选组)。这个按钮组的独特之处在于一次只能选择一个单选按钮。假设你选择了一个按钮。选择组中的另一个将自动取消选择第一个按钮。
这里的HTML代码比其他示例稍微复杂一些，所以我们将以更慢的速度进行介绍。
单选按钮的语法是，所以让我们复制粘贴三次，以创建一个由三个人组成的组。每个按钮必须共享相同的name属性，所以我们将name= " options "添加到同一行。由于我们可能希望对每个元素应用不同的样式，因此我们将为每个元素指定自己的ID名称。我们称之为选项1，选项2和选项3。以下是目前为止我们得到的:
radio
radio
radio
要在Bootstrap中对这些元素应用按钮样式，我们必须将它们嵌套在
<标签类= " btn btn-secondary " >
radio
< / >标签
<标签类= " btn btn-secondary " >
radio
< / >标签
<标签类= " btn btn-secondary " >
radio
< / >标签
最后，我们只需要将它包装在一个
radio .
radio
< / >标签
<标签类= " btn btn-secondary " >
radio
< / >标签
< / div >
结果如下:
创建一个引导按钮
使用下面的CodePen模块，您可以测试自己的知识并创建自己的引导按钮。
为了让你开始，我创建了一个主按钮，并把它放在容器．
看到这支笔创建一个引导按钮作者:Christina Perricone (@hubspot)CodePen．
向引导站点添加按钮
如果设计和放置得当，按钮可以帮助说服访问者采取行动。上面描述的任何按钮类型都可以重新创建并自定义到您独特的Bootstrap站点。您只需要熟悉HTML和CSS即可入门。
编者按:本文最初发表于2020年5月，为全面起见已进行更新。
最初发布于2021年5月18日上午7:00:00，更新于2021年8月23日
主题:
引导和CSS
相关文章
![如何使用CSS创建滚动文本[+代码模板]](http://www.emcdepot.com/hubfs/Google%20Drive%20Integration/scrolling%20text%20css.jpeg)
