Bootstrap 是一个流行的前端框架，它提供了许多实用的组件来帮助开发者快速构建响应式网站。其中，Bootstrap 的按钮组件（Button）非常受欢迎，因为它可以轻松地创建样式丰富的按钮。然而，有时候我们并不希望点击按钮时提交表单。本文将揭秘这个技巧，帮助您在 Bootstrap 中实现点击按钮而不提交表单的效果。
1. 了解表单提交
在 HTML 中，当用户点击一个按钮时，如果该按钮是表单的一部分，那么它将会触发表单的提交。这是因为按钮的 type 属性默认为 submit。
2. 修改按钮类型
为了防止按钮提交表单，我们可以将按钮的 type 属性从 submit 修改为 button。这样，按钮就不会触发表单的提交了。
<button type="button" class="btn btn-primary">点击我，我不会提交表单</button>
3. 使用 Bootstrap 类
Bootstrap 提供了丰富的按钮类，我们可以使用这些类来创建一个具有Bootstrap样式的按钮，同时将其 type 属性设置为 button。
<button type="button" class="btn btn-primary">点击我，我不会提交表单</button>
4. 添加事件监听器
有时候，我们可能需要执行一些特定的操作，而不是简单地阻止表单提交。在这种情况下，我们可以给按钮添加一个事件监听器，例如点击事件（click）。
<button type="button" class="btn btn-primary" onclick="alert('按钮被点击了！')">点击我，我不会提交表单</button>
在上面的代码中，当用户点击按钮时，会弹出一个警告框，提示“按钮被点击了！”
5. 使用 JavaScript 阻止默认行为
如果按钮是表单的一部分，并且我们希望阻止表单的默认提交行为，我们可以使用 JavaScript 来实现。
<form>
<button type="button" class="btn btn-primary" onclick="event.preventDefault()">点击我，我不会提交表单</button>
</form>
在上面的代码中，我们给按钮添加了一个 onclick 事件处理器，该处理器调用 event.preventDefault() 方法来阻止表单的默认提交行为。
6. 总结
通过修改按钮的 type 属性、使用 Bootstrap 类、添加事件监听器以及使用 JavaScript，我们可以在 Bootstrap 中实现点击按钮而不提交表单的效果。这些技巧可以帮助我们在构建网页时更加灵活地控制用户交互。