CSS bootstrap按钮点击时显示默认颜色
在本文中，我们将介绍如何使用CSS和Bootstrap来实现按钮在点击时显示默认颜色的效果。
阅读更多：CSS 教程
1. CSS样式
要实现按钮在点击时显示默认颜色的效果，我们首先需要定义按钮的CSS样式。我们可以使用Bootstrap提供的按钮类来定义按钮的基本样式，并使用CSS伪类来实现按钮在点击时显示默认颜色的效果。
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-default:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn-default:focus, .btn-default.focus {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
在上面的示例中，我们使用了.btn-default类来定义按钮的基本样式。当鼠标悬停在按钮上时，我们使用.btn-default:hover来定义按钮的悬停状态样式。当按钮获取焦点时，我们使用.btn-default:focus, .btn-default.focus来定义按钮获取焦点状态样式。
2. HTML结构
在定义了按钮的CSS样式后，我们需要在HTML中添加按钮元素，并为按钮添加相关的类。
<button type="button" class="btn btn-default">Click Me!</button>
在上面的示例中，我们添加了一个按钮元素，并为按钮添加了.btn和.btn-default类。这样，按钮将应用之前定义的CSS样式。
3. Javascript事件绑定
要实现按钮在点击时显示默认颜色的效果，我们需要使用Javascript来绑定按钮的点击事件，并在事件处理函数中切换按钮的CSS类。
document.querySelector('.btn').addEventListener('click', function() {
this.classList.toggle('btn-default');
});
在上面的示例中，我们使用querySelector方法选中了页面中的第一个按钮，然后使用addEventListener方法为按钮绑定了一个点击事件。在点击事件处理函数中，我们使用classList.toggle方法来切换按钮的CSS类，从而实现按钮在点击时显示默认颜色的效果。
4. 完整示例
下面是一个完整的示例，展示了按钮在点击时显示默认颜色的效果。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-default:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn-default:focus, .btn-default.focus {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
</style>
</head>
<body>
<button type="button" class="btn btn-default">Click Me!</button>
<script>
document.querySelector('.btn').addEventListener('click', function() {
this.classList.toggle('btn-default');
});
</script>
</body>
</html>
在上面的示例中，我们在<head>标签中引入了Bootstrap的CSS文件，并将按钮的CSS样式定义在<style>标签中。然后，在<body>标签中添加了一个按钮元素，并为按钮添加了.btn和.btn-default类。最后，使用<script>标签中的Javascript代码实现了按钮在点击时显示默认颜色的效果。
总结
通过本文的介绍，我们学习了如何使用CSS和Bootstrap来实现按钮在点击时显示默认颜色的效果。首先，我们定义了按钮的CSS样式，然后在HTML中添加了按钮元素并为按钮添加了相关的类。最后，我们使用Javascript来绑定按钮的点击事件，并在事件处理函数中切换按钮的CSS类。通过这样的方式，我们成功实现了按钮在点击时显示默认颜色的效果。
通过本文的学习，希望读者能够更好地理解CSS和Bootstrap的使用，并能够灵活运用它们来实现自己想要的效果。
此处评论已关闭