Share
Bootstrap wurde für eine Vielzahl von Szenarien entwickelt, indem es eine Handvoll häufig verwendeter Webkomponenten zur Verfügung stellt. Es gibt Schaltflächen, eine responsive Navigationsleiste, Registerkarten, QuickInfos, Karussells usw. Trotz aller Spielsachen, die Bootstrap uns bietet, fehlt immer noch ein sehr beliebtes Muster: die Off-Canvas-Navigation.
Durch diesen Navigationsansatz wird das Menü vom sichtbaren Bereich (der Leinwand) entfernt, sodass mehr Platz für den Hauptinhalt geschaffen wird. Off-Canvas-Navigation wurde zuerst in nativen mobilen Apps populär gemacht, danach kam sie zum responsiven Web (zum Teil dank des Artikels von Luke Wroblewski). Normalerweise verwendet es jQuery, um den Status der Navigation umzuschalten.
Apropos: Bootstrap ist so beliebt und die Community-Unterstützung ist so großartig. Entwickler haben Plugins oder Erweiterungen erstellt, die Komponenten enthalten, die in der nicht verfügbar sind offiziell Bootstrap. Und dazu gehört auch die Implementierung einer Off-Canvas-Navigation.
In diesem Tutorial zeige ich Ihnen, wie Sie Bootstrap mit einer Erweiterung namens Jasny Bootstrap von Arnold Daniels eine Off-Canvas-Navigation hinzufügen. Meine zwei Gründe für diese Option sind:
In diesem Tutorial werde ich Sie durch einen Workflow führen, der die Wartung der Website mit Bower erleichtert. Stellen Sie also sicher, dass Sie Bower bereits in Ihrem System installiert haben. Wenn Sie Bower lieber nicht verwenden möchten, ist das in Ordnung, aber um Ihnen den Einstieg zu erleichtern, haben wir auch eine Reihe von Anfänger-Tutorials zu Bower veröffentlicht.
Nun, lass uns anfangen.
Beginnen wir mit dem Projekt, indem wir die Arbeitsverzeichnisse erstellen, in denen wir die erforderlichen Teile platzieren.
Arbeitsverzeichnis | - Vermögenswerte | | css | img | '- js' - sources | - js '- weniger
Wir werden die verwenden Vermögenswerte Ordner, um die Website-Ressourcen wie Bilder, Stylesheets, JavaScript-Dateien und ähnliche Dateien zu speichern. Das Quellen In diesem Ordner legen wir die nicht kompiliert Quellcode von LESS und JavaScript. Danach definieren wir die Projektspezifikation - Name, Version, Abhängigkeiten und andere - mit Bower.
Lauf Laube init Befehl im Arbeitsverzeichnis und füllen Sie alle Eingabeaufforderungen aus.
Ein Beispiel für die Befehlseingaben "bower init" Sie müssen den Eingaben nicht genau wie oben gezeigt folgen. Passen Sie die Eingänge an Ihre eigenen Anforderungen an. Sobald der Vorgang abgeschlossen ist, wird ein neuer Dateiname angezeigt bower.json sollte vorhanden sein und die Projektspezifikation enthalten, die wir gerade ausgefüllt haben.
Dieses Projekt erfordert zwei Rahmenbedingungen. nämlich Bootstrap und Jasny Bootstrap. Bevor wir sie installieren, geben wir den Namen des Verzeichnisses an, in dem Bower die Pakete installieren muss. Erstellen Sie dazu eine neue Datei in der Stammebene des Arbeitsverzeichnisses mit dem Namen .bowerrc und geben Sie die folgenden Zeilen ein, um den Ordner zu benennen.
"verzeichnis": "komponenten"
Fügen Sie dann diese Zeilen in ein bower.json, Dadurch wird Bower mitgeteilt, dass die Projektabhängigkeiten Bootstrap und Jasny Bootstrap Version 3.1.1 oder neuer sind.
"devDependencies": "bootstrap": "> = 3.1.1", "jasny-bootstrap": "> = 3.1.1"
Führen Sie in Terminal oder Eingabeaufforderung aus Bower installieren Befehl, um die Abhängigkeiten zu übernehmen, die swe alle auf einmal festgelegt hat.
Wie in angegeben .bowerrc, Die Projektabhängigkeiten sollten sich jetzt in einem neu erstellten Ordner mit dem Namen befinden Komponenten.
Wenn alle Abhängigkeiten vorbereitet sind, können wir mit dem Projekt beginnen! Wir werden die Dinge beginnen, indem wir die Stylesheets organisieren. Es gibt vier LESS-Stylesheets, die wir erstellen müssen, und zwar:
Accentsconagua
Variablen - Wie der Name schon sagt, enthält dieses Stylesheet die in Bootstrap verwendeten Variablen. Wir machen diese Kopie für den Fall, dass wir die Variablen anpassen möchten, ohne die Originaldateien zu beeinflussen (kopieren Sie die Bootstrap-Variablen aus dieser Gist)..variables-jasny.less - In ähnlicher Weise enthält dieses Stylesheet die Variablen, die in der Erweiterung Jasny Bootstrap verwendet werden (kopieren Sie die Variablen hier)..ohne App - Dieses Stylesheet enthält Verweise auf die Bootstrap- und Jasny Bootstrap-Stylesheets, die wir zum Erstellen der Website benötigen (Sie können den Inhalt hier kopieren).style.less - Wir werden unsere eigenen Styles in dieses Stylesheet schreiben.Erstellen und zusammenstellen wie folgt:
… '- sources | - js' - weniger | - app.less | - style.less | - variables-jasny.less '- variables.less
Als nächstes müssen Sie diese Stylesheets erstellen. Dazu verwenden wir Koala mit folgender Konfiguration:
ohne App ebenso wie style.less Ausgabeziel an Assets / CSS / Verzeichnis..Karte Zum leichteren Debuggen des Stylesheets. Wenn Sie zum ersten Mal von Source Map gehört haben, lesen Sie unser Tutorial zu Tuts + Code, Source Map 101.
Sobald die Konfiguration festgelegt ist, kompilieren Sie den WENIGER in CSS.
Hinweis: Denken Sie daran, dass Sie nicht verpflichtet sind, Koala zu verwenden, wenn Sie Ihre LESS-Dateien auf andere Weise kompilieren möchten.
Erstellen Sie eine neue HTML-Datei mit dem Namen index.html. Abgesehen von der grundlegenden HTML5-Struktur ist die index.html Die Datei enthält außerdem das Meta-Viewport-Tag, das Meta-Description-Tag, den Titel und die Links zu den Stylesheets.
Bootstrap-Off-Canvas-Navigation
Nun fügen wir die Off-Canvas-Navigation hinzu. Jasny Bootstrap verwendet einen ähnlichen Ansatz wie Bootstrap, wenn es um das Markup der Komponenten geht. So beginnen wir mit der Off-Canvas-Navigationsstruktur:
Es umfasst eine Handvoll Klassen. Drei Klassen nämlich Navmenu, navmenu-invers, navmenu-fixed-right Definiere das Element als Navmenu. Das Navmenu ist eine der Jasny Bootstrap-Komponenten, die das zugewiesene Element als vertikale Navigation definiert. Das offcanvas ist die Klasse, die das Element aus dem Ansichtsfenster setzt. Zusätzlich haben wir eine neue Klasse hinzugefügt, Navmenu-Site, So können wir die Navigation mit unseren eigenen Stilen anpassen.
Die Menüpunkte innerhalb der Off-Canvas-Navigation können mit der Schaltfläche angeordnet werden nav navmenu-nav Klasse, wie es so ist.
Sie können gerne originale Bootstrap-Komponenten in Verbindung mit diesem Markup hinzufügen, z. B. Dropdowns und Schaltflächen.
Das HTML-Markup für die Navigation, das wir in diesem Tutorial hinzufügen, ist ziemlich lang. Der Einfachheit halber kann also das vollständige Markup durch erhalten werden dieser Gist..
Das folgende Bild zeigt unseren Plan zur Gestaltung des Webseiteninhalts:
Der Website-Blueprint, der das Layout zeigt. Wie oben gezeigt, umfasst der Inhalt der Website ein Logo, einen Umschaltknopf mit dem Symbol "Hamburger", um die Navigation ein- und auszublenden, und einige Zeilen mit Stichworten mit einem großen Button - dem sogenannten Call-to-Action-Button
Das HTML-Markup des Inhalts ist ähnlich lang, um in diesem Lernprogramm eingefügt zu werden. Kopieren Sie stattdessen das Ganze aus dieser Gist.
Viele der hier gezeigten Stile sind lediglich dekorativ und drehen sich um Farben, Größen und Positionen. Dieser dekorative Stil wird erreicht, indem die vordefinierten Bootstrap-Stile angepasst und eigene Stile geschrieben werden. Anstatt durch die Schritte zu gehen, die möglicherweise bereits offensichtlich sind, möchte ich einige wichtige Details hervorheben, die am wichtigsten sind.
Bevor Sie eine einzige Zeile schreiben, importieren Sie die ohne App Stylesheet in die style.less. Dies ermöglicht uns die Wiederverwendung der Variablen und der darin enthaltenen Mixins.
@import (Referenz) 'app.less';
Zweitens erstellen wir eine LESS-Variable, um den Bildpfad zu definieren. Wir nennen die Variable @ path-img.
@ path-img: '… /… / assets / img /';
Wann immer wir uns auf ein Bild innerhalb des Stylesheets beziehen müssen, fügen wir diese Variable ein. Dieses Beispiel zeigt, wie wir es verwenden, um auf das Logo zu zeigen.
.Impressum-Marke Margin-Top: 10px; Rand unten: 10px; Schwimmer: links; Text ausrichten: links; Rand oben: -15px; a .text-hide (); Anzeige: Inline-Block; Hintergrundbild: URL ('@ path-img logo.png'); Hintergrundwiederholung: keine Wiederholung; Hintergrundgröße: 100% 100%; Breite: 100px; Höhe: 33px; Zum Schluss möchten wir den Inhalt, die Schlagworte und den Button vertikal zentrieren. CSS bietet uns zu diesem Zeitpunkt noch keine bequeme Möglichkeit, den Inhalt mithilfe einer einzigen Eigenschaftsdeklaration vertikal auszurichten. Folglich gibt es mehrere Möglichkeiten, dies zu erreichen, und ehrlich gesagt ist keiner besser als jeder andere.
In diesem Fall werden wir den Inhalt mit der Anzeigemethode CSS-Tabelle ausrichten. Wenn Sie sich das Webseiten-Markup ansehen, werden Sie feststellen, dass wir den Webseiteninhalt mit zwei Seiten umschließen Um den Inhalt vertikal auszurichten, setzen wir das Ausführliche Informationen zu den Stilregeln können abgerufen werden in diesem Gist. Nachdem wir die Stile hinzugefügt haben, sollte die Website jetzt wie in der Abbildung dargestellt aussehen: Die Website ist jedoch noch nicht voll funktionsfähig. Klicken Sie auf das Symbol "Hamburger". Keine Navigation außerhalb der Leinwand. Diese Funktionalität stammt aus der JavaScript-Bibliothek. Daher müssen wir sie kompilieren und der Website hinzufügen. Es gibt vier JavaScript-Bibliotheken, die wir benötigen, um die Off-Canvas-Navigation zu verwenden jQuery, Übergang.js, dropdown.js um das Dropdown-Menü zu aktivieren, das wir in der Navigation hinzugefügt haben, und zuletzt das offcanvas.js. Um sie zusammenzustellen, erstellen Sie eine neue JavaScript-Datei im source / js Verzeichnis. In diesem Fall nennen wir es app.js. Importieren Sie die JavaScript-Bibliotheken mit der Stellen Sie die Ausgabe auf / assets / js Verzeichnis und drücken Sie die Kompilieren Taste. Vergessen Sie nicht, die kompilierte Datei auf der Webseite zu verlinken. Jetzt sollten Sie in der Lage sein, die Off-Canvas-Navigation ein- und auszublenden. Darüber hinaus können Sie unten auf der Seite das folgende JavaScript hinzufügen, wodurch der Übergangseffekt des Dropdown-Menüs aktiviert wird. In diesem Lernprogramm haben wir eine funktionierende Off-Canvas-Navigation für Bootstrap mit einer Erweiterung namens Jasny Bootstrap enthalten. Wenn Sie Bower in diesem Lernprogramm verwendet haben, können Sie mit diesen beiden Bibliotheken auf dem neuesten Stand bleiben. Nach einer Weile werden diese beiden Bibliotheken möglicherweise aktualisiert. Mit Bower können Sie das ausführen Falls eine neue Version verfügbar ist, führen Sie einfach die Ich hoffe, Sie haben aus diesem Tutorial ein paar Methoden und Tricks gelernt. Wenn Sie Fragen haben, können Sie diese gerne in den Kommentaren hinterlassen.Site-Wrapper und Site-Wrapper-Inneres Klasse, wie es so ist. Anzeige Eigentum von Site-Wrapper zu Tabelle, und machen Sie es über das gesamte Ansichtsfenster, indem Sie das angeben Breite und das Höhe zu 100%. Dann legen wir die innere Hülle fest Anzeige Eigentum an Tabellenzelle. Dies erlaubt uns jetzt, sich zu bewerben vertikal ausrichten Eigenschaft, um den Inhalt vertikal auszurichten..Site-Wrapper Anzeige: Tabelle; Breite: 100%; Höhe: 100%; Mindesthöhe: 100%; .site-wrapper-inner display: table-cell; vertikal ausrichten: Mitte;
6. Machen Sie die Webseite lebendig
… '- Quellen | - js | '- app.js' - weniger
@ koala-prepend, wie so.// @ koala-prepend "… /… /components/jquery/dist/jquery.js" // @ koala-prepend "… /… /components/bootstrap/js/transition.js" // @ koala-prepend "… /… /Components/jasny-bootstrap/js/offcanvas.js "
Übergang
Fazit
Laugenliste Befehl, um alle installierten Bower-Pakete aufzulisten und zu überprüfen, ob jeweils eine neue Version verfügbar ist.
Bower Update oder der Bower installieren Befehl zum Aktualisieren des Pakets. So einfach ist das.Weitere Referenzen
