Is er een manier om alle .btneigenschappen in Bootstrap te wijzigen? Ik heb de onderstaande geprobeerd, maar soms wordt de standaardblauwe kleur weergegeven (bijvoorbeeld na het klikken en het verwijderen van de muis, enz.). Hoe kan ik het hele thema veranderen?
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
background-color: #8064A2;
}
Antwoord 1, autoriteit 100%
De gemakkelijkste manier om te zien welke eigenschappen je moet overschrijven, is door de Bootstrap’s broncode, specifiek de .button-variantmixin gedefinieerd in mixins/buttons.less. Je moet nog steeds behoorlijk wat eigenschappen overschrijven om alle .btn-primary-stijlen te verwijderen (bijv. :focus, disabled, gebruik in vervolgkeuzelijsten, enz.).
Een betere manier zou kunnen zijn om:
- Maak uw eigen aangepaste versie van Bootstrap met behulp van Bootstrap’s online aanpassingstool
- Maak handmatig je eigen kleurklasse, b.v.
.btn-whatever - Gebruik een LESS compiler en gebruik de
.button-variantmixin om je eigen kleurklasse te creëren, b.v..btn-whatever
Antwoord 2, autoriteit 98%
Als je standaardeigenschappen in Bootstrap wilt overschrijven, moet je de eigenschappen zo belangrijk maken.
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
background-color: #8064A2 !important;
}
ik hoop dat dit voor u werkt.
Antwoord 3, autoriteit 93%
2019-update voor Bootstrap 4
Nu Bootstrap 4 SASS gebruikt, kun je eenvoudig de kleur van de primaire knop wijzigenmet behulp van de button-variantmixins:
$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(SASS-demo)
Deze SASS wordt gecompileerd in de volgende 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 (CSS Demo )
Om de primaire kleur voor alle klassen te wijzigen: Aanpassen Bootstrap CSS-sjabloon en Hoe de Bootstrap primaire kleur te wijzigen?
4, Autoriteit 92%
Ik denk dat je bent vergeten .btn-primary:focuseigendom en komma na .btn-primary
Je kunt ook minder kleuren gebruiken in variabelen.less-bestand
Met dit in gedachten is uw code er als volgt uit:
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
background-color: #8064A2;
border-color: #8064A2;
}Antwoord 5, autoriteit 34%
Maak gewoon je eigen knop op:
- http://blog.koalite.com/bbg/
- voeg de CSS toe aan het einde van je boottrap.min.css
Proost
Antwoord 6, autoriteit 24%
De eenvoudigstemanier is om:
-
elke knopstatus onderscheppen
-
voeg
!importanttoe om de statussen te overschrijven
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
background-color: black !important;
border-color: black !important;
}
OFde meer praktischemanier van de gebruikersinterface is om de zweefstatus van de knop donkerder te maken dan de oorspronkelijke staat. Gebruik gewoon het onderstaande CSS-fragment:
.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;
}
Antwoord 7, autoriteit 16%
Je hebt één stijl “.btn-primary:active:focus” gemist, waardoor de standaard bootstrap-kleur tijdens de btn-klik nog steeds even verschijnt.
Dit werkt in mijn code:
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus, .btn-primary:active:focus {
background-color: #8064A2;}
8, Autoriteit 13%
Verwijder de kleurafknop als “BTN-succes” en zet een aangepaste klasse zoals “BTN-Custom” en schrijf CSS voor die klasse. Dat werkt gewoon voor mij.
HTML :
<button class="btn btn-block login " type="submit">Sign In</button>
CSS:
.login {
background-color: #0057fc;
color: white;
}
9, Autoriteit 8%
Hier is mijn smaak zonder het verlies van zweef. Ik vind het persoonlijk beter dan de standaard bootstrap-overgang.
.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>10, Autoriteit 3%
Ik had onlangs het soortgelijke probleem tegengekomen en erin geslaagd om het te repareren met het toevoegen van klassen
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; }
Let ook op [disabled] en [disabled]:hover, als deze klasse wordt gebruikt bij input[type=submit]. Zoals dit:
body .btn-primary[disabled], body .btn-primary[disabled]:hover {
background-color: #7bc143;
border-color: #7bc143; }
Antwoord 11
Ik denk dat het gebruik van !importantgeen erg verstandige optie is. Het kan voor veel andere problemen zorgen, vooral bij het responsief maken van de site. Dus ik heb begrepen dat de beste manier om dit te doen is om de CSS-klasse van de aangepaste knop te gebruiken met de bootstrap-klasse .btn. .btnis de basisstijlklasse voor de bootstrap-knop. Dus houd dat als de lay-out, we kunnen andere stijlen wijzigen met behulp van onze aangepaste CSS-klasse.
Nog een extra ding dat ik hier wil noemen. Sommige mensen proberen de blauwe omtrek van de knoppen te verwijderen. Het is geen goed idee, omdat er een toegankelijkheidsprobleem is bij het gebruik van het toetsenbord. Verander de kleur door in plaats daarvan outline-color:te gebruiken.
Antwoord 12
Een stapsgewijze handleiding toevoegen aan het antwoord van @Codeply-er hierboven voor SASS/SCSS-beginners zoals ik.
- Bewaar
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);
}
- Download een SASS-compiler zoals Koalazodat het bovenstaande SCSS-bestand kan worden gecompileerd naar CSS.
- Kloon de Bootstrapgithub-repo omdat de compiler de knopvariant-mixins ergens nodig heeft.
- Importeer bootstrap-functies expliciet door een
_bootstrap.scss-bestand te maken, zoals hieronder. Hierdoor heeft de compiler toegang tot de Bootstrap-functies en -variabelen.
@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";
- Compileer
btnCustom.scssmet de eerder gedownloade compiler naar css.
Antwoord 13
Ik ben niet de OP van dit antwoordmaar het heeft me zo geholpen :
Ik wilde de kleur van de volgende/vorige knoppen van de bootstrap-carrousel op mijn startpagina wijzigen.
Oplossing:
Kopieer de selectornamen van bootstrap.css en verplaats ze naar je eigen style.css (met je eigen voorkeuren..):
.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;
}