Bootstrap 5 按钮

Bootstrap 5 按钮元素可在文档主体中允许文本级标记的任何地方使用。 这样的元素不需要与表单元素相关。

Bootstrap 中的按钮允许用户将表单提交到服务器进行处理。

利用 Bootstrap 5 自定义按钮样式来操作表单、对话框等，支持不同的尺寸、状态和其他选项。

Bootstrap 5 关联按钮

Bootstrap 5 按钮使用带类的 button 标签和类型。 "btn" 类使用 button 标签来显示默认按钮格式。 网页上使用的关联按钮类，例如 "btn-success"、"btn-primary"、"btn-secondary" 等。 在这里，我们可以使用关联类型来实现按钮的不同颜色和含义。

语法

以下语法显示使用 Bootstrap 5 类的默认按钮。

以下语法显示使用 Bootstrap 5 类的颜色按钮。

• 在这里，我们在 <button> 标签中使用主要按钮类。
• Bootstrap 5 提供了几个关联按钮类以供不同的样式。

示例

以下示例显示了不同类型的按钮及其含义。 此按钮使用关联类来显示特定按钮。

输出

下图显示了带有其类在 html 页面上的不同按钮。

Bootstrap 5 button 标签

Bootstrap 5 按钮使用具有类的不同按钮标签和类型。 每个按钮标签中都需要 "btn" 类。 如果表单需要颜色按钮，我们可以使用关联类。

<a> 和 <button> 标签分别与结束标签一起使用以显示按钮链接和按钮功能。 <input> 标签使用不同的按钮元素类型，没有结束标签。 我们可以在输入标签中使用 button、submit 和 reset 类型。

语法

以下语法显示使用 <a> 标签的链接按钮。

以下语法显示使用 <button> 标签的按钮元素。

以下语法显示使用 <input> 标签的提交表单数据。

以下语法显示使用 <input> 标签的重置表单数据。

以下语法显示使用 <input> 标签的按钮功能。

示例

以下示例显示了在 Bootstrap 5 表单中使用不同类型的按钮。

输出

下图显示了带有其标签在 html 页面上的不同按钮。

Bootstrap 5 按钮轮廓

按钮轮廓在按钮周围显示边框。 Bootstrap 5 按钮使用带有关联轮廓类的 button 标签。 "btn" 类使用 button 标签来显示默认按钮格式。 我们可以在这里使用关联类来实现不同颜色的边框和白色主体按钮。

语法

以下语法显示使用 Bootstrap 5 类的彩色边框按钮。

• 我们在 <button> 标签中使用主要按钮轮廓类。
• Bootstrap 5 提供了几个关联按钮轮廓类，用于不同的边框颜色。

示例

以下示例显示了不同类型的按钮及其含义。 此按钮使用关联类来显示特定按钮。

输出

下图显示了带有其类在 html 页面上的不同按钮。

按钮大小

Bootstrap 5 按钮功能为按钮大小提供了类。 按钮使用大、默认和小尺寸。 如果我们不使用按钮大小类，则 Bootstrap 5 将显示按钮的默认大小。

语法

以下语法显示使用 Bootstrap 5 类的彩色边框按钮。

<button type = "button" class = "btn btn-primary btn-lg|btn-sm"> 主要按钮 </button>

• "btn-lg" 按钮类用于大号按钮。
• "btn-sm" 按钮类用于小号按钮。

示例

以下示例显示了网页上不同大小的按钮。 在这里，第一个按钮显示大号按钮，第二个按钮显示默认大小按钮，第三个按钮显示小号按钮。

输出

下图显示了带有其类在 html 页面上的不同按钮。

结论

Bootstrap 5 按钮功能对于用户交互表单至关重要。 它有助于在用户和数据库之间操作和处理数据。 如果我们要保存、更新、删除、下载、搜索和链接网页，则需要一个按钮。 Bootstrap 5 提供了多个按钮类，用于不同的目的和功能。