如何更改Bootstrap按钮的形状

如何将bootstrap中的圆角按钮默认更改为普通的矩形按钮？现在，我只能改变大小，颜色或按钮如何更改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; 
 
}

的字体感谢您的帮助

来源

2015-10-06 Gavin Niu

最好的做法是创建一个自定义类，所以你不改变你的在您想要在别处使用它的情况下使用基本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>

来源

2015-10-06 18:22:51 vanburen

谢谢！有用！ –

不客气，很高兴我能提供帮助。 – vanburen

-1

添加类rounded-0，作为GetBootstrap.com解释说：

<a href="tel:+447447218297" class="btn btn-lg btn-success rounded-0"><img src="">Call Now</a>

来源

2017-11-08 22:23:46

要确认其他读者，仅适用于引导程序4，但其他解决方案更适合引导程序3。 – TidyDev

如何更改Bootstrap按钮的形状

回答

相关问题