Share
Ok, also vor ein paar Wochen, zu seinem zweijährigen Bestehen, gaben Mark Otto und die übrigen Verantwortlichen für die Entwicklung und Wartung von Bootstrap die offizielle Veröffentlichung der dritten Version des Frameworks bekannt und kamen auf Steroide. Mal sehen, was wir bekommen.
Zunächst einmal sind die wichtigsten Änderungen, die Sie in der neuen Bootstrap-Version finden werden, die Unterstützung für responsive Websites. In der Tat wurde das responsive Modul entfernt. Nun, von Grund auf Bootstrap ist mehr als das, diese neue Version folgt dem Ansatz von "Mobile First", was bedeutet, dass fast alles neu gestaltet wurde, um von einer geringeren Bildschirmgröße und einem größeren Maßstab zu beginnen (mehr dazu in Kürze).
Fast alles wurde umgestaltet und neu aufgebaut, um von Ihren Handheld-Geräten zu starten und die Größe zu erhöhen.
Im Look & Feel werden Sie auch viele Änderungen feststellen, was deutlich zum Ausdruck kommt, dass der gesamte Stil flach geworden ist, und es gibt ein optionales Thema für einen 2.0-er-Look. Darüber hinaus haben sich die Symbole von Bildern zu einer Schriftart entwickelt, was sich sehr praktisch für unterschiedliche Größen und Farben eignet.
Fangen wir an, über das Gittersystem zu sprechen, oh das Gitternetz, in der Tat gibt es vier Gittersysteme in dieser neuen Version von Bootstrap, von denen jedes genau gleich funktioniert und sich durch die Breite der Bildschirmgröße unterscheidet, bei der sie arbeiten.
Damit das Grid-System ordnungsgemäß funktioniert und das Rendern und Zoomen durch Berühren sichergestellt ist, fügen Sie das Viewport-Meta-Tag zu Ihrem Dokument hinzu:
In dieser neuen Version des Frameworks gibt es vier Rastersysteme, wobei die Breite des Ansichtsfensters der Parameter ist, der sie unterscheidet. Die Breiten, die die Grenzen zwischen einander festlegen, lauten wie folgt:
Und für jedes der verschiedenen unterstützten Ansichtsfenster gibt es eine bestimmte Klasse, um es anzusprechen:
Um das Rastersystem nutzen zu können, benötigen Sie ein Containerelement mit einer Klasse "Container", und in einem zweiten Behälter mit einer Klasse "Reihe". Beachten Sie, dass in beiden Fällen das Suffix "Fluid" verschwunden ist, im Gegensatz zu Bootstrap 2. Und im zweiten Container würden Sie Ihre Spalten platzieren.
col-xs-6col-xs-6
Wie bereits erwähnt, verfügt diese neue Version von Bootstrap über einen Mobile First-Ansatz. Dies bedeutet, dass die Spalten mit einem Suffix der Klasse mit einem "xs" sind immer wird horizontal verschoben, unabhängig von der Größe des Ansichtsfensters. Wenn Sie sagen würden, verwenden Sie Spalten mit vorangestelltem "md" und der Darstellungsbereich war weniger als 992px breit (sogar 991px), diese Spalten werden mit einer Breite von 100% übereinander gestapelt, wie im nächsten Beispiel.
col-md-4col-md-4col-md-4
Wenn diese Seite in einem Ansichtsfenster mit mindestens 992 Pixeln angezeigt wird, sieht sie folgendermaßen aus:
Wenn Sie dieses Dokument in einem Ansichtsfenster von höchstens 991px sehen, würde es wie folgt aussehen:
Sie können auch Klassen kombinieren, um Ihre Elemente bei einer bestimmten Ansichtsfenstergröße zu adressieren. Wenn Sie beispielsweise im folgenden Beispiel die ersten beiden Säulen in kleinen Geräten nebeneinander schweben lassen möchten (sm) und auf Handys gestapelt, können Sie das hinzufügen col-sm-6 in Ergänzung zu col-md-4 Klasse.
col-sm-6 col-md-4col-sm-6 col-md-4col-sm-6 col-md-4
Öffnen Sie in diesem Fall die Seite in einem Ansichtsfenster, das größer als 991 Pixel ist, werden drei gleiche Spalten nebeneinander angezeigt, genau wie im letzten Beispiel. Wenn Sie es jedoch in einem Ansichtsfenster mit einer Breite zwischen 768px und 991px sehen, erhalten Sie folgendes Ergebnis:
Wie im obigen Beispiel können Sie Spalten in vielen verschiedenen Kombinationen kombinieren und verschachteln, um sehr komplexe Layouts zu erstellen. Das Rastersystem in Bootstrap hat noch viel mehr zu bieten, aber es würde eine Weile dauern, bis Sie alle Details ausführlich besprechen. Für einen tieferen Einblick in das System empfehle ich Ihnen dringend, sich die Dokumentation anzusehen.
Die meisten Klassen für den Basis-CSS-Teil von Bootstrap sind gleich geblieben. Es gibt jedoch einige Änderungen, die bei der Verwendung dieser neuen Version berücksichtigt werden müssen.
Der Code als Ganzes wurde neu geschrieben und Variablennamen wurden geändert. Wenn Sie sich die .less-Dateien ansehen, werden Sie feststellen, dass alle Variablen im Framework von gewechselt sind camelCase Bindestriche für die Worttrennung verwenden, und jeder Variablenname wurde in einem "standardisiert"Elementzustand-Pseudo-Zustand"Ansatz. Was bedeutet dies, dass elementspezifische Stile wie:
Jetzt wird das Element vorangestellt, auf das sie angewendet werden. In dieser neuen Version von Bootstrap würde die vorherige Liste verwendet.
Gleiches gilt für Listen mit einem "in der Reihe"Stil auf sie angewendet. Einige andere Änderungen in den Variablennamen, die in den Klassen, die wir aus früheren Tagen kannten, reflektiert werden, beziehen sich auf die Größe, z. B. mit Schaltflächen, in Version 2. * Sie hätten:
Diese Größen-Suffixe wurden geändert, um mit der allgemeinen Benennungskonvention übereinzustimmen. Dies ist die gleiche wie für das Grid-System. Die vorherige Schaltflächendeklaration für Version 3 lautet daher:
Gleiches gilt auch für Eingangsgrößen und Sichtbarkeitserklärungen.
Die allgemeine Syntax und das Layout für die Tabellen bleiben in dieser Version des Frameworks gleich, aber dem gesamten "Mobile First" -Paradigma treu, haben wir es jetzt getan responsive Tabellen in dieser Iteration von Bootstrap. Um dies zu nutzen, wickeln Sie einfach die gesamte Tabelle in einen Container mit der Klasse "Responsive-Tabelle"Dies bewirkt, dass die Tabellen in kleinen Geräten horizontal verschoben werden (< 768px).
…
Und die resultierende Tabelle:
Formen
In der CSS-Abteilung finden Sie in den Formularen die wichtigsten Unterschiede. Für den Anfang wird jede Eingabe in einem Formular in Bootstrap 3 jetzt als "Block" -Element mit einer Breite von 100% angezeigt. Die "size" -Attribute, die Sie mit einer Klasse in Formularsteuerelementen ändern können, beziehen sich auf die Auffüllung und Schriftgröße des Elements und nicht auf die Breite, um zu steuern, dass Sie es in einen Container der gewünschten Breite einfügen müssen.
Das Markup für die Formulare hat sich in der einfachsten Form in Version 2 geändert. * Ein Formular würde ungefähr so aussehen.
Das Markup für dasselbe Formular in der neuen Version fügt der Eingabe selbst ein zusätzliches Element und eine Klasse hinzu und lautet wie folgt.
Bootstrap wurde unter Berücksichtigung der Barrierefreiheit erstellt. Dies ist der Grund für das Hinzufügen des Attributs "role". Beachten Sie außerdem, dass die Kombination aus Label und Eingabe in einem Wrapper mit der Klasse "" eingeschlossen ist.
Gruppe formen"Und wie alles andere hat dies mit der Reaktionsfreudigkeit des Rahmens zu tun.Das Suchformular ist in dieser Version nicht mehr vorhanden, und da alle Eingaben und Textbereiche standardmäßig 100% breit sind, muss bei Inline-Formularen besondere Beachtung gefunden werden. Der Markup für diese Einträge ist jedoch fast identisch mit dem des vorherigen Formulars.
Beachten Sie das Hinzufügen der Klasse "
Inline-Formular"zum Formularelement und das von"Nur Herr"In Bezug auf das Label bezieht sich diese letzte Klasse auf den Accessibility-Teil des Frameworks. Die Verwendung eines Labels ist bei Inline-Formularen optional, jedoch sehr ermutigt und schadet niemandem. Und übrigens das"Nur Herr" steht für Nur Bildschirmleser. Bildschirmleser werden das Etikett finden und dem Benutzer "sagen".Um ein horizontales Formular zu erstellen, legen Sie einfach die Breite der Beschriftung fest, indem Sie "col-md-" oder "
_sm"oder was auch immer und die entsprechende"Kontrolletikett"Klasse, genau wie bei Version zwei., und wickeln Sie dann die Eingabe in einen Container mit der angegebenen eigenen Spaltenbreite ein.Und die daraus resultierende Form.
Es gibt einige andere Änderungen, die in Bezug auf Formulare vorgenommen wurden, wie das Entfernen von "
Eingabe-Voranstellen" und "Eingabe-Anhängen"Klassen für"Eingabegruppe" und "Eingabegruppen-Addon". Allerdings gibt es noch einiges mehr zu berichten, deshalb lesen Sie bitte die Dokumentation.Glyphicons
Ein weiterer Bereich, in dem Sie wichtige Änderungen finden werden, sind die Symbole des Frameworks. Die Symbolbibliothek enthält 40 neue Glyphen, und nicht nur das, sie haben von der Verwendung von Bildern zu Schriftarten gewechselt. Daher müssen Sie jetzt die beiden "Glyphicons- *" - Bilder zu Ihren "hinzufügen".
img"Ordner, müssen Sie die vier" Glyphicons "Schriftarten zu Ihrem" hinzufügenSchriftarten"Verzeichnis und ja, vier von ihnen. Dies hat mit der Kompatibilität des Browsers zu tun.Aus Leistungsgründen erfordert jedes Symbol eine Basisklasse und eine Symbol-spezifische Klasse. So fügen Sie ein Benutzersymbol hinzu, das Sie verwenden würden:
Durch den Wechsel von Bildern zu Schriftarten können Sie die Farbe und Größe der Symbole festlegen und die Standardsymbole durch einige benutzerdefinierte Symbole ersetzen. Wenn Sie sich fragen, wo Sie solche Zeichensymbole finden, ist Fontello eine großartige Ressource.
JavaScript-Komponenten
Obwohl die JavaScript-Komponenten in Bootstrap 3.0 überarbeitet und neu erstellt wurden, behalten sie dieselben Namen und Verwendung. Mit ein paar leichten und nicht so sanften Unterschieden.
Modals
Eines der am häufigsten verwendeten Plugins in Bootstrap ist Modals. Sie werden feststellen, dass es ziemlich ähnlich ist, mit den Unterschieden, dass die Container "Modal-Header", "Modal-Body" und "Modal-Footer" nicht in einen "Modal-Inhalt" innerhalb eines "Modal-Dialogs" eingeschlossen sind. Container. Was war also früher:
Änderungen an:
Ja, es ist ein wenig mehr Markup, aber es verbessert die Reaktionsfähigkeit der Komponente und erlaubt es auch, den gesamten Ansichtsbereich zu scrollen, anstatt einen "max-height" -Parameter zu haben.
Um sie über JavaScript auszulösen, verwenden Sie dieselbe Methode wie zuvor.
$ ('# my-modal') .modal ('show');Der Rest der Plugins bleibt größtenteils gleich. Das Akkordeon ist in einer besonderen Hinsicht zugunsten von zusammenklappbaren Platten, sie funktionieren ziemlich gleich und haben eine sehr ähnliche Syntax. Bei einigen Klassen, die sich ein wenig ändern, benötigen sie immer noch das Plug-In für die Übergänge und keine zusätzlichen Container.
Das Typeahead-Plugin ist auch zugunsten des Typeahead-Plugins von Twitter aus Bootstrap verschwunden.
Veranstaltungen
JavaScript-Events haben jetzt einen Namensraum, aber was bedeutet für Sie? Nun, in Bootstrap zwei, auf den Moment zu hören, wenn eine Warnung auf Ihrer Site war "
schließen", würden Sie hinzufügen:$ ('# my-alert') .bind ('close', function () );In dieser dritten Version hat sich der Ereignisname geändert, er hat einen Namensbereich für das Framework, der vorherige Ausschnitt wäre also:
$ ('# my-alert') .bind ('close.bs.alert', function () );Sehen Sie sich die restlichen JavaScript-Komponenten an, die Bootstrap zu bieten hat (die noch von jQuery abhängig sind)..
Neue Komponenten
Der CSS-Teil des Frameworks enthält einige neue Komponenten, Gruppen auflisten und Platten.
Gruppen auflisten
Listen Sie Gruppen aus der offiziellen Dokumentation auf.
… Sind eine flexible und leistungsstarke Komponente, um nicht nur einfache Elementlisten anzuzeigen, sondern auch komplexe mit benutzerdefinierten Inhalten.
Um eine Listengruppe zu erstellen, erstellen Sie einfach eine ungeordnete Liste mit einem "
Listengruppe"Klasse und fügen Sie die"Listengruppenelement"zu jedem Listenelement.
- Lorem ipsum…
- Dolor sitzen…
Sie können das "hinzufügen"
aktivWenn Sie ein Badge in der Liste platzieren möchten, wird es vertikal zentriert und nach rechts, innerhalb des Elements, ausgerichtet. Gehen Sie voran und probieren Sie es aus.Panels
Panels sind ein Weg zu einklemmen Um einige Inhalte Ihrer Website oder Anwendung zu markieren, markieren Sie sie und geben Sie ein Gefühl der Einheit. Das Panel-Markup ist ziemlich einfach und der Inhalt kann mit verschiedenen Elementen kombiniert werden, um ein einzigartiges Erscheinungsbild zu erzielen.
Panels können Kopf- und Fußzeilen haben und erhalten bei den bekannten "" eine besondere Bedeutung.
Erfolg","Error","Warnung"usw. Klassen. Zum Beispiel.Panel-ÜberschriftEinige Inhalte hier
- Lorem ipsum…
- Dolor sitzen…
Wie Sie sehen, funktionieren Panels gut mit Listengruppen und auch mit Tabellen ohne Rahmen.
Customizer
Ebenfalls neu in dieser Version ist der Customizer, in dem sich nicht nur das Aussehen geändert hat, sondern auch viel besser organisiert ist und Sie z. B. die Ansichtsfensterbreite steuern können, bei der ein bestimmtes Rastersystem die Kontrolle übernimmt.
Wie immer können Sie alle Schriftarten und -farben einstellen. Es ist ein riesiges Thema für sich, also würde ich Sie dazu ermutigen, alleine zu gehen und sich damit zu beschäftigen.
Browser-Unterstützung
Der Internet Explorer hat uns allen lange Zeit das Leid gebracht, seine Version sechs war ein absoluter Alptraum, und seine Vorgänger haben immer noch großen Nachholbedarf. In Version 2. * Das Bootstrap-Team unterstützte weiterhin die Version 7 des Microsoft-Browsers. In dieser neuen Iteration des Frameworks ist die Unterstützung für IE sieben sowie für Mozilla Firefox 3.6 und darunter nicht mehr vorhanden.
Bootstrap unterstützt insbesondere die neueste Version aller gängigen Browser (Safari, Opera, Chrome, Firefox und IE) unter Windows und Mac, wenn beide vorhanden sind.
Für IE unterstützt es Version acht und weiter und obwohl der Browser einige Eigenschaften nicht gibt, z. B. "
Grenzradius", das Framework ist nur mit einigen geringfügigen Unterschieden beim Aussehen und Verhalten voll funktionsfähig. Außerdem erfordert IE acht respons.js für die Unterstützung von Medienabfragen.So erhalten Sie eine detaillierte Liste der Problemumgehungen und Gotchas für die verschiedenen Browser (Husten Internet Explorer Husten) schauen Sie sich die offiziellen Dokumente an.
Fazit
Bootstrap war von Anfang an ein hervorragendes Werkzeug für das schnelle Prototyping und die Erstellung großartiger Websites und Webanwendungen. Diese dritte Version unterscheidet sich nicht. Wenn Sie nur einen Grund dafür benötigen, würde ich mich definitiv für das Grid-System entscheiden. Angesichts des Wachstums des mobilen Browsens und der ständig wachsenden Ansichtsfenstergröße ist die Reaktionsfähigkeit heute ein Muss, mehr denn je. Und in dieser neuesten Version strahlt Bootstrap am meisten.
Wenn Sie beim Einstieg Hilfe benötigen, probieren Sie eine der benutzerfreundlichen Bootstrap-Vorlagen aus, die auf Envato Market erhältlich sind.
Accentsconagua
