如何更改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按鈕的形狀

回答

相關問題