摆脱Twitter Bootstrap中的所有圆角

Question

我喜欢Twitter Bootstrap 2.0 - 我喜欢它是如此完整的库...但我想对一个非常四四方方的站点进行全局修改,这是为了摆脱Bootstrap中的所有圆角......

这需要很多CSS才能完成.是否有全局转换,或者找到并替换所有舍入的最佳方法是什么？

Answer 1

我将所有元素的border-radius设置为"0",如下所示:

* {
  border-radius: 0 !important;
}

因为我确定我不想在以后覆盖它,所以我只是使用!important.

如果您没有编译较少的文件,请执行以下操作:

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

在bootstrap 3中,如果你正在编译它,你现在可以在variables.less文件中设置radius:

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

在bootstrap 4中,如果你正在编译它,你可以在_custom.scss文件中全部禁用radius :

$enable-rounded:   false;

Answer 2

下载源.less文件并将.border-radius()mixin留空.

Answer 3

如果您使用的是Bootstrap版本<3 ...

随着sass/scss

$baseBorderRadius: 0;

少用

@baseBorderRadius: 0;

在导入引导程序之前,您需要设置此变量.这将影响所有井和导航栏.

更新

如果你使用Bootstrap 3 baseBorderRadius应该是border-radius-base

Answer 4

如果你想避免重新编译所有东西,只需添加.btn {border-radius: 0;}到你的CSS.

Answer 5

code,
kbd,
pre,
.img-rounded,
.img-thumbnail,
.img-circle,
.form-control,
.btn,
.btn-link,
.dropdown-menu,
.list-group-item,
.input-group-addon,
.input-group-btn,
.nav-tabs a,
.nav-pills a,
.navbar,
.navbar-toggle,
.icon-bar,
.breadcrumb,
.pagination,
.pager *,
.label,
.badge,
.jumbotron,
.thumbnail,
.alert,
.progress,
.panel,
.well,
.modal-content,
.tooltip-inner,
.popover,
.popover-title,
.carousel-indicators li {
    border-radius:0 !important;
}

Answer 6

使用 SASS Bootstrap - 如果您自己编译 Bootstrap - 您可以将所有边框半径（或更具体）简单地设置为零：

$border-radius:               0;
$border-radius-lg:            0;
$border-radius-sm:            0;

Answer 7

.btn {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

或者定义一个mixin并将其包含在任何你想要一个未连接的按钮的地方.

@mixin btn-round-none {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

.btn.btn_1 {
@inlude btn-round-none
}

Answer 8

当使用Bootstrap> = 3.0源文件(SASS或LESS)时,如果只有一个元素会让你烦恼,那么你就不必去除所有东西上的圆角,例如,只是去掉导航栏上的圆角,使用:

使用SCSS:

$navbar-border-radius: 0;

没有:

@navbar-border-radius: 0;

但是,如果你想要摆脱一切的圆角,你可以做@ adamwong246提到并使用的:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

这两个设置是"root"设置,其他设置navbar-border-radius将从中继承,除非指定其他值.

对于列表,所有变量都检查变量.less或variables.scss

Answer 9

这个问题已经很老了，但是即使在与Bootstrap 4相关的搜索中，它在搜索引擎上也很明显。我认为值得为BS4方式禁用圆角添加答案。

在其中_variables.scss存在几个全局修改器，可以快速更改内容，例如启用或禁用flex gird系统，圆角，渐变等。

$enable-flex:          false !default;
$enable-rounded:       true !default; // <-- This one
$enable-shadows:       false !default;
$enable-gradients:     false !default;
$enable-transitions:   false !default;

enabled默认情况下，圆角是。

如果您更喜欢使用Sass和_custom.scss像我这样的人（或使用官方定制程序）来编译Bootstrap 4 ，则覆盖相关变量就足够了：

$enable-rounded : false

Answer 10

Bootstrap has it's own classes for borders including .rounded-0 to get rid of rounded corners on any element including buttons

https://getbootstrap.com/docs/4.4/utilities/borders/#border-radius

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="btn btn-primary">Regular Rounded Corners</a>
<a class="btn btn-primary rounded-pill">Pill Corners</a>
<a class="btn btn-primary rounded-0">Square Corners</a>