摆脱所有的圆角在Twitter Bootstrap [英] Getting rid of all the rounded corners in Twitter Bootstrap

问题描述

我喜欢Twitter Bootstrap 2.0 - 我喜欢它是如此完整的库...但我想做一个全局修改一个非常不圆的网站，这是摆脱所有的圆角在Bootstrap ...

I love Twitter Bootstrap 2.0 - I love how it's such a complete library... but I want to make a global modification for a very boxy-not-round site, which is to get rid of all the rounded corners in Bootstrap...

这是很多CSS。是否有全局切换，或者什么是最好的方法来找到和替换所有的圆角？

That's a lot of CSS to chug through. Is there a global switch, or what would be the best way to find and replace all the rounded's?

推荐答案

border-radius to0like this：

I set all element's border-radius to "0" like this:

* {
  border-radius: 0 !important;
}

由于我确定我不想覆盖此后使用！重要。

As I'm sure I don't want to overwrite this later I just use !important.

如果您不编译较少的文件，只需执行：

If you are not compiling your less files just do:

* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

在bootstrap 3中，如果你正在编译它， .less file：

In bootstrap 3 if you are compiling it you can now set radius in the variables.less file:

@border-radius-base:        0px;
@border-radius-large:       0px;
@border-radius-small:       0px;

在bootstrap 4中，如果你正在编译它，你可以在 _custom.scss file：

In bootstrap 4 if you are compiling it you can disable radius alltogether in the _custom.scss file:

$enable-rounded:   false;

这篇关于摆脱所有的圆角在Twitter Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！