() translation by (you can also view the original English article)
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:
1 |
main
|
2 |
div
|
3 |
p
|
würde kompilieren, um die folgende Verschachtelung in HTML zu erhalten:
1 |
<main> |
2 |
<div> |
3 |
<p></p> |
4 |
</div> |
5 |
</main> |
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":
1 |
mixin article(title) |
2 |
.article |
3 |
.article-wrapper |
4 |
h1= title |
5 |
block
|
könnte in einem Dokument wie folgt wiederholt verwendet werden:
1 |
+article('Hello world') |
2 |
p This is my |
3 |
p Amazing article |
4 |
|
5 |
+article('Another article') |
6 |
p I just used a mixin |
7 |
p instead of retyping code |
und würde in diesen HTML-Code kompilieren:
1 |
<div class="article"> |
2 |
<div class="article-wrapper"> |
3 |
<h1>Hello world</h1> |
4 |
<p>This is my</p> |
5 |
<p>Amazing article</p> |
6 |
</div> |
7 |
</div> |
8 |
<div class="article">
|
9 |
<div class="article-wrapper">
|
10 |
<h1>Another article</h1> |
11 |
<p>I just used a mixin</p> |
12 |
<p>instead of retyping code</p> |
13 |
</div> |
14 |
</div> |
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.
1 |
<!DOCTYPE html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<title>Baking Bootstrap Snippets with Jade</title> |
5 |
<meta charset="utf-8"> |
6 |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
7 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
8 |
<meta name="description" content="Baking Bootstrap Snippets with Jade"> |
9 |
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css" rel="stylesheet"> |
10 |
</head>
|
11 |
<body style="padding-bottom:10rem;"> |
12 |
<div class="container"></div> |
13 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
14 |
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> |
15 |
</body>
|
16 |
</html>
|
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.
1 |
doctype |
2 |
html( lang="en" ) |
3 |
head |
4 |
title Baking Bootstrap Snippets with Jade |
5 |
meta( charset='utf-8' ) |
6 |
meta( http-equiv='X-UA-Compatible', content='IE=edge' ) |
7 |
meta( name='viewport', content='width=device-width, initial-scale=1.0' ) |
8 |
meta( name='description', content='Baking Bootstrap Snippets with Jade' ) |
9 |
//- Bootswatch Theme |
10 |
link(href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css", rel="stylesheet") |
11 |
|
12 |
body(style="padding-bottom:10rem;") |
13 |
.container |
14 |
|
15 |
script( src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' ) |
16 |
script( src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js' ) |
Ö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:
1 |
include mixins |
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:
1 |
<nav role="navigation" class="navbar navbar-default"> |
2 |
<div class="navbar-header"> |
3 |
<button type="button" data-toggle="collapse" data-target="#navbar-inverse" aria-expanded="false" aria-controls="navbar" class="navbar-toggle collapsed"> |
4 |
<span class="sr-only">Toggle navigation</span> |
5 |
<span class="icon-bar"></span> |
6 |
<span class="icon-bar"></span> |
7 |
<span class="icon-bar"></span> |
8 |
</button>
|
9 |
<a href="#" class="navbar-brand">Project name</a> |
10 |
</div>
|
11 |
<div id="navbar-inverse" class="collapse navbar-collapse"> |
12 |
<ul class="nav navbar-nav"> |
13 |
<li class="active"><a href="#">Home</a></li> |
14 |
<li><a href="#about">About</a></li> |
15 |
<li><a href="#contact">Contact</a></li> |
16 |
<li class="dropdown"> |
17 |
<a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="dropdown-toggle">Dropdown <span class="caret"></span></a> |
18 |
<ul role="menu" class="dropdown-menu"> |
19 |
<li><a href="#">Action</a></li> |
20 |
<li><a href="#">Another action</a></li> |
21 |
<li><a href="#">Something else here</a></li> |
22 |
<li class="divider"></li> |
23 |
<li class="dropdown-header">Nav header</li> |
24 |
<li><a href="#">Separated link</a></li> |
25 |
<li><a href="#">One more separated link</a></li> |
26 |
</ul>
|
27 |
</li>
|
28 |
</ul>
|
29 |
</div>
|
30 |
</nav>
|
In Jade konvertieren
Im Jade-Format zusammengepresst sieht unsere Navbar-Komponente folgendermaßen aus:
1 |
nav.navbar.navbar-default( role="navigation" ) |
2 |
.navbar-header |
3 |
button.navbar-toggle.collapsed( type="button", data-toggle="collapse", data-target="#navbar-inverse", aria-expanded="false", aria-controls="navbar") |
4 |
span.sr-only Toggle navigation |
5 |
span.icon-bar |
6 |
span.icon-bar |
7 |
span.icon-bar |
8 |
a.navbar-brand(href="#") Project name |
9 |
|
10 |
#navbar-inverse.collapse.navbar-collapse
|
11 |
ul.nav.navbar-nav |
12 |
li.active: a( href="#") Home |
13 |
li: a( href="#about" ) About |
14 |
li: a( href="#contact" ) Contact |
15 |
li.dropdown |
16 |
a.dropdown-toggle( href="#", data-toggle="dropdown", role="button", aria-expanded="false" ) Dropdown |
17 |
span.caret |
18 |
ul.dropdown-menu( role="menu" ) |
19 |
li: a( href="#" ) Action |
20 |
li: a( href="#" ) Another action |
21 |
li: a( href="#" ) Something else here |
22 |
li.divider |
23 |
li.dropdown-header Nav header |
24 |
li: a( href="#" ) Separated link |
25 |
li: a( href="#" ) One more separated link |
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:
1 |
//- Navbar mixins |
2 |
mixin nav(name, id, style) |
3 |
- var style = (typeof style === 'undefined') ? "default" : style |
4 |
nav( role="navigation", class=["navbar", "navbar-" + style] ) |
5 |
.navbar-header |
6 |
button.navbar-toggle.collapsed( type="button", data-toggle="collapse", data-target="#" + id, aria-expanded="false", aria-controls="navbar") |
7 |
span.sr-only Toggle navigation |
8 |
span.icon-bar |
9 |
span.icon-bar |
10 |
span.icon-bar |
11 |
a.navbar-brand(href="#")= name |
12 |
|
13 |
.collapse.navbar-collapse( id=id ) |
14 |
ul.nav.navbar-nav |
15 |
block
|
16 |
|
17 |
mixin nav_item(href, active) |
18 |
li(class=active): a( href=href ) |
19 |
block
|
20 |
|
21 |
mixin nav_item_dropdown(href, active) |
22 |
li(class=["dropdown", active]) |
23 |
a.dropdown-toggle( href=href, data-toggle="dropdown", role="button", aria-expanded="false" )= attributes.label |
24 |
span.caret |
25 |
ul.dropdown-menu( role="menu" ) |
26 |
block
|
27 |
|
28 |
mixin nav_divider |
29 |
li.divider |
30 |
|
31 |
mixin nav_header |
32 |
li.dropdown-header |
33 |
block
|
34 |
|
35 |
//- End navbar mixins |
Im obigen Jade-Code haben wir fünf verschiedene Mixins erstellt:
-
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.
-
nav_item- Verwenden Sie diese Option, um einzelne Menüelemente hinzuzufügen, die unter demNav-Mixin verschachtelt sind -
nav_item_dropdown- Verwenden Sie diese Option, um ein Nav-Element mit einem verschachtelten Dropdown-Menü zu platzieren -
nav_divider- Verwenden Sie diese Option, um einen Teiler unter einemnav_item_dropdown-Menü zu platzieren -
nav_header- Verwenden Sie diese Option, um nach einemnav_dividermixin 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:
1 |
+nav("Project name", "dropdown_menu") |
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:
1 |
+nav("Project name", "dropdown_menu", "inverse") |
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:
1 |
+nav("Project name", "dropdown_menu") |
2 |
+nav_item( "index.html", "active" ) Home |
3 |
+nav_item( "about.html" ) About |
4 |
+nav_item( "contact.html" ) Contact |
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:
1 |
+nav("Project name", "dropdown_menu") |
2 |
+nav_item( "index.html", "active" ) Home |
3 |
+nav_item( "about.html" ) About |
4 |
+nav_item( "contact.html" ) Contact |
5 |
+nav_item_dropdown( "#" )( label="Dropdown" ) |
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:
1 |
+nav("Project name", "dropdown_menu") |
2 |
+nav_item( "index.html", "active" ) Home |
3 |
+nav_item( "about.html" ) About |
4 |
+nav_item( "contact.html" ) Contact |
5 |
+nav_item_dropdown( "#" )( label="Dropdown") |
6 |
+nav_item( "#" ) Action |
7 |
+nav_item( "#" ) Another action |
8 |
+nav_item( "#" ) Something else here |
9 |
+nav_divider |
10 |
+nav_header Nav header |
11 |
+nav_item( "#" ) Separated link |
12 |
+nav_item( "#" ) One more separated link |
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:
1 |
<div class="row"> |
2 |
<div class="col-md-4 col-sm-6 col-xs-12"> |
3 |
</div> |
4 |
<div class="col-md-4 col-sm-6 col-xs-12"> |
5 |
</div> |
6 |
<div class="col-md-4 col-sm-6 col-xs-12"> |
7 |
</div> |
8 |
</div> |
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:
1 |
.row |
2 |
.col-md-4.col-sm-6.col-xs-12 |
3 |
.col-md-4.col-sm-6.col-xs-12 |
4 |
.col-md-4.col-sm-6.col-xs-12 |
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:
1 |
<div class="panel panel-default"> |
2 |
<div class="panel-heading">Panel Heading</div> |
3 |
<div class="panel-body">We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results.</div> |
4 |
</div>
|
In Jade konvertieren
Die Konvertierung in Jade macht es wieder etwas leichter:
1 |
.panel.panel-default |
2 |
.panel-heading Panel Heading |
3 |
.panel-body We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results. |
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:
1 |
//- Panel mixin |
2 |
mixin panel(heading, style) |
3 |
- var style = (typeof style === 'undefined') ? "default" : style |
4 |
div( class=["panel", "panel-" + style] ) |
5 |
.panel-heading= heading |
6 |
.panel-body |
7 |
block
|
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:
1 |
+panel("Panel Heading") We are a fairly small, flexible design studio that designs for print and web. We work flexibly with clients to fulfil their design needs. Whether you need to create a brand from scratch, including marketing materials and a beautiful and functional website or whether you are looking for a design refresh we are confident you will be pleased with the results. |
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:
1 |
+panel("Panel Heading", "success") |
1 |
+panel("Panel Heading", "primary") |
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
1 |
<a href="#" class="btn btn-default">Default</a> |
2 |
|
3 |
<a href="link.htm" class="btn btn-primary">Primary</a> |
4 |
|
5 |
<a href="#" class="btn btn-success">Success</a> |
6 |
|
7 |
<a href="#" class="btn btn-info">Info</a> |
8 |
|
9 |
<a href="#" class="btn btn-warning">Warning</a> |
10 |
|
11 |
<a href="#" class="btn btn-danger">Danger</a> |
In Jade konvertieren
1 |
a.btn.btn-default Default |
2 |
|
3 |
a.btn.btn-primary( href="link.htm" ) Primary |
4 |
|
5 |
a.btn.btn-success Success |
6 |
|
7 |
a.btn.btn-info Info |
8 |
|
9 |
a.btn.btn-warning Warning |
10 |
|
11 |
a.btn.btn-danger Danger |
Add Button Mixin
1 |
//- Button mixin |
2 |
mixin button(style, href, size) |
3 |
- var style = (typeof style === 'undefined') ? "default" : style |
4 |
- var href = (typeof href === 'undefined') ? "#" : href |
5 |
case size |
6 |
when "large" |
7 |
- size = "btn-lg" |
8 |
when "small" |
9 |
- size = "btn-sm" |
10 |
when "mini" |
11 |
- size = "btn-xs" |
12 |
|
13 |
a( class=["btn", "btn-" + style, size], href=href ) |
14 |
block
|
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:
1 |
+button Default |
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:
1 |
+button("primary", "link.htm") Primary |
Die Größe der Schaltfläche kann auch geändert werden, indem als drittes Argument entweder "large", "small" oder "mini" übergeben wird:
1 |
+button("success", "success.html", "large") Success |
2 |
|
3 |
+button("info", "info.html", "small") Info |
4 |
|
5 |
+button("warning", "warning.html", "mini") Warning |
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
1 |
<div class="alert alert-dismissable alert-warning"> |
2 |
<button type="button" data-dismiss="alert" class="close">×</button>Warning! Warning! |
3 |
</div>
|
4 |
<div class="alert alert-dismissable alert-danger"> |
5 |
<button type="button" data-dismiss="alert" class="close">×</button>Danger Will Robinson! |
6 |
</div>
|
7 |
<div class="alert alert-dismissable alert-success"> |
8 |
<button type="button" data-dismiss="alert" class="close">×</button>You succeeded :-) |
9 |
</div>
|
10 |
<div class="alert alert-dismissable alert-info"> |
11 |
<button type="button" data-dismiss="alert" class="close">×</button>Some information for you |
12 |
</div>
|
In Jade konvertieren
1 |
.alert.alert-dismissable.alert-warning |
2 |
button.close( type="button", data-dismiss="alert" ) × |
3 |
| Warning! Warning! |
4 |
.alert.alert-dismissable.alert-danger |
5 |
button.close( type="button", data-dismiss="alert" ) × |
6 |
| Danger Will Robinson! |
7 |
.alert.alert-dismissable.alert-success |
8 |
button.close( type="button", data-dismiss="alert" ) × |
9 |
| You succeeded :-) |
10 |
.alert.alert-dismissable.alert-info |
11 |
button.close( type="button", data-dismiss="alert" ) × |
12 |
| Some information for you |
Fügen Sie Alert Mixin hinzu
Fügen Sie der Datei "mixins.jade" den folgenden Code hinzu:
1 |
//- Alert mixin |
2 |
mixin alert(style) |
3 |
div( class=["alert", "alert-dismissable", "alert-" + style] ) |
4 |
button.close( type="button", data-dismiss="alert" ) × |
5 |
block
|
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:
1 |
+alert("warning") Warning! Warning!
|
2 |
+alert("danger") Danger Will Robinson!
|
3 |
+alert("success") You succeeded :-)
|
4 |
+alert("info") Some information for you
|
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
1 |
<div class="jumbotron"> |
2 |
<h1>Hello, world!</h1> |
3 |
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> |
4 |
<p><a class="btn btn-primary btn-lg">Learn more</a></p> |
5 |
</div>
|
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:
1 |
.jumbotron |
2 |
h1 Hello, world! |
3 |
p This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. |
4 |
p: +button("primary", "more.htm", "large") Learn more |
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
1 |
<ul class="list-group"> |
2 |
<li class="list-group-item active">Cras justo odio</li> |
3 |
<li class="list-group-item">Dapibus ac facilisis in</li> |
4 |
<li class="list-group-item">Morbi leo risus</li> |
5 |
<li class="list-group-item">Dapibus ac facilisis in</li> |
6 |
<li class="list-group-item">Morbi leo risus</li> |
7 |
<li class="list-group-item">Dapibus ac facilisis in</li> |
8 |
</ul>
|
Typ: Links
1 |
<div class="list-group"> |
2 |
<a href="#" class="list-group-item active"> |
3 |
<h4 class="list-group-item-heading">List group item heading</h4> |
4 |
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
5 |
</a>
|
6 |
<a href="#" class="list-group-item"> |
7 |
<h4 class="list-group-item-heading">List group item heading</h4> |
8 |
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
9 |
</a>
|
10 |
<a href="#" class="list-group-item"> |
11 |
<h4 class="list-group-item-heading">List group item heading</h4> |
12 |
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
13 |
</a>
|
14 |
</div>
|
Typ: Standard
1 |
<div class="list-group"> |
2 |
<div href="#" class="list-group-item"> |
3 |
<h4 class="list-group-item-heading">List group item heading</h4> |
4 |
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
5 |
</div>
|
6 |
<div href="#" class="list-group-item"> |
7 |
<h4 class="list-group-item-heading">List group item heading</h4> |
8 |
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
9 |
</div>
|
10 |
<div href="#" class="list-group-item"> |
11 |
<h4 class="list-group-item-heading">List group item heading</h4> |
12 |
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
13 |
</div>
|
14 |
</div>
|
In Jade konvertieren
In Straight Jade konvertiert, lauten die folgenden Arten von Listengruppen:
Typ: Liste
1 |
ul.list-group |
2 |
li.list-group-item.active Cras justo odio |
3 |
li.list-group-item Dapibus ac facilisis in |
4 |
li.list-group-item Morbi leo risus |
5 |
li.list-group-item Dapibus ac facilisis in |
6 |
li.list-group-item Morbi leo risus |
7 |
li.list-group-item Dapibus ac facilisis in |
Typ: Links
1 |
.list-group |
2 |
a.list-group-item.active( href="#" ) |
3 |
h4.list-group-item-heading List group item heading |
4 |
p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
5 |
a.list-group-item( href="#" ) |
6 |
h4.list-group-item-heading List group item heading |
7 |
p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
8 |
a.list-group-item( href="#" ) |
9 |
h4.list-group-item-heading List group item heading |
10 |
p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
Typ: Standard
1 |
.list-group |
2 |
.list-group-item( href="#" ) |
3 |
h4.list-group-item-heading List group item heading |
4 |
p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
5 |
.list-group-item( href="#" ) |
6 |
h4.list-group-item-heading List group item heading |
7 |
p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
8 |
.list-group-item( href="#" ) |
9 |
h4.list-group-item-heading List group item heading |
10 |
p.list-group-item-text Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
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:
1 |
//- List group mixins |
2 |
- var groupType |
3 |
|
4 |
mixin listGroup(type) |
5 |
- groupType = type |
6 |
case groupType |
7 |
when 'list' |
8 |
ul.list-group |
9 |
block
|
10 |
default
|
11 |
.list-group |
12 |
block
|
13 |
|
14 |
mixin listItem(arg1, arg2) |
15 |
case groupType |
16 |
when 'list' |
17 |
li( class=["list-group-item", arg1] ) |
18 |
block
|
19 |
when 'links' |
20 |
a( href=arg1, class=["list-group-item", arg2] ) |
21 |
block
|
22 |
default
|
23 |
.list-group-item( class=["list-group-item", arg1] ) |
24 |
block
|
25 |
|
26 |
mixin listHeading |
27 |
h4.list-group-item-heading |
28 |
block
|
29 |
|
30 |
mixin listText |
31 |
.list-group-item-text |
32 |
block
|
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:
1 |
+listGroup("list") |
2 |
+listItem("active") Cras justo odio |
3 |
+listItem Dapibus ac facilisis in |
4 |
+listItem Morbi leo risus |
5 |
+listItem Dapibus ac facilisis in |
6 |
+listItem Morbi leo risus |
7 |
+listItem Dapibus ac facilisis in |
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:
1 |
+listGroup("links") |
2 |
+listItem("link1.html", "active") |
3 |
+listHeading List group item heading |
4 |
+listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
5 |
+listItem("link2.html") |
6 |
+listHeading List group item heading |
7 |
+listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
8 |
+listItem("link3.html") |
9 |
+listHeading List group item heading |
10 |
+listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
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:
1 |
+listGroup |
2 |
+listItem |
3 |
+listHeading List group item heading |
4 |
+listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
5 |
+listItem |
6 |
+listHeading List group item heading |
7 |
+listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
8 |
+listItem |
9 |
+listHeading List group item heading |
10 |
+listText Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. |
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:
1 |
link(href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css", rel="stylesheet") |
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:
1 |
mixin bootswatch(theme) |
2 |
link(href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/" + theme + "/bootstrap.min.css", rel="stylesheet") |
Verwenden Sie Bootswatch Mixin
Ersetzen Sie in Ihrem Hauptdokument die verknüpfte Zeile im Bootswatch-Stylesheet durch Folgendes:
1 |
+bootswatch("flatly")
|
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:
1 |
+bootswatch("superhero") |
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
