Alle abgerundeten Ecken in Twitter Bootstrap loswerden

Ich liebe Twitter Bootstrap 2.0 - ich liebe es, wie es eine so vollständige Bibliothek ist ... aber ich möchte eine globale Modifikation für eine sehr kastenförmige, nicht runde Site vornehmen, um alle abgerundeten Ecken in Bootstrap loszuwerden ...

Das ist viel CSS, durch das man tuckern muss. Gibt es einen globalen Schalter oder was wäre der beste Weg, um alle gerundeten zu finden und zu ersetzen?

Ich setze den Randradius aller Elemente wie folgt auf "0":

* {
  border-radius: 0 !important;
}

Da ich sicher bin, dass ich das später nicht überschreiben möchte, benutze ich einfach! Wichtig.

Wenn Sie nicht weniger Dateien kompilieren, gehen Sie einfach wie folgt vor:

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

Wenn Sie es in Bootstrap 3 kompilieren, können Sie jetzt den Radius in der Datei variables.less festlegen:

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

In Bootstrap 4 können Sie beim Kompilieren den Radius insgesamt in der _custom.scssDatei deaktivieren :

$enable-rounded:   false;

Laden Sie die Quelldateien herunter .lessund machen Sie das .border-radius()Mixin leer.

Wenn Sie Bootstrap Version <3 verwenden ...

Mit sass / scss

$baseBorderRadius: 0;

Mit weniger

@baseBorderRadius: 0;

Sie müssen diese Variable festlegen, bevor Sie den Bootstrap importieren. Dies betrifft alle Brunnen und Navigationsleisten.

Aktualisieren

Wenn Sie Bootstrap 3 verwenden, sollte baseBorderRadius border-radius-base sein

Wenn Sie vermeiden möchten, dass alles neu kompiliert wird, fügen .btn {border-radius: 0;}Sie es einfach Ihrem CSS hinzu.

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

Diese Frage ist ziemlich alt, aber sie ist in Suchmaschinen auch in Bootstrap 4- bezogenen Suchanfragen gut sichtbar . Ich denke, es lohnt sich, eine Antwort für das Deaktivieren der abgerundeten Ecken nach BS4-Art hinzuzufügen.

Es _variables.scssgibt mehrere globale Modifikatoren, mit denen sich Dinge wie das Aktivieren oder Deaktivieren des Flexgürtelsystems, abgerundete Ecken, Farbverläufe usw. schnell ändern lassen:

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

Abgerundete Ecken sind enabledstandardmäßig.

Wenn Sie es vorziehen, den Bootstrap 4 mit Sass und Ihrem eigenen _custom.scsswie mir (oder mit dem offiziellen Customizer) zu kompilieren, reicht es aus , die zugehörige Variable zu überschreiben:

$enable-rounded : false

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

Oder definieren Sie ein Mixin und fügen Sie es ein, wo immer Sie eine ungerundete Schaltfläche wünschen.

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

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

Wenn Sie Bootstrap> = 3.0Quelldateien ( SASSoder LESS) verwenden, müssen Sie nicht die abgerundeten Ecken von allem entfernen, wenn nur ein Element Sie nervt, um beispielsweise nur die abgerundeten Ecken in der Navigationsleiste zu entfernen. verwenden:

Mit SCSS:

$navbar-border-radius: 0;

Mit weniger:

@navbar-border-radius: 0;

Wenn Sie jedoch die abgerundeten Ecken an allem entfernen möchten, können Sie das tun, was @ adamwong246 erwähnt hat, und Folgendes verwenden:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

Diese beiden Einstellungen sind die "Root" -Einstellungen, von denen die anderen Einstellungen wie navbar-border-radiuserben, sofern keine anderen Werte angegeben sind.

Eine Liste aller Variablen finden Sie unter variables.less oder variables.scss

Der oben von @BrunoS veröffentlichte Code hat bei mir nicht funktioniert.

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

Was ich benutzt habe war

* {
  border-radius: 0 !important;
}

Ich hoffe das hilft jemandem

Es gibt eine sehr einfache Möglichkeit, Bootstrap anzupassen:

1. Gehen Sie einfach zu http://getbootstrap.com/customize/
2. Finden Sie alle "Radien" und ändern Sie sie nach Ihren Wünschen.
3. Klicken Sie auf "Kompilieren und Herunterladen" und genießen Sie Ihre eigene Version von Bootstrap.

Oder Sie können dies dem HTML-Code des Elements hinzufügen, aus dem Sie den Rahmenradius entfernen möchten (auf diese Weise würden Sie ihn nicht von allen Schaltflächen / Elementen entfernen):

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

Mit SASS Bootstrap können Sie - wenn Sie Bootstrap selbst kompilieren - den gesamten Randradius (oder spezifischer) einfach auf Null setzen:

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

Bootstrap hat seine eigenen Klassen für Rahmen, einschließlich .rounded-0, um abgerundete Ecken an jedem Element zu entfernen, einschließlichbuttons

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>

Vielleicht möchten Sie auch einen Blick auf FlatStrap werfen . Es bietet einen Metro-Style-Ersatz für das Bootstrap-CSS ohne abgerundete Ecken, Verläufe und Schlagschatten.

Wenn Sie Bootstrap verwenden, können Sie einfach die Bootstrap-Klasse = "abgerundet-0" verwenden, um den Rand mit den scharfen Kanten ohne abgerundete Ecken zu erstellen <button class="btn btn-info rounded-0"">Generate</button></span>

Ich habe eine andere CSS-Datei erstellt und den folgenden Code hinzugefügt. Nicht alle Elemente sind enthalten

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