Twitter-Bootstrap-Buttons sind unglaublich schön. Probieren Sie sie aus, indem Sie über sie scrollen
Aber sie sind in den Farben begrenzt.
Gibt es eine Möglichkeit, die Grundfarbe des Buttons zu ändern und gleichzeitig den schönen Hover-Over-Effekt beizubehalten, den Bootstrap so schön und mühelos gemacht hat?
Ich weiß überhaupt nicht, wie das CSS / Javascript aussieht, das Twitter verwendet, um diese Effekte aufrechtzuerhalten.
css
button
twitter-bootstrap
Elias7
quelle
quelle
lessc
. Bearbeiten Sie die CSS-Dateien nicht direkt! Es ist nicht wartbar.Antworten:
Grundsätzlich werden die Schaltflächen in Twitter Bootstrap in CSS durch ".btn {}" gesteuert. Was Sie tun müssen, ist, in die CSS-Datei zu gehen und herauszufinden, wo "btn" steht, und die Farbeinstellungen zu ändern. Es ist jedoch nicht so einfach, dies zu tun, da Sie auch ändern müssen, in welche Farbe sich die Schaltfläche ändert, wenn Sie sie markieren usw. Um dies zu tun, müssen Sie in CSS nach anderen Tags wie ".btn: hover {}" suchen ", etc.
Das Ändern erfordert das Ändern des CSS. Hier ist ein kurzer Link zu dieser Datei:
https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
quelle
Ich fand, der einfachste Weg ist, dies in Ihre Overrides zu setzen. Entschuldigung für meine einfallslose Farbwahl
Bootstrap 4-Alpha SASS
Bootstrap 4 Alpha SASS Beispiel
Bootstrap 3 WENIGER
Bootstrap 3 WENIGER Beispiel
Bootstrap 3 SASS
Bootstrap 3 SASS Beispiel
Bootstrap 2.3 WENIGER
Bootstrap 2.3 WENIGER Beispiel
Bootstrap 2.3 SASS
Es kümmert sich für Sie um den Schwebeflug / die Aktiva
Wenn Sie in den Kommentaren die Schaltfläche aufhellen möchten, anstatt sie zu verdunkeln, wenn Sie Schwarz verwenden (oder nur umkehren möchten), müssen Sie die Klasse ein wenig weiter ausdehnen, wie folgt:
Bootstrap 3 SASS Ligthen
Bootstrap 3 SASS Lighten Beispiel
quelle
lessc
, um Ihre Änderungen an CSS zu kompilieren..btn-primary {@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); }
Ihre Variablen entsprechend ändern (Entschuldigung für die schreckliche Formatierung).buttonBackground is undefined in main.less
ich irgendetwas in meine weniger aufnehmen?Sie können die Farben in Ihrem CSS überschreiben, z. B. für die Schaltfläche Gefahr:
quelle
:focus
und:active
auch, oder sonst bekommen Sie manchmal seltsame Farben auf Klicks / Drags ....btn-primary:active:focus {
diesen Fall auswählen und überschreibenHier ist eine gute Ressource: http://charliepark.org/bootstrap_buttons/
Sie können die Farbe ändern und den Effekt in Aktion sehen.
quelle
lessc
eine bessere Lösung.Wenn Sie nach dem Laden von bootstrap.css (Version 3) bereits Ihre eigene benutzerdefinierte CSS-Datei laden, können Sie diese beiden CSS-Stile zu custom.css hinzufügen. Diese überschreiben die Bootstrap-Standardeinstellungen für den Standardschaltflächenstil.
quelle
Anstatt die CSS-Werte einzeln zu ändern, würde ich empfehlen, WENIGER zu verwenden . Bootstrap hat eine WENIGER Version auf Github: https://github.com/twbs/bootstrap
WENIGER ermöglicht es Ihnen, Variablen zu definieren, um Farben zu ändern, was es so viel bequemer macht. Definieren Sie die Farbe einmal und WENIGER kompiliert eine CSS-Datei, die die Werte global ändert. Spart Zeit und Mühe.
quelle
Um die Bootstrap-Schaltflächenstile vollständig zu überschreiben, müssen Sie eine Liste von Eigenschaften überschreiben. Siehe das folgende Beispiel.
Wenn Sie nicht alle aufgelisteten Stile verwenden, werden die Standardstile beim Ausführen von Aktionen auf der Schaltfläche angezeigt. Wenn Sie beispielsweise auf die Schaltfläche klicken und den Mauszeiger von der Schaltfläche entfernen, wird die Standardfarbe angezeigt. Oder halten Sie die Taste gedrückt, um die Standardfarben anzuzeigen. Also habe ich alle Pseudo-Stile aufgelistet, die überschrieben werden sollen.
quelle
Für Bootstrap for Sass überschreiben ist es
Die Quelle dafür finden Sie hier: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6
quelle
Oder versuchen Sie es mit http://twitterbootstrapbuttons.w3masters.nl/ . Es erstellt CSS für Schaltflächen basierend auf der Eingabe von HTML-Farben. Fügen Sie das CSS nach dem Bootstrap-CSS hinzu. Es bietet drei Arten von Schaltflächen (hell, dunkel und drehen).
quelle
lessc
eine bessere Lösung.Hier ist eine sehr einfache und effiziente Möglichkeit: Fügen Sie in Ihrem CSS Ihre Klasse mit den Farben hinzu, die Sie auf Ihre Schaltfläche anwenden möchten:
und fügen Sie den Stil Ihrer Bootstrap-Schaltfläche oder Ihrem Bootstrap-Link hinzu:
quelle
In Twitter Bootstrap Bootstrap 3.0.0 ist die Twitter-Schaltfläche flach. Sie können es unter http://getbootstrap.com/customize anpassen . Tastenfarbe, Rand strahlend etc.
Sie finden auch den HTML-Code und andere Funktionen http://twitterbootstrap.org/bootstrap-css-buttons .
Die Bootstrap 2.3.2-Taste hat einen Farbverlauf, aber 3.0.0 (neue Version) ist flach und sieht cooler aus.
Außerdem können Sie das gesamte Erscheinungsbild und den Stil des Bootstraps in diesen Ressourcen anpassen: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/
quelle
Ich weiß, dass dies ein älterer Thread ist, aber nur um eine andere Perspektive hinzuzufügen. Ich würde behaupten, dass die Verwendung von Überschreibungen wirklich ein bisschen nach Code riecht und bei größeren Projekten schnell außer Kontrolle gerät. Heute überschreiben Sie Buttons, morgen Modals, am nächsten Tag Dropdowns usw. usw.
Ich würde empfehlen, das Include für möglicherweise zu kommentieren
buttons.less
und entweder mein eigenes zu definieren oder eine andere Buttons-Bibliothek zu finden, die besser zu meinem Projekt passt. Schamloser Plug: Hier ist ein Beispiel dafür, wie einfach es ist, unsere Buttons-Bibliothek mit TB zu mischen: Verwenden von Buttons mit Twitter Bootstrap . In der Praxis möchten Sie dasbuttons.less
Include wahrscheinlich wieder ganz entfernen , um die Leistung zu verbessern. Dies zeigt jedoch, wie Sie dafür sorgen können, dass die Dinge etwas weniger "allgemein" aussehen. Ich habe diese Übung noch nicht selbst gemacht, aber ich würde mir vorstellen, dass Sie zunächst einfach folgende Zeilen auskommentieren könnten:https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less#L17
Und dann mit `lessc mit einem Ihrer eigenen Tastenmodule neu kompilieren. Auf diese Weise erhalten Sie den kampferprobten Kern von TB, können jedoch die Dinge anpassen, ohne auf größere Überschreibungen zurückgreifen zu müssen. Es gibt absolut keinen Grund, nicht nur Teile einer Bibliothek wie Bootstrap zu verwenden. Gleiches gilt natürlich auch für die Sass-Version von TB
quelle
Für Bootstrap (zumindest für Version 3.1.1) und WENIGER können Sie Folgendes verwenden:
Dies ist definiert in
bootstrap/less/buttons.less
.quelle
Sie können die Hintergrundfarbe ändern und! Wichtig verwenden;
quelle