Share
Am 19th August 2015: Bootstrap 4 alpha wurde genau vier Jahre nach der ersten offiziellen Ankündigung von Bootstrap v1 veröffentlicht (was für ein Zufall?)..
Woohoo! Twitter Bootstrap, ein Open-Source-CSS / HTML-Framework von mir und @fat, ist gerade live gegangen: http://t.co/3OOsQ5T #kaboom
- Mark Otto (@mdo) 19. August 2011
Das allseits beliebte Front-End-Framework wurde komplett überarbeitet und als großer Fan von Bootstrap freue ich mich sehr, einige der neuen Funktionen in die Hände zu bekommen!
Die Bootstrap-HomepageNach rund einem Jahr Entwicklung haben sich 1.100 Commits und 120.000 Codezeilen geändert. Es gibt eine Menge Änderungen und neue Funktionen, über die wir sabbern können. Um Ihnen die Mühe beim Durchsuchen des Änderungsprotokolls zu ersparen, habe ich eine Liste von Funktionen zusammengestellt, die ich interessant fand.
Beginnen wir dort, wo jedes Framework anfängt, das Reset-Modul. Bootstraps neues Neustartmodul baut auf dem traditionellen auf normalize.css und jetzt werden alle generischen Elementselektoren und Reset-Stile in einer einzigen zugänglichen SCSS-Datei verschoben.
Sie werden auch einen raffinierten Trick bemerken, der die Tradition bestimmt Box-Dimensionierung: Border-Box zum html Element, dann global auf alle Elemente über Vererbung:
html Box-Sizing: Border-Box; *, *: before, *: after Box-Sizing: erben;
Dies ermöglicht uns, die Einstellung (falls erforderlich) besser zu überschreiben, ohne die Spezifität oder die Verwendung zu erhöhen !wichtig.
Dank geht an Jon Neal für die ursprüngliche Idee und CSS-Tricks für einen detaillierten Überblick über diese Methode.
Um die CSS zu rationalisieren, hat Bootstrap v4 alpha die IE8-Unterstützung und eine Reihe hackiger CSS3-Poly-Füllungen aufgegeben. Durch die Unterstützung von IE9 + konnten einige beliebte CSS-Module verwendet werden. Eine davon ist die Einheit rem (root em), die die Schriftgröße relativ zum Wurzelelement (html).
Wenn wir rem-Einheiten weiterführen, können wir wirklich in die responsive Typografie eintauchen. Da alle Schriftgrößen auf unserem Stammelement basieren, können Sie Medienabfragen erstellen, um die Größe an verschiedenen Haltepunkten zu ändern. Kombinieren Sie dies mit den neuen Gitternetzpunktmixins und voila!
Ein Beispiel für die Änderung der Schriftgröße auf unserer Website, wenn diese auf extra kleinen Geräten angezeigt wird:
html font-size: 16px; // Erstellt eine Medienabfrage für extra kleine Geräte (0 - 34em) @include media-breakpoint-up (xs) html font-size: 18px;
Lesen Sie mehr in Kezz Braceys umfassendem Leitfaden: Wann sollten Sie Em vs. Rem verwenden?.
Standardmäßig unterstützt Bootstrap v4 Flexbox nicht, sondern verwendet traditionellere Float- oder Anzeigetabellenmethoden. Das Fehlen einer Standard-Flexbox-Integration hilft bei der Unterstützung von IE9 +. Wenn Sie jedoch bereit sind, auf diese Unterstützung zu verzichten und sie auf IE10 + zu erhöhen, können Sie Flexbox für Ihr gesamtes Projekt aktivieren. Dazu wird die boolesche Variable in der Datei _variables.scss geändert. Ihr kompiliertes CSS enthält jetzt Flexbox-Stile. Flexbox wird nicht nur im Raster verwendet, sondern auch in verschiedenen anderen Elementen, einschließlich der neuen Kartenkomponente, Eingabegruppen und Medienkomponenten.
Sehen wir uns ein Beispiel an, wo uns Flexbox hilft. Oft habe ich eine Reihe von Inline-Spalten (siehe Abbildung unten), bei denen der Inhalt einer Spalte die Höhe der anderen Spalten übersteigt. Ein klassisches CSS-Dilemma. Die Aktivierung von Flexbox bietet den vielen Vorteilen, dass wir die Höhe der Säulen zwingen können. Es ist kein zusätzliches CSS erforderlich!
Ohne Flexbox
Mit FlexboxAch ja, btw-Bootstrap 4 wird in SCSS sein. Und wenn Sie sich interessieren, wird v5 wahrscheinlich in PostCSS sein, denn heiliger Mist, der cool klingt.
- Mark Otto (@mdo) 23. April 2015
SCSS hat LESS als CSS-Präprozessor der Wahl für Bootstrap v4 verwendet. Die gesamte CSS-Codebasis wurde als SCSS umgestaltet, wobei zum Zeitpunkt des Schreibens kein offizieller LESS-Port vorhanden war. Mark erklärte einige seiner Gründe in einem Tweet:
Wenn Sie Gründe haben wollen: mehr Leute benutzen SCSS, libsass ist verrückt schnell, Syntax ist explizit klarer, und ich bin faul und benutze SCSS bei GitHub.
- Mark Otto (@mdo) 23. April 2015
Wenn Sie ein großer Fan des ursprünglichen LESS-Builds sind, hat Mark um Hilfe beim Erstellen und Warten des LESS-Ports gebeten.
Bootstrap v4 hat seine Komponenten mit dem Entfernen des Klassikers aufgeräumt Gut, Panel und Miniaturansicht Komponenten. An ihrer Stelle eine neue Komponente: Karten!
Die neue Kartenkomponente hat die vertrauten Aspekte von Panels, wie Titel, Kopf- und Fußzeilen, und rollt sie in einen sauberen und flexiblen Inhaltscontainer.
Und es gibt noch mehr:
Sie können einen Kartenhintergrund mit einem Bild festlegen und den Text der Karte und anderen Inhalt überlagern. Dies geschieht ohne zusätzliches CSS, indem Sie das folgende Element in Ihre Karte einfügen:
Klasse hinzufügen Karteninverse setzt die Schriftfarbe auf Weiß, sodass Sie bei Bedarf einen dunkleren Hintergrund einstellen können.
Apropos Hintergründe: Die traditionellen Farbvarianten können auch auf die Karte angewendet werden und den Hintergrund entsprechend gestalten. Zum Beispiel, Kartenprimär setzt die Karte auf die Primärfarbe, so weiter und so fort.
Neben dem Standardraster mit Rinnen haben Sie auch die Möglichkeit, Karten zusammenzufassen, den Abstand dazwischen zu entfernen und dann jede Spalte auf eine einheitliche Höhe einzustellen. Standardmäßig wird dies durch Verwendung von erreicht Anzeige: Tabelle und Tabellenlayout: behoben, Wenn Sie jedoch Flexbox aktiviert haben, wird es verwendet Anzeige: Flex stattdessen.
Die Kartenkomponente wird auch mit einer mauerwerkähnlichen Säulenkonfiguration geliefert, die es ermöglicht, dass Karten auf der Grundlage des verfügbaren vertikalen Raums dicht beieinander liegen. Diese Option ist wird in IE9 nicht unterstützt-es erfordert IE10 und höher!
In früheren Versionen von Bootstrap sind verschiedene Klassen enthalten, die als "Dienstprogrammklassen" bezeichnet werden, um eine schnelle und einfache Anpassung des Inhalts außerhalb komponentenspezifischer Stile zu ermöglichen. Normalerweise wurde dies auf einige grundlegende Änderungen beschränkt, z.nach links ziehen, nach rechts ziehen), Farbe (.primärer Text etc), clearfix (.Clearfix) und ein paar andere.
In Bootstrap v4 alpha haben wir Zugriff auf eine ganze Reihe neuer Dienstprogrammklassen rund um das Auffüllen und die Ränder. Diese möglicherweise kontroverse Maßnahme ermöglicht es Benutzern von Bootstrap v4, Inhalte innerhalb einheitlicher Schritte schnell zu verschieben und auszurichten. Einige Benutzer sind der Meinung, dass Dienstprogrammklassen nur einen Schritt von Inline-Stilen entfernt sind. Sie bieten jedoch die Möglichkeit, eine Komponente schnell und einheitlich zu gestalten, ohne dafür einen speziellen Selektor zu erstellen.
Die Klassen für die Margin- und die Auffüllfunktion werden in Vielfachen eines einheitlichen Abstandhalterwerts erstellt. zum Beispiel:
// $ spacer ist eine sass-Variable, die 1 rem oder 16px entspricht .m-a-0 margin: 0! important; .m-a margin: $ spacer! important; .m-a-md margin: ($ spacer * 1.5)! important; .m-a-lg margin: ($ spacer * 3)! important;
Hier .m-a steht für mArgin auf einll Seiten. Es gibt Klassen für einzelne Seiten, Achsen und unterschiedliche Größen (wie durch gekennzeichnet -0, -md und -lg) und zum Auffüllen.
Hier sehen Sie einige der anderen Klassen:
// An allen Seiten eine Standardauffüllung anwenden .p-a Auffüllung: $ spacer! Important; // Übernehmen Sie die Standardauffüllung auf die Oberseite .p-t padding-top: $ spacer-y! Important; // Wenden Sie die Standardauffüllung auf die rechte Seite an .p-r Auffüllung-rechts: $ spacer-x! Important; // Wenden Sie die Standardauffüllung auf die Unterseite an .p-b Auffüllung unten: $ spacer-y! Important; // Wenden Sie die Standardauffüllung auf die linke Seite an .p-l padding-left: $ spacer-x! Important; // Wenden Sie die Standardauffüllung auf die x-Achse (rechts und links) an .p-x padding-right: $ spacer-x! Important; Polsterung links: $ spacer-x! wichtig; // Wenden Sie die Standardauffüllung auf die y-Achse (oben und unten) an .p-y padding-top: $ spacer-y! Important; Polsterung unten: $ spacer-y! wichtig;
Die Idee dabei ist, die Anzahl sehr spezifischer benutzerdefinierter Klassen zu reduzieren, die erstellt wurden, um den Inhalt zu verschieben, statt sie in eine einheitliche und konsistente Methode der Inhaltsausrichtung zu rollen.
Ich habe mich mit Mark Otto (@mdo Co-Creator von Bootstrap) auf ihrem öffentlichen Slack-Kanal unterhalten und die Verwendung dieser Klassen besprochen. Er sagte:
„Wir haben sie benötigt und oft die Standardwerte für viele Komponenten überschrieben. Margin und Padding scheinen die am häufigsten überschriebenen Eigenschaften zu sein (zusammen mit Farbe und Schriftart). "- Mark Otto
Es gibt buchstäblich Hunderte von neuen Funktionen und Updates für die vorhandene Codebasis, zu viele, um sie detailliert zu besprechen. Hier sind ein paar mehr, die nicht meine Hauptliste waren, aber trotzdem erwähnenswert sind.
Die Bootstrap v4-Dokumentation wurde aktualisiert. Es gibt eine etwas andere Struktur, in der die Funktionen unterteilt sind Layout, Inhalt und Komponenten. Was mir an der neuen Dokumentation sehr gut gefällt, ist, dass jede Komponente über eine eigene Seite verfügt, so dass es einfach ist, auf sie zu verlinken und die Größe der Seite zu verändern, um die Reaktionsfähigkeit zu testen.
Bootstrap 4 hat eine neue Grid-Ebene für kleinere Geräte (unter 480px). Dieser Haltepunkt hat den Namen der vorherigen kleinsten Klasse (.col-xs-XX). Dabei sind alle Rasterebenen um eine Stufe nach oben gerückt, wodurch eine neue, größte Stufe erstellt wurde .col-xl-XX für den vorherigen lg.
Wie bereits bei der Konvertierung in rem und em erwähnt, hat das Bootstrap-Team neue Mixins hinzugefügt, um Breakpoints schnell um die vorhandenen Breakpoints herum zu erstellen. Sie können mit der folgenden Syntax verwendet werden:
// Erstellt eine Medienabfrage: @media (min-width) @include media-breakpoint-up (xs) … @include media-breakpoint-up (sm) … @include media-breakpoint-up (md) … @Include media-breakpoint-up (lg) … @include media-breakpoint-up (xl) … // Erstellt eine Medienabfrage: @media (max-width) @include media-breakpoint-down (xs) … @include media-breakpoint-down (sm) … @include media-breakpoint-down (md) … @include media-breakpoint-down (lg) … @include media-breakpoint -down (xl) …
Glyphicons wurden aus dem Build entfernt. Die Bootstrap 4-Dokumentation enthält möglicherweise Anweisungen zum Einbinden von Icon-Packs von Drittanbietern wie Font Awesome und Octicons.
Alle JavaScript-Plugins wurden in ES6 neu geschrieben, um die neuesten Spezifikationen zu nutzen. Möglicherweise stellen Sie fest, dass einige Plugins entfernt wurden (z. B. das Affix-Plugin), während sie die neue Bibliothek neu schreiben und ausbauen.
Das ist meine Liste einiger cooler Neuerungen, die in Bootstrap 4 alpha hinzugefügt wurden. Wenn Sie das gesamte Änderungsprotokoll abrufen möchten, werfen Sie einen Blick auf @ mdo's git pull-Anfrage für Bootstrap 4.
Ich bin mir sicher, dass es noch eine Menge Änderungen geben wird, während das Team alle Knicke ausarbeitet. Ihr Entwicklungsplan umfasst die folgenden Meilensteine
Es gibt kein Wort darüber, wann diese veröffentlicht werden, ähnlich wie bei den vorherigen Builds, wenn die Bibliothek fertig ist. Holen Sie sich in der Zwischenzeit Bootstrapping und helfen Sie ihnen, Probleme zu verfolgen, und geben Sie allgemeines Feedback über ihren Bug-Tracker!
Accentsconagua
