Czy istnieje sposób na zmianę wszystkich .btn
właściwości w Bootstrap? Próbowałem poniżej, ale nadal czasami pokazuje domyślny niebieski kolor (powiedzmy po kliknięciu i usunięciu myszy itp.). Jak mogę całkowicie zmienić cały motyw?
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
background-color: #8064A2;
}
Odpowiedzi:
Najłatwiejszym sposobem sprawdzenia, które właściwości należy nadpisać, jest przyjrzenie się kodowi źródłowemu Bootstrapa , a konkretnie miksowi
.button-variant
zdefiniowanemu w mixins / buttons.less . Trzeba jeszcze przesłonić sporo właściwości, aby pozbyć się wszystkich.btn-primary
stylizacji (np:focus
,disabled
użycie w dropdowns etc).Lepszym sposobem może być:
.btn-whatever
.button-variant
miksu do stworzenia własnej klasy kolorów, np.btn-whatever
źródło
Jeśli chcesz przesłonić jakiekolwiek domyślne właściwości w bootstrapie, musisz uczynić je tak ważnymi.
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited { background-color: #8064A2 !important; }
mam nadzieję, że to zadziała.
źródło
!important
był klucz!Aktualizacja 2019 dla Bootstrap 4
Teraz, gdy Bootstrap 4 używa SASS, możesz łatwo zmienić podstawowy kolor przycisku za pomocą
button-variant
miksów:$mynewcolor:#77cccc; .btn-primary { @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%)); } .btn-outline-primary { @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor); }
https://codeply.com/go/2bHYxYSC0n ( wersja demonstracyjna SASS )
Ten SASS kompiluje się do następującego CSS ...
.btn-primary { color: #212529; background-color: #7cc; border-color: #5bc2c2 } .btn-primary:hover { color: #212529; background-color: #52bebe; border-color: #8ad3d3 } .btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5) } .btn-primary.disabled, .btn-primary:disabled { color: #212529; background-color: #7cc; border-color: #5bc2c2 } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show>.btn-primary.dropdown-toggle { color: #212529; background-color: #9cdada; border-color: #2e7c7c } .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show>.btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5) } .btn-outline-primary { color: #7cc; background-color: transparent; background-image: none; border-color: #7cc } .btn-outline-primary:hover { color: #222; background-color: #8ad3d3; border-color: #7cc } .btn-outline-primary:focus, .btn-outline-primary.focus { box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5) } .btn-outline-primary.disabled, .btn-outline-primary:disabled { color: #7cc; background-color: transparent } .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show>.btn-outline-primary.dropdown-toggle { color: #212529; background-color: #8ad3d3; border-color: #7cc } .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show>.btn-outline-primary.dropdown-toggle:focus { box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5) }
https://codeply.com/go/lD3tUE01lo ( demo CSS )
Aby zmienić kolor podstawowy dla wszystkich klas, zobacz: Dostosowywanie szablonu Bootstrap CSS i Jak zmienić kolor podstawowy Bootstrap?
źródło
Chyba zapomniałeś o
.btn-primary:focus
własności i przecinku po.btn-primary
Możesz także użyć less i przedefiniować niektóre kolory w pliku variable.less
Mając to na uwadze, twój kod będzie wyglądał następująco:
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus { background-color: #8064A2; border-color: #8064A2; }
źródło
background-image: -webkit-linear-gradient(top,#8064A2 0,#8064A2 100%);
lubbackground-image: none;
.Po prostu utwórz własny przycisk na:
Twoje zdrowie
źródło
Przegapiłeś jeden styl ".btn-primary: active: focus", który powoduje, że nadal podczas btn kliknięcie domyślnego koloru bootstrap pojawia się na sekundę. To działa w moim kodzie:
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus, .btn-primary:active:focus { background-color: #8064A2;}
źródło
Usuń klasę koloru przycisku, na przykład „btn-success”, i umieść niestandardową klasę, na przykład „btn-custom”, i napisz css dla tej klasy. To po prostu działa dla mnie.
HTML : <button class="btn btn-block login " type="submit">Sign In</button> CSS: .login { background-color: #0057fc; color: white; }
źródło
Najprostszym sposobem jest:
1) przechwycić każdy stan przycisku
2) dodaj,
!important
aby zastąpić stany.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus { background-color: black !important; border-color: black !important; }
Bardziej praktycznym sposobem interfejsu użytkownika jest przyciemnienie stanu najechania przycisku na ciemniejszy niż stan oryginalny:
.btn-primary { background-color: Blue !important; border-color: Blue !important; } .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus { background-color: DarkBlue !important; border-color: DarkBlue !important; }
źródło
Oto mój smak bez utraty zawisu. Osobiście podoba mi się to bardziej niż standardowe przejście bootstrap.
.btn-primary, .btn-primary:active, .btn-primary:visited { background-color: #8064A2 !important; } .btn-primary:hover { background-color: #594671 !important; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" /> <button class="btn btn-primary">Hover me!</button>
źródło
Ostatnio napotkałem podobny problem i udało mi się go naprawić dodając klasy
body .btn-primary { background-color: #7bc143; border-color: #7bc143; color: #FFF; } body .btn-primary:hover, body .btn-primary:focus { border-color: #6fb03a; background-color: #6fb03a; color: #FFF; } body .btn-primary:active, body .btn-primary:visited, body .btn-primary:active:focus, body .btn-primary:active:hover { border-color: #639d34; background-color: #639d34; color: #FFF; }
Zwróć także uwagę na [disabled] i [disabled]: hover, jeśli ta klasa jest używana na wejściu [type = submit]. Lubię to:
body .btn-primary[disabled], body .btn-primary[disabled]:hover { background-color: #7bc143; border-color: #7bc143; }
źródło
Myślę, że używanie
!important
nie jest zbyt mądrą opcją. Może to powodować wiele innych problemów, szczególnie podczas tworzenia responsywności witryny. Rozumiem więc, że najlepszym sposobem na to jest użycie niestandardowej klasy CSS przycisku z.btn
klasą bootstrap..btn
jest podstawową klasą stylu dla przycisku bootstrap. Więc zachowaj to jako układ, możemy zmienić inne style za pomocą naszej niestandardowej klasy css. Jeszcze jedna dodatkowa rzecz, o której chcę tutaj wspomnieć. Niektórzy próbują usunąć niebieski kontur z przycisków. To nie jest dobry pomysł, ponieważ problem z dostępnością podczas korzystania z klawiatury. Zmień jego kolor, używającoutline-color:
zamiast tego.źródło
Dodanie przewodnika krok po kroku do powyższej odpowiedzi @ Codeply-er dla początkujących użytkowników SASS / SCSS, takich jak ja.
btnCustom.scss
./* import the necessary Bootstrap files */ @import 'bootstrap'; /* Define color */ $mynewcolor:#77cccc; .btn-custom { @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%)); } .btn-outline-custom { @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor); }
_bootstrap.scss
plik jak poniżej. Umożliwi to kompilatorowi dostęp do funkcji i zmiennych Bootstrap.@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; @import "bootstrap/scss/type"; @import "bootstrap/scss/images"; @import "bootstrap/scss/grid"; @import "bootstrap/scss/tables"; @import "bootstrap/scss/forms"; @import "bootstrap/scss/buttons"; @import "bootstrap/scss/utilities";
btnCustom.scss
z wcześniej pobranym kompilatorem do css.źródło
Nie jestem OP tej odpowiedzi, ale to mi pomogło:
Chciałem zmienić kolor następnych / poprzednich przycisków karuzeli bootstrap na mojej stronie głównej.
Rozwiązanie: Skopiuj nazwy selektorów z pliku bootstrap.css i przenieś je do własnego style.css (z własnymi preferencjami ...):
.carousel-control-prev-icon, .carousel-control-next-icon { height: 100px; width: 100px; outline: black; background-size: 100%, 100%; border-radius: 50%; border: 1px solid black; background-image: none; } .carousel-control-next-icon:after { content: '>'; font-size: 55px; color: red; } .carousel-control-prev-icon:after { content: '<'; font-size: 55px; color: red; }
źródło
Możesz na przykład dodać niestandardowe kolory za pomocą motywów bootstrap w pliku konfiguracyjnym
variables.scss
i upewnić się, że importujesz ten plik przed załadowaniem podczas kompilacji.$theme-colors: ( "whatever": #900 );
Teraz możesz to zrobić
.btn-whatever
źródło