twitter-bootstrap
Anpassung des Twitter-Bootstrap-Stils

Angular 2 AngularJS ASP.NET asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails

Bemerkungen

Zu beachten ist, dass der Name von custom.css nach der Hauptdatei bootstrap.css angegeben werden muss, andernfalls werden die Werte von custom.css nicht wirklich implementiert.

Standard-CSS überschreiben

Jeder liebt Twitter-Bootstrap , aber einige von uns mögen das Standarddesign nicht. Hier ist eine einfache Anleitung, wie Sie das Design von boostrap anpassen können. Wenn Twitter geklont wird, stellt Twitter boostrap eine Reihe von Standard-CSS-Dateien bereit, die wir überschreiben können.

Die Mail-CSS-Datei, die wir überschreiben müssen, ist die boostrap.min.css im boostrap/dist/css .

Um das Standarddesign von boostrap zu überschreiben, folgen Sie diesen zwei einfachen Schritten.

Erstellen Sie eine custom.css (oder Sie können sie beliebig benennen) und verknüpfen Sie sie mit Ihrer index.html

<html>
<head>
    <title>Customize Bootstrap</title>

    <link rel="stylesheet" type="text/css" href="path/to/bootstrap.min.css">
    <!-- This mus be declared after the bootstrap.min.css -->
    <link rel="stylesheet" type="text/css" href="path/to/your/custom.css">
</head>
<body>
    <!-- Do something -->
</body>
</html>

Starten Sie das Customizing. Zum Beispiel möchten wir die Farbe der Standardschaltfläche ändern. Wenn Sie den standardmäßigen Schaltflächenstil von Bootstrap verwenden möchten, müssen Sie die btn Klasse in btn <button class="btn">Sample</button> -Tag <button class="btn">Sample</button> . Schreiben Sie einfach den folgenden Code in Ihre custom.css .
```
.btn{
    background-color:red;
}
```
Der obige Code wird so etwas produzieren.
Standard :

Brauch :

Diese Technik erspart uns das Umschreiben der gesamten Button-Styles, die bereits von boostrap-Mitwirkenden geschrieben wurden. Dies hat uns auch davon abgehalten, unseren eigenen CSS-Kurs zu schreiben, der für mich weniger langweilig ist.

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow