Erweitern · Bootstrap auf Deutsche

Bootstrap basiert im Kern auf LESS, einer dynamischen Stylesheet-Sprache, die von unserem guten Freund Alexis Sellier entwickelt wurde . Es macht die Entwicklung von systembasiertem CSS schneller, einfacher und macht mehr Spaß.

Warum WENIGER?

Einer der Ersteller von Bootstrap hat dazu einen kurzen Blogbeitrag geschrieben , der hier zusammengefasst ist:

Bootstrap kompiliert mit Less im Vergleich zu Sass etwa 6x schneller
Es wird weniger in JavaScript geschrieben, was uns das Eintauchen und Patchen im Vergleich zu Ruby mit Sass erleichtert.
Weniger ist mehr; Wir möchten das Gefühl haben, CSS zu schreiben und Bootstrap für alle zugänglich zu machen.

Was ist inbegriffen?

Als Erweiterung von CSS enthält LESS Variablen, Mixins für wiederverwendbare Codeschnipsel, Operationen für einfache Mathematik, Verschachtelungen und sogar Farbfunktionen.

Mehr erfahren

Besuchen Sie die offizielle Website unter http://lesscss.org/ , um mehr zu erfahren.

Da unser CSS mit Less geschrieben ist und Variablen und Mixins verwendet, muss es für die endgültige Produktionsimplementierung kompiliert werden. Hier ist wie.

Hinweis: Wenn Sie eine Pull-Anforderung mit geändertem CSS an GitHub senden, müssen Sie das CSS mit einer dieser Methoden neu kompilieren.

Werkzeuge zum Kompilieren

Knoten mit Makefile

Installieren Sie den LESS-Befehlszeilencompiler, JSHint, Recess und uglify-js global mit npm, indem Sie den folgenden Befehl ausführen:

$ npm install -g less jshint Recess uglify-js

Nach der Installation führen Sie es einfach makevom Stammverzeichnis Ihres Bootstrap-Verzeichnisses aus und schon sind Sie fertig.

Wenn Sie watchr installiert haben, können Sie außerdem ausführen make watch, dass Bootstrap jedes Mal automatisch neu erstellt wird, wenn Sie eine Datei in der Bootstrap-Bibliothek bearbeiten (dies ist nicht erforderlich, nur eine bequeme Methode).

Befehlszeile

Installieren Sie das LESS-Befehlszeilentool über Node und führen Sie den folgenden Befehl aus:

$ lessc ./less/bootstrap.less > bootstrap.css

Fügen --compressSie diesen Befehl unbedingt hinzu, wenn Sie versuchen, einige Bytes zu sparen!

JavaScript

Laden Sie die neueste Less.js herunter und fügen Sie den Pfad dazu (und Bootstrap) in die <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

Um die .less-Dateien neu zu kompilieren, speichern Sie sie einfach und laden Sie Ihre Seite neu. Less.js kompiliert sie und speichert sie im lokalen Speicher.

Inoffizielle Mac-App

Die inoffizielle Mac-App überwacht Verzeichnisse mit .less-Dateien und kompiliert den Code nach jedem Speichern einer überwachten .less-Datei in lokale Dateien. Wenn Sie möchten, können Sie in der App die Einstellungen für das automatische Minifizieren und das Verzeichnis, in dem die kompilierten Dateien landen, umschalten.

Mehr Apps

Knirschen

Crunch ist ein großartig aussehender LESS-Editor und -Compiler, der auf Adobe Air basiert.

CodeKit

CodeKit wurde von demselben Typ wie die inoffizielle Mac-App entwickelt und ist eine Mac-App, die LESS, SASS, Stylus und CoffeeScript kompiliert.

Einfach

Mac-, Linux- und Windows-App zum Drag-and-Drop-Kompilieren von LESS-Dateien. Außerdem befindet sich der Quellcode auf GitHub .

Starten Sie schnell ein beliebiges Webprojekt, indem Sie das kompilierte oder minimierte CSS und JS einfügen. Legen Sie benutzerdefinierte Stile separat an, um Upgrades und Wartung in Zukunft zu vereinfachen.

Dateistruktur einrichten

Laden Sie den neuesten kompilierten Bootstrap herunter und platzieren Sie ihn in Ihrem Projekt. Sie könnten zum Beispiel so etwas haben:

  Anwendung/
      Grundrisse/
      Vorlagen/
  Öffentlichkeit/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      Bild/
          glyphicons-halblinge.png
          glyphicons-halblinge-weiss.png

Startervorlage verwenden

Kopieren Sie den folgenden Basis-HTML-Code, um zu beginnen.

<html>
  <Kopf>
    <title> Bootstrap-101-Vorlage </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <Körper>
    <h1> Hallo Welt! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

Legen Sie benutzerdefinierten Code an

Arbeiten Sie nach Bedarf in Ihrem benutzerdefinierten CSS, JS und mehr, um Bootstrap mit Ihren eigenen separaten CSS- und JS-Dateien zu Ihrem eigenen zu machen.

<html>
  <Kopf>
    <title> Bootstrap-101-Vorlage </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Projekt -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <Körper>
    <h1> Hallo Welt! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Projekt -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

Bootstrap erweitern

Gebaut mit WENIGER