Mit Bootstrap von Twitter aussteigen

Vor kurzem stellte Twitter Bootstrap vor, eine Bibliothek mit CSS-Stilen, die sich an Entwickler von Web-Apps richtet, die Designhilfe benötigen. Das Toolkit umfasst alles von Rasterlayouts bis hin zu Schaltflächen und Modalen und funktioniert mit nahezu allen modernen Browsern bis hin zum IE7.

Mal sehen, was wir damit machen können?

Bootstrap wird auch durch den Less-Präprozessor verbessert. Dies fügt einige zusätzliche Gründe für die Verwendung von Bootstrap hinzu. Die Less-Funktion wird jedoch aus dem Bereich von ausgeschlossen diese Tutorial, um die Sache einfach zu halten.

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

Was ist abgedeckt??

Wir werden uns das Folgende ansehen (verwenden Sie die Links, um zu den verschiedenen Abschnitten zu gelangen):

Das Rastersystem
Typografie
Tabellen
Formulare und Schaltflächen
Navigation
Tabs und Pillen
Seitennummerierung
Warnungen und Fehlermeldungen
Modals

Das Rastersystem

Raster sind ein wesentlicher Bestandteil vieler Webdesigns. So wie ein Stadtplaner in einem Raster entwirft, kann auch ein Webdesigner seine Elemente so ausrichten. Bootstrap enthält ein Rastersystem mit einer Gesamtbreite von 940 Pixeln, das innerhalb des Systems eingeschlossen ist Container Klasse. Es gibt sechzehn verschiedene Spaltenklassen, wobei die Breite jeder Spalte 60px addiert, wenn die Anzahl zunimmt, beginnend bei 40px. Beispielsweise hat die Klasse span1 eine Breite von 40px, während die Klasse span3 eine Breite von 160px hat.

Wie in der Abbildung oben gezeigt, können wir eine Kombination verschiedener Klassen verwenden, um eine Gesamtbreite von 940 Pixeln zu erzeugen, einschließlich der 20-Pixeln, die jeder hinzugefügt wird. Zum Beispiel die Verwendung von vier div.span4 Klassen würden übersetzt 220 + 20 + 220 + 20 + 220 + 20 + 220 bedeuten, was, wenn wir den Rechner herauspeitschen, vollen 940 Pixeln entspricht. Indem wir alle diese in eine Reihe In dieser Klasse berücksichtigt Bootstrap den Abstand von zwanzig Pixeln in der letzten Spalte, indem das Ganze um zwanzig Pixel nach hinten verschoben wird.

   Spalte # 1
 Inhalt für Spalte 1.
 
  Spalte # 2
 Inhalt für Spalte 2.
 
  Spalte # 3
 Inhalt für Spalte 3.

Der obige Code generiert eine ziemlich gleiche Menge von CSS-Spalten mit minimalem Inhalt. Natürlich können wir einige dieser Klassen einfach austauschen oder Tags hinzufügen / subtrahieren, um verschiedene Layouts zu erstellen. Eine weitere Funktion des Bootstrap-Toolkits ist die Möglichkeit, eine Spalte durch Versetzen "überspringen". Die Versatzklassen sind wiederum mit 1 bis 16 nummeriert, wobei ihre Breiten demselben +60-Muster folgen, obwohl sie jetzt einen zusätzlichen 40px enthalten, um den linken und rechten Rand der Spalte zu kompensieren. Zum Beispiel können wir das obige Beispiel nehmen, aber die mittlere Spalte durch Hinzufügen von entfernen offset5 Klasse bis zum Endtag. Zum Beispiel:

   Spalte # 1
 Inhalt für Spalte 1.
 
  Spalte # 3
 Inhalt für Spalte 3.

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

Typografie

Eines der Dinge, die so ziemlich alle Elemente dieses Tutorials durchlaufen, ist die Typografie. Bootstrap enthält alle Typografie-Tags, für die Sie ein Styling wünschen, alles aus einem

Tag zu

und die gesamte Überschriftenhierarchie. Ehrlich gesagt handelt es sich hier um "Web Development 101" -Dinge, die Sie wahrscheinlich bereits kennen, sodass ich nicht Ihre Zeit damit verschwenden werde, wie Sie den Stil definieren. Es ist ziemlich elementares Zeug.

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

Zitieren

Wo Bootstrap etwas mehr Erklärungen braucht, ist die Verwendung der

Etikett. Sie können das Tag allein verwenden, um das Zitat eingerückt anzuzeigen, mit einem dicken grauen Rand auf der linken Seite. Es kann jedoch verbessert werden, indem andere Tags darin verschachtelt werden, um das Angebot zuzuordnen. Wenn Sie ein Attribut hinzufügen möchten, packen Sie einfach den Anführungszeichen in ein
Tag und die Quelle in einem tag und Bootstrap formatieren und setzen einen Strich vor der Quelle.

Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Ganzzahlige Position, die vor einem venenatis dapibus-Positionier-Aliquet liegt.
Connor Turnbull, 30. August

Je nach dem Inhalt, den Sie zwischen Absatz und kleine Tags einfügen, erhalten Sie ein Ergebnis, das dem Bild unten ähnlich ist.

Listen

Listen sind ein weiterer Teil des Typografiespektrums, das in Bootstrap behandelt wird, und umfasst vier verschiedene Arten von Stilen: Aufzählungslisten, verschachtelte Aufzählungslisten, geordnete Listen und Glossare. Auch dies ist nicht so schwer zu verwenden, da sie nicht von den Standards in HTML abweichen. Da Listen auf verschiedene Arten erstellt werden können, finden Sie hier eine kurze Zusammenfassung der Verwendung der Bootstrap-Stile.

Der folgende Code ist eine einfache ungeordnete Liste mit Aufzählungszeichen, die etwas ähnlich dem ersten Beispiel in der Abbildung unten erzeugt. Tausche das aus ul für ein ol um eine geordnete Liste zu erstellen, wie im zweiten Beispiel.

Lorem ipsum dolor sitzen amet

Consectetur Adipiscing elit
?

Wenn Sie das hinzufügen nicht gestylt Klasse in die ungeordnete Liste, werden nicht geschachtelte Listenelemente nicht mit Aufzählungszeichen versehen oder geordnet. Sie werden nur wie normale Zeilen angezeigt, während verschachtelte Elemente links eine Aufzählungszeichen haben.

Lorem ipsum dolor sitzen amet

Consectetur Adipiscing elit
?

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

Lorem ipsum

Lorem ipsum dolor sitzen amet

Consectetur

Consectetur Adipiscing elit
?

Tabellen

Bootstrap ist ein Toolkit, das sich zum Teil an neue Webdesigner richtet, daher ist es nicht unbedingt selbstverständlich, dass diese Dinge nicht für Layouts gedacht sind. Stattdessen sind Tabellen für Tabellendaten gedacht, und Bootstrap eignet sich gut dazu, Tabellendaten mit ihren Stilen zu verschönern, ohne zusätzliche Klassen oder Attribute zu benötigen. Zum Beispiel können wir einen regulären HTML-Ausschnitt betrachten, der eine Tabelle generieren würde.

# Vorname Nachname Sprache

1 Etwas Ein Englisch

2 Joe Sixpack Englisch

3 Stu Delle Code

Der obige Code erstellt die Tabelle in der folgenden Abbildung, wie sie im offiziellen Beispiel von Twitter verwendet wird. Es hat drei Inhaltszeilen und einen Header in vier Spalten und ist ziemlich Standard. Mit wenigen Manipulationen (Scratch That, keine Manipulation) bei der Standarderstellung einer Tabelle werden die Stile von Bootstrap automatisch angewendet.

In diesem Fall sollten Sie sich vor allem daran erinnern, Ihre Tags richtig zu verschachteln. Die Stile gelten nicht, wenn Sie die Überschriftenzeile nicht in eine Zeile einschließen Tag zum Beispiel.

Standardmäßig ist die Tabelle nicht mit Zebra-Streifen versehen, wobei alternative Farben den Hintergrund jeder Zeile ausfüllen könnten. Dies ist einfach zu aktivieren, indem Sie einfach die Zebra-Streifen Klasse zum
tag ohne manipulation der reihen oder einzelner teile.

?
Schließlich mit dem Hinzufügen eines kleinen Teils von jQuery, aber keine Änderung des HTML-Codes außer dem Hinzufügen sortTableExample als die ID des

#
Mit diesem Tag können Sie Sortierfunktionen hinzufügen, wenn Sie auf die Überschrift einer Spalte klicken. Diese Funktion erfordert das Tablesorter 2.0-Plugin jQuery, das kostenlos heruntergeladen werden kann. Wie Sie wahrscheinlich bereits erraten haben, müssen Sie auch jQuery anrufen, damit dies funktioniert.

?
Formulare und Schaltflächen
Die meisten Dinge, die wir bereits besprochen haben, sind ziemlich simpel: Bootstrap wird Styles mit wenig oder keiner Änderung von normal auf Ihren Code anwenden. Um das aus dem Weg zu räumen, können wir uns jetzt mit einigen Sachen beschäftigen, die ein wenig mehr Erklärungen und etwas mehr Nachhilfe erfordern.
Formen
Für Formulare gibt es viele verschiedene Stile, die Sie verwenden können. Daher werden wir uns jeden einzelnen einzeln ansehen. Sie können diese dann einfach in Kombination miteinander verwenden und mit vorhandenen Kenntnissen über reguläre alte HTML-Formulare manipulieren.
Zunächst sollte beachtet werden, dass Ihr gesamtes Formular in ein tag, aber das wissen Sie wahrscheinlich schon. Bootstrap empfiehlt außerdem, dass Sie Ihre Elemente in einpacken
Tags mit einem zusätzlichen Etikett.

Lorem ipsum dolor sitzen amet (deine Felder gehen hier)

Im Allgemeinen sollte Ihr Formular-Setup nicht vom obigen Code abweichen. Die einzige andere Option, die Bootstrap bietet, ist die Entscheidung für gestapelte Formulare, bei denen Beschriftungen sich oben im Feld und nicht links befinden. Dies kann durch Hinzufügen von erreicht werden Formular gestapelt Klasse zum Etikett.

Text Eingabe

Um unsere Berichterstattung über Formularfelder zu beginnen, betrachten wir ein reguläres Eingabefeld mit einem Label. Der folgende Code-Ausschnitt ist im Wesentlichen a und ein tag, verpackt in einem
tag mit dem Clearfix Klasse, um den richtigen Abstand zu gewährleisten. Darüber hinaus wird das eigentliche Feld in ein anderes eingefügt
mit dem Eingang Klasse wieder, um den richtigen Abstand zu gewährleisten.

Lorem ipsum

Aus Gründen dieses Tutorials werde ich ein paar Praktiken ignorieren, die in Ihrem Code verwendet werden sollten. Beispielsweise sollte jede Eingabe über eine ID verfügen, die über das Attribut "for" an das Label gebunden ist. In der Regel sollten Sie Ihre Eingabefelder benennen, um sie bei der Verarbeitung Ihrer Daten zu erfassen. Wir untersuchen hier speziell, wie Bootstrap-Stile verwendet werden. Daher wurden diese Attribute in meinen Beispielen nicht berücksichtigt, um die Dinge so einfach wie möglich zu halten. Auch wenn sie in Verbindung mit Bootstrap verwendet werden, sollten diese Aufgaben nicht vergessen werden.

Durch das Hinzufügen der xlarge Klasse zum , Das Formularfeld wird erweitert.

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

Lorem ipsum

Der ausgegraute Ansatz eines deaktivierten Feldes wird durch Verwendung von erreicht Tag, ein nicht editierbares ist nicht. Stattdessen verwendet Bootstrap eine einfache das kann in Verbindung mit einem versteckten Eingang verwendet werden. Diese Felder werden für Informationen verwendet, die der Benutzer nicht bearbeiten sollte, z. B. ein automatisch erfasstes Datum oder eine IP-Adresse.

Lorem ipsum
Lorem ipsum dolor sitzen amet

Unser letzter Blick auf die Gestaltung von Texteingaben ist die Anzeige der kontextabhängigen Hilfe, wenn ein Fehler auftritt. Dies geschieht durch Hinzufügen eines Error Klasse zum
das bildet den clearfix, und zum tag selbst Hinzufügen eines tag mit dem Inline-Hilfe Klasse darunter fügt die Hilfemeldung auf der rechten Seite hinzu.

Lorem ipsum
Dolor sitzt amet

Dropdown auswählen

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

Lorem Ipsum

Das xlarge Klasse zu einem Textfeld ist das Gegenteil von Mittel Klasse zu einem Lorem ipsum dolor sitzen amet

Dieser Code generiert ein einzelnes Kontrollkästchen mit einer Beschriftung nach rechts. Um ein zusätzliches Element zu erstellen, wiederholen Sie einfach das Listenelement und seinen Inhalt. Anschließend können Sie eine Liste mit Kontrollkästchen erstellen. Um ein Kontrollkästchen zu deaktivieren, fügen Sie einfach das hinzu deaktiviert Attribut zum tag und die deaktiviert Klasse zum Etikett. Lorem ipsum dolor sitzen amet 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 einschließen tag (mit dem Erweiterung Klasse) und entweder die Eingabe-Voranstellen oder der Eingabe-Anhängen Klasse zum Elternteil . Dann müssen Sie nur noch sicherstellen, dass Sie die Beschriftung und das Feld richtig herum platzieren, je nachdem, ob Sie es als vorangestelltes oder angehängtes Element haben möchten. Lorem ipsum Der obige Code ist für ein angehängtes Kontrollkästchen, aber wenn Sie ein vorangestelltes wollen, gibt es wenig zu ändern. Lorem ipsum Dateieingaben Dateieingaben sind sehr ähnlich wie Textfelder und der folgende Code ist ziemlich selbsterklärend. Erstellen Sie eine reguläre Dateieingabe mit der Eingabedatei Klasse. Lorem ipsum Textbereiche Der letzte Bootstrap-Stil für Formulare ist der Textbereich. Der Textbereich wird auf dieselbe Weise wie das einzeilige Textfeld erstellt. Wie das Vergrößern eines Textfelds verfügt auch der Textbereich über eine eigene Klasse, um ihn breiter zu machen, xxlarge. Lorem ipsum Optional können Sie eine kleine Hilfszeile unterhalb des Feldes hinzufügen. Die folgende Zeile wird unmittelbar nach dem Feld hinzugefügt </code> Etikett.</p> <pre><span>Lorem ipsum dolor sitzen amet</span></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_13.png"> <h3>Tasten</h3> <p>Nun ist es an der Zeit, unser Formular zu bearbeiten, und normalerweise klicken wir auf eine Schaltfläche. Glücklicherweise deckt Bootstrap Knöpfe ab und sie sind sehr einfach hinzuzufügen.</p> <p>Schaltflächen können durch eine oder hinzugefügt werden <code><a></code> oder ein <code><button></code> Etikett. Beide haben die gleichen Klassen und sehen identisch aus. Sie sollten jedoch versuchen, Schaltflächen für Aktionen und Links für gute Links zu reservieren. So würde zum Beispiel ein Button so geschrieben:</p> <pre><button>Lorem ipsum</button></pre> <p>Und eine identielle Schaltfläche, die jedoch als Link erstellt wurde, würde folgendermaßen geschrieben:</p> <pre>Lorem ipsum</pre> <p>Standardmäßig wird die Schaltfläche hellgrau angezeigt. Dies kann jedoch durch Anwenden einer zusätzlichen Klasse leicht in eine der vier anderen Kategorien (hellblau, blau, grün und rot) geändert werden.</p> <ul> <li> <code>primär</code> für eine blaue Schaltfläche, die die primäre Aktion darstellt (z. B. Senden eines Formulars)</li> <li> <code>Info</code> für einen helleren blauen Knopf, der normalerweise für den Zugriff auf Informationen verwendet wird</li> <li> <code>Erfolg</code> für eine grüne Taste, die den Erfolg signalisiert</li> <li> <code>Achtung</code> für einen roten Knopf, der normalerweise für irreversible oder gefährliche Aktionen wie Löschen verwendet wird</li> </ul> <pre><button>Primär</button> <button>Standard</button> <button>Info</button> <button>Erfolg</button> <button>Achtung</button></pre> <p>Wir können auch die Größe einer Schaltfläche von der Standardeinstellung ändern. Zum Vergrößern fügen Sie einfach das hinzu <code>groß</code> klasse oder verkleinere es mit dem (yep, du hast es erraten) <code>klein</code> Klasse.</p> <p>Um eine Schaltfläche zu deaktivieren, müssen Sie nur noch die Schaltfläche hinzufügen <code>deaktiviert</code> Klasse und setzen Sie im Falle einer Aktionsschaltfläche das deaktivierte Attribut.</p> <pre><button disabled>Lorem ipsum</button></pre> <p>oder</p> <pre><a>Lorem ipsum</pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_14.png"> <hr> <h2>Navigation</h2> <p>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üeinträgen in der Suchleiste, die in mehreren Bereichen enthalten sind <code><div></code> Tags, die es nicht wert sind, erklärt zu werden.</p> <p>In dem Code unten sehen Sie eine <code><h3></code> Tag, das den Titel enthält. Es ist ziemlich einfach, dies zu ändern und Ihren eigenen Link und Text hinzuzufügen.</p> <pre><h3>Lorem ipsum</h3></pre> <p>Im Folgenden sind die Menüelemente aufgeführt, die nur nicht klassifizierte Listenelemente mit Links sind. Es ist unkompliziert genug, diese Elemente zu duplizieren, da sie keine Bootstrap-spezifischen Stile außer dem benötigen <code>aktiv</code> Klasse auf dem aktuellen Link.</p> <pre><ul> <li>Zuhause</li> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ul></pre> <p>Die letzte Liste enthält das Dropdown-Menü. Es enthält ein einzelnes Listenelement und eine andere verschachtelte Liste, die beim Überfahren mit der Maus angezeigt wird. Die dritte Zeile des Codes unten ist das Listenelement, das ständig in der Navigationsleiste angezeigt wird, während die Liste ab Zeile 4 die Hover-Elemente ist.</p> <pre><ul> <li> Lorem ipsum <ul> <li>Dolor sitzen</li> <li>Amet Konsequenz</li> <li>Genug mit dem Latein</li> </ul> </li> </ul></pre> <p>Wie Sie feststellen werden, fügen Sie ein leeres Listenelement mit der <code>Teiler</code> Klasse fügt im Dropdown-Menü einen Teiler hinzu.</p> <p>Ihre Topbar sollte in etwa so aussehen und ganz oben auf Ihrer Seite positioniert sein.</p> <pre><div> <div> <div> <h3>WebDesignTuts+</h3> <ul> <li>Zuhause</li> <li>Tutorials</li> <li>Artikel</li> <li>Wöchentliche Umfragen</li> </ul> <form> <input type="text" placeholder="Search" /> </form> <ul> <li> Lorem ipsum <ul> <li>Dolor sitzen</li> <li>Amet Konsequenz</li> <li>Genug mit dem Latein</li> </ul> </li> </ul> </div> </div> </div></pre> <p>Beachten Sie, dass Sie die 40-Pixel-Höhe des Balkens oben auf Ihrer Seite ausgleichen möchten. Andernfalls werden die ersten Elemente auf Ihrer Seite überlappt.</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_15.png"> <hr> <h2>Tabs und Pillen</h2> <p>Tabs und Pillen sind wahnsinnig einfach zu erstellen, da es sich nur um reguläre alte Listen handelt. Natürlich funktionieren sie nicht - bei Bootstrap dreht sich alles um die Styles. Erstellen Sie einfach Ihre Liste mit <code>Registerkarten</code> Klasse für die Oberfläche mit Registerkarten oder die <code>Pillen</code> Klasse für die Pillenetiketten. Wie in der Navigationsleiste im vorherigen Abschnitt, fügen Sie das hinzu <code>aktiv</code> Klasse zu einem Listenelement wird es hervorheben.</p> <p>Verwenden Sie für den Tab-Umschalter etwas Ähnliches:</p> <pre><ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> <li>Sitzen</li> <li>Amet</li> </ul></pre> <p>Um stattdessen Pillen zu verwenden, tauschen Sie die obere Zeile gegen die folgende aus.</p> <pre><ul></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_16.png"> <hr> <h2>Seitennummerierung</h2> <p>Wir gehen jetzt zur Paginierung über, die funktionslos ist (wie die Tabs und Pillen), aber immer noch in Bootstrap dargestellt ist. Bootstrap behandelt Seitenumbrückungsschaltflächen auf denselben Registerkarten, und zwar in einer Liste, die dieses Mal in eine Liste eingeschlossen ist <code><div></code> mit dem <code>Seitennummerierung</code> Klasse. Jedes Listenelement kann eine verknüpfte Nummer (oder eine Ellipse) enthalten, mit Ausnahme des ersten und des letzten Elements, die für die vorherigen / nächsten Links reserviert sind. Diese haben die <code>vorheriges</code> und <code>Nächster</code> bzw. Klassen.</p> <p>Außerdem kann jede Schaltfläche durch Hinzufügen von deaktiviert werden <code>deaktiviert</code> Klasse und der aktive Link wird mit hervorgehoben <code>aktiv</code> Klasse. So wie:</p> <pre><div> <ul> <li>Vorige</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>Nächster</li> </ul> </div></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_17.png"> <hr> <h2>Warnungen und Fehlermeldungen</h2> <p>Warnbalken sind den Schaltflächen optisch sehr ähnlich, obwohl sie unterschiedlich aufgebaut sind. Jede Fehlermeldung ist ein <code><div></code> tag mit dem <code>Warnmeldung</code> Klasse. Es gibt vier verschiedene Nachrichtentypen, von denen jeder eine entsprechende Klasse hat, die ebenfalls hinzugefügt werden muss:</p> <ul> <li> <code>Warnung</code> für einen gelben Balken</li> <li> <code>Error</code> für eine rote Leiste</li> <li> <code>Erfolg</code> für eine grüne Leiste</li> <li> <code>Info</code> für eine blaue Leiste</li> </ul> <p>Warnmeldungen werden dann wie folgt geschrieben und wählen nur eine Klasse aus <code>Warnung / Fehler / Erfolg / Info</code>.</p> <pre><div> ? <p><strong>Lorem ipsum</strong> dolor sitzen amet, consectetur adipiscing elit.</p> </div></pre> <p>Nur zu Ihrer Information fügt die zweite Zeile des obigen Codes das "?" rechts von der alter-Nachricht, die mit einer Aktion verknüpft werden kann, die die Nachricht entfernt.</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_18.png"> <p>Alarme müssen auch keine einzeilige Angelegenheit sein. Wenn Ihre Nachricht über eine einzelne Zeile hinausgeht, fügen Sie einfach das <code>Blocknachricht</code> Klasse zu dem Code, den Sie für eine einzelne Zeile verwenden würden, während die anderen Typklassen verwendet werden.</p> <pre><div> × <p><strong>Lorem ipsum</strong> Fusce interdum euismod tempor? </p> </div></pre> <p>Diese Meldungen können auch Schaltflächen enthalten. Dies ist nützlich, wenn der Alarm mit einer Auswahl aufgelöst werden muss. Wenn Sie zu unserem Abschnitt über Schaltflächen zurückkehren, wissen Sie, wie Sie diese hinzufügen. Stellen Sie sicher, dass Sie die kleinen Versionen verwenden, indem Sie die <code>klein</code> Klasse auf den Button selbst und wickeln Sie ihn in ein <code><div></code> tag mit dem <code>Alert-Aktionen</code> Klasse.</p> <pre><div> × <p><strong>Lorem ipsum dolor sitzen amet!</strong> Fusce interdum euismod tempor? </p> <div> Lorem ipsum dolor Sitzen Sie amet </div> </div></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_19.png"> <hr> <h2>Modals</h2> <p>Modale können nützlich sein, um Informationen in bestimmten Szenarien anzuzeigen, die üblicherweise zur Eingabe von Daten verwendet werden, wie z. B. Benutzerinformationen oder Beiträge. Bootstraps Modal ist ziemlich einfach und ist in drei Abschnitte unterteilt. die Kopfzeile, den Körper und die Fußzeile. Zuerst beginnen wir mit dem Öffnen des Modals <code><div></code> tag und positionieren Sie es mit einigen Inline-Styles, die Bootstrap benötigt.</p> <pre><div></pre> <p>Innerhalb dieses Tags platzieren wir dann die drei Abschnitte, wobei der erste der Header ist. Der Header hat eine Klasse von <code>Modal-Kopfzeile</code> und enthält nur zwei Zeilen, eine <code><h3></code> Tag für den Titel und das (optional) verknüpfte "?" das kann angepasst werden, um den Popover zu schließen.</p> <pre><div> <h3>Lorem ipsum</h3> × </div></pre> <p>Als nächstes haben wir den Hauptinhalt des Inhalts. Es ist sehr einfach, nur eine zu sein <code><div></code> mit dem <code>Modal-Körper</code> Klasse und Ihre Inhalte im Inneren. Als so:</p> <pre><div> <p>Lorem ipsum dolor sitzen amet</p> </div></pre> <p>Schließlich haben wir die modale Fußzeile (eine andere <code><div></code>, diesmal mit der <code>modale Fußzeile</code> Klasse), die im Allgemeinen aus Schaltflächen besteht, aus denen Aktionen ausgeführt werden können. Diese werden auf dieselbe Weise generiert wie alle anderen Schaltflächen, die wir mit Bootstrap erstellt haben, und benötigen daher keine weiteren Erläuterungen.</p> <pre><div> Lorem ipsum dolor Sit Amet </div></pre> <p>Okay, ich habe gelogen. Das war nicht der letzte Schritt. Wir müssen das Original noch schließen <code><div></code>.</p> <pre></div></pre> <p>Wenn Sie alle diese Teile zu einem zusammenfügen, erhalten Sie ein hübsches modales Fenster. Wenn ich Sie immer wieder daran erinnere, übernimmt Bootstrap leider das Styling hier wörtlich. Der Modal erscheint nicht so, als wäre er überstürzt. Es wäre fantastisch, wenn Bootstrap erweitert werden würde, um zusätzlich zu CSS einige Funktionen zu haben, aber im Moment müssen Sie Ihre eigene generieren oder generieren.</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_20.png"> <hr> <h2>Abschließende Gedanken</h2> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_21.png"> <p>Das Bild oben zeigt unser endgültiges Design. Es besteht aus allen Elementen, die wir in diesem Lernprogramm erstellt haben (es gibt eine separate Demo für die Formularelemente), die vollständig in Bootstrap enthalten sind. Ich hoffe, dass dieser Artikel für Sie nützlich war, zumal es für manche schwierig sein kann, die mitgelieferte Beispielseite (die als einzige Dokumentation im Download enthalten ist) zu entschlüsseln..</p> <p>Ich liebe Bootstrap. Wenn Sie sich mit Webentwicklung noch nicht auskennen, bietet sie eine große Auswahl an Elementen, die Sie verwenden können, auch wenn Ihre Website durch eine Reihe von gemeinsam genutzten Elementen ein bisschen zu Twitter aussehen könnte. Die Einfachheit und Benutzerfreundlichkeit ist jedoch zu schwer zu ignorieren, wenn Sie nicht selbst schreiben möchten / können. Ich kann es kaum erwarten, einige dieser Sachen in einem neuen Projekt zu verwenden.</p> <hr> <h3>Zusätzliche Ressourcen</h3> <p>Weniger CSS, BluePrint und WP für schnellere Workflow-Schritte verwenden+<br>Schneller Tipp: Geben Sie niemals ein Hersteller-Präfix erneut Nettuts ein+<br>Bootstrap von Twitter ist der Dream Web AppStorm eines neuen Webdesigners<br>Bootstrap-Vorlagen für ThemeForest</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/webdesign">Web-Design</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/code/steps-to-becoming-a-quality-wordpress-theme-developer.html">Schritte zum Qualitäts-WordPress-Theme-Entwickler</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_14/steps-to-becoming-a-quality-wordpress-theme-developer.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/photography/stepping-into-the-fashion-photography-industry.html">Einstieg in die Modefotografie</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27_3/stepping-into-the-fashion-photography-industry_5.jpg');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessante Informationen und nützliche Tipps zur Programmierung. Website-Entwicklung, Webdesign und Webentwicklung. Photoshop-Tutorials. Erstellung von Computerspielen und mobilen Anwendungen. Werden Sie von Grund auf professioneller Programmierer. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Suche..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>

#