Ich kenne grundlegende CSS, aber ich habe keine Erfahrung. Ich möchte die CSS-Datei von Bootstrap verwenden, aber ich möchte auch meine eigenen Stil-Codes hinzufügen. Was soll ich dafür tun? Soll ich zuerst Bootstrap-Stile hinzufügen und dann meinen? Ist das der beste Weg?Bootstrap und mein eigenes CSS zusammen verwenden
Sie werden die Stylesheets wie folgt sortiert haben, zuerst werden Sie Bootstrap CSS, dann Ihre Stylesheet-Datei enthalten. Warum das? Denn auf diese Weise können Sie die Klassen aus dem Framework überschreiben, ohne! Wichtig zu verwenden. Sie können Ihre eigenen Klassen schreiben und sie in Ihr Layout einbinden. Sie können Bootstrap-Klassen verwenden und diese nach Bedarf anpassen. Wenn Sie Ihre Klassen und Bootstrap-Klassen mischen überprüfen, welche Attribute von ihren Klassen hinzugefügt werden, müssen Sie sie oder nicht etc ...
Beispiel
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
/* Your external css file will go here. This is just for testing :) */
.mycustombtn{
background: #000;
}
</style>
<button type="button" class="btn btn-danger mycustombtn">Danger</button>Sie sollten die Bootstrap CSS zuerst hinzufügen und dann Ihre eigenen, aber es wird schwierig sein, wegen der Bootstrap-CSS. Stellen Sie sicher, dass Sie immer überprüfen, welche Bootstrap-Klassen dies tun.
Hauptproblem ist es, die gleichen Klassen- und ID-Namen mit Bootstrap zu verwenden, oder? Ich plane, eindeutige Klassen- und Identifikationsnamen für mein CSS zu verwenden. Reicht das aus, um mögliche Fehler zu vermeiden? – ahgk
Es gibt Klassen, die Dinge hinzufügen können, die Sie nicht wollen, beachten Sie das. Und versuche, nicht so wichtig zu verwenden. Es ist nicht die beste Vorgehensweise. –
Es würde wie folgt aussehen:
<head>
<link href="bootstrap.min.css" rel="stylesheet" />
<link href="yourstyle.css" rel="stylesheet" />
</head>
Sie können so viele CSS Links setzen, wie Sie benötigen. Ich finde es normalerweise am besten, CSS-Framework-Dateien über Ihre eigenen zu stellen.
Sie Bootstrap mit Ihrem CSS verwenden können, genau das zu tun (im Kopf-Tag):
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<!-- Your file css -->
<link rel="stylesheet" href="your-file-css.css" />
Sie sogar einige Richtlinie überschreiben können, setzen Sie sie einfach in dir (Datei ist aber kein Best-Practice).
Denken Sie daran, immer den Link zum Bootstrap vor dem Link zu Ihrer CSS-Datei.
Sorry für mein Englisch
Es geht um CSS Spezifität.
Wenn zwei Eigenschaften das gleiche Gewicht haben, wird letztere Eigenschaft verwendet.
Sie können einzelne CSS-Eigenschaften überschreiben, indem Sie die Eigenschaft !important deklarieren.
Beispiel;
body {
background-color: #000 !important;
}
Es ist eine einfache Möglichkeit, CSS-Selektor Gewicht (oder Spezifität) zu überwinden, wenn Sie feststellen, dass Bootstrap Arten überschreiben Sie (hilfreich für einen Anfänger nur Sachen ausprobieren).
Aber Sie sollten mehr über Spezifität stattdessen lesen - http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/.
Bootstrap zuerst nach, bei Ihnen. – ggdx
Wenn Sie neu in CSS sind, ist es wahrscheinlich eine schlechte Idee, zuerst ein Framework zu werfen. Lerne CSS und lerne, wie man ein Framework manipuliert. – ggdx
Wie andere schon sagten, Bootstrap zuerst. Sie können auch Bootstrap anpassen, z. B. Farben für Schaltflächen/Text. Dies kann vor dem Download auf der Bootstrap-Seite vorgenommen werden, oder mit einem Tool wie http://bootswatchr.com/create, das visuelle Änderungen bietet (vollständige Offenlegung - ich habe die Seite noch nie benutzt - es war das erste Google-Ergebnis, a besseres Werkzeug kann existieren ...) – Jack