菜单
×
   ❮     
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 Buttons


按钮样式

Bootstrap 提供了不同的按钮样式

要实现上述按钮样式,Bootstrap 使用了以下类

  • .btn
  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link

下面的示例展示了不同按钮样式的代码

示例

<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">默认</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
自己动手试一试 »

按钮类可以用于 <a><button><input> 元素

示例

<a href="#" class="btn btn-info" role="button">链接按钮</a>
<button type="button" class="btn btn-info">按钮</button>
<input type="button" class="btn btn-info" value="输入按钮">
<input type="submit" class="btn btn-info" value="提交按钮">
自己动手试一试 »

为什么我们在链接的 href 属性中放置 #?

由于我们没有要链接的页面,并且不希望出现“404”消息,因此我们在示例中使用了“#”。它应该是一个指向特定页面的真实 URL。



按钮大小

Bootstrap 提供了四种按钮尺寸

定义不同尺寸的类是

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

下面的示例展示了不同按钮尺寸的代码

示例

<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">标准</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">超小号</button>
自己动手试一试 »

块级按钮

块级按钮跨越父元素的全部宽度。

添加类 .btn-block 来创建块级按钮

示例

<button type="button" class="btn btn-primary btn-block">按钮 1</button>
自己动手试一试 »

活动/禁用按钮

按钮可以设置为活动(显示为按下状态)或禁用(不可点击)状态

.active 使按钮显示为按下状态,而类 .disabled 使按钮不可点击

示例

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">禁用主按钮</button>
自己动手试一试 »

通过练习来测试自己

练习

添加 Bootstrap 类以将按钮正确样式化为“危险”按钮。

<button class="">Danger</button>

开始练习


完整的 Bootstrap 按钮参考

有关所有按钮类的完整参考,请访问我们完整的 Bootstrap 按钮参考


×

联系销售

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

报告错误

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

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

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