Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Jade
Webdesign

Bootstrap-Snippets mit Jade backen

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Final product image
What You'll Be Creating

Die größte Stärke des immer beliebteren Bootstrap-Frameworks von Twitter besteht darin, dass Sie damit einen vollständigen Satz voll funktionsfähiger CSS- und JavaScript-Funktionen erhalten.

Dieser vorgefertigte Code bietet so ziemlich alles, was Sie auf einer Website wollen, von der Typografie über die Layout-Steuerung bis hin zu Dutzenden von „Komponenten“ wie Navigationsleisten, Schaltflächen, Bedienfeldern, Warnfeldern und mehr.

Da Sie nur wenig oder gar keine Zeit mit dem Schreiben von CSS und JavaScript für eine Bootstrap-Site verbringen, wird bei der Entwicklung fast ausschließlich HTML erstellt. Wenn Sie also nach Möglichkeiten suchen, wie Sie Ihre HTML-Produktion so schnell und reibungslos wie möglich gestalten können, kann der gesamte Bootstrap-Workflow unglaublich effizient werden.

HTML noch leistungsfähiger machen

Eines der effektivsten Tools, mit denen Sie Ihre HTML-Produktion anregen können, ist Jade, eine Open-Source-Templatesprache, die völlig kostenlos verwendet werden kann.

Jade mag unter dem Banner von "Templating Language" stehen, aber lassen Sie sich davon nicht überzeugen, dass Sie mit "Templates" arbeiten müssen, um seine Vorteile zu nutzen. Es funktioniert auch auf zwei zusätzliche Arten, die für alle Arten der HTML-Produktion äußerst nützlich sein können:

  • Als HTML-Abkürzungstool, mit dem Sie die Menge an Code, den Sie schreiben müssen, drastisch reduzieren können.
  • Als "Präprozessor" für HTML, der wie CSS-Präprozessoren funktioniert, können Sie Logik hinzufügen und "Mixins" erstellen: wiederverwendbare Codeblöcke, die Ihren Workflow DRY halten.

Wenn Sie überhaupt HTML verwenden und vor allem, wenn Sie sich stark mit HTML beschäftigen, wie bei der Verwendung von Bootstrap, stellen Sie möglicherweise fest, dass Sie nach dem Versuch mit Jade nie ein anderes Projekt ohne es erstellen werden.

Jade-angetriebene Bootstrap-Snippets

In diesem Tutorial werden wir Jade verwenden, um einige der wichtigsten Komponenten des Bootstrap-Frameworks zu generieren.

Rohes HTML zu Jade

Für jede Komponente betrachten wir zuerst den erforderlichen Roh-HTML-Code und fassen ihn dann in Jade-Code zusammen. Sie können die beiden direkt miteinander vergleichen, sehen, wie wenig Code benötigt wird, und den neuen, kompakten und sauberen Formatierungsstil von Jade.

Bitte beachten Sie, dass wir uns auf die Jade-Snippets selbst konzentrieren werden, anstatt die Funktionsweise von Jade selbst durchzugehen. Das Wichtigste in den folgenden Codebeispielen ist jedoch, dass jede Ebene der Registereinrückung in Jade eine Ebene der Elementverschachtelung im resultierenden HTML-Code erstellt.

Zum Beispiel folgende Einrückung in Jade:

würde kompilieren, um die folgende Verschachtelung in HTML zu erhalten:

Um mehr über die Funktionsweise von Jade zu erfahren, lesen Sie die kostenlosen Einführungsstunden meines letzten Kurses Top-Speed HTML Development With Jade.

Jade Mixins

Jade-Mixins sind wiederverwendbare Codeblöcke. Wenn Sie Code haben, von dem Sie wissen, dass Sie ihn wiederholt einfügen müssen, können Sie ihn unter einem Mixin definieren. Jedes Mal, wenn Sie dieses Mixin verwenden, wird der Code automatisch für Sie ausgegeben.

Das folgende Mixin hat beispielsweise den Namen "article":

könnte in einem Dokument wie folgt wiederholt verwendet werden:

und würde in diesen HTML-Code kompilieren:

Nachdem wir unsere Bootstrap-Komponenten von rohem HTML in Jade konvertiert haben, werden wir sie noch weiter in Jade-Mixins einkochen. Wir werden Mixins nicht für absolut alles verwenden, nur wo immer man sie verwendet, wird viel Zeit, Aufwand und Code-Duplizierung eingespart.

Selbst wenn wir Mixins verwenden, enthalten wir noch Beispiele für den direkten Jade-Code für die betreffende Komponente. Auf diese Weise können Sie sehen, wie sich der Prozess von HTML zu Jade zu einem Mixin entwickelt.

Setup für die Verwendung von Jade erhalten

Das erste, was Sie tun müssen, ist, sich mit Jade vertraut zu machen. Sie möchten, dass eine Codierungsumgebung verwendet wird und Ihr Jade-Code automatisch in HTML übersetzt wird.

Besuchen Sie den Kurs „Top Speed HTML-Entwicklung mit Jade“ und schauen Sie sich die zweite Lektion des Kurses an: Schnelles und einfaches Setup. Es ist kostenlos und führt Sie durch alles, was Sie wissen müssen, um Jade einzurichten und einsatzbereit zu machen.

Für dieses Tutorial empfehle ich, die Methode im Video zu wählen, die Sublime Text 3 und Prepros behandelt.

Wenn Sie das Video fertig angesehen haben und die Schritte befolgt haben, können Sie mit Ihrem Bootstrap-Projekt beginnen.

Grundlegende Dokumenterstellung

An diesem Punkt sollte eine Datei mit dem Namen "index.jade" zur Bearbeitung bereitstehen. Wenn sich in der Datei momentan Code befindet, löschen Sie ihn bitte, damit er vollständig leer ist.

Wir beginnen mit dem Erstellen der Grundlagen des HTML-Hauptdokuments Ihres Bootstrap-Projekts, dem Hinzufügen der wichtigsten Tags und dem Laden der erforderlichen Bootstrap-CSS- und JavaScript-Dateien plus jQuery.

Wir werden die Bootstrap CDN- und Google-APIs dazu verwenden, jede dieser erforderlichen Dateien zu laden, damit Sie sie nicht herunterladen müssen:

Wie oben erwähnt, wird der HTML-Code für jedes von uns erstellte Element angezeigt. Es dient jedoch nur zu Demonstrationszwecken, sodass Sie es mit seinem Jade-Pendant vergleichen können.

Sie müssen in keiner Weise den rohen HTML-Code verwenden, den Sie sehen. Stattdessen können Sie sich auf die Jade-Abschnitte konzentrieren, die mit In Jade konvertieren und _____ Mixins hinzufügen gekennzeichnet sind.

Das unformatierte HTML

Mit dem folgenden Code werden die grundlegenden Doctype-, HTML-, Head-, Titel-, Meta- und Body-Elemente der Seite eingerichtet. Außerdem wird es in die CSS- und JavaScript-Dateien von Bootstrap sowie in jQuery geladen und erstellt ein div-Element mit der Klasse .container, auf die alle von uns erstellten Komponenten gesetzt werden.

In Jade konvertieren

Unten haben wir das Jade-Äquivalent des rohen HTML-Codes, den Sie im obigen Abschnitt gesehen haben. Kopieren Sie diesen Code in Ihre "index.jade" -Datei und speichern Sie ihn.

Öffnen Sie nach dem Kompilieren (automatisch über Prepros) die generierte Datei „index.html“. Im Inneren sollten Sie eine genaue Übereinstimmung mit dem rohen HTML-Code oben finden.

Obwohl wir im Rahmen dieser Phase keine Mixins erstellen, werden wir Vorarbeiten für die später erstellten Mixins bereitstellen.

Mixins hinzufügen

Erstellen Sie eine Datei mit dem Namen "mixins.jade" in demselben Ordner, in dem sich Ihre vorhandenen Jade-Dateien befinden. Alle später erstellten Mixins werden in diese Datei geschrieben.

Fügen Sie oben in Ihrer Datei "index.jade" folgende Zeile ein:

Diese Zeile importiert Ihre Mixins-Datei und macht die darin enthaltenen Mixins für Ihre "index.jade" -Datei verfügbar.

Jetzt können wir Bootstrap-Komponenten hinzufügen.

Anmerkung: Der gesamte Code für die nachfolgenden Bootstrap-Komponenten sollte in der .container-Klasse div hinzugefügt werden.

Navbar-Komponente

Die erste Bootstrap-Komponente, die wir in Jade umwandeln, ist die Navbar-Komponente. Dazu gehören der Branding-Bereich (erstes Element in der Leiste), Menüelemente auf oberster Ebene, ein Dropdown-Menü mit einem Trenner und Dropdown-Header sowie ein Umschalter zum Erweitern Das Menü wird im reduzierten Format bei kleineren Darstellungen angezeigt.

Das unformatierte HTML

Der Roh-HTML-Code, den Sie normalerweise für die oben abgebildete Navbar-Komponente verwenden müssen, lautet:

In Jade konvertieren

Im Jade-Format zusammengepresst sieht unsere Navbar-Komponente folgendermaßen aus:

Fügen Sie Navbar Mixins hinzu

Die Jade-Version der Navbar-Komponente ist zwar prägnanter und übersichtlicher als reines HTML, wir können jedoch eine noch größere Verbesserung erzielen, indem wir den Großteil des Codes in Mixins externalisieren.

Fügen Sie der Datei "mixins.jade" den folgenden Code hinzu:

Im obigen Jade-Code haben wir fünf verschiedene Mixins erstellt:

  1. nav - Verwenden Sie dieses Mixin, um die Navbar-Komponente und ihre übergeordneten Elemente zu initialisieren, setzen Sie den visuellen Stil auf "Standard" oder "Invers" und legen Sie den Text fest, der im Branding-Abschnitt angezeigt wird.
  2. nav_item - Verwenden Sie diese Option, um einzelne Menüelemente hinzuzufügen, die unter dem Nav-Mixin verschachtelt sind
  3. nav_item_dropdown - Verwenden Sie diese Option, um ein Nav-Element mit einem verschachtelten Dropdown-Menü zu platzieren
  4. nav_divider - Verwenden Sie diese Option, um einen Teiler unter einem nav_item_dropdown-Menü zu platzieren
  5. nav_header - Verwenden Sie diese Option, um nach einem nav_divider mixin eine Kopfzeile in einem Dropdown-Menü zu platzieren

Das macht vielleicht nicht sofort Sinn, aber lesen Sie weiter, um zu sehen, wie diese Mixins in Aktion verwendet werden und alles sollte klar werden.

Verwenden Sie Navbar Mixins

Da unsere Navbar-Mixins sofort einsatzbereit sind, wird das Platzieren von Navbar-Komponenten jetzt wesentlich einfacher.

Platzieren Sie das "nav" -Mixin

Platzieren Sie zunächst das nav-mixin, um das Gesamtmenü wie folgt zu initialisieren:

Zwischen den Klammern, die mit dem Nav-Mixin verbunden sind, übergeben Sie zwei Informationen, die als Argumente bezeichnet werden und jeweils in Anführungszeichen gesetzt sind. Die erste Einstellung legt den Text fest, der im Branding-Bereich der Nav-Komponente angezeigt wird. Beim zweiten wird eine eindeutige ID für die Nav-Komponente festgelegt.

Nach dem Kompilieren sollten Sie Folgendes sehen, wenn Sie Ihre HTML-Datei in einem Browser anzeigen:

Inverse Navbar-Farbe

Um die Farbe der Navbar-Komponente von default auf invers zu ändern, fügen Sie ein drittes Argument wie folgt hinzu:

Dadurch werden Ihre Navbar-Farben wie folgt angezeigt:

Nav-Objekte platzieren

Als Nächstes werden wir mit unserem nav_item mixin unsere drei Top-Level-Menü-Links hinzufügen:

Beachten Sie, dass jede Instanz von nav_item mixin um eine Ebene mehr eingerückt ist als das nav-mixin. Dadurch wird jedes nav_item zu einem Kind des nav-Mixins.

In diesem Fall wird das erste Argument übergeben, z. "Index.html" legt den Link fest, der auf den Menüpunkt angewendet wird. Das zweite (und optionale) Argument fügt eine aktive Klasse hinzu, die den Menüpunkt hervorhebt.

Nach der Kompilierung sollte Ihre Navbar-Komponente nun so aussehen:

Navigationselement mit Dropdown-Menü platzieren

Wir können jetzt einen weiteren Menüpunkt hinzufügen, in dem sich ein Dropdown-Menü befindet, und zwar mit dem nav_item_dropdown-Mixin:

Dadurch wird ein neues Element mit einem Pfeil hinzugefügt, der darauf hinweist, dass ein untergeordnetes Menü vorhanden ist, und der Wrapper für das untergeordnete Menü selbst:

Platzieren Sie Dropdown-Navigationselemente

In unserem neuen Dropdown-Menü sind noch keine Elemente enthalten. Daher können wir hier erneut unser nav_item-mixin verwenden.

Wenn wir gerade dabei sind, verwenden wir unser nav_divider-mixin, um eine Trennlinie innerhalb des Dropdown-Menüs hinzuzufügen, und unseren nav_header, um darunter einen Kopfzeilentext hinzuzufügen.

Diese Ergänzungen ergänzen den Code der Navbar-Komponente:

Dieser Code wird in HTML in eine voll funktionsfähige Navbar-Komponente übersetzt und sieht folgendermaßen aus:

Werfen Sie einen kurzen Blick auf die ursprünglichen 30 HTML-Zeilen für die Navbar-Komponente und überlegen Sie, wie viel schneller das Erstellen von Menüs werden kann (nachdem unendlich viele wiederverwendbare Mixins erstellt wurden), wenn Sie stattdessen auf 12 kurze Jade-Zeilen reduzieren.

Raster: Drei-Säulen-Beispiel

Bootstrap verfügt über ein zwölf-spaltiges Rastersystem und eine Reihe zugehöriger Klassen, mit denen Sie bestimmen können, wie viele Spalten ein Element bei verschiedenen Bildschirmgrößen haben sollte, z. B. mittel (md), klein (sm) und extra klein (xs) ).

Wie dieses Rastersystem funktioniert, erfahren Sie unter http://getbootstrap.com/css/#grid

Unten sehen Sie drei Bereiche innerhalb der divs, die jeweils 4 Spalten breit bei „mittlerer“ Größe oder größer beginnen und jeweils auf sechs Spalten bei „kleiner“ Größe und 12 Spalten bei „extra kleiner“ Größe zusammenfallen.

Das unformatierte HTML

Der für diese drei Spalten erforderliche Roh-HTML-Code lautet wie folgt:

Wir beginnen mit dem Erstellen eines div mit der row Klassenzeile, und darin sind drei Layout-divs verschachtelt, die die oben abgebildeten Bedienfelder enthalten.

Für jedes div ist die Klasse col-md-4 festgelegt, die bei mittlerer Größe mindestens vier Spalten breit ist. Als Nächstes wird die Klasse col-sm-6 auf sechs Spalten breit und die Klasse col-xs-12 auf zwölf Spalten mit besonders kleiner Größe festgelegt.

In Jade konvertieren

In Jade-Code können wir alle öffnenden und schließenden Divs überspringen und die erforderlichen Klassen einfach direkt eingeben, wie folgt:

Panel-Komponente

Jetzt erstellen wir die Panel-Komponenten, die Sie im vorherigen Abschnitt gesehen haben:

Das unformatierte HTML

Der Roh-HTML-Code für die Panel-Komponente ist im Vergleich zur Navbar-Komponente tatsächlich ziemlich leicht. Wir haben nur drei Div-Wrapper, wobei insgesamt vier Klassen erforderlich sind, um das richtige Styling hinzuzufügen:

In Jade konvertieren

Die Konvertierung in Jade macht es wieder etwas leichter:

Panel Mixin hinzu fügen

Der Grund, warum wir ein Mixin für diese Komponente erstellen, besteht darin, dass Sie sich nicht an alle vier Klassennamen erinnern müssen oder wie sich die einzelnen Divs miteinander verbinden sollen.

Fügen Sie der Datei "mixins.jade" den folgenden Code hinzu:

Verwenden Sie Panel Mixin

Um die Panel-Komponente jetzt zu platzieren, verwenden Sie einfach das Panel-Mixin und übergeben den Text, den Sie in der Überschrift verwenden möchten, als Argument. Geben Sie dann den Inhalt Ihres Panels ein, nachdem das Mixin aufgerufen wurde, und folgen Sie dabei einem Leerzeichen:

Bootstrap bietet verschiedene Arten von Panels an. Um den Bedienfeldstil in einen anderen Stil zu ändern, übergeben Sie den Namen des Stils als zweites Argument wie folgt:

Tasten

Als Nächstes betrachten wir das Erstellen von Instanzen von Bootstrap-Schaltflächen.

Wie bei der Bedienfeldkomponente des letzten Abschnitts ist der Roh-HTML-Code für Schaltflächen bereits relativ leicht. Durch das Erstellen von Mixins müssen Sie jedoch nicht die Syntax beachten, die zu ihrer Verwendung erforderlich ist.

Das unformatierte HTML

In Jade konvertieren

Add Button Mixin

Dieses Mixin bestimmt nicht nur, welchen Stil eine Schaltfläche haben wird, sondern auch einen Link und ermöglicht es, die Größe der Schaltfläche zu ändern.

Verwenden Sie Button Mixin

In seiner einfachsten Form kann dieses Button-Mixin wie folgt verwendet werden, wobei der Text auf dem Button hinter dem Mixin nach einem Leerzeichen angezeigt wird:

Dadurch wird eine Schaltfläche mit Standardgröße, Standardfarbe und mit # als Linkziel erstellt.

Der Stil der Schaltfläche kann festgelegt werden, indem der Name eines neuen Stils als erstes Argument übergeben wird und das Verknüpfungsziel als zweites Argument übergeben wird:

Die Größe der Schaltfläche kann auch geändert werden, indem als drittes Argument entweder "large", "small" oder "mini" übergeben wird:

Warnungskomponente

Warnmeldungskomponenten sind den Tasten von Bootstrap sehr ähnlich, jedoch einfacher, da auf sie keine Linkziele angewendet werden müssen und sie nicht in verschiedenen Größen vorliegen.

Das Schreiben von Warnmeldungen in rohem HTML-Code kann etwas schwierig sein, da Sie sich alle dazugehörigen Klassen sowie das Hinzufügen des Buttons mit dem „x“ -Symbol merken müssen, damit die Warnmeldung geschlossen werden kann.

Wir stellen eine Mischung zusammen, damit Sie sich an nichts davon erinnern müssen. Das Setzen von Alerts wird wiederum einfach.

Das unformatierte HTML

In Jade konvertieren

Fügen Sie Alert Mixin hinzu

Fügen Sie der Datei "mixins.jade" den folgenden Code hinzu:

Verwenden Sie Alert Mixin

Um einen Alert zu platzieren, können Sie jetzt einfach das Alert-Mixin verwenden, den Alert-Stil als Argument übergeben und dann den Textinhalt des Alerts unmittelbar nach einem Leerzeichen eingeben:

Jumbotron-Komponente

Das Jumbotron ist eine der erkennbarsten Komponenten von Bootstrap.

In diesem Fall wird kein Mixin erstellt, da das Platzieren einer Jumbotron-Komponente mit direktem Jade-Code genauso schnell ist. Dies ist ein gutes Beispiel, um zu zeigen, dass Mixins zwar fantastisch sind, Sie aber nicht immer brauchen, wenn Sie nicht viel Zeit sparen.

Das unformatierte HTML

Konvertieren Sie in Jade, einschließlich eines Button-Mixins

Wenn Sie ein Jumbotron in Jade platzieren, müssen Sie .jumbotron in eine Zeile schreiben und dann den Inhalt in die nachfolgenden Zeilen einbetten.

Im folgenden Code erfahren Sie, wie wir auch den zuvor erstellten Button-Mix verwendet haben, und zeigen Ihnen, wie Sie diese Elemente miteinander mischen und aufeinander abstimmen können:

Listengruppenkomponente

Bootstrap bietet verschiedene Arten von Listengruppenkomponenten. Wir werden drei dieser Listengruppentypen wie folgt generieren.

1. "List" -Typ, der ein ul-Element mit untergeordneten li-Elementen erzeugt

2. "Links" -Typ, um eine Reihe verknüpfter Textelemente zu erstellen

3. "Default" -Typ, der nicht verknüpfte Textelemente erzeugt

Das unformatierte HTML

Wie bei einigen der oben genannten Komponenten ist der HTML-Code für Listengruppen nicht übermäßig komplex. Wir können ihre Produktion jedoch noch effizienter gestalten, indem Sie eine Reihe von Mixins erstellen, die die Menge an Code reduzieren, die Sie schreiben müssen.

Der Roh-HTML-Code für jeden Listengruppentyp lautet wie folgt:

Typ: Liste

Typ: Links

Typ: Standard

In Jade konvertieren

In Straight Jade konvertiert, lauten die folgenden Arten von Listengruppen:

Typ: Liste

Typ: Links

Typ: Standard

Listengruppen-Mixins hinzufügen

Wie bei den Nav-Komponenten-Mixins werden wir mehrere Listengruppen-Mixins erstellen, die verschachtelt werden können, um unsere verschiedenen Listengruppentypen zu erstellen.

Fügen Sie Ihrer Datei "mixins.jade" Folgendes hinzu:

Das erste Mixin, listGroup, initialisiert einen beliebigen unserer drei Listengruppentypen und kann ein Argument akzeptieren, das den Typ der zu erzeugenden Listengruppe bestimmt. Ein ul-Element wird nur ausgegeben, wenn der Listentyp beim Aufruf angegeben wird.

Das zweite mixin listItem gibt die einzelnen Listenelemente aus. Wenn die Typenliste angegeben ist, wird jedes Element innerhalb von li-Tags ausgegeben. Wenn die Typverknüpfung angegeben ist, wird jedes Element als Link ausgegeben.

Das dritte Mixin, listHeading, gibt eine Überschrift der Ebene h4 aus, wenn es in einem Listenelement verschachtelt ist. Es ist für die Verwendung mit den Links und Standardtypen der Listengruppen gedacht.

Das vierte Mixin listText gibt schließlich den Text aus, der in einem Listenelement enthalten sein soll, und ist auch für die Verwendung mit den Links und Standardtypen der Listengruppen gedacht.

Listengruppen-Mixins verwenden

Typ: Liste

Um eine Listentyp-Listengruppe zu erstellen, verwenden Sie das ListGroup-Mixin mit der als Argument übergebenen Liste und ListItem-Mixins, wie im folgenden Code dargestellt:

So legen Sie fest, dass eines der Listenelemente einen aktiven Stil hat, um das Wort als Argument zu übergeben, wie in der zweiten Zeile des obigen Codebeispiels.

Typ: Links

Um eine Linktyp-Listengruppe erneut zu erstellen, verwenden Sie das ListGroup-Mixin, übergeben Sie diesmal jedoch die Wortlinks als Argument.

Sie werden auch weiterhin das listItem-mixin verwenden. Jetzt werden jedoch Links ausgegeben. Sie sollten also jedes Mal ein Argument angeben, durch das der Link als Ziel festgelegt wird. Wenn Sie für einen verknüpften Listeneintrag einen aktiven Stil festlegen, übergeben Sie diesmal das Wort "aktiv" als zweites Argument.

In jedem listItem-Mixin verschachtelt, können Sie die ListHeading- und ListText-Mixins verwenden, um die Überschrift und den regulären Text für jedes Element festzulegen:

Typ: Standard

Die Standardtyp-Listengruppe erhalten Sie, wenn Sie überhaupt kein Argument durch das ListGroup-Mixin übergeben. Es wird fast genauso verwendet wie die Linktyp-Listengruppe, mit dem Unterschied, dass Sie bei Verwendung des ListItem-Mixins keine Linkziele übergeben müssen:

Bootwatch-Themen

In allen Beispielen, die Sie bisher gesehen haben, haben wir das Flatly-Design von Bootswatch verwendet, das über das Bootstrap-CDN mit diesem Code im Head-Abschnitt geladen wurde:

Die letzte Mischung, die wir in unser Projekt aufnehmen werden, ist eine "Bootswatch" -Mischung.

Dieses Mixin macht es sehr einfach, Themen zu wechseln und die URL Ihres Stylesheets später zu aktualisieren, falls Sie dies benötigen. Dies ist besonders nützlich, wenn Sie mehrere HTML-Dateien gleichzeitig aktualisieren müssen.

Fügen Sie Bootswatch Mixin hinzu

Fügen Sie der Datei "mixins.jade" den folgenden Code hinzu:

Verwenden Sie Bootswatch Mixin

Ersetzen Sie in Ihrem Hauptdokument die verknüpfte Zeile im Bootswatch-Stylesheet durch Folgendes:

Um jetzt in ein anderes Thema zu wechseln, ersetzen Sie einfach das flatly Wort mit dem Titel des neuen Themas. Um beispielsweise zum Superhelden-Thema zu wechseln, verwenden Sie Folgendes:

Dies wird Ihre Site sofort in ein neues Thema umwandeln:

Einpacken

Ich hoffe, Sie haben Spaß daran, all diese Jade-Snippets in Ihre Bootstrap-Projekte zu integrieren, und Sie sparen dabei viel Zeit.

Wenn Sie in Ihren eigenen Bootstrap-Projekten etwas anderes machen möchten, können Sie die Jade-Mixins so schreiben, dass Sie sie schreiben und auf beliebige Weise anpassen.

Jade ist eine unglaublich mächtige Sprache, aber es ist eine intuitive Sprache, die Sie schnell in die Praxis umsetzen können.

Lesen Sie weiter

  • Ich lade Sie ein, einen Blick auf meinen Kurs zu werfen. Top Speed HTML-Entwicklung mit Jade, wo ich Sie durch alles Notwendige führe, um die Grundlagen und einige der nützlichsten Elemente von Jade in nur etwas mehr als zwei Stunden zu erreichen.
  • Weitere Informationen zu Jade finden Sie auf der offiziellen Website unter http://jade-lang.com
  • Weitere Informationen zu Bootstrap finden Sie unter http://getbootstrap.com
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.