如何将bootstrap中的圆角按钮默认更改为普通矩形按钮?现在我只能更改按钮的大小颜色或字体
.btn-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
.btn-sm,
.btn-xs {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
感谢您的帮助
答案 0 :(得分:10)
最佳做法是创建自定义类,以便在您想在其他地方使用它时不要更改基本CSS,然后应用更改。
在示例中,我使用.btn.btn-custom-lg,.btn.btn-custom-sm,.btn.btn-custom-xs但是如果您只想更改border-radius
之类的内容所有按钮都可以使一个全局类应用于按钮:.btn-square { border-radius: 0; }
参见工作示例。
/*Specific Cases*/
.btn.btn-custom-lg,
.btn.btn-custom-sm,
.btn.btn-custom-xs {
border-radius: 0;
}
/*Global*/
.btn.btn-square {
border-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<hr>
<h3>Specific</h3>
<div class="btn btn-default btn-lg btn-custom-lg">Button Default</div>
<div class="btn btn-default btn-sm btn-custom-sm">Button Default</div>
<div class="btn btn-default btn-xs btn-custom-xs">Button Default</div>
<hr>
<h3>Global</h3>
<div class="btn btn-default btn-lg btn-square">Button Default</div>
<div class="btn btn-default btn-sm btn-square">Button Default</div>
<div class="btn btn-default btn-xs btn-square">Button Default</div>
</div>
答案 1 :(得分:6)
rounded-0
<a href="tel:+447447218297" class="btn btn-lg btn-success rounded-0"><img src="">Call Now</a>