Alle abgerundeten Ecken in Twitter Bootstrap loswerden

172

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?

in einem
quelle
Möchten Sie alle oder nur einige abgerundete Ecken entfernen?
Andres Ilich
Wenn Sie nicht ändern können, was Sie derzeit haben, habe ich eine Mod-Datei erstellt, deren Randradien
Mark Kamyszek
1
ina, hat meine antwort für dich geklappt? Würden Sie es als richtig markieren?
BrunoS
Ja. Danke! .. warum die Abwertung aber
ina

Antworten:

330

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;
BrunoS
quelle
2
Dies ist eine wirklich gute Lösung, wenn Sie versuchen, Bootstrap anzupassen, ohne die Kerndateien zu berühren. Gute Antwort!
Marty
4
Verdammt ja, schnell und dreckig!
Programmierer
1
Ich hatte dies verwendet * { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; }und es funktioniert perfekt für Bootstrap 3.2. Danke für den festen Mann!
Todor Todorov
1
Diese Lösung funktioniert nicht für <straect> -Eingänge im Bootstrap-Stil. Wahrscheinlich aufgrund der Verwendung von -webkit-appearance: menulist.
Johnsorrentino
Dies ist wahrscheinlich eine gute Lösung, aber nicht die beste. Dies erzeugt unnötigerweise eine große Anzahl redundanter CSS für jedes Element. Ich denke, dies ist eine der besten Lösungen von @ymakux. Sie können dies versuchen
MB Parvez Rony
25

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

SLaks
quelle
Dies ist die vielleicht beste Lösung für die Effizienz bei der Beherrschung der Bootstrap-CSS-Verarbeitung.
Klewis
20

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

adamwong246
quelle
18

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

yves amsellem
quelle
1
Es .btn
wirkt sich
18
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;
}
ymakux
quelle
7

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
edigu
quelle
1
du rockst;) Dies sollte die akzeptierte Antwort sein, sobald Bootstrap 4 viral wird ... sorry, öffentlich. Es ist hier unten gut versteckt für diejenigen, die es bereits in Alpha verwenden.
Kub1x
5
.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
}
Tomruss
quelle
4
pxist überflüssig, nein?
ta.speot.is
1
Normalerweise behalte ich 'px', damit ich 'px' nicht erneut eingeben muss, wenn ich den Wert ändern muss.
Nkkollaw
1
aber die zusätzlichen Datenbytes
Anthony Shaw
5

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

cwd
quelle
4

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

Schmied
quelle
3
@ Brunos warLESS
afaolek
4

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.
Zbigniew Ledwoń
quelle
2

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;"
Nadia
quelle
2

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;
Blackbam
quelle
Genau. Stellen Sie diese Deklarationen vor eg @import "../node_modules/bootstrap/scss/bootstrap";und bootstrap überschreibt sie nicht, da sie mit dem !defaultSchlüsselwort in bootstrap-source deklariert sind .
Jeppe
2

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>

Ergec
quelle
1

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.

Florian Feldhaus
quelle
Problem mit Flatstrap ist, dass sie noch keine SCSS-Unterstützung für v3 haben :(
HP.
1

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>

Rajesh Maradana
quelle
welche Version von Bootstrap
ina
0

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;
}
Ruberandinda Geduld
quelle