Welche Beziehung besteht zwischen Bootstrap und Less?-Bootstrap-Tutorial-php.cn

Welche Beziehung besteht zwischen Bootstrap und Less?

WBOY

Freigeben： 2022-03-09 17:22:00

Original

3253 Leute haben es durchsucht

In Bootstrap werden viele Thread-Stilkomponenten bereitgestellt. Sie müssen nicht weniger wissen, um Bootstrap zu verwenden, um entsprechende CSS-Dateien zu generieren.

Welche Beziehung besteht zwischen Bootstrap und Less?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Bootstrap-Version 3.3.7, DELL G3-Computer

Welche Beziehung besteht zwischen Bootstrap und weniger?

In Bootstrap werden viele Komponenten im Thread-Stil bereitgestellt Diese Stile wurden von less geschrieben. Sie müssen weniger nicht kennen, um Bootstrap verwenden zu können.

Bootstrap-Projektarchitektur

Implementierung von Layoutsystem und Inhalt

1) Design des Rastersystems Ergänzender Inhalt: Spaltensortierung col-md-push-4

2) Vollständiger Zelleninhalt

Stilanpassung

weniger
Ändern Sie den Bootstrap-Quellcode

less

css ist eine Auszeichnungssprache mit einfacher Syntax und geringen Lernschwierigkeiten. CSS erfordert jedoch das Schreiben einer großen Menge scheinbar unlogischen Codes, dessen Wartung und Erweiterung unpraktisch ist. ist einer Wiederverwendung nicht förderlich, und ein wichtiger Grund für diese Schwierigkeiten ist, dass CSS eine nicht-prozedurale Sprache ist und keine Konzepte wie Variablen, Funktionen und SCOPE (Bereich) hat.

LESS enthält eine Reihe benutzerdefinierter Grammatiken und einen Parser. Benutzer definieren ihre eigenen Stilregeln basierend auf diesen Grammatiken. Diese Regeln werden schließlich vom Parser kompiliert, um entsprechende CSS-Dateien zu generieren.

LESS entfernt nicht die ursprünglichen Funktionen von CSS und wird auch nicht als Ersatz für CSS verwendet. Stattdessen werden prozedurale Sprachfunktionen zu CSS hinzugefügt, die auf der vorhandenen CSS-Syntax basieren. Less basiert auf der Syntax von CSS und führt Funktionen wie Variablen, Mixin (Mischen), Operationen und Funktionen ein, was das Schreiben von CSS erheblich vereinfacht und die Wartungskosten von CSS reduziert.

Less kann in Node oder auf einem Browsergerät ausgeführt werden Ende.

Methode 1 – Führen Sie das Less-Konvertierungsprogramm auf dem Client aus.

Führen Sie xx.less in HTML ein und führen Sie dann less.js ein, einen Less-Compiler, der im Client-Browser ausgeführt werden kann – die Effizienz ist gering

Methode 2 – Führen Sie das Less-Konvertierungsprogramm auf dem Server aus – Empfohlen

1) Laden Sie einen serverseitigen JS-Interpreter herunter und installieren Sie ihn – nodejs

2) Laden Sie das Less-Dateikonvertierungsprogramm herunter, lessc --js-Skript

3) Führen Sie das aus Lessc-Konverter auf dem serverseitigen JS-Interpreter, um die von Ihnen geschriebene .less-Datei in eine CSS-Datei zu konvertieren

a) Sie können das Konvertierungsprogramm in der Befehlszeile verwenden

    node.exe lessc my.less my.css

Nach dem Login kopieren

b) Verwenden Sie das Konvertierungsprogramm in hbuilder

4) Verweisen Sie in der HTML-Datei auf die kompilierte CSS-Datei

less unterstützt Variablen

@Variablenname: Wert

Verwendung: Selektor {Stil: @Variablenname}

less unterstützt das Mischen von Stilen – Verweisen auf einen anderen Stil in einem Stil

 .class1(){...}
 .class2{
     ...
     .class1
     ...
 }

Nach dem Login kopieren

Mischen mit Parametern

 .class()(@参数1，@参数2，。。。){....}
 .class2 {
     ...
     .class(参数1，参数2);
     ...
 }

Nach dem Login kopieren

Verschachtelte Regeln

 .class1{
    ...
   .class2 {}
 }

Nach dem Login kopieren

Konvertierungsergebnisse

 .class1{  }
 .class1 .class2{ }

Nach dem Login kopieren

less kann arithmetische Operationen an Variablen und Konstanten ausführen

less bietet Dutzende Anwendungsfunktionen für Stile

Aufhellen (Farbe, Helligkeitswert): Erhellt die angegebene Farbe. Angegebener Prozentsatz

Abdunkeln (Farbe, Helligkeitswert) : Verdunkelt die angegebene Farbe um den angegebenen Prozentsatz

Boden (Zahl) Protokollwert abgerundet

Zeile (Zahl) Protokollwert aufgerundet

Seitenimport

Vermeiden Sie die Verwendung der @import-Direktive in der CSS-Datei – das wird der Fall sein Erhöhen Sie die Anzahl der HTTP-Anfragen

Um eine Style-Datei in mehrere kleine Style-Dateien aufzuteilen, die von mehreren Personen gleichzeitig geschrieben werden, können Sie @import-less in weniger Importieren anderer weniger Dateien und einem großen vollständigen CSS verwenden Die Style-Datei wird während der Konvertierung zusammengefügt, daher wird empfohlen, andere weniger Dateien in less zu importieren alle Mischungen

reset.less – HTML-Elemente platzieren, um den Stil zurückzusetzen

navbar.less – Navigationsleisten-bezogen

footer.less – Footer-bezogene Stile

js. less —— Viel weniger Dateien

3. Erreichen Stilanpassung durch Ändern der Less-Quelldatei von Bootstrap.

Löschen Sie unnötige Stile, z. B. Karussellanzeigen/modale Boxen.

Kommentieren Sie in der Bootstra.less-Datei „Just @import“ nach Bedarf aus.

Passen Sie den Standardstil der erforderlichen Komponenten an , wie zum Beispiel das Ändern der Standardhintergrundfarbe der Navigationsleiste

Ändern Sie einfach die Variablen in der Datei „variables.less“

Erstellen Sie einen neuen Stil basierend auf dem von Bootstrap bereitgestellten Standardstil, wie zum Beispiel das Anpassen des Stils der Trennlinie im Dropdown-Menü. Detaillierte Anpassung von Komponenten

Ändern Sie die weniger Datei, die einer bestimmten Komponente entspricht

Verwandte Empfehlungen: Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonWelche Beziehung besteht zwischen Bootstrap und Less?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!