Accentsconagua
Dies ist der Hauptinhalt gut
Dies ist ein kurzer Abschnitt, der hervorhebt, wohin der allgemeine Inhalt gehen soll.
Share
Webdesign ist ein sich entwickelnder Beruf. Ein Auge für Farbe, Typografie und Layout ist zwar immer wichtig, aber diese Fähigkeiten werden durch das Bedürfnis nach Verständnis für die Motivation der Benutzer übertroffen. Es reicht nicht aus, eine Website zu erstellen und auf den Datenverkehr zu warten - Websites müssen Benutzern dabei helfen, ihre Ziele mit einem Minimum an kognitiver Reibung zu erreichen. Bootstrap kann Web-Profis dabei unterstützen, diese Ziele zu definieren und auch ein Killer-Erlebnis zu schaffen.
Wir machen keine Seiten, wir machen Filme
Ich sage gerne, dass wir keine Seiten machen, sondern Filme machen. Die Benutzer erwarten, dass die Websites schnell geladen werden, dass sie einnehmende Inhalte und intelligente Interaktivität bieten. So wie Filme auf schnelle Schnitte, Beleuchtung und Stimmung angewiesen sind, um Nutzer anzulocken, sind Websites auf Übergänge, Interaktivität und Timing angewiesen. Diese Details gehen oft während der Entwurfsphase verloren - oder schlimmer noch - werden nie berücksichtigt. Während ein Übergang, der 0,5 Sekunden dauert, wenn er 0,25 Sekunden dauern sollte, die Anwendung normalerweise nicht versinkt, ist es diese Detailstufe, die das Gute vom Großen unterscheidet.
Ich werde Ihnen zeigen, wie Bootstrap statische Wireframes ersetzen und diese Details früher und mit weniger Aufwand in den Vordergrund stellen kann.
Der erste Schritt ist das Herunterladen der neuesten stabilen Bootstrap- und jQuery-Builds.
Obwohl jQuery von mehreren CDNs gehostet wird, ziehe ich es vor, alle Dateien lokal einzuschließen, damit ich mit oder ohne Webzugriff arbeiten kann. Richten Sie eine Verzeichnisstruktur wie in der folgenden Abbildung ein und kopieren Sie die nicht minimierten Bootstrap-CSS-, Bootstrap Responsive CSS- und Javascript-Dateien. Passen Sie Namen und Speicherorte nach Bedarf an. Wenn Sie diese Struktur verwenden, können Sie im nächsten Schritt auch meine HTML-Vorlage nutzen.
Jetzt wäre ein guter Zeitpunkt, um ein drittes Stylesheet zu erstellen, das ich anrufen werde user.css. Diese Datei wird verwendet, um Bootstrap-Stile nach Bedarf zu überschreiben.
Dies ist die einzige weitere Einrichtung, die zum Erstellen eines interaktiven Drahtgitters erforderlich ist. Erstellen Sie eine Datei in Ihrem Projektverzeichnis root und benennen Sie sie index.html. Kopieren Sie diesen Code, und speichern Sie, nachdem Sie die Datei erstellt haben.
Interaktive Bootstrap-Wireframes Ihr Layout wird hier gehen.
Öffnen Sie einen Webbrowser und ziehen Sie die gespeicherte index.html-Datei hinein. Wenn alle Includes ordnungsgemäß geladen sind, sollten Sie etwas Ähnliches wie in der Abbildung unten sehen. Wenn das Benachrichtigungsfeld nicht angezeigt wird, öffnen Sie die Konsole oder den Web-Inspector und sehen Sie, ob das Laden einer Datei fehlgeschlagen ist. Entfernen Sie nach der Fehlerbehebung die Warnzeile in der $ (Dokument) .ready Funktion am unteren Rand der Seite und machen Sie sich bereit, Bootstrap Wireframes zu erstellen.
Wenn alle erforderlichen Dateien vorhanden sind, können wir in den Hauptinhaltsblöcken mit dem Schruppen beginnen. Die meisten Websites (Apps) enthalten eine Kopfzeile, eine Hauptnavigation, einen Hauptinhalt, eine Seitenleiste und eine Fußzeile. Ich halte das Layout absichtlich einfach, um die Leistungsfähigkeit des Bootstrap-Netzsystems schnell zu veranschaulichen.
Der einzige strukturelle Markup auf der Seite ist bisher unser Div mit der Klasse "Container"..
Hinweis: Dieses div ist ein erforderlicher Block für Bootstrap. Wir werden unsere gesamte Drahtgitteranwendung darin erstellen.
Bootstrap erfordert auch den neuen HTML-Doctype und generiert seine Stilregeln mit Klassen anstelle von Tag-Namen. Diese Entscheidungen bedeuten, dass wir einige neue HTML5-Elemente verwenden können: Header, Navigation, Abschnitt, Artikel, Seite und Fußzeile. Wenn Sie Ihr Layout in Internet Explorer testen möchten, müssen Sie unbedingt Modernizr oder das HTML5-Shim herunterladen und einbinden. Moderne Versionen von Firefox, Chrome und Safari unterstützen den HTML5-Standard nativ.
Bootstrap basiert auf einem 12-Säulen-Raster. Es verwendet zwei Klassen, Reihe und Spanne Container auf Blockebene erstellen. Durch Anwenden der Zeilenklasse auf einen Container wie ein Div oder Header wird die gesamte Breite von 940 Pixeln automatisch gedehnt. Durch Hinzufügen von Containern mit KlassenspanneN (N (Platzhalter für die Anzahl der Spalten), können Sie auf einfache Weise Inhaltsmulden, Seitenleisten und andere Layoutblöcke erstellen, ohne Floats oder andere Macken verwalten zu müssen.
Um schnell einsatzbereit zu sein, werde ich eine einfache Kopfzeile, eine Navigationsleiste, einen Hauptbrunnen, eine Fußzeile und eine Fußzeile erstellen. Ersetzen Sie das "Ihr Layout geht hier" durch den folgenden Code.
Meine tolle App
Dies ist der Hauptinhalt gut
Dies ist ein kurzer Abschnitt, der hervorhebt, wohin der allgemeine Inhalt gehen soll.
Ich habe auch ein paar Grundregeln hinzugefügt user.css, um die Inhaltsblöcke leichter zu identifizieren. Wenn alles gut gegangen ist, sollten Sie einige graue Blöcke mit schwarzem beschreibendem Text sehen.
/ * Grundlegende Stilregel für Gliederungs- und Leerzeichenelemente auf Blockebene * / [class * = "span"] background: #eee; Rand unten: 10px;
Feste und flüssige Layouts gibt es schon lange. Responsive Layouts sind relativ neu und kombinieren das Beste aus beiden. Designer erhalten so Werkzeuge, mit denen sie ihre Designs für mehrere Gerätegrößen (Smartphones, Tablets, Schmal- und Breitbilddisplays) optimieren können, ohne für jedes eine eigene Codebase einrichten zu müssen. Verändern Sie die Größe Ihres Browser-Fensters, um das responsive Stylesheet von Bootstrap in Aktion zu sehen. Machen Sie sich ein Bild von der beeindruckenden Fähigkeit, einmalig zu schreiben und Wireframes in einer Reihe von Umgebungen zu testen.
Browser verwenden CSS-Haltepunkte, um zu entscheiden, wie eine Seite basierend auf den Messungen der minimalen und maximalen Breite gerendert wird. Haltepunkte in Bezug auf die Browserbreite beginnen immer mit @media (Breite Argument) und sind sehr leicht zu lesen. Sie können auch ein zweites Argument in einem anderen Satz von Klammern enthalten, wodurch eine große Flexibilität für mehrere Geräte ermöglicht wird.
Im folgenden Codebeispiel habe ich mehrere Regeln erstellt, die Hintergrundfarben für vier allgemeine auf Bootstrap reagierende Haltepunkte definieren, die leicht geändert wurden, um einen fließenden Übergang von einer Farbe zur nächsten zu zeigen.
/ * Grundfarben für responsive Haltepunkte * / / * Max. Breite 480px im Querformat und abwärts * / @media (Max. Breite: 480px) .container background: # f1ea81; .container: after content: "Max. Breite 480px im Querformat und nach unten"; / * Min-width 481px und max-width 767px Querformattelefon zum Hochformat-Tablet * / @media (min-width: 481px) und (max-width: 767px) .container background: # a7f7e5; .container: after content: "Min-width 481px und max-width 767px Querformattelefon zum Hochformattablett"; / * Min-width 768px und max-width 979px Hochformat-Tablett für * / @media (min-width: 768px) und (max-width: 979px) .container background: # c4deff; .container: after content: "Min-width 768px und max-width 979px, Hochformattablett im Querformat"; / * Widescreen-Anzeige mit einer Breite von 980px * / @media (min-width: 980px) und (max-width: 1199px) .container background: # fde3ff; .container: after content: "Min-Breite 980px, Max-Breite 1199px, Desktop-Format"; / * Breitbildschirm mit einer Breite von 1200px * / @media (min-width: 1200px) .container background: # ffc4c4; .container: after content: "Min. Breite 1200px, Breitbildformat";
Wir haben ein vollständig ansprechendes Layout entwickelt, aber es fehlt immer noch das Gute. Der Rest dieses Tutorials zeigt Ihnen, wie Sie visuelles Interesse durch Inhalte und Interaktivität hinzufügen können.
Nachdem das Gerüst installiert ist, können wir mit dem Hinzufügen von Inhalten beginnen. Ich halte diese Ansichten absichtlich für generisch-graue Boxen mit minimalen Stilen, die Beta-Benutzer dazu anregen, sich auf die Interaktion zu konzentrieren und nicht zu sehr auf den visuellen Stil zu verzichten.
Die Heldeneinheit wurde entwickelt, um einen Handlungsaufruf von vorne und von der Mitte aus zu erstellen. Code-Downloads, neue Anwendungen oder aktuelle Nachrichten sind gute Kandidaten. Für unsere Zwecke werde ich damit ein großes Software-Upgrade ankündigen. Ersetzen Sie das vorhandene h2 und p Tags im Hauptinhalt gut mit dem Code unten und aktualisieren Sie Ihren Browser, um den Helden in Aktion zu sehen.
Version 2.0 ist hier!
Alle neuen Funktionen, viele Verbesserungen
Ein perfekteres Paket für Sie’wahrscheinlich nicht zu finden
Unser Team war im vergangenen Jahr sehr beschäftigt und hat das Innenleben unserer Anwendung komplett überarbeitet. Schnelleres Laden von Seiten, bessere Suche und mobile Integration.
Jetzt downloaden
Die Heldeneinheit ist ein guter Anfang, aber die Leute wollen sehen, wohin ihre Zeit und ihr Geld gehen werden. Eine Bildergalerie ist ein starkes Follow-up und ist ein Kinderspiel. Bilder werden mit dem gleichen Layout versehen spanN Raster, das Layoutblöcke definiert und leicht um Überschriften, Tags, Beschriftungen oder Mikrodaten erweitert werden kann. Fürs Erste werden wir mit Placehold.it drei graue Kästchen unter unserer Heldeneinheit erzeugen.
Ich glaube fest an das semantische Markup. Wir werden also HTML5 verwenden Zahl und figcaption Tags für mehr Kontext. Selbst wenn keiner Ihrer Benutzer mit einem Screenreader oder einem anderen Hilfsgerät browst, ist die beschreibende Markierung die bewährte Methode für die UX- und Front-End-Entwicklung.
Fügen Sie eine ungeordnete Liste und ein paar Bilder in den Hauptinhalt ein, und zwar unter Ihrem Heldenelement:
Dies ist eine kurze Überschrift.
Dies ist eine kurze Überschrift.
Dies ist eine kurze Überschrift.
Eine andere Browseraktualisierung sollte in der Breitbildansicht ein ähnliches Layout ergeben.
Die Heldeneinheit und die Bilder fügen viel visuelles Interesse hinzu, heben jedoch unsere nächste Herausforderung hervor: Die Bullet-Point-Links stehen für ein richtiges Navigationselement.
Bootstrap verfügt über mehrere integrierte Navigationsstile, sodass das Experimentieren angeregt wird. Ich werde hier die Registerkarten-Navigation hervorheben. Unsere erste Aufgabe besteht darin, die grundlegende Navigationsliste zu ersetzen:
Als nächstes entfernen wir den grauen Hintergrund von unserem Header und nav Elemente. Fügen Sie die folgenden vier Zeilen am Ende Ihres hinzu user.css Datei.
header [class * = "span"], nav [class * = "span"] background: #fff;
Wir müssen auch den Hauptinhalt gut aktualisieren. Ich habe eine Klasse hinzugefügt Tab-Inhalt zum Sektion Element und wickelte den Helden und die Bilder in ein div mit class = "Tab-Bereich aktiv" und id = "tab1". Ich habe drei weitere hinzugefügt div Elemente unten, wobei die IDs den Navigationslink-Tags entsprechen. Diese drei Blöcke sind Stubs, die später ausgefüllt werden müssen, sind aber für Tests hilfreich. Aktualisieren Sie die Sektion Markup und aktualisieren Sie den Browser. Wenn alles klappt, sollten Sie in der Lage sein, durch die Registerkarten zu wechseln und den Inhalt der Stubben anzuzeigen.
Tabs sind cool, aber sie sind auch nur ein Anfang. Obwohl das Internet schnell segmentiert und anwendungsähnlich wird, wird es immer noch von Verbindungen von einer Ressource zu einer anderen angetrieben. Links werden verwendet, um Seiten miteinander zu verknüpfen, zusätzlichen Kontext bereitzustellen und manchmal um sekundäre Funktionen unterzubringen. Tooltips und Popovers sind gute Beispiele für sekundäre Funktionen. Sie können leicht mit benutzerdefinierten Datenattributen implementiert werden.
Was sind Datenattribute? Per John Resig, der im Jahr 2008 klar über diese Geräte schrieb:
Die Spezifikation für benutzerdefinierte Datenattribute besagt einfach, dass jedes Attribut, das mit "data-" beginnt, als Speicherbereich für private Daten (privat) in dem Sinne behandelt wird, dass der Endbenutzer sie nicht sehen kann. Dies hat keine Auswirkungen auf das Layout oder Präsentation).
Dies bedeutet, dass wir unseren Link-Tags benutzerdefinierte Daten hinzufügen können, die von Bootstrap entsprechend behandelt werden.
Angenommen, unsere Bildergalerie besteht aus technischen Informationen. Die Beschreibungen können Terminologie enthalten, die für den Durchschnittsbenutzer unklar ist. Aktivieren Sie die QuickInfos, indem Sie das HTML der Bildergalerie ersetzen, mit der ungeordneten Liste beginnen und eine jQuery hinzufügen $ (Dokument) .ready Funktion und Bootstraps Tooltip-Funktion am unteren Rand der Seite.
Dies ist eine kurze Überschrift. Es enthält einige technische Sprachen wie beispielsweise domänenspezifische Begriffe wie HTML
Dies ist eine kurze Überschrift. Es enthält einige technische Sprachen wie domänenspezifische Begriffe wie CSS
Dies ist eine kurze Überschrift. Es enthält einige technische Sprachen wie domänenspezifische Begriffe wie JS
// Direkt über dem schließenden Body-Tag hinzufügen // Die Tooltips aktivieren
Wenn HTML und Javascript vorhanden sind, aktualisieren Sie den Browser und rollen Sie über die Galerie-Links, um Ihre QuickInfos anzuzeigen.
Jetzt fügen wir unserer Bildergalerie (zumindest drahtgebunden) eine Popover-Freigabe hinzu. Popovers werden aktiviert, indem Sie Datenattribute in Ihr Markup und ein weiteres JavaScript-Snippet einfügen.
Fügen wir zunächst zu jeder Bildbeschriftung eine Share-Schaltfläche hinzu. Fügen Sie den Codeblock jeweils unter dem abschließenden Absatz-Tag hinzu figcaption.
Tumblr
Flickr
"data-title =" Dieses Bild freigeben "> Freigeben
Es mag seltsam erscheinen, jedes Element in einer eigenen Zeile zu platzieren, aber ich habe festgestellt, dass Bootstrap eine ziemlich wählerische Auswahl an wohlgeformten Markups hat und es einfacher ist, Fehler Zeile für Zeile zu erkennen. Wir müssen ein paar Zeilen JavaScript schreiben und die Popovers werden fertig sein.
// Standard-Links-Aktionen und Seitenspringen verhindern var links = $ ('a'); links.on ('click', function (e) e.preventDefault ();); // Popovers aktivieren var popovers = $ ('a.popover-link'); popovers.popover (); Diesmal haben wir eine allgemeine Linkfunktion hinzugefügt, um zu verhindern, dass unser Bildschirm springt, wenn Benutzer auf die Schaltfläche "Teilen" klicken. Jede Aktion auf einer Webseite registriert ein Ereignis, das wir als das Funktionsargument 'e' einfangen, ohne dabei zu weit ins Detail zu gehen. Wenn Sie dieses Ereignis abfangen und durch unser benutzerdefiniertes JavaScript ersetzen, bleibt die Seite dort, wo sie sollte, und unser Popover erscheint erwartungsgemäß.
Wütend. Nach all dem werden modale Fenster ein Cakewalk sein. Bootstrap macht modale Fenster verfügbar, indem Sie einen HTML-Block oben in Ihrem Container und eine Schaltfläche oder einen Link mit einer Href hinzufügen, die der modalen Fenster-ID entspricht. Zuerst das modale HTML.
Die einzige andere Sache ist, unseren Auslöser hinzuzufügen. Da dies eine Anwendung ist, können wir davon ausgehen, dass es eine Anmeldesequenz gibt. Ich habe das geändert Header um den Bannerbereich zu verkürzen, und fügen Sie die Login-Schaltfläche neben dem Suchfeld hinzu. Ändern Sie den folgenden HTML-Code und fügen Sie das CSS am Ende Ihres HTML-Codes hinzu user.css Datei.
Meine tolle App
Anmeldung
/ * Suchfeld * / Kopfzeileneingabe Margin-Top: 20px; Breite: 70%; Schwimmer: links; / * Anmeldeschaltfläche * / header a float: right; Marge: 20px 0 0 20px;
Aktualisieren Sie und klicken Sie auf die Schaltfläche Anmelden. Sie sollten mit einer schnellen Animation belohnt werden und das modale Fenster, das Front und Center anzeigt.
Dieses interaktive Drahtgitter kommt gut voran. Wir haben eine funktionierende Navigation, viele Blöcke zum Hinzufügen von Inhalten, Interaktivität und ein responsives Layout. Was wir nicht haben, ist eine Möglichkeit, nach Dingen zu suchen, auch im Sinne eines Benutzertests. Wieder einmal hat Bootstrap uns abgedeckt.
Benutzer sind daran gewöhnt, dass das Suchfeld in der oberen rechten Ecke der Desktop-Anzeigen prominent angezeigt wird, und bei schmaleren Displays knapp unterhalb der Überschrift. Wir werden damit beginnen, das zu brechen Header Element in zwei Blöcke, und das Hinzufügen einer einzigen Eingabe zu den kleineren:
Meine tolle App
Wir werden auch einige Zeilen CSS hinzufügen user.css Datei, um das Suchfeld oben auf der Seite zu verschieben.
/ * Suchfeld * / Kopfzeileneingabe Margin-Top: 20px; Breite: 90%;
Wir werden auch etwas mehr JavaScript schreiben, damit der Typ-Kopf richtig funktioniert. Ich werde es auf ein Minimum beschränken und erklären, was jedes Skript macht.
Ich kann mir vorstellen, dass einige von Ihnen denken: „Ich bin ein Web Designer, kein Entwickler Fairer Punkt, aber wir müssen zumindest die JavaScript-Gewässer testen, um Bootstraps volle Kraft freizusetzen. Außerdem: Kunden werden begeistert, wenn ein Eingabefeld beginnt, Ergebnisse aus dem ersten Buchstaben zurückzugeben, den sie eingeben.
Fügen Sie das JavaScript-Snippet unten zu Ihrem vorhandenen Skript-Tag hinzu, und klicken Sie auf Aktualisieren. Wenn es richtig funktioniert, sollte ein Dropdown-Menü mit vorgeschlagenen Ergebnissen angezeigt werden, nachdem Sie einen oder mehrere Buchstaben in das Suchfeld eingegeben haben.
var search = $ ('Eingabe # Suche'); $ (search) .typeahead (Quelle: ['Dave Mustaine', 'Tom Morello', 'Jim Root', 'Kirk Hammett', 'Joe Perry', 'Jimi Hendrix', 'Eric Clapton', 'Billy Duffy' , 'Johnny Hickman', 'Eddie Van Halen', 'Dimebag Darrell', 'Noel Gallagher'], Artikel: 5); Okay, hier ist was der Code tut. Das var search = $ ('Eingabe # Suche') weist jQuery an, einen Verweis auf das Suchfeld in der genannten Variablen zu speichern Suche. Dann rufen wir die jQuery-Funktion für unsere Suchvariable auf oder rufen die Bootstrap-Typeahead-Methode auf. In der Klammer des Typenkopfes werden Sie eine sich öffnende und schließende Klammer sehen . Diese Klammern werden verwendet, um ein JavaScript-Objekt zu erstellen und Informationen zu unserem Suchfeld zu speichern.
Die erste Information ist die Quelle Array. Im einfachsten Fall ist ein Array eine geordnete Liste von Dingen. Hier ist eine Liste von Gitarristen. Jeder dem Array hinzugefügte Gitarrist steht als Ergebnis in unserer Sucheingabe zur Verfügung. Der zweite Teil des Objekts, Einzelteile: 5 teilt dem Suchfeld die maximale Anzahl der anzuzeigenden Ergebnisse mit.
Dies sind nur zwei von mehreren verfügbaren Optionen. Ich empfehle Ihnen, sich die Bootstrap-Typenkopfdokumentation anzusehen und mit verschiedenen Konfigurationen zu experimentieren. Der letzte Bildschirm für diesen Schritt sollte folgendermaßen aussehen:
Bootstrap hat sich in meinem Front-End-Workflow zu einer festen Größe entwickelt. So kann ich testen, wann Iterationen relativ schmerzlos sind, und gleichzeitig verschiedene Ansätze ausprobieren. Diese Entdeckungen helfen bei endgültigen Designentscheidungen und vermeiden zeitraubende Änderungen während des gesamten Entwicklungszyklus. Da wir Wireframes als einen wichtigen Teil der Benutzererfahrung betrachten, kann ich Werkzeuge entwickeln, die sich natürlicher anfühlen und erfreulicher sind.
Ich habe gerade die Oberfläche von Bootstrap zerkratzt, und was ist mit dem Teilesatz möglich? Wireframes sind ein großartiger Ort, um sich mit den Ins und Outs vertraut zu machen. Sie sollen Lo-Fi sein, frühe Testmodelle für vollständige Anwendungen. Kunden und Kollegen können unsere Annahmen prüfen und uns dabei helfen, sich schnell und mit minimalem Zeitaufwand zu verfeinern.
Ich hoffe, Ihnen hat dieses Tutorial gefallen, danke fürs Lesen!
