Ik moet bootstrap.cssaanpassen aan mijn website. Ik denk dat het beter is om een apart custom.css-bestand te maken in plaats van bootstrap.cssrechtstreeks aan te passen, een reden hiervoor is dat bootstrap.csseen update, zal ik lijden als ik probeer al mijn wijzigingen opnieuw op te nemen. Ik zal wat laadtijd opofferen voor deze stijlen, maar het is verwaarloosbaar voor de weinige stijlen die ik overschrijf.
Hoe overschrijf ik bootstrap.csszodat ik de stijl van een anker/klasse verwijder? Als ik bijvoorbeeld alle stijlregels voor legendwil verwijderen:
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: inherit;
color: #333333;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
Ik kan alles gewoon verwijderen in bootstrap.css, maar als ik de beste werkwijzen voor het overschrijven van CSS juist heb begrepen, wat moet ik dan in plaats daarvan doen?
Voor alle duidelijkheid: ik wil al die stijlen van legenda verwijderen en de CSS-waarden van de ouders gebruiken. Dus als ik het antwoord van Pranav combineer, ga ik dan het volgende doen?
legend {
display: inherit !important;
width: inherit !important;
padding: inherit !important;
margin-bottom: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
color: inherit !important;
border: inherit !important;
border-bottom: inherit !important;
}
(Ik hoopte dat er een manier was om zoiets als het volgende te doen:)
legend {
clear: all;
}
Antwoord 1, autoriteit 100%
Gebruik !importantis geen goede optie, omdat u waarschijnlijk in de toekomst uw eigen stijlen wilt overschrijven. Dat laat ons met CSS-prioriteiten.
Kortom, elke selector heeft zijn eigen numerieke ‘gewicht’:
- 100 punten voor ID’s
- 10 punten voor klassen en pseudo-klassen
- 1-punt voor tagselectoren en pseudo-elementen
- Opmerking: als het element inline styling die automatisch wordt wint (1000 punten)
Onder twee kiezersbrowser kiezen altijd degene met meer gewicht. Bestelling van uw stylesheets is alleen aangelegen wanneer prioriteiten zelfs zijn – daarom is het niet eenvoudig om bootstrap te negeren.
Uw optie is om Bootstrap-bronnen te inspecteren, ontdek hoe bepaald een specifieke stijl wordt gedefinieerd en die selector kopieert, zodat uw element gelijke prioriteit heeft. Maar we lossen allemaal alle bootstrap-zoetheid in het proces.
De eenvoudigste manier om dit te overwinnen is om extra willekeurige ID toe te wijzen aan een van de root-elementen op uw pagina, zoals deze: <body id="bootstrap-overrides">
Op deze manier kunt u gewoon alle CSS-selector voorvoegen met uw ID, waarbij u onmiddellijk 100 punten van gewicht aan het element toevoegt en de definities van Bootstrap overschrijft:
/* Example selector defined in Bootstrap */
.jumbotron h1 { /* 10+1=11 priority scores */
line-height: 1;
color: inherit;
}
/* Your initial take at styling */
h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */
line-height: 1;
color: inherit;
}
/* New way of prioritization */
#bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */
line-height: 1;
color: inherit;
}
2, Autoriteit 18%
Plaats in het head-gedeelte van uw html uw custom.css onder bootstrap.css.
<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
Vervolgens moet je in custom.css exact dezelfde selector gebruiken voor het element dat je wilt overschrijven. In het geval van legendblijft het gewoon legendin je custom.css omdat bootstrap geen specifiekere selectors heeft.
legend {
display: inline;
width: auto;
padding: 0;
margin: 0;
font-size: medium;
line-height: normal;
color: #000000;
border: 0;
border-bottom: none;
}
Maar in het geval van bijvoorbeeld h1moet je zorgen voor de meer specifieke selectors zoals .jumbotron h1omdat
h1 {
line-height: 2;
color: #f00;
}
niet overschrijven
.jumbotron h1,
.jumbotron .h1 {
line-height: 1;
color: inherit;
}
Hier is een handige uitleg van de specificiteit van CSS-selectors die u moet begrijpen om precies te weten welke stijlregels van toepassing zijn op een element.
http://css-tricks.com/specifics-on-css-specificity/
Al het andere is gewoon een kwestie van stijlen kopiëren/plakken en bewerken.
Antwoord 3, autoriteit 5%
Het zou niet veel invloed moeten hebben op de laadtijd, aangezien u delen van de basisstylesheet overschrijft.
Hier zijn enkele praktische tips die ik persoonlijk volg:
- Laad aangepaste CSS altijd na het basis-CSS-bestand (niet responsief).
- Vermijd het gebruik van
!importantindien mogelijk. Dat kan enkele belangrijke stijlen van de basis CSS-bestanden overschrijven. - Laad altijd bootstrap-responsive.css na custom.css als u geen media-query’s wilt verliezen. – moet
- Liever wijzigen van vereiste eigenschappen (niet alle).
volgen
4, Autoriteit 5%
Link uw Custom.csS-bestand als laatste vermelding onder de bootstrap.css. Custom.CSSS-stijldefinities zullen Bootstrap.css
overschrijven
HTML
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
Kopieer alle stijldefinities van de legende in Custom.CSS en maak wijzigingen in (zoals margin-bodem: 5px; – dit zal margin-bodem overschrijden: 20px;)
5, Autoriteit 2%
Om de ingevangen stijlen in te stellen die zijn gedefinieerd voor legendin Bootstrap, kunt u volgen in uw CSS-bestand:
legend {
all: unset;
}
Ref: https://css-tricks.com/almanac/properties/a / alle /
De alle accommodatie in CSS reset alle geselecteerde elementen
Eigenschappen, behalve de richting en Unicode-Bidi-eigenschappen die
bestrijding van tekstrichting.
Mogelijke waarden zijn: initial, inherit& AMP; unset.
Side Note: clearProperty wordt gebruikt in relatie met float(https://css-tricks.com/almanac/properties/c/clear/ )
6
Zie https://bootstrap.themes.guide/how-to- customize-bootstrap.html
-
Voor eenvoudige CSS-overschrijvingen kunt u een custom.css toevoegen onder de bootstrap.css
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/custom.css"> -
Voor uitgebreidere wijzigingen is SASS de aanbevolen methode.
- maak je eigen custom.scss
- importeer Bootstrap na de wijzigingen in custom.scss
-
Laten we bijvoorbeeld de body-achtergrondkleur veranderen in lichtgrijs #eeeeee, en de blauwe primaire contextuele kleur veranderen in de $purple-variabele van Bootstrap…
/* custom.scss */ /* import the necessary Bootstrap files */ @import "bootstrap/functions"; @import "bootstrap/variables"; /* -------begin customization-------- */ /* simply assign the value */ $body-bg: #eeeeee; /* or, use an existing variable */ $theme-colors: ( primary: $purple ); /* -------end customization-------- */ /* finally, import Bootstrap to set the changes! */ @import "bootstrap";
Antwoord 7
Een beetje laat, maar wat ik deed, is dat ik een klasse heb toegevoegd aan de root diven vervolgens alle bootstrap-elementen in mijn aangepaste stylesheet heb uitgebreid:
.overrides .list-group-item {
border-radius: 0px;
}
.overrides .some-elements-from-bootstrap {
/* styles here */
}
<div class="container-fluid overrides">
<div class="row">
<div class="col-sm-4" style="background-color: red">
<ul class="list-group">
<li class="list-group-item"><a href="#">Hey</a></li>
<li class="list-group-item"><a href="#">I was doing</a></li>
<li class="list-group-item"><a href="#">Just fine</a></li>
<li class="list-group-item"><a href="#">Until I met you</a></li>
<li class="list-group-item"><a href="#">I drink too much</a></li>
<li class="list-group-item"><a href="#">And that's an issue</a></li>
<li class="list-group-item"><a href="#">But I'm okay</a></li>
</ul>
</div>
<div class="col-sm-8" style="background-color: blue">
right
</div>
</div>
</div>
Antwoord 8
Als u van plan bent nogal grote wijzigingen aan te brengen, kan het een goed idee zijn om deze rechtstreeks in Bootstrap zelf aan te brengen en opnieuw op te bouwen. Vervolgens kunt u de hoeveelheid geladen gegevens verminderen.
Raadpleeg Bootstrap op GitHubvoor de bouwhandleiding.
Antwoord 9
Ik ontdekte dat (bootstrap 4) het plaatsen van je eigen CSS achter bootstrap.cssen .js de beste oplossing is.
Zoek het item dat u wilt wijzigen (inspecteer element) en gebruik exact dezelfde declaratie, dan wordt deze overschreven.
Het kostte me wat tijd om dit uit te zoeken.
Antwoord 10
- Inspecteer de doelknop op de console.
- Ga naar het tabblad Elementen, plaats de muisaanwijzer op de code en zorg ervoor dat u de standaard-id vindt
of klasse gebruikt door de bootstrap. - Gebruik jQuery/javascript om de stijl/tekst te overschrijven door de functie aan te roepen.
Zie dit voorbeeld:
$(document).ready(function(){
$(".dropdown-toggle").css({
"color": "#212529",
"background-color": "#ffc107",
"border-color": "#ffc107"
});
$(".multiselect-selected-text").text('Select Tags');
});
Antwoord 11
Geef ID aan legenda en pas css toe. Zoals id toevoegen hallo aan legend() de css is als volgt:
#legend legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: inherit;
color: #333333;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
Antwoord 12
Gebruik jQuery css in plaats van css . . . jquery heeft prioriteit dan bootstrap css…
bijv.
$(document).ready(function(){
$(".mnu").css({"color" : "#CCFF00" , "font-size": "16px" , "text-decoration" : "overline"});
);
instead of
.mnu
{
font-family:myfnt;
font-size:20px;
color:#006699;
}