Welche Beziehung besteht zwischen Bootstrap und Less?

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

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

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
     ...
 }

Mischen mit Parametern

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

Verschachtelte Regeln

 .class1{
    ...
   .class2 {}
 }

Konvertierungsergebnisse

 .class1{  }
 .class1 .class2{ }

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!