CSS Bootstrap mit eigenem CSS

Schnipp

Lt. Commander
Registriert
Feb. 2004
Beiträge
1.141
Hallo zusammen,

arbeite mich gerade ein wenig in Bootstrap ein und habe an einer Stelle noch ein Problem:

ich möchte eine eigene CSS-Datei anlegen, damit die Bootstrap-Dateien unberührt bleiben. Allerdings scheinen die neuen CSS-Klassen meist nicht zu greifen, er benutzt immer noch das original CSS von Bootstrap.

Wie gehe ich am besten vor, wenn ich eigenes CSS in einer eigenen CSS-Datei einsetzen möchte? Wie identifiziere ich am einfachsten die Objekte, auf die ich die Klasse anwenden will?

Hoffe mein Problem wird klar ;-)

Gruß Schnipp
 
Wann lädst du deine CSS? Wird sie wirklich geladen? Kann man die Seite irgendwo Live sehen?
 
Moin, lädst du deinen eigenen CSS-Code nach dem Bootstrap-Code? Sonst wird dein Code "überschrieben". Ich passe in der Regel Bootstrap-Klassen durch Ergänzungen / Änderungen in der eigenen Datei an.
 
Seite ist erst mal nur in meiner lokalen Umgebung hier. Ich arbeite im Dreamweaver und lege dort eine neue CSS-Datei an, die ganz normal im HEAD-Bereich eingebunden wird.
 
Wie steht es um die Reihenfolge der CSS Einbindungen? Pack doch mal den head-Bereich als Code hier ins Forum und am Besten auch gleich noch deine CSS-Datei bzw einen exemplarischen Auszug daraus.
 
Mach ich, sobald ich wieder am heimischen PC sitze ;-)
 
Morgen :)

1. Die bootstrap.css solltest du vor deiner eigenen css-Datei laden / einbinden.

2. Wenn du in deinem css eigenes Styling machst, kann es trotzdem durch eine "genauere" Regel von Bootstrap überschrieben werden.
Beispiel:
HTML:
<ul class="list-group">
    <li class="list-group-item">Ich habe eine Border!</li>
</ul>
CSS:
.list-group-item {
   border: 1px solid blue;
}
.list-group-item {
    border: 1px solid red;
}
Hier ist die Border in jedem Fall rot, da schlicht bei gleichen Regeln die letzte greift und die vorherigen überschreibt.

Aber aufpassen:
CSS:
.list-group .list-group-item {
   border: 1px solid blue;
}
.list-group-item {
    border: 1px solid red;
}
Obwohl hier als zweite Regel die Border rot gemacht wird (wie oben), greift Regel Nr. 1, weil diese genauer spezifiziert auf welches Element sie greift.

Was eine Regel genauer als eine Andere macht, kann ich dir nicht sagen, aber bei einer Regel mit nur einer "Bedingung" gilt meine ich Element vor id vor Klasse. (Aber eben am besten nochmal nachlesen, gerade bei den Kombinationen wirds dann schwierig..)

EDIT: Die einfachste Variante ist mit dem Inspektor im Browser (F12) das Element zu selektieren, das du stylen willst, dann siehst du, welches Styling das Element durch welche Klassen von Bootstrap verpasst bekommt, wenn du für die gleichen Regeln (Klassenkombinationen) eigene Styles definierst und Punkt 1 beachtest greifen deine Regeln auch :)

3. (Sollte eigentlich besser unerwähnt bleiben)
Willst du nicht lange rumdoktoren mit welchen Klassenkombinationen du die Regeln von Bootstrap überschreiben kannst, kannst du hinter deinen Style ein '!important' schreiben.
Beispiel:
CSS:
.list-group-item {
   border: 1px solid blue !important;
}
.list-group-item {
    border: 1px solid red;
}
Die Border wäre also immer blau.
Das gilt allgemein als bad practice und sollte nur in Ausnahmefällen verwendet werden.
 
Zuletzt bearbeitet:
Zurück
Oben