摆脱 Twitter Bootstrap 中的所有圆角

Posted

技术标签:

【中文标题】摆脱 Twitter Bootstrap 中的所有圆角【英文标题】:Getting rid of all the rounded corners in Twitter Bootstrap 【发布时间】:2012-04-02 06:50:54 【问题描述】:

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

这需要大量的 CSS。是否有全局开关,或者找到和替换所有圆形的最佳方法是什么?

【问题讨论】:

您是要删除所有圆角还是只删除一些圆角? 如果你不能修改你当前的位置,我创建了一个所有border-radii设置为0的mod文件:mkamyszek.tumblr.com/post/61791361233/… ina,我的回答对你有用吗?你会把它标记为正确吗? 是的。谢谢! .. 为什么投反对票 【参考方案1】:

如果您使用的是引导程序,您可以使用引导程序 class="rounded-0" 来制作没有圆角的边缘锐利的边框 <button class="btn btn-info rounded-0"">Generate</button></span>

【讨论】:

哪个版本的引导程序 我在 Bootsrap 4 中尝试过,'rounded-0' 删除了输入框上的圆角【参考方案2】:

Bootstrap 有自己的边框类,包括 .rounded-0,以消除包括 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>

【讨论】:

【参考方案3】:

使用 SASS Bootstrap - 如果您自己编译 Bootstrap - 您可以将所有边界半径(或更具体)简单地设置为零:

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

【讨论】:

没错。将这些声明放在例如之前@import "../node_modules/bootstrap/scss/bootstrap"; 和 bootstrap 不会覆盖它们,因为它们是在 bootstrap-source 中使用 !default 关键字声明的。【参考方案4】:

我已经创建了另一个 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;

【讨论】:

【参考方案5】:

我将所有元素的边框半径设置为“0”,如下所示:

* 
  border-radius: 0 !important;

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

如果您不编译您的 less 文件,只需执行以下操作:

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

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

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

在 bootstrap 4 中,如果您正在编译它,您可以在 _custom.scss 文件中一起禁用半径:

$enable-rounded:   false;

【讨论】:

如果您尝试在不接触核心文件的情况下自定义引导程序,这是一个非常好的解决方案。很好的答案! 见鬼,快点! 我用过这个* -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; 它非常适合Bootstrap 3.2。感谢修复人! 此解决方案不适用于引导样式的 这可能是一个很好的解决方案,但不是最好的。这将不必要地为每个元素生成大量冗余 CSS。我认为这是@ymakux 提供的最佳解决方案之一。你可以试试这个【参考方案6】:
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;

【讨论】:

【参考方案7】:

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

_variables.scss 中有几个全局修改器可以快速更改诸如启用或禁用柔性网格系统、圆角、渐变等内容:

$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

【讨论】:

you rock ;) 一旦 Bootstrap 4 流行起来,这应该是公认的答案......对不起,公开。对于那些已经在 alpha 中使用它的人来说,它已经隐藏在这里了。【参考方案8】:

有一种非常简单的自定义 Bootstrap 的方法:

    去http://getbootstrap.com/customize/ 找到所有“半径”并根据需要进行修改。 点击“编译和下载”,享受您自己的 Bootstrap 版本。

【讨论】:

【参考方案9】:

@BrunoS 上面发布的代码对我不起作用,

* 
  .border-radius(0) !important;

我用的是

* 
  border-radius: 0 !important;

我希望这对某人有所帮助

【讨论】:

@brunos 使用的是LESS【参考方案10】:

当使用 Bootstrap >= 3.0 源文件(SASSLESS)时,如果只有一个元素困扰您,您不必消除所有内容的圆角,例如,要摆脱导航栏上的圆角,请使用:

使用 SCSS:

$navbar-border-radius: 0;

少:

@navbar-border-radius: 0;

但是,如果您确实想摆脱所有东西的圆角,您可以执行@adamwong246 提到的并使用:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

这两个设置是“根”设置,其他设置(如 navbar-border-radius)将从其继承,除非指定其他值。

有关所有变量的列表,请查看 variables.less 或 variables.scss

【讨论】:

【参考方案11】:

或者您可以将其添加到要从中删除边框半径的元素的 html 中(这样您就不会从所有按钮/元素中删除它):

style="border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;"

【讨论】:

【参考方案12】:

如果您使用的是 Bootstrap 版本

使用 sass/scss

$baseBorderRadius: 0;

少了

@baseBorderRadius: 0;

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

更新

如果您使用的是 Bootstrap 3,baseBorderRadius 应该是 border-radius-base

【讨论】:

【参考方案13】:

您可能还想看看FlatStrap。它为 Bootstrap CSS 提供了 Metro 风格的替代品,没有圆角、渐变和阴影。

【讨论】:

Flatstrap 的问题是他们还没有对 v3 的 SCSS 支持:(【参考方案14】:
.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

【讨论】:

我通常保留'px',这样如果我必须更改值,我就不必再次输入'px'。 但是额外的数据字节【参考方案15】:

如果您想避免重新编译所有内容,只需将 .btn border-radius: 0; 添加到您的 CSS。

【讨论】:

它只会影响按钮以及您添加的任何位置.btn【参考方案16】:

下载源.less 文件并将.border-radius() mixin 设为空白。

【讨论】:

这可能是掌握 Bootstrap CSS 处理效率的最佳解决方案。

以上是关于摆脱 Twitter Bootstrap 中的所有圆角的主要内容,如果未能解决你的问题,请参考以下文章

Twitter Bootstrap 中的导航栏颜色

选择表格行并使用 Twitter Bootstrap 保持突出显示

Twitter Bootstrap 3 中的图片默认没有响应?

激活 Twitter Bootstrap 导航栏链接

twitter bootstrap - 根据最大​​列高设置列高[重复]

Twitter Bootstrap 模态背景不会覆盖 iPad 上的整个屏幕