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

Mit Bootstrap von Twitter aussteigen

by
Length:LongLanguages:

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Twitter hat kürzlich Bootstrap eingeführt, eine Bibliothek mit CSS-Stilen, die sich an Web-App-Entwickler richtet, die Designhilfe benötigen. Das Toolkit umfasst alles von Rasterlayouts bis hin zu Schaltflächen und Modalitäten und funktioniert mit nahezu allen modernen Browsern bis hin zu IE7.

Mal sehen, was wir damit machen können ...

Bootstrap wird auch durch den Less-Präprozessor verbessert, der einige zusätzliche Gründe für die Verwendung von Bootstrap hinzufügt, obwohl wir die Less-Funktionalität aus dem Umfang dieses Tutorials ausschließen, um die Sache einfach zu halten.

Bootstrap enthält ein wenig Dokumentation, aber nirgends wird wirklich erklärt, wie das Toolkit verwendet wird (stattdessen gibt es nur eine große Demoseite, auf der Sie sich selbst untersuchen können). In diesem Artikel werden wir also die Beispielseite von Bootstrap entfernen und analysieren, wie die von Bootstrap abgedeckten Elemente repliziert werden. In Beispielen erstellen wir auch eine Beispielwebseite, die vollständig mit Bootstrap erstellt wurde.


Was ist abgedeckt?

Wir werden uns Folgendes ansehen (verwenden Sie die Links, um zu den verschiedenen Abschnitten zu springen):


Das Raster-System

Raster sind ein wesentlicher Bestandteil vieler Webdesigns. So wie ein Stadtplaner ein Raster entwirft, kann auch ein Webdesigner seine Elemente so ausrichten. Bootstrap enthält ein Rastersystem mit einer Gesamtbreite von 940 Pixel, das in der container-Klasse eingeschlossen ist. Insgesamt gibt es 16 verschiedene Spaltenklassen, wobei die Breite jeder einzelnen mit zunehmender Anzahl kumulativ 60 Pixel addiert, beginnend bei 40 Pixel. Beispielsweise hat die Klasse span1 eine Breite von 40 Pixel, während die Klasse span3 eine Breite von 160 Pixel hat.

Wie im obigen Bild gezeigt, können wir eine Kombination verschiedener Klassen verwenden, um eine Gesamtbreite von 940 Pixel zu erstellen, einschließlich des jeweils hinzugefügten 20 Pixel-Randes. Zum Beispiel würde die Verwendung von vier div.span4-Klassen übersetzt 220+ 20+ 220+ 20+ 220+ 20+ 220 bedeuten, was, sobald wir den Taschenrechner herausziehen, vollen 940 Pixeln entspricht. Durch das Umschließen all dieser Elemente in eine row-Klasse berücksichtigt Bootstrap den 20-Pixel-Rand in der letzten Spalte, indem das Ganze um 20 Pixel zurück verschoben wird.

Der obige Code generiert einen ziemlich gleichen Satz von CSS-Spalten mit minimalem Inhalt. Natürlich können wir nur einige dieser Klassen austauschen oder Tags hinzufügen / entfernen, um verschiedene Layouts zu erstellen. Ein weiteres Merkmal des Bootstrap-Toolkits ist die Möglichkeit, eine Spalte durch Versetzen zu "überspringen". Die Versatzklassen sind wiederum mit 1-16 nummeriert, wobei ihre Breiten dem gleichen + 60-Muster folgen, obwohl sie jetzt zusätzliche 40 Pixel enthalten, um den linken und rechten Rand dieser Spalte zu kompensieren. Zum Beispiel können wir das obige Beispiel nehmen, aber die mittlere Spalte entfernen, indem wir die offset5-Klasse zum End-Tag hinzufügen. Beispielsweise:

Es ist ziemlich einfach, dies zu manipulieren, da nur wenige Zahlen geändert werden müssen. Das Bild am Anfang dieses Abschnitts sollte als Leitfaden für einige empfohlene Strukturen verwendet werden.


Typografie

Eines der Dinge, die so ziemlich alle in diesem Tutorial gezeigten Elemente durchlaufen, ist die Typografie. Bootstrap enthält alle Typografie-Tags, für die Sie einen Stil erstellen möchten, von einem <address>-Tag bis zu <h1> und der gesamten Überschriftenhierarchie. Ehrlich gesagt, das ist "Web Development 101", das Sie wahrscheinlich bereits kennen, also werde ich Ihre Zeit nicht damit verschwenden, zu erklären, wie man stylt. Es ist ziemlich elementares Zeug.

Es ist wichtig zu beachten, dass Bootstrap ältere, jetzt veraltete Tags berücksichtigt. Sie sollten sich also keine Sorgen machen, wenn Sie ein CMS verwenden, das sie verwendet, oder für einen Client, der keine Alternative kennt.

Zitieren

Bootstrap muss etwas näher erläutert werden, wenn Sie das <blockquote>-Tag verwenden. Sie können das Tag alleine verwenden, um das eingerückte Zitat mit einem dicken grauen Rand links anzuzeigen. Es kann jedoch verbessert werden, indem andere Tags verschachtelt werden, um das Zitat zuzuordnen. Wenn Sie ein Attribut hinzufügen möchten, wickeln Sie Ihren Anführungszeichen einfach in ein <p>-Tag ein, und die Quelle wird in ein <small>-Tag und Bootstrap automatisch formatiert und ein Bindestrich vor die Quelle gesetzt.

Je nachdem, welchen Inhalt Sie zwischen dem Absatz und kleinen Tags einfügen, erhalten Sie ein ähnliches Ergebnis wie im Bild unten.

Listen

Listen sind ein weiterer Teil des Typografiespektrums, das in Bootstrap behandelt wird, und enthalten vier verschiedene Arten von Stilen: Listen mit Aufzählungszeichen, verschachtelte Listen mit Aufzählungszeichen, geordnete Listen und Glossare. Auch diese sind nicht so schwer zu verwenden, da sie nicht vom Standard in HTML abweichen. Da Listen auf unterschiedliche Weise erstellt werden können, finden Sie hier eine kurze Zusammenfassung ihrer Verwendung mit den Bootstrap-Stilen.

Der folgende Code ist eine einfache ungeordnete Liste mit Aufzählungszeichen, die etwas Ähnliches wie das erste Beispiel im Bild unten erzeugt. Tauschen Sie die ul gegen eine ol aus, um eine geordnete Liste zu erstellen, wie im zweiten Beispiel.

Wenn Sie die unstyled-Klasse zur ungeordneten Liste hinzufügen, werden nicht verschachtelte Listenelemente nicht mit Aufzählungszeichen versehen oder sortiert. Sie werden nur wie normale Linien angezeigt, während verschachtelte Elemente links eine Kugel haben.

Das Hinzufügen einer Beschreibungsliste erfolgt auf die gleiche Weise, wie Sie es außerhalb von Bootstrap erwarten würden, und führt zu einem Beispiel wie dem letzten im obigen Bild.


Tabellen

Bootstrap ist ein Toolkit, das sich teilweise an neue Webdesigner richtet. Es versteht sich daher nicht von selbst, dass diese Dinge nicht für Layouts gedacht sind. Stattdessen sind Tabellen für tabellarische Daten gedacht, und Bootstrap macht einen ziemlich guten Job darin, Ihre tabellarischen Daten mit ihren Stilen zu verschönern, ohne zusätzliche Klassen oder Attribute zu benötigen. Zum Beispiel können wir uns einen regulären HTML-Ausschnitt ansehen, der eine Tabelle generieren würde.

Der obige Code erstellt die Tabelle im Bild unten, wie sie im offiziellen Beispiel von Twitter verwendet wird. Es hat drei Inhaltszeilen und einen Header in vier Spalten und ist ziemlich Standard. Mit wenig Manipulation (Scratch That, keine Manipulation) bei der Standarderstellung einer Tabelle wendet Bootstrap seine Stile automatisch an.

In diesem Fall ist es am wichtigsten, sich daran zu erinnern, dass Ihre Tags korrekt verschachtelt sind. Die Stile gelten nicht, wenn Sie Ihre Überschriftenzeile beispielsweise nicht in ein <thead>-Tag einschließen.

Standardmäßig ist die Tabelle nicht mit Zebrastreifen versehen, wobei alternative Farben den Hintergrund jeder Zeile ausfüllen können. Dies ist jedoch einfach zu aktivieren, indem die zebra-striped-Klasse einfach zum <table>-Tag hinzugefügt wird, ohne dass die Zeilen oder Einzelteile manipuliert werden müssen.

Schließlich können Sie mit dem Hinzufügen eines kleinen Teils von jQuery, jedoch ohne Änderung des HTML-Codes, abgesehen vom Hinzufügen von sortTableExample als ID des <table>-Tags, Sortierfunktionen hinzufügen, wenn Sie auf die Überschrift einer Spalte klicken. Für diese Funktionalität ist das Tablesorter 2.0 jQuery-Plugin erforderlich, das kostenlos heruntergeladen werden kann. Wie Sie wahrscheinlich bereits vermutet haben, müssen Sie auch jQuery aufrufen, damit dies funktioniert.


Formen und Knöpfe

Die meisten Dinge, die wir bereits behandelt haben, sind ziemlich einfach, wobei Bootstrap Stile auf Ihren Code anwendet, ohne oder mit nur geringen Änderungen gegenüber dem Normalen. Wenn wir das aus dem Weg räumen, können wir uns nun einigen Dingen zuwenden, die etwas mehr Erklärungen und etwas mehr Nachhilfe erfordern.

Formen

Für Formulare gibt es viele verschiedene Stile, die Sie verwenden können. Wir werden uns also jeden einzeln ansehen. Sie können diese dann einfach in Kombination miteinander verwenden und sie mit bereits vorhandenem Wissen über reguläre alte HTML-Formulare bearbeiten.

Zunächst sollte beachtet werden, dass Ihr gesamtes Formular in ein <form>-Tag eingeschlossen werden sollte, aber das wissen Sie wahrscheinlich bereits. Bootstrap empfiehlt außerdem, dass Sie Ihre Elemente in <fieldset>-Tags mit einem zusätzlichen <legend>-Tag einschließen.

Im Allgemeinen sollte sich Ihr Formular-Setup nicht vom obigen Code unterscheiden. Die einzige andere Option, die Bootstrap bietet, besteht darin, sich für gestapelte Formulare zu entscheiden, bei denen sich die Beschriftungen oben in einem Feld und nicht links befinden. Dies kann erreicht werden, indem die form-stacked-Klasse zum <form>-Tag hinzugefügt wird.

Text Eingabe

Zum Auftakt unserer Abdeckung von Formularfeldern betrachten wir ein reguläres Eingabefeld mit einer Beschriftung. Das folgende Codefragment besteht im Wesentlichen aus einem <label>- und einem <input>-Tag, die in ein <div>-Tag mit der clearfix-Klasse eingeschlossen sind, um den korrekten Abstand sicherzustellen. Zusätzlich wird das tatsächliche Feld erneut mit der input-Klasse in ein anderes <div> eingeschlossen, um den korrekten Abstand sicherzustellen.

In diesem Tutorial werde ich einige Vorgehensweisen ignorieren, die in Ihrem Code angewendet werden sollten. Beispielsweise sollte jede Eingabe eine ID haben, die über das Attribut "for" an die Bezeichnung gebunden ist, und Sie sollten im Allgemeinen Ihre Eingabefelder benennen, um sie bei der Verarbeitung Ihrer Daten abzurufen. Wir beschäftigen uns hier speziell mit der Verwendung der Bootstrap-Stile. Daher wurden diese Attributtypen nicht in meine Beispiele aufgenommen, um die Dinge so einfach wie möglich zu halten. Obwohl sie in Verbindung mit Bootstrap verwendet werden, sollten diese Aufgaben nicht vergessen werden.

Durch Hinzufügen der xlarge-Klasse zum <input> wird das Formularfeld erweitert.

Wir können eine Eingabe auf normale Weise deaktivieren, indem wir die entsprechenden Attribute hinzufügen, wie im folgenden Beispiel gezeigt. Die Bootstrap-Stile werden in der disabled-Klasse hinzugefügt, die hinzugefügt werden sollte, um visuell zu zeigen, dass ein Benutzer nicht mit diesem Feld interagieren kann, indem er es ausgraut.

Während der ausgegraute Ansatz eines deaktivierten Felds durch die Verwendung eines <input>-Tags erreicht wird, ist dies bei einem nicht bearbeitbaren nicht der Fall. Stattdessen verwendet Bootstrap einen einfachen <span>, der in Verbindung mit einer versteckten Eingabe verwendet werden kann. Diese Felder werden für Informationen verwendet, die der Benutzer nicht bearbeiten sollte, z. B. ein automatisch erfasstes Datum oder eine IP-Adresse.

Unser letzter Blick auf die Gestaltung von Texteingaben besteht darin, die kontextbezogene Hilfe anzuzeigen, wenn ein error auftritt. Dazu wird dem <div>, das den Clearfix bildet, und dem <input>-Tag selbst eine Fehlerklasse hinzugefügt. Durch Hinzufügen eines <span>-Tags mit der help-inline-Klasse darunter wird die Hilfemeldung auf der rechten Seite hinzugefügt.

Dropdown-Auswahl

Ein Dropdown-Menü ist ähnlich aufgebaut, wobei der reguläre Code verwendet wird (sehen Sie unten).

Die xlarge-Klasse für ein Textfeld ist das Gegenteil der medium-Klasse für ein <select>-Tag. Durch Hinzufügen einer solchen Klasse zum Dropdown-Menü der Optionen wird das Feld tatsächlich enger.

Kontrollkästchen

Kontrollkästchen sind in Bootstrap nicht wirklich gestaltet. Das Toolkit ordnet sie lediglich so an, dass sie mit den anderen Feldern übereinstimmen, und erstellt dazu eine Liste mit jedem Kontrollkästchen. Der Code ist ziemlich selbsterklärend. Stellen Sie nur sicher, dass sowohl der Beschriftungstext als auch das Kontrollkästchen in das <label>-Tag eingeschlossen sind, damit (a) das Kontrollkästchen nach links verschoben wird und (b) das Kontrollkästchen durch Klicken auf aktiviert werden kann das Etikett.

Dieser Code generiert ein einzelnes Kontrollkästchen mit einer Beschriftung rechts. Um ein weiteres zu erstellen, wiederholen Sie einfach das Listenelement und seinen Inhalt. Anschließend haben Sie eine Liste mit Kontrollkästchen.

Um ein Kontrollkästchen zu deaktivieren, fügen Sie einfach das Attribut disabled zum Tag <input> und die Klasse disabled zum Tag <label> hinzu.

Darüber hinaus gibt es zwei zusätzliche Arten von Kontrollkästchen, die mit Textfeldern gepaart sind: vorangestellte und angehängte Kontrollkästchen. Auch dies ist ziemlich selbsterklärend und einem normalen Textfeld sehr ähnlich. Dieses Mal müssen Sie jedoch das Kontrollkästchen in ein <label>-Tag (mit der add-on-Klasse) und entweder die input-prepend- oder die input-append-Klasse an das übergeordnete <div> einschließen. Dann müssen Sie nur noch sicherstellen, dass Sie das Etikett und das Feld richtig herum platzieren, je nachdem, ob Sie es vorangestellt oder angehängt haben möchten.

Der obige Code gilt für ein angehängtes Kontrollkästchen. Wenn Sie jedoch ein vorangestelltes Kontrollkästchen wünschen, müssen Sie wenig ändern.

Dateieingaben

Dateieingaben ähneln stark Textfeldern und der folgende Code ist ziemlich selbsterklärend. Erstellen Sie eine reguläre Dateieingabe mit der input-filel-Kasse.

Textbereiche

Der endgültige Bootstrap-Stil für Formulare ist der Textbereich. Der Textbereich wird auf die gleiche Weise wie das einzeilige Textfeld erstellt. Wie das Vergrößern eines Textfelds hat auch der Textbereich eine eigene Klasse, um ihn breiter zu machen, xxlarge.

Optional können Sie eine kleine Hilfezeile unter dem Feld hinzufügen, wobei die folgende Zeile unmittelbar nach dem <textarea>-Tag hinzugefügt wird.

Tasten

Jetzt ist es Zeit, unser Formular zu verarbeiten, und normalerweise tun wir dies, indem wir auf eine Schaltfläche klicken. Glücklicherweise deckt Bootstrap Schaltflächen ab und sie sind super einfach hinzuzufügen.

Schaltflächen können entweder über ein <a> oder ein <button>-Tag hinzugefügt werden. Beide haben die gleichen Klassen und sehen identisch aus. Sie sollten jedoch versuchen, Schaltflächen für Aktionen und Links für Links zu reservieren. So würde beispielsweise eine Schaltfläche wie folgt geschrieben:

Und eine Identitätsschaltfläche, die jedoch als Link erstellt wurde, würde folgendermaßen geschrieben:

Standardmäßig wird die Schaltfläche in einem hellgrauen Stil angezeigt. Dies kann jedoch leicht durch Anwenden einer zusätzlichen Klasse in eine der vier anderen (hellblau, blau, grün und rot) geändert werden.

  • primary für eine blaue Schaltfläche, die die primäre Aktion ist (z. B. Senden eines Formulars)
  • info für eine hellere blaue Schaltfläche, die normalerweise für den Zugriff auf Informationen verwendet wird
  • success für einen grünen Knopf, der verwendet wird, um Erfolg zu signalisieren
  • danger für einen roten Knopf, normalerweise für irreversible oder gefährliche Aktionen wie Löschen verwendet

Wir können auch die Größe einer Schaltfläche von der Standardeinstellung ändern. Um es zu vergrößern, fügen Sie einfach die large-Klasse hinzu oder verkleinern Sie sie mit der small-Klasse (ja, Sie haben es erraten).

Um eine Schaltfläche zu deaktivieren, müssen Sie lediglich die disabled-Klasse hinzufügen und im Fall einer Aktionsschaltfläche das Attribut disabled festlegen.

oder


Navigation

Bootstrap enthält eine feste Navigationsleiste, die der auf der Twitter-Website ähnelt. Die Leiste besteht im Wesentlichen aus drei Abschnitten, dem Titellink und den Menüelementen in der Suchleiste, die in ein paar <div>-Tags eingeschlossen sind, die es nicht wert sind, erklärt zu werden.

Im folgenden Code sehen Sie ein <h3>-Tag, das den Titel enthält. Es ist ziemlich einfach, dies zu ändern und einen eigenen Link und Text hinzuzufügen.

Darauf folgen die Menüelemente, bei denen es sich lediglich um nicht klassifizierte Listenelemente mit Links handelt. Es ist einfach genug, diese Elemente zu duplizieren, da sie abgesehen von der active-Klasse im aktuellen Link keine Bootstrap-spezifischen Stile erfordern.

Die letzte Liste ist für das Dropdown-Menü. Es enthält ein einzelnes Listenelement mit einer anderen verschachtelten Liste, die beim Bewegen des Mauszeigers angezeigt wird. Die dritte Zeile des folgenden Codes ist das Listenelement, das ständig in der Navigationsleiste angezeigt wird, während die Liste ab Zeile 4 die Hover-Elemente sind.

Wie Sie feststellen werden, wird durch Hinzufügen eines leeren Listenelements mit der divider-Klasse ein Teiler im Dropdown-Menü hinzugefügt.

Im Gebrauch sollte Ihre obere Leiste ungefähr so aussehen, ganz oben auf Ihrer Seite.

Beachten Sie, dass Sie die 40-Pixel-Höhe des Balkens oben auf Ihrer Seite ausgleichen möchten, da sich sonst die ersten Elemente auf Ihrer Seite überlappen.


Tabs und Pillen

Tabs und Pillen sind wahnsinnig einfach zu erstellen, da es sich nur um normale alte Listen handelt. Natürlich funktionieren sie nicht - bei Bootstrap dreht sich alles um die Stile. Erstellen Sie einfach Ihre Liste mit der tabs-Klasse für die Tabbed-Oberfläche oder der pills-Klasse für die Pill-Tabs. Wie in der Navigationsleiste im vorherigen Abschnitt wird sie durch Hinzufügen der active-Klasse zu einem Listenelement hervorgehoben.

Verwenden Sie für den Tab-Umschalter etwas Ähnliches:

Um stattdessen Pillen zu verwenden, tauschen Sie die oberste Zeile gegen Folgendes aus.


Seitennummerierung

Wir gehen nun zur Paginierung über, die funktionslos ist (wie die Tabs und Pillen), aber immer noch in Bootstrap gestaltet ist. Bootstrap behandelt Paginierungsschaltflächen mit denselben Registerkarten in einer Liste, die diesmal in ein <div> mit der pagination-Klasse eingeschlossen ist. Jedes Listenelement kann eine verknüpfte Nummer (oder ein Auslassungszeichen) enthalten, abgesehen von den ersten und letzten Elementen, die für die vorherigen/nächsten Links reserviert sind. Diese haben die prev bzw. next Klassen.

Darüber hinaus kann jede Schaltfläche durch Hinzufügen der disabled-Klasse deaktiviert werden, und der aktive Link wird mit der active-Klasse hervorgehoben. Wie so:


Warnungen und Fehlermeldungen

Warnleisten sind Schaltflächen optisch sehr ähnlich, obwohl sie unterschiedlich aufgebaut sind. Jede Fehlermeldung ist ein <div>-Tag mit der alert-message-Klasse. Es gibt vier verschiedene Nachrichtentypen mit jeweils einer entsprechenden Klasse, die ebenfalls hinzugefügt werden muss:

  • warning für einen gelben Balken
  • error für einen roten Balken
  • success für einen grünen Balken
  • info für einen blauen Balken

Warnmeldungen werden dann wie folgt geschrieben, wobei nur eine Klasse aus warning/error/success/info ausgewählt wird.

Zu Ihrer Information wird in der zweiten Zeile des obigen Codes das "×" rechts neben der Änderungsnachricht hinzugefügt, das mit einer Aktion verknüpft sein kann, mit der die Nachricht entfernt wird.

Benachrichtigungen müssen auch keine einzeilige Angelegenheit sein. Wenn Ihre Nachricht über eine einzelne Zeile hinausgeht, fügen Sie einfach die block-message-Klasse zu dem Code hinzu, den Sie für eine einzelne Zeile verwenden würden, während Sie weiterhin die verschiedenen Typklassen verwenden.

Diese Nachrichten können auch Schaltflächen enthalten. Dies ist nützlich, wenn die Warnung mit einer Auswahl behoben werden muss. Wenn Sie zu unserem Abschnitt über Schaltflächen zurückkehren, wissen Sie, wie Sie diese hinzufügen können. Stellen Sie einfach sicher, dass Sie die kleinen Versionen verwenden, indem Sie die small-Klasse zur Schaltfläche selbst hinzufügen und sie in ein <div>-Tag mit der alert-actions-Klasse einschließen.


Modale

Modale können nützlich sein, um Informationen in bestimmten Szenarien anzuzeigen, die üblicherweise zur Eingabe von Daten wie Benutzerinformationen oder Posts verwendet werden. Das Modal von Bootstrap ist ziemlich einfach und in drei Abschnitte unterteilt. die Kopfzeile, der Körper und die Fußzeile. Zunächst öffnen wir das <div>-Tag des Modals und positionieren es mit einigen Inline-Stilen, die Bootstrap benötigt.

Innerhalb dieses Tags platzieren wir dann die drei Abschnitte, wobei der erste der Header ist. Der Header hat eine Klasse von modal-header und enthält nur zwei Zeilen, ein <h3>-Tag für den Titel und das(optionale) verknüpfte "×", das angepasst werden kann, um das Popover zu schließen.

Als nächstes haben wir den Hauptinhalt. Es ist sehr einfach, nur ein <div> mit der modal-body-Klasse und Ihren Inhalten darin zu sein. Als so:

Schließlich haben wir die modale Fußzeile (eine andere <div>, diesmal mit der modal-footer-Klasse), die im Allgemeinen aus Schaltflächen besteht, über die Aktionen ausgeführt werden können. Diese werden genauso generiert wie alle anderen Schaltflächen, die wir mit Bootstrap erstellt haben, sodass keine zusätzlichen Erläuterungen erforderlich sind.

Okay, ich habe gelogen. Das war nicht der letzte Schritt. Wir müssen noch das Original <div> schließen.

Wenn Sie alle diese Teile zu einem zusammenfügen, erhalten Sie ein ziemlich süßes modales Fenster. Wie ich Sie immer wieder erinnere, kümmert sich Bootstrap hier leider buchstäblich um das Styling. Das Modal wird nicht so angezeigt, als wäre es umgekippt. Es wäre fantastisch, wenn Bootstrap zusätzlich zum CSS um einige Funktionen erweitert würde, aber für den Moment müssen Sie Ihre eigenen generieren oder beschaffen.


Abschließende Gedanken

Das Bild oben zeigt unser endgültiges Design. Es besteht aus allen Elementen, die wir in diesem Tutorial erstellt haben (es gibt eine separate Demo für die Formularelemente), und zwar vollständig im Rahmen von Bootstrap. Hoffentlich hat Ihnen dieser Artikel geholfen, zumal es für einige schwierig sein kann, die enthaltene Beispielseite zu entschlüsseln (die als einzige im Download enthaltene Dokumentation fungiert).

Ich liebe Bootstrap. Wenn Sie mit der Webentwicklung noch nicht vertraut sind, bietet sie eine große Auswahl an Elementen, obwohl Ihre Website durch viele gemeinsam genutzte Elemente möglicherweise etwas zu Twitter-artig aussieht. Die Einfachheit und Benutzerfreundlichkeit ist jedoch zu schwer zu ignorieren, wenn Sie keine eigenen schreiben möchten/können. Ich kann es kaum erwarten, einige dieser Dinge in einem neuen Projekt zu verwenden.


Zusätzliche Ressourcen

Verwenden von weniger CSS, BluePrint und WP für einen schnelleren Workflow Wptuts+Kurztipp: Geben Sie niemals wieder ein Herstellerpräfix ein  Nettuts+Bootstrap von Twitter ist der Dream Web AppStorm eines neuen WebdesignersBootstrap-Vorlagen auf ThemeForest

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.