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?
css
twitter-bootstrap
twitter-bootstrap-2
in einem
quelle
quelle
Antworten:
Ich setze den Randradius aller Elemente wie folgt auf "0":
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:
Wenn Sie es in Bootstrap 3 kompilieren, können Sie jetzt den Radius in der Datei variables.less festlegen:
In Bootstrap 4 können Sie beim Kompilieren den Radius insgesamt in der
_custom.scss
Datei deaktivieren :quelle
* { -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!-webkit-appearance: menulist
.Laden Sie die Quelldateien herunter
.less
und machen Sie das.border-radius()
Mixin leer.quelle
Wenn Sie Bootstrap Version <3 verwenden ...
Mit sass / scss
Mit weniger
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
quelle
Wenn Sie vermeiden möchten, dass alles neu kompiliert wird, fügen
.btn {border-radius: 0;}
Sie es einfach Ihrem CSS hinzu.quelle
.btn
quelle
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.scss
gibt mehrere globale Modifikatoren, mit denen sich Dinge wie das Aktivieren oder Deaktivieren des Flexgürtelsystems, abgerundete Ecken, Farbverläufe usw. schnell ändern lassen:Abgerundete Ecken sind
enabled
standardmäßig.Wenn Sie es vorziehen, den Bootstrap 4 mit Sass und Ihrem eigenen
_custom.scss
wie mir (oder mit dem offiziellen Customizer) zu kompilieren, reicht es aus , die zugehörige Variable zu überschreiben:quelle
Oder definieren Sie ein Mixin und fügen Sie es ein, wo immer Sie eine ungerundete Schaltfläche wünschen.
quelle
px
ist überflüssig, nein?Wenn Sie Bootstrap> =
3.0
Quelldateien (SASS
oderLESS
) 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:
Mit weniger:
Wenn Sie jedoch die abgerundeten Ecken an allem entfernen möchten, können Sie das tun, was @ adamwong246 erwähnt hat, und Folgendes verwenden:
Diese beiden Einstellungen sind die "Root" -Einstellungen, von denen die anderen Einstellungen wie
navbar-border-radius
erben, sofern keine anderen Werte angegeben sind.Eine Liste aller Variablen finden Sie unter variables.less oder variables.scss
quelle
Der oben von @BrunoS veröffentlichte Code hat bei mir nicht funktioniert.
Was ich benutzt habe war
Ich hoffe das hilft jemandem
quelle
LESS
Es gibt eine sehr einfache Möglichkeit, Bootstrap anzupassen:
quelle
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):
quelle
Mit SASS Bootstrap können Sie - wenn Sie Bootstrap selbst kompilieren - den gesamten Randradius (oder spezifischer) einfach auf Null setzen:
quelle
@import "../node_modules/bootstrap/scss/bootstrap";
und bootstrap überschreibt sie nicht, da sie mit dem!default
Schlüsselwort in bootstrap-source deklariert sind .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
quelle
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.
quelle
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>
quelle
Ich habe eine andere CSS-Datei erstellt und den folgenden Code hinzugefügt. Nicht alle Elemente sind enthalten
quelle