按钮是重要元素网页设计。他们可以帮助吸引访客的眼睛，为他们提供重要信息，或说服他们在您的网站上采取行动。
了解该设计元素的重要性，前端开发工具包Bootstrap CSS为按钮提供现成的模板。这些模板允许您快速，轻松地在引导网站上创建和自定义按钮。您只需要对html和CSS这样做。
在这篇文章中，我们将解释如何创建按钮，按钮类是什么以及在引导程序中进行哪些样式。
如何在Bootstrap中创建按钮
由于工具包中包含的预先设计的模板，在引导程序中创建一个按钮很容易。您可以简单地将任何预定义样式的代码（如下所示）复制并粘贴到HTML文件的正义部分中，以在您的站点中添加按钮。
You’re not limited to these default options, however. Whether you’re looking to match your site’s branding more closely or do more with your buttons, Bootstrap supports multiple colors, sizes, and states so you can change the appearance and behavior of your buttons.
To understand how to change their appearance and behavior, we first have to understand button classes.
Bootstrap按钮类
The Bootstrap button class is .btn. Using this button class with a
这是按钮的代码：
这是结果：
为了使该按钮更可见（可以单击！），请访问网站前端的访问者，您可以添加修饰符类。
Bootstrap按钮具有九个默认修饰符类，在上一节中的屏幕截图中显示。每个都有不同的用例。让我们仔细研究下面的这些默认修饰符类。
.btn-primary
“主要”类可用于为按钮提供更多的视觉重量，同时代表访问者在页面上采取的主要动作。
例如，在业务网站的主页上，主按钮可能邀请访问者购买其产品。
.btn中学
“辅助”类可用于为按钮提供更多的视觉重量，同时代表次要动作，供访问者参加页面。
虽然主按钮可能会邀请访问者在业务网站的主页上购买产品，但辅助按钮可能会邀请访问者进行演示。
。btn-success
“成功”类可用于指示成功或积极的行动。
例如，在表格结尾处，成功按钮可以鼓励访问者提交。
.btn-Danger
“危险”类可用于指示潜在的危险或负面作用。
尽管成功按钮可以鼓励访问者提交表格，但您可能需要使用危险按钮，以确保访问者在提交之前查看其信息。如果他们一旦提交就不能回去并更改信息，这一点尤其重要。
。btn-warning
同样，“警告”类可以代表警告。
例如，如果用户正在创建帐户，则警告按钮可以表明错过了一些必需的字段，并且必须在继续注册之前填写。
.btn-info
“信息”类可以代表信息警报。
在帐户注册表上，信息按钮可能表明用户可以单击以编辑其配置文件。
.btn-light
The “light” class was added when Bootstrap expanded its default color options. It's a great option for web pages with dark background colors.
.btn-dark
当Bootstrap扩展其默认颜色选项时，还添加了“ Dark”类。对于带有背景颜色的网页，这是一个不错的选择。
。btn-link
You can use the “link” class if you’re looking to deemphasize the appearance of a button. This last default modifier class will make a button look like a link but still behave like a button.
For example, you might send out an email newsletter featuring recent blog posts. Below the post title, you might include a brief description as well as a button with the link class inviting readers to read more. Below is how the button would appear when clicked.
有关更多自定义选项，您可以替换这些默认修饰符类或将其与其他CSS课程有关其他颜色，尺寸和状态选项。在仔细研究这些样式选项之前，请务必注意，可以与Bootstrap中的其他元素一起使用.btn类。
如何使用bootstrap按钮类
虽然Bootstrap的按钮类旨在与
您还可以在元素上按钮类以折叠内容或以其他方式触发页面功能。在这种情况下，应将这些链接赋予一个角色=“按钮”，以适当地将其目的传达给诸如屏幕读取器之类的辅助技术，如下所示。
这是这些元素将如何出现在Bootstrap网站的前端。
现在，我们了解了按钮类在
引导按钮样式
如前所述，您可以通过替换九个默认修饰符类中的任何一个或将其与其他类组合来为Bootstrap按钮创建新样式。两种方法都将使您能够以其他颜色，尺寸和状态创建按钮。
让我们仔细看看这些按钮设计下面的选项。
引导按钮颜色
使用默认修饰符类之一将改变按钮的文本和背景颜色的颜色。.btn-danger将使按钮红色和字体为白色，而.btn-thanning将使按钮黄色和字体为黑色，依此类推。但是说您想在按钮上应用不同的文本和背景颜色。
您可以在HTML中使用.btn类和CSS中的类选择器。假设我想制作我的纽扣深海绿色和文字白色的背景颜色。然后我会使用CSS选择器.btn，样式属性颜色和背景色，以及十六进制颜色代码对于黑海绿（＃8FBC8F）和白色（#ffffff）。
这是我的html：
这是我的CSS：
.btn {
颜色：#ffffff;
背景色：＃8FBC8F
}
这是结果：
To learn more about overriding Bootstrap's default styling, check out如何编辑，自定义和覆盖Bootstrap CSS适合您的品牌。
Bootstrap Outline Buttons
如果您希望按钮具有彩色轮廓，而不是彩色背景，则可以使用修饰符类.btn-Outline。如下所示，可以使用相同的按钮颜色的按钮颜色的默认选项。不需要CSS使用任何这些样式。
如果您正在寻找更多的设计选项，则可以使用与上面概述的相同方法将轮廓颜色更改为想要的任何颜色。您只需在HTML而不是.btn和CSS样式的属性边框颜色而不是背景色中使用类。BTNBTN外线。为了娱乐，我们还将为鲑鱼使用十六进制颜色代码。否则，您将使用相同的CSS类选择器.btn和样式属性颜色更改文字颜色。
这是我的html：
这是我的CSS：
.btn {
颜色：＃fa8072;
边界颜色：＃FA8072
}
这是结果：
引导按钮大小
在Bootstrap中，您可以控制按钮的尺寸和颜色。要更改按钮的大小，您可以在HTML中添加以下修饰符类：
- .btn-lg
- .btn-sm
Let’s compare these sizes using the following HTML:
在
这是结果：
您还可以通过将.btn-large修饰符类与.btn-block相结合，从而创建块级按钮（跨越父元素的全宽度的按钮）。
这是我的html：
这是结果：
引导按钮状态
如果您想更改按钮的外观状态，则可以使用类别的类别来使按钮看起来像已被按下。它将具有更黑暗的背景，较暗的边界和插图的阴影。
对于相反的效果，您可以使用禁用属性使按钮看起来像无法按下。请注意，禁用是一个属性，而不是类，因此它将在HTML中的撇号之外。
同样重要的是要注意，元素不支持残疾属性。因此，您必须使用.disabled类以使元素看起来不活跃。实际上，由于.disabled类禁用元素的链接功能，因此这些修改的元素不仅看起来不可用 - 它们将是无法拼写的。
Below let’s take a look at the different code for each button state, and how they display on the front-end.
这是我的html：
这是结果：
引导程序切换按钮
如果您希望Bootstrap按钮在访问者单击它时从其默认状态切换到活动状态，则可以在.btn类之后添加data-toggle =“ button”。单击后，这些按钮将保留其深色的背景，较深的边框和插图阴影。（当访问者单击页面上的其他位置时，插图确实消失了。）
这是我的HTML，包括几种按钮颜色：
在
这是结果：
引导开机按钮
通常在预定义的相关选项（称为无线电组）中找到一个无线电按钮。此按钮组的独特之处在于，一次只能选择一个单选按钮。因此，说您选择一个按钮。在组中选择另一个将自动取消选择第一个按钮。
为此，HTML代码比其他示例要棘手一些，因此我们会慢慢浏览它。
的语法单选按钮是< input type = "收音机"> so let’s copy and paste that three times to create a group of three. Each button has to share the same name attribute so we’ll add name=”options” to the same line. And since we may want to apply different styles to each element, we’ll give each its own ID name. We’ll call them option 1, option 2, and option 3. Here’s what we’ve got so far:
无线电
无线电
无线电
要将按钮样式应用于Bootstrap中的这些<输入>元素，我们必须将它们嵌套在
无线电
无线电
无线电
最后，我们只需要将其包装在
<
Radio
无线电
无线电
这就是结果：
创建一个bootstrap按钮
使用下面的Codepen模块，您可以测试知识并创建自己的引导程序按钮。
为了让您开始，我创建了一个主按钮，并将其放在容器。
看到笔创建一个bootstrap按钮克里斯蒂娜·佩里奇（Christina Perricone）（@HubSpot） 上Codepen。
在引导网站上添加按钮
When designed and placed well, buttons can help persuade visitors to take action. Any of the button types described above can be re-created and customized to your unique Bootstrap site. You’ll just need some familiarity with HTML and CSS to get started.
编者注：该帖子最初于2020年5月发表，并已更新以进行全面性。
最初出版于2021年5月18日上午7:00：00，更新于2021年8月23日
话题：
Bootstrap＆css相关文章
