Css 摆脱Twitter引导中的所有圆角

我喜欢Twitter Bootstrap 2.0-我喜欢它是一个如此完整的库。。。但是我想对一个非常四四方方而非圆形的站点做一个全局性的修改，那就是去掉引导中的所有圆角

---

那有很多CSS需要处理。是否有一个全局开关，或者什么是查找和替换所有舍入值的最佳方法？

下载源代码

.less

文件，并将

.border-radius（）混入为空。
如果您想避免重新编译所有内容，只需将
.btn{border-radius:0；}
添加到CSS中即可

.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
}

我将所有元素的边界半径设置为“0”，如下所示：

* {
  border-radius: 0 !important;
}

因为我确信我不想在以后覆盖它，所以我只使用它！重要的

如果您没有编译less文件，请执行以下操作：

* {
  -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中，如果您正在编译它，您可以在
\u custom.scss
文件中一起禁用radius：

$enable-rounded:   false;

如果您使用的是引导版本<3

使用sass/scss

$baseBorderRadius: 0;

少

@baseBorderRadius: 0;

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

更新

如果您使用的是Bootstrap 3 baseBorderRadius，则应该是border radius base
，您可能还需要查看一下。它为无圆角、渐变和阴影的引导CSS提供了Metro风格的替代品。
或者您可以将其添加到要删除边框半径的元素的html中（这样您就不会从所有按钮/元素中删除）：

使用Bootstrap>=
3.0
源文件（
SASS
或
LESS
）时，如果只有一个元素困扰您，则不必消除所有内容的圆角，例如，要消除导航栏上的圆角，请使用：

使用SCSS：
用更少的钱：
但是，如果您确实想消除所有事物的圆角，您可以按照@adamwong246中提到的方法进行操作并使用：

$baseBorderRadius: 0;
@baseBorderRadius: 0;

这两个设置是“根”设置，除非指定了其他值，否则其他设置（如
navbar border radius
）将从中继承

要查看所有变量的列表，请查看或
上面@BrunoS发布的代码对我不起作用

* {
  .border-radius(0) !important;
}

我用的是

* {
  border-radius: 0 !important;
}

我希望这对某人有所帮助
有一种非常简单的定制引导的方法：

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;
}

去
找到所有“半径”，并根据需要修改它们
点击“编译和下载”，享受你自己的Bootstrap版本
这个问题已经很老了，但是它在搜索引擎上非常明显，即使在bootstrap4相关搜索中也是如此。我认为有必要为禁用圆角添加一个答案，即BS4方式

在
\u variables.scss
中，有几个全局修饰符可用于快速更改内容，例如启用或禁用弹性网格系统、圆角、渐变等：

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

我已经创建了另一个css文件并添加了以下代码
并非所有元素都包括在内

/* Flatten das boostrap */
.well, .navbar-inner, .popover, .btn, .tooltip, input, select, textarea, pre, .progress, .modal, .add-on, .alert, .table-bordered, .nav>.active>a, .dropdown-menu, .tooltip-inner, .badge, .label, .img-polaroid, .panel {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
    border-collapse: collapse !important;
    background-image: none !important;
}

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

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

Bootstrap有自己的边界类，包括
。rounded-0
，以消除任何元素（包括
按钮）上的圆角




规则圆角
药丸角
方形角
如果使用引导，则只需使用bootstrap class=“rounded-0”使边框具有锐利的边缘，而不具有圆角
您是想删除所有圆角还是只删除一些圆角？如果您无法修改当前的圆角，我创建了一个mod文件，将所有边界半径设置为0:ina，我的答案对您有用吗？你能把它标记为正确的吗？是的。非常感谢。为什么向下投票认为它只会影响按钮和添加了
的任何位置。btn
我通常保留“px”，这样，如果我必须更改值，我就不必再次键入“px”。但Flatstrap的额外数据字节问题是，它们还没有对v3的SCS支持：（如果您试图在不接触核心文件的情况下自定义引导，那么这是一个非常好的解决方案。回答很好！见鬼，是的，quick n dirty！我使用了这个
*{-webkit border radius:0！重要；-moz border radius:0！重要；border radius:0！重要；}
而且它在Bootstrap 3.2.Thanx中非常有效！这个解决方案不适用于Bootstrap样式的输入。可能是因为使用了
-webkit外观：menulist
。这可能是一个很好的解决方案，但不是最好的。这将不必要地为每个元素生成大量冗余CSS。我认为这是这是@ymakux提供的最佳解决方案之一。你可以试试this@brunos就掌握引导式CSS处理的效率而言，这可能是最好的解决方案。you rock；）一旦Bootstrap 4病毒性传播，这应该是公认的答案……对不起，公开。对于那些已经在alpha中使用它的人来说，它在这里隐藏得很好。确切地说。将这些声明放在导入之前。./node\u modules/Bootstrap/scs/Bootstrap“；
和bootstrap将不会覆盖它们，因为它们是用bootstrap-source中的
！default
关键字声明的。我在Bootsrap 4和'roughd-0'中尝试的bootstrap的哪个版本会删除输入框上的圆角
$enable-flex:          false !default;
$enable-rounded:       true !default; // <-- This one
$enable-shadows:       false !default;
$enable-gradients:     false !default;
$enable-transitions:   false !default;

$enable-rounded : false

/* Flatten das boostrap */
.well, .navbar-inner, .popover, .btn, .tooltip, input, select, textarea, pre, .progress, .modal, .add-on, .alert, .table-bordered, .nav>.active>a, .dropdown-menu, .tooltip-inner, .badge, .label, .img-polaroid, .panel {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
    border-collapse: collapse !important;
    background-image: none !important;
}

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