引导按钮:类和样式解释

按钮是一个重要的要素网页设计。他们可以帮助吸引访客的眼睛，为他们提供重要信息，或说服他们在您的网站上采取行动。

了解此设计元素的重要性，前端开发工具包Bootstrap CSS.为按钮提供现成的模板。这些模板允许您快速且轻松地在引导站点上创建和自定义按钮。你需要有一些技术知识HTML.和CSS这样做。

在此帖子中，我们将解释如何创建按钮，按钮类是什么以及Bootstrap中可能有什么样的样式。

如何在引导中创建一个按钮

由于工具包中包含的预测模板，可以轻松创建Bootstrap中的按钮。您可以简单地将任何预定义样式（下面显示）的代码复制并粘贴到HTML文件的正文中以将按钮添加到您的网站。

来源

但是，您不限于这些默认选项。无论您是希望更密切地匹配您的网站的品牌还是使用按钮，Bootstrap支持多种颜色，大小和状态，以便更改按钮的外观和行为。

要了解如何改变他们的外观和行为，我们首先必须了解按钮类。

Bootstrap按钮类

Bootstrap按钮类是.btn。使用具有<按钮>元素的此按钮类将创建一个未格式化的按钮。

这是按钮的代码：

点击我

这是结果：

来源

要使按钮更加可见（并可点击！）到您网站前端的访问者，可以添加修改器类。

引导按钮有9个默认的修改器类，如前一节的截图所示。每个都有不同的用例。让我们仔细看看下面这些默认修饰符类。

.btn-primary.

“主要”类可用于为按钮提供更多的视觉权重，同时表示访问者拍摄页面的主要操作。

例如，在一个商业网站的主页上，主按钮可能会邀请访问者购买他们的产品。

.btn-secondary

“辅助”类可用于为按钮提供更多的视觉权重，同时代表访问者的辅助操作拍摄页面。

虽然主按钮可能会邀请访问者在商业网站的主页上购买产品，但辅助按钮可能会邀请访问者演示它。

.BTN成功

“success”类可用于指示成功的或积极的操作。

例如，在表单的末尾，成功按钮可以鼓励访客提交。

.btn-danger

“危险”课程可用于表示潜在的危险或负面行动。

虽然成功按钮可以鼓励访问者提交表单，但您可能希望使用危险按钮，而是确保访问者在提交之前审核他们的信息。如果他们无法返回并在提交后更改其信息，这尤其重要。

.btn-警告

同样，“警告”类可以代表警告。

例如，如果用户正在创建一个帐户，则警告按钮可以指示错过了一些必需的字段，并且必须在继续注册之前填写。

.btn-info

“info”类可以表示信息性警报。

在帐户注册表中，信息按钮可能指示用户可以单击以编辑其配置文件。

.btn-light

Bootstrap扩展其默认颜色选项时，添加了“Light”类。这是Web页面的一个很好的选择，黑暗的背景颜色。

.btn-and

Bootstrap扩展其默认颜色选项时，还会添加“暗”类。这是带有浅色背景颜色的网页的一个很好的选择。

.btn-link.

如果您正在寻找遵守按钮的外观，则可以使用“链接”类。最后一个默认的修改器类将使按钮看起来像一个链接，但仍然表现出一个按钮。

例如，您可能会发出电子邮件时事通知最近的博客文章。raybetapp在帖子标题下方，您可能包含一个简短的描述以及带有链接类的按钮，邀请读者阅读更多。下面是单击时按钮将出现的方式。

有关更多自定义选项，您可以替换这些默认修改器类或将它们与其他方式组合CSS课程获取额外的颜色、大小和状态选项。在我们仔细研究这些样式选项之前，有一点很重要:.btn类可以与Bootstrap中的其他元素一起使用。

如何使用引导按钮类

虽然Bootstrap的按钮类被设计为与元素一起使用，但它们可以在或<输入>元素上使用它们。这意味着您可以在HREF元素上使用按钮类来链接到当前页面中的新页面或部分。

您还可以在元素上按钮折叠内容或以其他方式触发页面上的功能。在这种情况下，应给出这些链接=“按钮”以适当地将其目的传送到辅助技术，例如屏幕阅读器，如下所示。

除了显示与元素一起使用的按钮类外，下面的代码片段还包括与

和元素一起使用的按钮类的示例。

 link 
<按钮类=“btn btn-might”类型=“提交”>按钮
<输入类=“BTN BTN-辅助”类型=“按钮”值=“输入”>
<输入class =“btn btn-success”类型=“提交”值=“提交”>
<输入class =“btn btn-warning”类型=“重置”值=“重置”>

以下是这些元素在Bootstrap站点前端的显示方式。

既然我们了解按钮类如何在<按钮>，和<输入>元素上，让我们看看可以在引导站点上使用的不同按钮样式。

Bootstrap按钮样式

如前所述，您可以通过替换九个默认修改器类或将它们与其他类组合来创建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以适合您的品牌。

Bootstrap大纲按钮

如果你希望你的按钮有彩色的轮廓，而不是彩色的背景，那么你可以使用修改器类。btn-outline。同样的按钮颜色默认选项也适用于大纲按钮，如下所示。使用任何这些样式都不需要CSS。

来源

如果您正在寻找更多的设计选项，则可以使用上面概述的方法将大纲颜色更改为所需的任何颜色。您只需在HTML而不是.btn和css样式属性边框颜色而不是背景颜色中使用类.btn btn-utline .btn btn-uthine。为了娱乐，我们还将使用六角形颜色代码进行三文鱼。否则，您将使用相同的CSS类选择器.btn和样式属性颜色更改文本颜色。

这是我的html：

<按钮类型=“按钮”类=“btn btn-utline”>单击me 

这是我的CSS：

.btn {
颜色：＃FA8072;
边框颜色：＃FA8072
}

结果:

Bootstrap按钮大小

在Bootstrap中，您可以控制大小以及按钮的颜色。要更改按钮的大小，您可以在HTML中添加以下修改程序类：

• .btn-lg
• .btn-sm.

让我们使用以下HTML进行比较这些大小：

<按钮类型=“按钮”类=“BTN BTN-INFO BTN-LG”>大按钮
<按钮类型=“按钮”类=“BTN BTN-INFO”>默认大小按钮
小按钮

结果:

您还可以通过组合与.btn-block的.btn-light修改器类来创建块级别按钮（按钮跨越父元素的全宽的按钮）。

这是我的html：

点击我

结果:

Bootstrap按钮状态

如果您想改变按钮的外观状态，那么可以使用.active类使按钮看起来像被按过一样。它将有一个较暗的背景，较暗的边框和插入阴影。

出于相反的效果，您可以使用禁用的属性来使按钮看起来好像无法按下。请注意，禁用是属性，而不是类，因此它将在HTML中的撇页外。

值得注意的是，元素不支持禁用属性。因此，您必须使用.disabled类来使元素出现无效。实际上，由于.disabled类禁用元素的链接功能，因此这些修改的元素不仅会出现不可点记 - 它们将无法获取。

下面让我们来看看每个按钮状态的不同代码，以及它们如何在前端显示。

这是我的html：

活动按钮 . info
<按钮类型=“按钮”类=“BTN BTN-INFO”禁用>已禁用按钮
禁用链接

结果:

引导切换按钮

如果您希望Bootstrap按钮将从其默认状态切换到活动状态，当访问者点击它时，您可以在.btn类之后添加数据键=“按钮”。一旦点击，这些按钮将保留更暗的背景，更暗的边框和插入阴影。（当访客点击页面上的其他位置时，Inset Shadow确实消失了。）

这是我的HTML，包括多个按钮颜色：

<按钮类型=“按钮”class =“btn btn-primary”data-toggle =“按钮”>主切换
成功切换
<按钮类型=“按钮”class =“btn btn-warning”data-toggle =“按钮”>警告切换
 Light toggle 

结果:

引导单选按钮

通常在预定义的相关选项集（称为无线电组）中找到单选按钮。此按钮组是唯一的，这是一次只能选择一个单选按钮。所以说你选择一个按钮。在组中选择另一个将自动取消选择第一个按钮。

这个示例的HTML代码比其他示例要复杂一些，所以我们将以较慢的速度来完成它。

单选按钮的语法是<输入类型=“收音机”>因此让我们复制并粘贴三次以创建一个三个。每个按钮必须共享相同的名称属性，因此我们将为同一行添加名称=“选项”。由于我们可能希望向每个<输入>元素应用不同的样式，因此我们将为每个自己的ID名称提供。我们将打电话给他们选项1，选项2和选项3.这是我们到目前为止的目标：

<输入类型=“无线电”名称=“选项”ID =“option1”>无线电
 radio
<输入类型=“收音机”名称=“选项”ID =“Option3”>无线电

为了将按钮样式应用到Bootstrap中的这些元素，我们必须将它们嵌套在s中，并添加.btn类。下面我将添加.btn-secondary修改器类。现在我们有了这个:

<输入类型=“无线电”名称=“选项”ID =“option1”>无线电
 radio
<输入类型=“收音机”名称=“选项”ID =“Option3”>无线电

最后，我们只需将其包装在一个

元素中，并应用classes .btn-group， .btn-group-toggle，和data-toggle= " buttons "，以确保在单击时，组中的每个按钮都能从默认状态切换到活动状态。下面是最终的代码片段:

<< div类=“btn-group btn-group-toggle”data-toggle =“按钮”>
<输入类型=“收音机”名称=“选项”ID =“option1”选中>无线电
 radio
<输入类型=“收音机”名称=“选项”ID =“Option3”>无线电
< / div >

这是结果：

创建引导按钮

使用下面的CodePen模块，您可以测试您的知识并创建自己的Bootstrap按钮。

为了让你开始，我创建了一个主按钮并将其放在一个容器。

看到这支笔创建引导按钮由克里斯蒂娜百科（@hubspot.)CodePen。

将按钮添加到Bootstrap站点

设计和放置时，按钮可以帮助说服游客采取行动。可以重新创建和自定义上述任何按钮类型到您的唯一Bootstrap站点。您只需要熟悉HTML和CSS即可开始。

编者注：这篇文章最初发表于2020年5月，并已更新全面。

最初发布于5月18日，2021年7:00:00，Updated 5月18日2021年

话题：

Bootstrap＆CSS

别忘了分享这篇文章!