it-swarm.com.de

Twitter-Bootstrap-Buttons gestalten

Twitter-Bootstrap-Buttons sind unglaublich schön. Probieren Sie sie aus, indem Sie über sie blättern

bootstrap button screenshot

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.

94
Elias7

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

25
Tanvir Ahmed

Am einfachsten fand ich es, dies in Ihre Überschreibungen einzufügen. Entschuldigung für meine einfallslose Farbwahl

Bootstrap 4-Alpha SASS

.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

Bootstrap 3 WENIGER

.my-btn {
  //.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
  .button-variant(red; white; blue);
}

Bootstrap 3 LESS-Beispiel

Bootstrap 3 SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

Bootstrap 3 SASS-Beispiel

Bootstrap 2.3 WENIGER

.btn-primary {
  //.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  .buttonBackground(red, white);
}

Bootstrap 2.3 LESS-Beispiel

Bootstrap 2.3 SASS

.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:

Bootstrap 3 SASS Ligthen

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

Bootstrap 3 SASS Aufhellungsbeispiel

175
chrisan

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]; }
30
MikeAr

Hier ist eine gute Ressource: http://charliepark.org/bootstrap_buttons/

Sie können die Farbe ändern und den Effekt in Aktion sehen.

27
Tran Cuong

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

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.

12
Petri Tuononen

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.

12
Rahul Singh

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

9
Ari

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).

5
Bass Jobsen

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>
5
Fred

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/

3
Mujahidul Jahid

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

1
Rob

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

0
Rafiqul Islam

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.

0
Luís Cruz