菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap JS 按钮


JS 按钮 (button.js)

如果您想对按钮进行更多控制,请使用此插件。

有关按钮的教程,请阅读我们的 Bootstrap 按钮教程


按钮插件类

下面的类可用于设置任何 <a>、<button> 或 <input> 元素的样式

描述 示例
.btn 为任何按钮添加基本样式 试一试
.btn-default 表示默认/标准按钮 试一试
.btn-primary 提供额外的视觉权重,并识别一组按钮中的主要操作 试一试
.btn-success 表示成功或积极的操作 试一试
.btn-info 用于信息警报消息的上下文按钮 试一试
.btn-warning 表示此操作应谨慎进行 试一试
.btn-danger 表示危险或潜在的负面操作 试一试
.btn-link 使按钮看起来像链接(仍具有按钮功能) 试一试
.btn-lg 制作大号按钮 试一试
.btn-sm 制作小号按钮 试一试
.btn-xs 制作超小号按钮 试一试
.btn-block 制作块级按钮(跨越父元素的全部宽度) 试一试
.active 使按钮显示为按下状态 试一试
.disabled 使按钮失效 试一试

通过 JavaScript

使用以下命令手动启用:

$('.btn').button();


按钮选项

按钮方法

下表列出了所有可用的按钮方法。

注意: 对于此插件,也可以通过 data 属性传递方法;将方法名称附加到 data-,例如 data-toggle 或 data-loading。

方法 描述 试一试
.button("toggle") 使按钮看起来为按下状态 试一试
.button("loading") 禁用按钮并将按钮文本更改为“loading...” 试一试
.button("reset") 将按钮文本更改为原始文本(如果已更改) 试一试
.button("string") 指定新的按钮文本 试一试

更多示例

使用 CSS 自定义按钮

如何移除圆角边框

示例

.btn-default {
  border-radius: 0;
}
自己动手试一试 »

如何添加特定颜色

示例

.btn-default {
  background: #000;
  color: #fff;
}

.btn-default:hover {
  background: #fff;
  color: #000;
}
自己动手试一试 »

如何添加阴影

示例

.btn-default {
  box-shadow: 1px 2px 5px #000000;
}
自己动手试一试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持