Bootstrap按钮：课程和样式解释

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

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

在这篇文章中，我们将解释你如何创建按钮，按钮类是什么，以及在Bootstrap中什么样式是可能的。

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

由于工具包中包含了预先设计好的模板，在Bootstrap中创建按钮很容易。您可以简单地将任何预定义样式(如下所示)的代码复制并粘贴到HTML文件的正文部分，以向站点添加按钮。

源

但是，您并不局限于这些默认选项。无论你是想更接近你的网站品牌还是做更多与你的按钮，Bootstrap支持多种颜色，大小和状态，这样你可以改变你的按钮的外观和行为。

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

Bootstrap按钮类

Bootstrap按钮类是.btn。使用这个button类和元素将创建一个未格式化的按钮。

下面是按钮的代码:

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

这是结果：

源

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

Bootstrap按钮具有九个默认修改器类，其在上一节中的屏幕截图中显示。每个都有不同的用例。让我们仔细看看下面的这些默认修改器类。

.btn-primary

“primary”类可以用来为按钮提供更多的视觉权重，同时代表访问者在页面上采取的主要操作。

例如，在业务网站的主页上，主按钮可能会邀请访问者购买其产品。

.btn-二级

“二级”类可以用来为按钮提供更多的视觉权重，同时代表用户在页面上采取的二级操作。

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

.btn-success

“成功”课程可用于表示成功或积极的行动。

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

.BTN-危险

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

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

.btn-warning

类似地，“warning”类可以表示警告。

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

.btn-info.

“信息”类可以代表信息警报。

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

.btn-light.

“light”类是在Bootstrap扩展其默认颜色选项时添加的。对于深色背景的网页来说，这是一个很好的选择。

.btn-dark

当Bootstrap扩展其默认颜色选项时，“dark”类也被添加。对于带有浅色背景的网页来说，这是一个很好的选择。

.btn-link

如果想要弱化按钮的外观，可以使用“link”类。最后一个默认修饰符类将使按钮看起来像一个链接，但行为仍然像一个按钮。

例如，您可能会发送一份电子邮件时事通讯，介绍最近的博客文章。raybetapp在文章标题下面，你可以包含一个简短的描述，以及一个链接类的按钮，邀请读者阅读更多。下面是单击按钮时的显示方式。

有关更多自定义选项，您可以替换这些默认修改器类或将它们与其他方式组合CSS课程有关其他颜色，大小和状态选项。在我们仔细看看这些样式选项之前，重要的是要注意，可以与Bootstrap中的其他元素一起使用。

如何使用Bootstrap按钮类

虽然Bootstrap的按钮类被设计为与

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

你也可以在元素上按下按钮来折叠内容或触发页内功能。在这种情况下，应该给这些链接一个role="button"来适当地向辅助技术(如屏幕阅读器)传达它们的目的，如下所示。

除了显示与元素一起使用的按钮类别外，以下代码段还包括与<按钮>和<输入>元素一起使用的按钮类的示例。

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

以下是这些元素将如何出现在Bootstrap站点的前端。

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

引导按钮样式

如前所述，您可以通过替换九个默认修改器类或将它们与其他类组合来创建Bootstrap按钮的新样​​式。两种方法都将使您可以在额外的颜色，大小和状态下创建按钮。

让我们仔细看看这些按钮设计下面的选项。

引导按钮的颜色

使用其中一个默认修改器类将更改按钮的文本和背景颜色的颜色。.btn-危险将使按钮红色和字体白色，而.btn-protect将使按钮黄色和字体黑色，等等。但是，您想向按钮应用不同的文本和背景颜色。

您可以通过在CSS中使用HTML中的.btn类和CSS中的类选择器。让我们说我想制作我的按钮黑暗海绿色和文本白色的背景颜色。然后我用了CSS选择器.btn，风格属性颜色和背景颜色，以及六角彩色代码为深绿色(#8FBC8F)和白色(#FFFFFF)。

这是我的html：

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

这是我的CSS：

.btn {
颜色：#ffffff;
背景颜色：＃8FBC8F
}

这是结果：

要了解更多关于覆盖Bootstrap的默认样式，请查看如何编辑，自定义，并覆盖引导CSS，以适应您的品牌．

引导大纲按钮

如果您更喜欢按钮有彩色轮廓，而不是彩色背景，则可以使用修改器类.btn-utline。按钮颜色的相同默认选项可用于大纲按钮，如下所示。不需要CSS来使用这些样式中的任何一种。

源

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

这是我的html：

Click Me . class="btn -outline

这是我的CSS：

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

这是结果：

Bootstrap按钮大小

在Bootstrap中，你可以控制按钮的大小和颜色。要改变按钮的大小，你可以在HTML中添加以下修改器类:

• .btn-lg.
• .btn-sm.

让我们用下面的HTML来比较这些大小:

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

这是结果：

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

这是我的html：

<按钮类型=“按钮”类=“BTN BTN-辅助BTN-LG BTN-Block”>单击ME 

这是结果：

引导按钮状态

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

为了达到相反的效果，您可以使用disabled属性使按钮看起来像是不能按的。注意，disabled是一个属性，而不是一个类，因此它将出现在HTML中的撇号之外。

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

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

这是我的html：

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

这是结果：

Bootstrap切换按钮

如果你想让你的Bootstrap按钮在访问者点击它时从默认状态切换到活动状态，你可以在.btn类后添加data-toggle="button"。一旦单击，这些按钮将保持其较暗的背景、较暗的边框和插入阴影。(当访问者点击页面的其他地方时，插入的阴影会消失。)

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

<按钮类型=“按钮”class =“btn btn-primary”data-toggle =“按钮”>主切换
<按钮类型=“按钮”class =“btn btn-success”data-toggle =“按钮”>成功切换
警告切换
<按钮类型=“按钮”类=“btn btn-light”数据 -  opggle =“按钮”> Light Toggle 

这是结果：

Bootstrap单选按钮

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

HTML代码对于这一个比其他例方有点棘手，所以我们将通过它慢速度。

单选按钮的语法是，所以让我们将其复制粘贴三次，以创建一组三个单选按钮。每个按钮必须共享相同的name属性，所以我们将name= " options "添加到同一行。因为我们可能想要对每个元素应用不同的样式，所以我们将给每个元素赋予自己的ID名。我们分别称它们为选项1，选项2和选项3。以下是目前为止我们得到的:

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

要将按钮样式应用于Bootstrap中的这些<输入>元素，我们必须在 s中嵌套它们并添加.btn类。下面我将添加.btn-二级修改器类。现在我们有这个：

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

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

元素中并应用类.btn-group，.btn-group-toggle和data-toggle =“按钮”，以确保组中的每个按钮从其默认值切换单击时状态到活动状态。这是最终代码片段：

< / div > 
 radio
<输入类型=“收音机”名称=“选项”ID =“Option2”> Radio
 radio

结果如下:

创建一个引导按钮

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

为了让您开始，我已经创建了一个主按钮，并将它放在容器．

看笔创建一个引导按钮由克里斯蒂娜百科（@hubspot.） 上Codepen.．

向引导站点添加按钮

如果设计和放置得当，按钮可以帮助说服访问者采取行动。上面描述的任何按钮类型都可以重新创建和自定义到您的独特的引导站点。您只需要熟悉HTML和CSS就可以开始了。

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

最初发布于2021年5月18日早上7:00:00，更新于2021年5月18日

话题：

引导和CSS

别忘了分享这篇文章！