Gibt es einen Bootstrap-CSS-Konflikt?

Bootstrap ist das beliebteste CSS-Framework im Web. Es macht das Erstellen schöner, ansprechender Designs sehr einfach. Manchmal möchten Sie Bootstrap jedoch nicht auf der gesamten Website verwenden und müssen nur einen Teil des Bootstrap-CSS verwenden. Wenn Sie Bootstrap-CSS einfach direkt zum Head hinzufügen, kann es zu Konflikten mit anderem CSS kommen, was zu verwirrenden Stilen führt.

Wenn wir Bootstrap-CSS auf eine bestimmte Klasse isolieren könnten, wäre das Problem gelöst! Fügen Sie einfach mit LESS einen Klassennamen zu allen Bootstrap-CSS hinzu.

LESS ist ein CSS-Prozessor, der es Ihnen ermöglicht, Variablen vor dem Kompilieren in CSS zu ändern. Dadurch können Sie eine Variable ändern (z. B. die Basisschriftgröße) und LESS passt automatisch alle davon abhängigen Stile an (z. B. Zeilenhöhe, Überschriften usw.).

Im Folgenden wird gezeigt, wie Sie LESS verwenden, um Bootstrap-CSS anzupassen, und dann die Klasse bootstrap-iso verwenden, um Präfixe zu allen Bootstrap-Stilen hinzuzufügen.

Verwandte Empfehlungen: „Bootstrap Erste Schritte-Tutorial“

Verarbeitungsschritte:

1. Importieren Sie die Bootstrap-CSS-Datei im Head-Tag

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

Ersetzen Sie

durch

<link rel="stylesheet" href="https://formden.com/static/assets/demos/bootstrap-iso/bootstrap-iso/bootstrap-iso.css" />

2. Wickeln Sie dann den HTML-Code in ein Div mit der Klasse Bootstrap-ISO ein:

<div class="bootstrap-iso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>

Das obige ist der detaillierte Inhalt vonGibt es einen Bootstrap-CSS-Konflikt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!