Wie wende ich Bootstrap-Stile auf bestimmte Elemente ohne manuelle übergeordnete Selektoren an?

CSS-Stile für bestimmte Elemente verwenden

Beim Übergang von tabellenbasierten Layouts zu CSS müssen Sie möglicherweise CSS-Stile anwenden nur für bestimmte Abschnitte von Webseiten. Dies kann erreicht werden, indem gewünschte Elemente innerhalb einer bestimmten Klasse gekapselt werden. Beispielsweise könnten Sie ein Formular wie folgt in ein Div mit der Klasse „bootstrap“ einschließen:

<div>

Sie möchten jedoch, dass andere Formulare auf der Seite ihren aktuellen Stil beibehalten. Gibt es eine einfachere Möglichkeit, dies zu erreichen, ohne manuell übergeordnete Selektoren zu jeder Bootstrap-CSS-Regel hinzuzufügen?

Lösung

Für Bootstrap 3 vereinfacht die Verwendung von LESS den Prozess:

1. Laden Sie den Bootstrap-Quellcode herunter und erstellen Sie eine style.less-Datei als folgt:

.bootstrap {
    @import "/path-to-bootstrap-less.less";
    @import "/path-to-bootstrap-responsive-less.less";
}

2. Kompilieren Sie die LESS-Datei. Sie können Befehlszeilentools wie Node.js mit Less.js verwenden oder GUI-Compiler erkunden. Alternativ können Sie LESS mit npm installieren und die Datei wie folgt kompilieren:

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

Das obige ist der detaillierte Inhalt vonWie wende ich Bootstrap-Stile auf bestimmte Elemente ohne manuelle übergeordnete Selektoren an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!