Twitter-Bootstrap-Buttons sind unglaublich schön. Probieren Sie sie aus, indem Sie über sie blättern
Sie sind jedoch in Farben begrenzt.
Gibt es eine Möglichkeit, die Grundfarbe der Schaltfläche zu ändern, während der schöne Hover-Over-Effekt beibehalten wird, den Bootstrap so schön und mühelos gemacht hat?
Ich weiß gar nicht, wie das CSS/Javascript aussieht, das Twitter verwendet, um diese Effekte aufrechtzuerhalten.
Grundsätzlich werden die Schaltflächen in Twitter Bootstrap von ".btn {}" in CSS gesteuert. Sie müssen in die CSS-Datei gehen, wo "btn" steht und die Farbeinstellungen ändern. Es ist jedoch nicht so einfach wie das zu tun, da Sie auch ändern müssen, in welche Farbe sich die Schaltfläche ändert, wenn Sie sie markieren. ", usw.
Um es zu ändern, muss das CSS geändert werden. Hier ist ein schneller Link zu dieser Datei:
https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
Am einfachsten fand ich es, dies in Ihre Überschreibungen einzufügen. Entschuldigung für meine einfallslose Farbwahl
.my-btn {
//@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
@include button-variant(red, white, blue);
}
Bootstrap 4 Alpha SASS-Beispiel
.my-btn {
//.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
.button-variant(red; white; blue);
}
.my-btn {
//@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
@include button-variant(red, white, blue);
}
.btn-primary {
//.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
.buttonBackground(red, white);
}
.btn-primary {
//@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
@include buttonBackground(red, white);
}
Es kümmert sich um die Schwebeflug/Aktivitäten für Sie
Wenn Sie in den Kommentaren die Schaltfläche heller machen möchten, anstatt bei Verwendung von Schwarz dunkler zu werden (oder einfach nur umkehren), müssen Sie die Klasse etwas weiter ausdehnen:
.my-btn {
// @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
$color: #fff;
$background: #000;
$border: #333;
@include button-variant($color, $background, $border);
// override the default darkening with lightening
&:hover,
&:focus,
&.focus,
&:active,
&.active,
.open > &.dropdown-toggle {
color: $color;
background-color: lighten($background, 20%); //10% default
border-color: lighten($border, 22%); // 12% default
}
}
Sie können die Farben in Ihrer CSS überschreiben, zum Beispiel für die Schaltfläche "Gefahr":
.btn-danger { border-color: #[insert color here]; background-color: #[insert color here];
.btn-danger:hover { border-color: #[insert color here]; background-color: #[insert color here]; }
Hier ist eine gute Ressource: http://charliepark.org/bootstrap_buttons/
Sie können die Farbe ändern und den Effekt in Aktion sehen.
Wenn Sie nach dem Laden von bootstrap.css (Version 3) bereits Ihre eigene benutzerdefinierte CSS-Datei laden, können Sie diese 2 CSS-Stile zu Ihrer benutzerdefinierten.css hinzufügen. Sie überschreiben die Bootstrap-Standardeinstellungen für den Standardschaltflächenstil.
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
background-color: #A6A8C1;
border-color: #31347B;
}
.btn
{
background-color: #9F418F;
border-color: #9F418F;
}
Anstatt CSS-Werte einzeln zu ändern, würde ich vorschlagen, LESS zu verwenden. Bootstrap hat eine LESS-Version auf Github: https://github.com/twbs/bootstrap
Mit WENIGER können Sie Variablen definieren, um die Farben zu ändern. Dies macht es viel bequemer. Definieren Sie die Farbe einmal und LESS kompiliert eine CSS-Datei, die die Werte global ändert. Spart Zeit und Mühe.
Um die Bootstrap-Schaltflächenstile vollständig zu überschreiben, müssen Sie eine Liste von Eigenschaften überschreiben. Siehe das Beispiel unten.
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus,
.btn-primary:active, .btn-primary.active, .btn-primary:visited,
.btn-primary:active:hover, .btn-primary.active:hover{
background-color: #F19425;
color:#fff;
border: none;
outline: none;
}
Wenn Sie nicht alle aufgelisteten Stile verwenden, werden die Standardstile beim Ausführen von Aktionen für die Schaltfläche angezeigt. Wenn Sie beispielsweise auf die Schaltfläche klicken und den Mauszeiger von der Schaltfläche entfernen, wird die Standardfarbe sichtbar. Oder halten Sie die Taste gedrückt, um die Standardfarben zu sehen. Ich habe also alle Pseudo-Styles aufgelistet, die überschrieben werden sollen.
Für Bootstrap for Sass überschreiben Sie es
.btn-default {
@include button-variant($color, $background, $border);
}
Die Quelle dafür finden Sie hier: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6
Oder probiere http://twitterbootstrapbuttons.w3masters.nl/ . Es erstellt CSS für Schaltflächen, die auf der HTML-Farbeingabe basieren. Fügen Sie die CSS nach der Bootstrap-Datei hinzu. Es stehen drei Schaltflächen zur Verfügung (hell, dunkel und Spin).
Hier ist ein sehr einfacher und effizienter Weg: Fügen Sie in Ihrem CSS Ihre Klasse mit den Farben hinzu, die Sie auf Ihre Schaltfläche anwenden möchten:
.my-btn{
background: #0099cc;
color: #ffffff;
}
.my-btn:hover {
border-color: #C0C0C0;
background-color: #C0C0C0;
}
und füge den Style zu deinem Bootstrap Button oder Link hinzu:
<a href="xxx" class="btn btn-info my-btn">aaa</a>
In Twitter Bootstrap bootstrap 3.0.0 ist die Twitter-Schaltfläche leer. Sie können es unter http://getbootstrap.com/customize anpassen. Knopffarbe, grenze radious etc.
Außerdem finden Sie den HTML-Code und andere Funktionen http://twitterbootstrap.org/bootstrap-css-buttons .
Die Schaltfläche "Bootstrap 2.3.2" ist flach, aber 3.0.0 (neue Version) flach und sieht cooler aus.
außerdem können Sie das gesamte Aussehen und den Stil der Bootstraps an diese Ressourcen anpassen: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/
Ich weiß, dass dies ein älterer Thread ist, aber nur um eine andere Perspektive hinzuzufügen. Ich behaupte, dass die Verwendung von Überschreibungen wirklich ein bisschen Code-Geruch ist und bei größeren Projekten schnell außer Kontrolle geraten wird. Heute überschreibst du Buttons, morgen Modals, am nächsten Tag Dropdowns usw. usw.
Ich empfehle, das Include für buttons.less
möglicherweise zu kommentieren und entweder meine eigene zu definieren oder eine andere Buttons-Bibliothek zu finden, die für mein Projekt besser geeignet ist. Shameless plug: Hier ein Beispiel, wie einfach es ist, unsere Buttons-Bibliothek mit TB zu mischen: Verwenden von Buttons mit Twitter Bootstrap . In der Praxis möchten Sie wahrscheinlich buttons.less
include ganz entfernen, um die Leistung zu verbessern. Dies zeigt jedoch, wie Sie die Dinge etwas weniger "generisch" aussehen lassen. Ich habe diese Übung noch nicht selbst gemacht, aber ich stelle mir vor, Sie könnten einfach die folgenden Zeilen kommentieren:
https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less#L17
Und dann mit `lessc mit einem Ihrer eigenen Tastenmodule erneut kompilieren. Auf diese Weise erhalten Sie den in der Schlacht erprobten Kern von TB, können aber dennoch Dinge anpassen, ohne auf große Überschreibungen zurückzugreifen. 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
Sie können die Hintergrundfarbe ändern und verwenden!
.btn-primary {
background-color: #003c79 !important;
border-color: #15548b !important;
color: #fff;
}
.btn-primary:hover {
background-color: #4289c6 !important;
border-color: #3877ae !important;
color: #fff;
}
.btn-primary.focus, .btn-primary:focus {
background-color: #4289c6 !important;
border-color: #3877ae !important;
color: #fff;
}
Für Bootstrap (zumindest für Version 3.1.1) und LESS können Sie Folgendes verwenden:
.btn-my-custom {
.button-variant(@color; @background; @border)
}
Dies ist in bootstrap/less/buttons.less
definiert.