Wie kann ich CSS-Stile auf bestimmte Elemente meiner Website anwenden?

So wenden Sie CSS-Stile auf bestimmte Elemente an

Im Website-Designprozess ist es oft notwendig, bestimmte CSS-Stile nur auf bestimmte Elemente anzuwenden . Dies kann besonders nützlich sein, wenn ältere Websites auf CSS umgestellt werden. Beispielsweise möchten Sie möglicherweise die Bootstrap-Stylesheets für Formulare nur in bestimmten Abschnitten Ihrer Seiten verwenden.

Erstellen eines bestimmten CSS-Anwendungs-DIV

Um Bootstrap-Stile anzuwenden In bestimmten Abschnitten können Sie den relevanten Inhalt in einem DIV-Element mit einer bestimmten Klasse umgeben. Sie könnten beispielsweise ein DIV wie folgt erstellen:

<div>
<p>Dieser Ansatz stellt sicher, dass alle Elemente innerhalb des „Bootstrap“-DIV die Bootstrap-CSS-Stile erben. Alle anderen Formen außerhalb dieses DIV behalten ihren ursprünglichen Stil.</p>
<p><strong>Verwendung von LESS für Bootstrap 3</strong></p>
<p>Wenn Sie Bootstrap 3 verwenden, gibt es eine einfachere Methode mit LESS . Laden Sie den Bootstrap-Quellcode herunter und erstellen Sie eine style.less-Datei mit folgendem Inhalt:</p>
<pre class="brush:php;toolbar:false">.bootstrap {
    @import "/path-to-bootstrap-less.less";
    @import "/path-to-bootstrap-responsive-less.less";
}

Kompilieren Sie die style.less-Datei entweder über ein Befehlszeilentool oder npm in style.css:

npm install -g less
lessc style.less style.css

Mit dieser Technik können Sie Bootstrap-Stile ganz einfach auf bestimmte Elemente Ihrer Website anwenden und so einen reibungslosen Übergang von alten zu neuen CSS-Strukturen gewährleisten.