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

Erstellen eines Instagram-basierten Portfolios mit Bootstrap

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

In diesem Tutorial gehe ich durch den Prozess der Erstellung des einfachen Instagram-basierten Portfolios, das in einem vorherigen Tutorial von Tomas Laurinavicius entworfen wurde.

Thomas hat großartige Arbeit geleistet und dabei das Design einfach, geräumig und funktional gehalten. Ich denke, es ist nur fair, dass wir dasselbe tun, wenn wir es bauen.  Um unser Leben zu vereinfachen, werden wir uns auf ein paar Tools und Bibliotheken verlassen, also schauen wir uns zuerst an.

Werkzeuge des Handels

Es gibt ein paar Dinge, die wir vor dem Start unseres Builds vorbereiten müssen. Sie sind:

Zunächst müssen Sie Sass auf Ihrem Computer zum Laufen bringen.  Der einfachste Weg, dies zu tun, besteht darin, eine der hervorragenden Apps zu verwenden, die für das Ansehen und Kompilieren verfügbar sind.  Ich benutze derzeit Koala, das plattformübergreifend und kostenlos ist. Daher ist es eine sehr gute Option, um schnell loszulegen.  Es gibt Alternativen wie Scout, Prepros und Compass App.  Sie bieten alle die gleiche Funktionalität, sodass Sie die Wahl haben!

Als nächstes ist Bootstrap.  Wir werden Bootstrap auf einer sehr einfachen Ebene verwenden, um einige der reagierenden Elemente der Seite zu behandeln.  Wir möchten ausdrücklich die Sass-Version herunterladen, damit wir sie in unser eigenes Stylesheet aufnehmen und die verfügbaren Variablen verwenden können.  Laden Sie die neueste Version herunter.

Fast da!  Wir müssen jetzt eine Kopie von Instafeed.js herunterladen, die alle Arbeiten übernimmt, die Fotos von Instagram beziehen.  Hier ist es erwähnenswert, dass Sie, um etwas von Instagram zu erhalten, dem Plugin eine Client-ID zur Verfügung stellen müssen, die generiert werden kann, indem Sie sich bei Instagram anmelden und das Formular im Entwicklerbereich ausfüllen.

Als letztes sollten wir die neueste Version von Modernizr herunterladen, damit wir bei Bedarf bestimmte Browserfunktionen ansprechen können. Daher haben wir auch das HTML5-Shim für ältere Browser.  Dies ist nicht unbedingt erforderlich, aber ich ziehe es gerne in Projekte ein, nur um sicher zu gehen.

Jetzt haben wir diese Ressourcen und können mit dem Aufbau beginnen!

Datei- und Ordnerstruktur

Wir müssen einige Dateien und Ordner für unser Projekt erstellen. Fahren Sie also fort und erstellen Sie die folgenden Dateien im Stammverzeichnis des Projekts.

  • css/
  • images/
  • js/
  • index.html

Dies ist unser grundlegender Startblock.  Finden Sie als Nächstes das Bootstrap-Archiv, das Sie zuvor heruntergeladen haben, und extrahieren Sie es an einem Ort, den Sie leicht finden können.  Im extrahierten Ordner sollte sich ein Ordner mit dem Namen Assets befinden.  Öffnen Sie diesen Ordner und Sie sehen etwas Ähnliches:

Kopieren Sie das fonts artenverzeichnis mit den anderen Ordnern, die wir gerade erstellt haben, in das Stammverzeichnis des Projekts.  Öffnen Sie Javascripts und kopieren Sie die Datei bootstrap.js in den Ordner js unseres Projekts.  Öffnen Sie schließlich das Stylesheets-Verzeichnis und kopieren Sie die Datei bootstrap.scss und den Ordner bootstrap in den Ordner css unseres Projekts.  Unsere Dateien und Ordner sollten jetzt so aussehen ...

Gute Arbeit!  Finden Sie nun die zuvor heruntergeladenen Dateien instafeed.min.js und Modernizr und kopieren Sie sie in den Ordner js.  Wir müssen nur noch ein paar Dinge einrichten, bevor wir mit der Erstellung des Layouts beginnen können.

Sass-Setup

Jetzt ist es an der Zeit, unser Projekt in der von Ihnen ausgewählten Sass-App einzurichten.  In Koala müssen Sie den Ordner in das App-Fenster ziehen.  Ich glaube, es ist ein ähnlicher Prozess für die anderen.  Das nächste, was ich beim Einrichten der Dinge immer tue, ist die Sass-Kompilierungsoptionen. Wenn verfügbar, aktivieren Sie das Kontrollkästchen Autoprefixer.  Diese praktische Ergänzung analysiert unsere Sass-Datei und fügt alle Herstellerpräfixe hinzu, die wir benötigen, sodass wir uns keine Gedanken darüber machen müssen, ob sie selbst erstellt werden.  Fühlen Sie sich frei, mit den Einstellungen Ihrer Sass-App herumzuspielen, um die besten Einstellungen für Sie zu erhalten.  Ich mag es, die Dinge einfach zu halten und werde normalerweise nur Autoprefix und einen Ausgabestil von Expanded (in der Produktion komprimiert) prüfen.

Dateien hinzufügen

Öffnen Sie das Projekt in einem beliebigen Editor, damit Sie einige Dateien hinzufügen können.

Fügen Sie zunächst unter dem Verzeichnis css eine Datei namens style.scss hinzu.  Fügen Sie dann im Ordner js eine Datei mit dem Namen app.js hinzu.

Stellen Sie sicher, dass Sie die verwendete Sass-App aktualisieren, damit die neuen Dateien abgerufen werden. Einige tun dies automatisch, aber es ist am besten, sie zu überprüfen und bei Bedarf manuell zu aktualisieren.

Ich denke, das ist die ganze Datei, die vorerst eingerichtet ist.  Wir können mit dem Aufbau des Layouts fortfahren!

Beginnen Sie mit dem Build

Öffnen Sie index.html und geben Sie den folgenden Basis-HTML-Code ein (oder kopieren Sie ihn / fügen Sie ihn ein):

Wir haben unseren ersten Code!  Lass es uns brechen.

Der Abschnitt <head> enthält das erforderliche Viewport-Tag, damit unsere Medienabfragen ordnungsgemäß funktionieren.  Als Nächstes geben wir der Seite einen Titel und fügen ein <link>-Tag für die verschiedenen Google-Schriftarten ein, die wir verwenden möchten.  Die Schriftarten basieren auf den im Design von Thomas verwendeten Schriftarten.  Die nächste Zeile mag seltsam erscheinen, da wir noch keine style.css-Datei erstellt haben. Das Generieren dieser Datei wird jedoch von unserem Sass-Compiler vorgenommen.  Schließlich schließen wir Modernizr ein.

Das <body>-Element enthält vier weitere Elemente, die die im Design dargestellten Bänder enthalten.  Ich habe einige beschreibende Klassen auf die <section>-Elemente angewendet, damit wir klar sehen können, wofür sie verwendet werden.

Verweisen auf JavaScript-Dateien

Fügen Sie das folgende Snippet unterhalb der footer-bottom hinzu:

Diese <script>-Tags verweisen auf unsere verschiedenen JavaScript-Bibliotheken, einschließlich jQuery von Googles CDN, das von Bootstrap benötigt wird.

Styles

Wir haben unsere Grundbausteine, also fahren wir mit dem Einrichten unserer style.scss-Datei fort.

Hier richten wir einige Variablen ein, die wir später in unserem Stylesheet verwenden können.  Zunächst sind einige Variablen in Bezug auf die Schriftart. Hier bringen wir die Google-Schriftarten ein, die wir zuvor eingefügt haben, und geben jeder einen Fallback, wenn die Schrift aus irgendeinem Grund nicht geladen wird oder funktioniert.

Wir haben dann einige Farbvariablen, die aus dem Design ausgewählt wurden.  Das ist einer der Gründe, warum ich Sass so sehr liebe, dass wir unsere Farben hier einstellen können und vergessen, die Hex-Werte überall zu merken oder zu kopieren.

Schließlich haben wir für unsere benutzerdefinierten Variablen ein paar einfache Margen und Füllungen.  Ich nehme diese gerne an, auch wenn ich sie nicht immer benutze.  Es ist schön, einen Basiswert zu haben, mit dem wir arbeiten können, und gibt uns die Möglichkeit, einheitliche Änderungen an Elementen vorzunehmen, die die Variablen verwenden.

Im nächsten Abschnitt fügen wir Bootstrap ein. Bevor wir dies tun, sollten wir jedoch die Bootstrap-Hauptschriftvariable $font-family-sans-serif auf die zuvor erstellte $main-font-Variable setzen.  Das bedeutet, dass Bootstrap beim Kompilieren unsere Hauptschriftart verwendet und nicht die eigene.

Die @import-Anweisung hier enthält nicht die .scss am Ende der Datei, da dies nicht erforderlich ist, wenn andere Sass-Dateien eingeschlossen werden.  Sass ist klug genug, um die richtige Datei zu finden und zu finden.  Speichern Sie die Datei, und hoffentlich erkennt Ihre Sass-App, dass Sie eine Sass-Datei gespeichert und style.css kompiliert haben.

Weitere Styles

Fügen wir einige Stile hinzu:

Hier verwenden wir den Universalselektor *, um alles als Position position: relative, so dass es keine Überraschungen gibt, wenn absolut positionierte Elemente verwendet werden.  Es ist auch praktisch, wenn Sie die Box-Sizing-Eigenschaft universell auf border-box setzen, so dass wir prozentuale Breiten verwenden können und uns keine Sorgen darüber machen müssen, ob das Element vom Layout beeinflusst wird.

Wir legen dann eine Standardschriftfarbe und -größe für unseren Körper fest und geben dem <header>-Element eine gewisse Höhe.

Das war es für unsere Sass-Datei.  Gehen Sie zurück in die Datei index.html, damit wir mit der Arbeit an der Kopfzeile beginnen können.

Den Header ausarbeiten

Die Kopfzeile für dieses Design ist unkompliziert im Design, wodurch der Aufbau einfacher wird.  Das Markup, mit dem wir arbeiten werden, lautet wie folgt:

Dies sollte zwischen unseren <header> -Tags liegen.  Sie werden feststellen, dass das Image-Tag zuerst auf ein nicht vorhandenes Image verweist.  Wir müssen dieses Bild aus der PSD herausschneiden.  In diesem Tutorial werde ich nicht näher auf die Details eingehen, aber wenn Sie Hilfe beim Prozess benötigen, lesen Sie diesen kurzen Tipp.

Der Rest des Header-Codes umfasst drei div-Elemente, die den Namen, die Titel und die sozialen Links enthalten.  Ich habe einige Klassen auf diese Elemente angewendet, die wir als Nächstes in unserer Sass-Datei verwenden werden.

Header-Stile

Beginnen wir mit dem Hinzufügen einiger Codezeilen in unserer Header-Deklaration.

Dies sollte innerhalb des Header-Abschnitts unserer Sass-Datei direkt unter den Deklarationen für den Header selbst verschachtelt sein.

Festes Bild

Sie werden hier sehen, dass wir die Position des img-Tags auf fixed festgelegt haben.  Dies bedeutet, dass das Bild in Position bleibt, wenn der Benutzer einen Bildlauf durchführt, wodurch ein Tiefengefühl entsteht.  Die Idee ist, dass der Inhalt in der Kopfzeile über dem Bild nach oben verschoben wird.  Bei der Einführung einer mobilen ersten Methode geben unsere Basisstile dem Bild eine festgelegte Breite und positionieren es in der Mitte, indem ein negativer linker Rand genau um die Hälfte seiner Breite angewendet wird.  Dies funktioniert, da der Transformationspunkt des Bilds in CSS die obere linke Ecke ist. Wenn Sie also eine left: 50% -Deklaration angeben, wird der linke Rand des Elements in der Mitte des Bildschirms platziert.  Der kleine negative Margin-Trick hilft uns, zentrierte Elemente mit absoluter oder fester Positionierung zu zentrieren.

Medienanfrage

Wir verwenden dann zum ersten Mal eine unserer Bildschirmgrößenvariablen.  Wir sagen hier: Bei großen Fenstergrößen füllt das Bild die Breite des Browsers und positioniert es wieder in der oberen linken Ecke.  Wichtig ist, dass wir den Rand neu einstellen müssen, damit das Bild nicht leicht nach links gezogen wird.

Werfen wir einen ersten Blick auf unsere Arbeit im Browser!

Lass uns weitermachen ...

Hier legen wir die Position und die Schriftarten der Namen- und titles elemente fest.  Wir müssen eine Medienabfrage für das title-Element verwenden, um es auf großen Bildschirmen ein wenig nach oben zu bringen.  Lassen Sie uns im Browser eine schnelle Aktualisierung durchführen.

Das sieht schon besser aus!  Lassen Sie uns diese Überschriften etwas mehr aufräumen.

Die Hauptsache, die hier zu beachten ist, ist der Stil für das span-Element.  Wir verwenden das span-Tag in unserem Code, um einen Teil der Hauptüberschrift zu umbrechen.  Dies ermöglicht es uns, es im CSS anzuvisieren und, wie hier, das Layout zu ändern.  Auf Mobilgeräten benötigen wir ein Block-Level-Element, das sich darunter stapeln lässt. Auf größeren Bildschirmen ist es jedoch gut, wenn es neben normalem Text läuft.  Das sollte jetzt viel besser aussehen ...

Ausgefallene Schrift

Ein schneller Stil, den wir hinzufügen sollten, ist der Name in der oberen linken Ecke.  Platzieren Sie den folgenden Code am Ende der Sass-Datei außerhalb des header blocks.

Wir wenden unsere fantastische Schrift auf jedes Element dieser Klasse an.  Dies ist so, dass wir dies jederzeit wiederverwenden können und es ist nicht auf ein bestimmtes Element beschränkt.

Soziale Symbole

Wir sollten uns den sozialen Symbolen zuwenden, die in diesem Fall Sprites für Anzeigen mit normaler Auflösung und Anzeigen mit hoher Auflösung (Retina) erfordern.

Gehen Sie zu Iconfinder und schnappen Sie sich jedes der Icons im Design.  Am besten wählen Sie eine größere Größe, als wir benötigen, damit keine Skalierbarkeit entsteht.  Ich entscheide mich immer für die 256px-Größe.

Erstellen Sie in Ihrer Grafikbearbeitungssoftware (z. B. Photoshop) eine neue Datei mit 152 x 52 Pixeln.  Ziehen Sie in jedes der Symbole und skalieren Sie jedes auf 48px um 48px.  Die Symbole werden schwarz angezeigt, aber wir müssen weiß sein, wenden Sie also einen Filter an.

Jetzt müssen wir sie positionieren.  Wir haben um jedes Pixel zwei Pixel Abstand, bewegen Sie also das erste an den linken Rand und verschieben Sie es um zwei Pixel.  Schieben Sie ihn ebenfalls um zwei Pixel vom oberen Rand weg.  Positionieren Sie die nächsten Symbole zwei Pixel vom oberen Rand und zwei Pixel voneinander entfernt.  Sie sollten damit enden:

Dies wird unsere Retina-Version sein.  Ignoriere den schwarzen Hintergrund hier. Ich habe dies hinzugefügt, damit wir tatsächlich die Symbole im Bild sehen können.

Speichern Sie dieses Bild mit der Photoshop-Funktion "Save for Web" (oder einer entsprechenden Anwendung in Ihrer Anwendung) unter dem Dateinamen social-sprite@2x.png.  Stellen Sie sicher, dass Sie es im Bilderordner unseres Projekts ablegen.  Jetzt müssen wir die Größe des Sprites ändern, um die Standardauflösung zu bestimmen.  Wir können dies in Photoshop direkt im Dialogfeld "Für Web speichern" durchführen.  Das Wichtigste ist, dass das Bild von 52px auf 76px verkleinert werden muss.  Speichern Sie diese Größe als social-sprite.png und legen Sie sie auch im Bilderordner ab.

Damit haben wir unsere Sprites, also schreiben wir etwas Code, um sie zu benutzen!  Platzieren Sie den folgenden Code wieder in den Header-Abschnitt, direkt hinter den Styles für h1 und h2.

Wow, das sieht kompliziert aus, obwohl es nicht wirklich ehrlich ist!  Zunächst positionieren wir das Element .social in der oberen rechten Ecke.

Als Nächstes wenden wir einige Stile auf die <a>-Tags an, um die Höhe und Breite jedes Tags festzulegen und den Text mithilfe eines großen text-indent aus der Ansicht zu entfernen.  Wir haben auch die opacity auf 0,8 gesetzt, die wir beim Schweben auf 1,0 ändern.  Dies ergibt einen einfachen Überschlageffekt.

Der nächste Abschnitt ist für unsere Sprites.  Wir müssen Geräten mit High-DPI-Bildschirmen mitteilen, wo sie das Asset mit höherer Auflösung finden, für das sich die Medienabfrage gut einsetzt.  Wir müssen sicherstellen, dass die background-size so festgelegt wird, dass das Bild auf die "richtige" Größe verkleinert wird.  Jetzt müssen wir die background-position für jedes Symbol festlegen.  Speichern, Speichern, Speichern und Aktualisieren!

Wie Sie sehen, arbeitet unser Fancy-Font-Stil an dem Namen und unsere sozialen Symbole sehen reizend aus.  Gut gemacht!

Im nächsten Abschnitt werden wir uns mit dem Hauptinhalt befassen, in dem wir Instafeed.js verwenden, um uns mit der API von Instagram zu verbinden und einige Bilder für unsere Seite durchzugehen.

Instagram Feed

Wir fangen damit an, unsere index.html-Seite mit einem Markup zu versehen. Öffnen Sie es und kopieren / fügen Sie das Folgende innerhalb des Tags <section class="instagram-wrap"> ein:

Sie werden hier sehen, dass ich jeden Abschnitt markiert habe, den wir für die Instagram-Fotos benötigen.  Der Code dafür wird nicht wirklich von der HTML-Seite geladen, sondern von JavaScript aus wird für Instafeed.js geschrieben.  Machen Sie sich jetzt keine Sorgen, wir versuchen nur, das Styling in dieser Phase richtig zu gestalten.

Bootstrap's Grid

Wenn Sie Bootstrap bereits zuvor verwendet haben, stellen Sie möglicherweise fest, dass wir zum ersten Mal einige Bootstrap-Klassen verwenden.  Wir verwenden die Klassen col-xs-xx, col-sm-xx, col-md-xx und col-lg-xx, um die Elemente an verschiedene Bildschirmgrößen anzupassen.  Kurz gesagt, das Bootstrap-Grid funktioniert durch Container, Zeilen und Spalten.  Jede Zeile muss sich in einem Container befinden und jede Spalte muss sich in einer Zeile befinden.  In jeder Zeile müssen auch insgesamt zwölf Spalten vorhanden sein.  Hier kommen die Klassen wie col-xs-12 ins Spiel.  Bei der Bildschirmgröße xs sollte dieses Element zwölf Spalten umfassen, die visuell auf dem Bildschirm als eine große Spalte erscheinen.

Wenn wir col-xs-12 col-sm-6 col-md-3 als Klassen auf ein Element setzen, wird dieses Element ebenfalls angewiesen, ein Layout mit voller Breite bei xs Bildschirmgröße, zwei Spalten bei sm Bildschirmgröße und vier zu haben Spalten bei md-Bildschirmgröße.  Es ist zunächst etwas verwirrend, aber wenn Sie sich mit der Benennung der Klassen und der Darstellung der einzelnen Klassen auf dem Bildschirm auseinandersetzen, wird es am Ende ziemlich intuitiv zu bedienen sein.

you can learn more about Bootstrap in the free Tuts course Bootstrap 3 for Web Design
Erfahren Sie mehr über Bootstrap im kostenlosen Tuts + -Kurs Bootstrap 3 für Webdesign.

Ein weiterer wichtiger Punkt ist die Verwendung von test_img.jpg, die noch nicht existiert.  Dies ist ein Platzhalterbild, das ich zur Verwendung im Markup erstellt habe.  Fühlen Sie sich frei, Ihre eigenen zu erstellen oder verwenden Sie sie in den bereitgestellten images dateien. 

Instagram-Styles

Nun haben wir das Markup, lassen Sie uns einige Stile hinzufügen:

Sie müssen diesen Code direkt nach dem gesamten Headerblock in der Sass-Hauptdatei einfügen.  Es wendet einige Hintergrundfarbeneigenschaften und Schriftstile an.  Speichern Sie die Sass-Datei und werfen Sie einen Blick in den Browser.

Diese kleine Menge Code hat einen wesentlichen Unterschied gemacht.  Wir müssen es jedoch noch besser machen, also fügen Sie in der Sass-Datei den folgenden Code hinzu:

Dies muss direkt nach der h3-Deklaration in .instagram-content erfolgen.  Lassen Sie uns das Stück für Stück schnell durchgehen.  Wir geben unserer .photo-Box  einen unteren Rand, so dass jeder einen schönen Abstand hat.  Wir müssen uns nicht um den linken und rechten Abstand kümmern, da dies von Bootstrap erledigt wird.  Wir stellen dann sicher, dass alle Bilder in unserem .image-Wrap  100% breit sind, sodass sie mit dem Browser skaliert werden können.  Das .likes -Element muss sich absolut in der unteren linken Ecke des Bildrahmens befinden und weist weißen Text auf halbtransparentem schwarzem Hintergrund auf.

Zuletzt die Stile für .description.  Die letzten vier Eigenschaften ermöglichen es dem Feld, überfließenden Text auf elegante Weise auszublenden, indem am Ende eine Ellipse bereitgestellt wird.  Das Gute daran ist, dass dies in CSS der Fall ist, wenn mehr oder weniger Inhalt der Boxen geändert wird, die Auslassungspunkte dennoch ihre Aufgabe erfüllen.  Die Browser-Unterstützung ist ebenfalls sehr umfassend.

Wieder Zeit, um die Datei zu speichern und den Browser zu aktualisieren:

Das sieht jetzt sehr schön aus!  Ich denke, der nächste Schritt sollte darin bestehen, HTML mithilfe der Instafeed.js durch die tatsächlichen Instagram-Feed-Bilder zu ersetzen.

Instafeed.js verwenden

Die Funktionsweise dieses Plugins macht es jedermann leicht, einen Instagram-Feed zu seiner Website hinzuzufügen.  Sie benötigen jedoch eine Client-ID von Instagram, um diese verwenden zu können.  Sie erhalten einen, indem Sie sich für ein Instagram-Konto anmelden und zum Entwicklerbereich gehen, um Ihre Client-ID einzurichten.

Nachdem Sie alles eingerichtet haben, müssen Sie der app.js-Datei den folgenden Code hinzufügen:

Lass mich runterlaufen, was hier los ist:

Erstens, einige jQuery.  Beginnen Sie mit einer Dokumentbereitschaftsfunktion (abgekürzte Version), sodass nichts läuft, bis wir bereit sind.

Zweitens deklarieren Sie eine Feedvariable und setzen Sie ihren Wert auf eine neue Instanz von Instafeed.

Next supply Mit einigen Optionen zur Sicherung der Rückgabe instafeed:

  • clientId - Die Client-ID, die Sie von Instagram erhalten haben.
  • target - Die ID des Elements auf der Seite, die Sie mit Bildern füllen möchten.
  • get - Der Modus "Instafeed" wird ausgeführt.  Wenn Sie "getagged" verwenden, weiß Instafeed, dass wir nach Tag suchen.
  • tagName - Der Name des Tags, nach dem gesucht werden soll.
  • Links - Gibt an, ob die Bilder in Links zu Instagram zurückgeführt werden sollen
  • limit - Begrenzt die Anzahl der zurückgegebenen Bilder.  Nützlich für Paging.
  • sortBy - So sortieren Sie die zurückgegebenen Bilder.  Für unser Projekt auf den most-recent Stand setzen.
  • resolution - Die Größe der zurückgegebenen Bilder.
  • template - Der HTML-Code zum Rendern der Bilder auf der Seite.  Wir werden das zuvor erstellte Markup verwenden.  Instafeed verwendet geschweifte Klammern, um anzugeben, wo die verschiedenen Eigenschaften des Bildes eingefügt werden.

Zum Schluss den Feed ausführen!

Wenn Sie die Datei speichern und den Browser aktualisieren, sollten Sie Folgendes sehen:

Wenn Sie Probleme haben, stellen Sie sicher, dass Ihre Client-ID korrekt ist und der Code in Ordnung ist.  Wenn Sie das verwenden, was in den Quelldateien enthalten ist, sollte alles in Ordnung sein.  Sie sollten acht Bilder sehen, die von Instagram zurückgegeben wurden, wobei die Likes und Beschreibungen angezeigt werden.

Aufräumen

Wir müssen jetzt unseren HTML-Code aufräumen, da wir noch die ursprüngliche Vorlage haben, die wir zuvor codiert haben.  Wechseln Sie zurück zu index.html und suchen Sie den folgenden Code ...

Entweder entfernen oder auskommentieren.  Ich habe mich entschieden, es zu kommentieren, damit ich später darauf zurückgreifen kann, wenn es nötig ist.

Die Fußzeile

Wieder in index.html fügen Sie den folgenden Code in das footer-Element ein.

Wie Sie sehen, verwenden wir hier mehr Bootstrap-Klassen.  Dieses Mal wird diesem Element mitgeteilt, dass es immer die vollen zwölf Spalten umfassen soll.

Fußzeilenstile

Fügen wir auch die Stile für diesen Abschnitt hinzu.

Ein weiterer komplizierter Code-Block!  Wieder ist es nicht zu gruselig.  Es werden nur einige Farben, Schriftgrößen und Abstände festgelegt.  Wir verwenden einige Medienabfragen, um Elemente für unterschiedliche Bildschirmgrößen in unterschiedliche Positionen zu bringen.  Vor allem das .contact-now-btn,  das zur Anpassung seiner Größe zwei Ebenen der Medienabfrage benötigt und auf großen Bildschirmen am kleinsten endet.  Wenn Sie die Dateien speichern und den Browser aktualisieren, sollten Sie so etwas sehen ...

Lassen Sie uns dies mit dem letzten Teil beenden, den ich gerne .footer-bottom nennen möchte.

Fußzeile unten

Fügen Sie diesem Abschnitt in HTML einen Text hinzu.  Öffnen Sie dann die Sass-Datei und fügen Sie die folgenden Stile hinzu:

Dies kann unter den <footer> platziert werden.  Wir verwenden letter-spacing, um die Buchstaben der Wörter ein wenig zu entfernen.  Dieser Bereich hat ziemlich viel Abstand nach links und rechts, der bei größeren Bildschirmen nach oben und unten wechselt.  Speichern Sie die Datei und aktualisieren Sie den Browser.

Wir sind fertig  Das Layout sieht auf dem Handy und auf dem Desktop fantastisch aus und wir haben es geschafft, mit Instafeed Fotos direkt von Instagram zu erhalten.  Gut gemacht!

Fazit

Was mir an diesem Layout gefällt, ist, dass Sie es an jede Art von Portfolioinhalt anpassen können.  Wir hätten mit Bootstrap und Sass etwas abenteuerlicher sein können, aber oft brauchen Sie das nicht, wenn die Grundlagen einwandfrei funktionieren. Was wir hier haben, ist eine hervorragende Basis für die Erweiterung und Anpassung.

Ich hoffe, Sie sind ohne Probleme den Schritten gefolgt und haben auf dem Weg etwas Neues gelernt.  Fühlen Sie sich frei, um Kommentare, Vorschläge oder Verbesserungen in den Kommentaren zu hinterlassen.  Es gibt zum Beispiel ein seltsames Problem bei der Art und Weise, wie Safari die Seite darstellt, wenn Sie zu schnell scrollen. Vorschläge, warum dies geschieht, sind sehr willkommen!  Danke fürs Lesen.

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.