按钮是重要元素网页设计。他们可以帮助吸引访客的眼睛，为他们提供重要信息，或说服他们在您的网站上采取行动。
了解该设计元素的重要性，前端开发工具包Bootstrap CSS为按钮提供现成的模板。这些模板允许您快速，轻松地在引导网站上创建和自定义按钮。您只需要了解html和CSS这样做。
在这篇文章中，我们将解释如何创建按钮，按钮类是什么以及在引导程序中进行哪些样式。
如何在Bootstrap中创建按钮
由于工具包中包含的预先设计的模板，在引导程序中创建一个按钮很容易。您可以简单地将任何预定义样式的代码（如下所示）复制并粘贴到HTML文件的主体部分中，以在您的站点中添加按钮。
但是，您不仅限于这些默认选项。无论您是想更紧密地匹配网站的品牌，还是在按钮上做更多的事情，Bootstrap都支持多种颜色，尺寸和状态，以便您可以更改按钮的外观和行为。
要了解如何改变其外观和行为，我们首先必须了解按钮类。
Bootstrap按钮类
Bootstrap按钮类是.btn。使用此按钮类带有
这是按钮的代码：
这是结果：
为了使该按钮更可见（可以单击！），请访问网站前端的访问者，您可以添加修饰符类。
Bootstrap按钮具有九个默认修饰符类，在上一节中的屏幕截图中显示。每个都有不同的用例。让我们仔细研究下面的这些默认修饰符类。
.btn-primary
“主要”类可用于为按钮提供更多的视觉重量，同时代表访问者在页面上采取的主要动作。
例如，在业务网站的主页上，主按钮可能邀请访问者购买其产品。
.btn中学
“辅助”类可用于为按钮提供更多的视觉重量，同时代表次要动作，供访问者参加页面。
虽然主按钮可能会邀请访问者在业务网站的主页上购买产品，但辅助按钮可能会邀请访问者进行演示。
.btn-success
“成功”类可用于指示成功或积极的行动。
例如，在表格结尾处，成功按钮可以鼓励访问者提交。
.btn-Danger
“危险”类可用于指示潜在的危险或负面作用。
尽管成功按钮可以鼓励访问者提交表格，但您可能需要使用危险按钮，以确保访问者在提交之前查看其信息。如果他们一旦提交就不能回去并更改信息，这一点尤其重要。
.btn-tharning
同样，“警告”类可以代表警告。
例如，如果用户正在创建帐户，则警告按钮可以表明错过了一些必需的字段，并且必须在继续注册之前填写。
.btn-info
“信息”类可以代表信息警报。
在帐户注册表上，信息按钮可能表明用户可以单击以编辑其配置文件。
.btn-light
当Bootstrap扩展其默认颜色选项时，添加了“轻”类。对于具有深色背景色彩的网页，这是一个不错的选择。
.btn-dark
当Bootstrap扩展其默认颜色选项时，还添加了“ Dark”类。对于带有背景颜色的网页，这是一个不错的选择。
.btn-link
如果您想强调按钮的外观，则可以使用“链接”类。最后一个默认修饰符类将使按钮看起来像一个链接，但仍像按钮一样行为。
例如，您可能会发送带有最近博客文章的电子邮件通讯。bob官网官方网站在帖子标题下方，您可能会提供一个简短的描述以及带有链接类的按钮，邀请读者阅读更多内容。以下是单击时按钮出现的方式。
有关更多自定义选项，您可以替换这些默认修饰符类或将其与其他CSS课程有关其他颜色，尺寸和状态选项。在仔细研究这些样式选项之前，请务必注意，可以与Bootstrap中的其他元素一起使用.btn类。
如何使用bootstrap按钮类
虽然Bootstrap的按钮类旨在与
您还可以在元素上按钮类以折叠内容或以其他方式触发页面功能。在这种情况下，应将这些链接赋予一个角色=“按钮”，以适当地将其目的传达给诸如屏幕读取器之类的辅助技术，如下所示。
这是这些元素将如何出现在Bootstrap网站的前端。
现在，我们了解了按钮类在
引导按钮样式
如前所述，您可以通过替换九个默认修饰符类中的任何一个或将其与其他类组合来为Bootstrap按钮创建新样式。两种方法都将使您能够以其他颜色，尺寸和状态创建按钮。
让我们仔细看看这些按钮设计下面的选项。
引导按钮颜色
使用默认修饰符类之一将改变按钮的文本和背景颜色的颜色。.btn-danger将使按钮红色和字体为白色，而.btn-thanning将使按钮黄色和字体为黑色，依此类推。但是说您想在按钮上应用不同的文本和背景颜色。
您可以在HTML中使用.btn类和CSS中的类选择器。假设我想制作我的纽扣深海绿色和文字白色的背景颜色。然后我会使用CSS选择器.btn，样式属性颜色和背景色，以及十六进制颜色代码对于黑海绿（＃8FBC8F）和白色（#ffffff）。
这是我的html：
这是我的CSS：
.btn {
颜色：#ffffff;
背景色：＃8FBC8F
}
这是结果：
要了解有关Bootstrap的默认样式的更多信息，请查看如何编辑，自定义和覆盖Bootstrap CSS适合您的品牌。
引导图轮廓按钮
如果您希望按钮具有彩色轮廓，而不是彩色背景，则可以使用修饰符类.btn-Outline。如下所示，可以使用相同的按钮颜色的按钮颜色的默认选项。不需要CSS使用任何这些样式。
如果您正在寻找更多的设计选项，则可以使用与上面概述的相同方法将轮廓颜色更改为想要的任何颜色。您只需在HTML而不是.btn和CSS样式的属性边框颜色而不是背景色中使用类。BTNBTN外线。为了娱乐，我们还将为鲑鱼使用十六进制颜色代码。否则，您将使用相同的CSS类选择器.btn和样式属性颜色更改文字颜色。
这是我的html：
这是我的CSS：
.btn {
颜色：＃fa8072;
边界颜色：＃FA8072
}
这是结果：
引导按钮大小
在Bootstrap中，您可以控制按钮的尺寸和颜色。要更改按钮的大小，您可以在HTML中添加以下修饰符类：
- .btn-lg
- .btn-sm
让我们使用以下HTML比较这些尺寸：
在
这是结果：
您还可以通过将.btn-large修饰符类与.btn-block相结合，从而创建块级按钮（跨越父元素的完整宽度的按钮）。
这是我的html：
这是结果：
引导按钮状态
如果您想更改按钮的外观状态，则可以使用类别的类别来使按钮看起来像已被按下。它将具有更黑暗的背景，较暗的边界和插图的阴影。
对于相反的效果，您可以使用禁用属性使按钮看起来像无法按下。请注意，禁用是一个属性，而不是类，因此它将在HTML中的撇号之外。
同样重要的是要注意，元素不支持残疾属性。因此，您必须使用.disabled类以使元素看起来不活跃。实际上，由于.disabled类禁用元素的链接功能，因此这些修改的元素不仅看起来不可粘合 - 它们将是无法拼写的。
在下面，让我们看一下每个按钮状态的不同代码，以及它们在前端的显示方式。
这是我的html：
这是结果：
引导程序切换按钮
如果您希望Bootstrap按钮在访问者单击它时从其默认状态切换到活动状态，则可以在.btn类之后添加data-toggle =“ button”。单击后，这些按钮将保留其深色的背景，较深的边框和插图阴影。（当访问者单击页面上的其他位置时，插图确实消失了。）
这是我的HTML，包括几种按钮颜色：
在
这是结果：
引导开机按钮
通常在预定义的相关选项（称为无线电组）中找到一个无线电按钮。此按钮组的独特之处在于，一次只能选择一个单选按钮。因此，说您选择一个按钮。在组中选择另一个将自动取消选择第一个按钮。
为此，HTML代码比其他示例要棘手一些，因此我们会慢慢浏览它。
广播按钮的语法为，让我们复制并粘贴3次以创建三个组。每个按钮必须共享相同的名称属性，因此我们将名称=“选项”添加到同一行中。而且，由于我们可能希望将不同的样式应用于每个元素，因此我们将给出每个ID名称。我们将它们称为选项1，选项2和选项3。这是我们到目前为止所拥有的：
无线电
无线电
无线电
要将按钮样式应用于Bootstrap中的这些<输入>元素，我们必须将它们嵌套在
无线电
无线电
无线电
最后，我们只需要将其包装在
<< div class =“ btn group btn group-toggle” data-toggle =“ buttons”>
无线电
无线电
无线电
这就是结果：
创建一个bootstrap按钮
使用下面的Codepen模块，您可以测试知识并创建自己的引导程序按钮。
为了让您开始，我创建了一个主按钮，并将其放在容器。
看到笔创建一个bootstrap按钮克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。
在引导网站上添加按钮
当设计和放置良好时，按钮可以帮助说服访客采取行动。上述任何按钮类型都可以重新创建并定制到您唯一的引导网站上。您只需要熟悉HTML和CSS即可开始。
编者注：该帖子最初于2020年5月发表，并已更新以进行全面性。
最初出版于2021年5月18日上午7:00：2022年4月20日更新
话题：
Bootstrap＆css相关文章
