Was ist neu an Bootstrap 4 geändert?

Fast jeder hat Bootstrap auf diese Weise mindestens ein- oder mehrmals verwendet.

Es basiert auf Themen für Websites, Prototypen und bekannte Millionen von Bootstrap-CMS wie WordPress. Das Framework ist einfach zu installieren, benutzerfreundlich und äußerst zeitsparend. Es basiert auf hochwertigem HTML, CSS und JavaScript.

CSS-Medienabfragen, egal wie effizient sie sind, sind Geräte, die Telefone, Tablets oder Laptops verwenden, sodass Benutzer Websites und Apps mit einer einzigen Codebasis erleben und skalieren können. Es hat leicht anwendbare Komponenten. Mit dem System, Modellen, Galerien, Tipps, faltbaren Tab-Systemen, Dropdown-Menüs, Schaltflächen und vielem mehr:

Der Zweck dieses Artikels ist es, die Innovationen von Bootstrap 4 zu beschreiben. Um anzuzeigen, was für uns neu ist. Die Alpha-Version von Bootstrap 4. ist keine Demo, Bootstrap 4 fehlt völlig stabil. Darüber hinaus können sich einige Funktionen ändern, sodass sie derzeit nicht in der Produktion verwendet werden sollten. Bisher vorgenommene Verbesserungen umfassen jedoch einen detailliert erläuterten Rahmen. Ich habe eine gute Vorstellung von den neuen Funktionen und werde Ihnen bei der zukünftigen Arbeit helfen, die sehr hilfreich sein wird.

Bevor wir mit dem Thema beginnen, in dem die neuen Funktionen von Bootstrap 4 vorgestellt werden, lassen Sie uns einen kurzen Überblick über die neuesten Updates geben.

Bootstrap kurze jüngste Geschichte

Am 19. August 2015 feiert der veröffentlichte Bootstrap anlässlich seines vierten Geburtstages ein relativ großes Team. Für das erste Alpha von Bootstrap 4. Das wichtigste mit Bootstrap 3 verbundene Bedürfnis ist, dass Internet Explorer 8 nicht auf präzises Downgrade und CSS-Interrupt oder Fallbacks angewiesen ist.

O seit der Zeit, als die Balgbulletins befolgt wurden; Am 8. Dezember 2015 wurde Alpha 2 Bootstrap, Bootstrap 4, am 27. Juli 2016, Alpha 3 und am 19. Oktober 2016, Bootstrap 4, Alpha 4, und die letzte gültige Verpflichtung (Bootstrap 3.3.7) wurde am 25. Juli 2016 offiziell gestartet.

Dank dieser Updates (und der erstaunlichen Hilfe der Bootstrap-Riesen-Community), Verbesserungen, Fehlerkorrekturen und Evaluierungsverbesserungen.

WAS IST NEU IN BOOTSTRAP 4?

Bootstrap basiert auf diesen Standards: HTML5, CSS3, JavaScript und Sass. In den letzten Jahren haben Front-End-Entwickler dies in ihre gemeinsamen Projekte übernommen und stattdessen eine Präferenz für Az Sass aufgezeigt. In allen zuvor veröffentlichten Versionen wird Bootstrap weniger häufig als eigener Präprozessor verwendet.

Ab Version 3 wurde Bootstrap durch Erstellen eines Sass-Ports beibehalten.

4 Boot verwendet es jetzt standardmäßig und Libsass verwendet die C / C ++ – Anwendung als Sass-Compiler, um sehr schnell zu kompilieren. Wenn Sie mehr über die „Konkurrenz“ zwischen Curious und Az und Sass wissen und die Gründe für die letzte Wahl des riesigen Teams herausfinden möchten, dessen Codebasis sich ändert, empfehlen wir Ihnen, unseren Artikel „Warum 4 Bootstrap Sass“ zu lesen.

Lassen Sie uns nun herausfinden, was Bootstrap 4 zu bieten hat.

Modifikatorklassen befinden sich in Bootstrap 4, das ähnliche Funktionen wie diese Komponenten bietet. Bei Karten als Karte wurden das Bedienfeld, die Miniaturansicht und die .wellsclasses ersetzt.

Flexibler und erweiterbarer Inhaltscontainer. Es enthält eine breite Palette an Inhalten, Optionen für Kopf- und Fußzeilen mit kontextbezogenen Hintergrundfarben und leistungsstarken Anzeigeoptionen.

Karten können einzeln, gruppiert oder gleich hoch sein. Wie bereits erwähnt, habe ich ein Beispiel erstellt, das dieselbe visuelle Komponente für Miniaturbild-Bootstrap 3 und Karten-Bootstrap 4 zeigt, die mit mir zum Ersetzen von Teilen erstellt wurden. So kann ich Ihnen eine bessere Vorstellung von den Karten geben.

Der mit Bootstrap 3 entwickelte Code wird unten gezeigt:

<div class = ”thumbnail”>

<img src = „https://placehold.it/350×150“ alt = „“>

<div class = ”caption”>

<h3> Bootstrap 4 </ h3>

<p> Die neue Version von Bootstrap ist unglaublich. Sie sollten es auf jeden Fall versuchen! </ P>

<a href==## week class=reakbtn btn-primarykopi role=reakbuttonkopi> Download </a>

</ Div>

</ Div>

Das führt zu:

Vorschaubild Wie sieht es aus mit Bootstrap 3?

Der mit Bootstrap 4 erstellte Code lautet wie folgt:

<div class = ”card”>

<img class = ”card-img-top” src = ”https://placehold.it/350×150 ″ alt =” ”>

<div class = ”Kartenblock”>

<h3 class = ”card-title”> Bootstrap 4 </ h3>

<p class = ”card-text”> Die neue Version von Bootstrap ist unglaublich. Sie sollten es auf jeden Fall versuchen! </ P>

<a href==## week class=reakbtn btn-primarykopi role=reakbuttonkopi> Download </a>

</ Div>

</ Div>

Bootstrap 4-Code verursacht:

Wie Bootstrap 4-Karten ausgewählt

Wie Sie sehen können, ist die Formatierungsanforderung zum Lösen der Ergeblichen Qualitätssicherung. cardComponent Einige einige Besondere Klassen, stirbt liegt an einem Sein wird. Müssen hinaus werden Bootstrap 3-Images standardmäßig zentriert.

Neue Schaltflächenstile

Die Tasten haben einen brandneuen Stil. Sie gehen definitiv „flach“ und entfernen ihre Passagen. Zusätzlich wurden BTN-Gliederungs- * Klassen eingeführt.

Sie können sehen, wie sie sich im Laufe der Zeit ändern und Unterschiede im folgenden Beispiel aufweisen. Angesichts des folgenden HTML:

<button type = ”button” class = ”btn btn-primary”> Primär </ button>

<button type = ”button” class = ”btn btn-kontur-primär”> Primär </ button>

<button type = ”button” class = ”btn btn-sekundäres btn-lg”> Große Schaltfläche </ button>

<a href==##LAMA class=reakbtn btn-secondary btn-lg activereak role=reakbutton ™ aria-pressed=reaktrue> Link </a>

<button type = ”button” class = ”btn btn-lg btn-primary” deaktiviert> Primary button </ button>

So sehen Schaltflächen in Bootstrap 3 aus:

Wie die Schaltflächen Bootstrap 3 aussehen

Und der neue Look in Bootstrap 4:

Wie die Schaltflächen in Bootstrap 4 aussehen

Typografieänderungen

Bootstrap 4 bedeutet die neue Standardschriftgröße von 16 Pixel, die Textgröße ist größer und sichtbarer (dies war früher 14 Pixel).

Auch diese neue Version soll mehr von allem sein. Schriftgröße und Rastersystem: Dank seiner wichtigen Ausstattung basiert es auf Dynamik als Rems. Denken Sie daran, dass Sie weiterhin Pixel, EMS oder Punkte für die Typografie verwenden können, wenn Sie dies wünschen. Die Schriftgröße von Bootstrap 4 basiert jedoch vollständig auf der Rem-Einheit. Der Grund für diese Änderung macht das Skalieren für Remmobile-Geräte einfach.

Wenn Sie über den Artikel sprechen, ist es wichtig, sich daran zu erinnern, dass das Boot 4 Glyphicons-Symbol die Schriftart ist. Wenn Symbole erforderlich sind, schlägt das Entwicklerteam die folgenden Optionen vor:

Up Version Glyphicons

Oktikonen

Super Artikel

max-widt einstellbare rems. Verwenden Sie rems wie jetzt, gelten Sie für beide Rastersysteme

BILDTITEL

Rems, Bildschirmtitel wurde verwendet, um eine neue typografische Komponente einzuführen. 3 sind bereits unterstützte Klassen wie Bootstrap h1, h2ons, um Titel so anzuzeigen, als ob und so weiter. 4 Bootstrap erhöht die Wahrscheinlichkeit für Entwickler, indem diese neue Komponente angewendet wird, die verwendet werden sollte, wenn ein vorgestellter Titel der Seite benötigt wird.

4 Vier unterschiedlich große Anzeige-Header, die das Booten unterstützen (display- * für Klasse). Das folgende Beispiel zeigt, wie Sie sie verwenden:

<h1 class = ”display-1 ″> Überschrift 1 </ h1>

<h1 class = ”display-2 ″> Überschrift 2 </ h1>

<h1 class = ”display-3 ″> Überschrift 3 </ h1>

<h1 class = ”display-4 ″> Überschrift 4 </ h1>

So sehen sie aus:

Wie sehen Bildschirmtitel in Bootstrap 4 aus?

Flexbox

Die Unterstützung für eine der wichtigsten Innovationen in dieser Version von Bootstrap bietet FlexBox CSS einfachere und flexiblere Layoutoptionen. Wie bereits erwähnt, enthält das offizielle Bootstrap-Handbuch insbesondere [FlexBox]:

Einfache vertikale Ausrichtung des Inhalts innerhalb eines übergeordneten Elements.

Neuordnung mit Hilfe von Medienabfragen. Einfacher Inhalt zwischen Geräten und Bildschirmauflösungen

Einfaches CSS-Spalten mit gleicher Höhe für Ihre gitterbasierten Layouts.

Dies alles ist zwar möglich, es gibt jedoch FlexBox außerhalb dieser Bubs, aber normalerweise sind zusätzliche Hacks und Problemumgehungen erforderlich, um dies zu korrigieren.

Wenn Sie mehr über dieses Thema erfahren möchten und wissen möchten, was passiert, wenn Bootstrap in den Grid-Komponenten aktiviert ist, empfehlen wir Ihnen, den Artikel „Verwenden von Bootstrap 4 FlexBox“ zu lesen.

ANDERE ÄNDERUNGEN

Die neuen Range Utility-Klassen wurden in einen Zustand versetzt, der eine bessere Kontrolle des horizontalen und vertikalen Raums ermöglicht. Sie können jetzt mithilfe einer Hilfsklasse (mit Rändern oder Auffüllungen) einige Stellen in eine beliebige Richtung hinzufügen.

Der Code ist einfach:

<div class = ”row”>

<div class = ”col-sm-6 m-t-md”>

<! – Spalte-klein-50%, Rand-oben-mittel ->

</ Div>

</ Div>

Alles ist sehr intuitiv: Es bedeutet den Rand m und für die p-Füllung. Wie für die Richtung: t ist für die Spitze. r für rechts, l für links, x für rechts und links, y für oben und unten und für ein Ganzes. Schließlich für die Dimensionen: 0 ist für Null. Für Auto, MD Medium und ideal für LG. Standardmäßig leer lassen.

Abgesehen von dem Hinweis ist es erwähnenswert, dass jedes Plugin als ES6 neu geschrieben wurde, um die Vorteile neuer JavaScript-Verbesserungen zu nutzen, und dass alle Dokumente auch Kerne waren.

Weitere Ressourcen finden Sie in diesem Artikel von Nicholas Cerminara und in diesem Beitrag von Medium Carol Skelly.

Was hat sich Bootstrap 4 gegenüber 3 Bootstrap geändert?

Die Aktion war bereits in Bootstrap 3 vorhanden, aber ich möchte zwei wichtige Änderungen zwischen den Komponenten erwähnen, die Änderungen in Bezug auf Version 4 aufweisen. Erstens hat der neue Gitterbrecher die Klassen col-xl- * eingegeben. Basierend auf Bootstrap 3 wurde das 4-Lagen-Rastersystem zu einem 5-Lagen-Rastersystem, einschließlich eines neuen Ausschnitts, der alle typischen vertikalen und horizontalen Bildschirmbreiten unterstützt.

Jetzt sind die 5-lagigen Formen:

(-Extra klein <544 px)

Klein (≥544 px)

Mittel (≥768 px)

Groß (≥992 px)

(-Extra groß ≥ 1200 px)

Der XL-Schnitt bestätigt, dass es Bildschirmbreiten für> 1200 Pixel gibt, wenn der XS-Schnitt es ermöglicht, auf kleinere Bildschirme mit 544 Pixel zu zielen, was eine bessere Unterstützung für typische kleine Gerätebreiten bietet.

Die neue Ebene unterstützt Bildschirmbreiten unter 544 Pixel, während gestufte col-xs- * der Version 3 Bildschirmbreiten unter 768 Pixel unterstützen. Infolgedessen verbessert diese Änderung die Unterstützung für Porträtansichten auf Mobilgeräten (Smartphones).

Zweitens benutzerdefinierte Formulare, die Bootstrap 3 nicht unterstützt. Dies sind vollständig anpassbare Elemente anstelle der Browser-Standardversion 4. Eingeführt. Gleiches gilt für Bootstrap 4 nach Eingabe der Reverse-Tabellen. tabelleninverse Klasse. Dieses CodePen-Beispiel zeigt, wie diese neue Funktion implementiert wird.

Diese Version ist notwendig, um Ihnen genügend Informationen über die Unterschiede zwischen 3 und 4 zu geben, aber für diejenigen, die alles wörtlich wissen wollen, möchte ich eine detaillierte Liste empfehlen. Beachten Sie, dass diese Liste im Verlauf der Entwicklung überprüft wird.

Ergebnis

In diesem Artikel, Version 4. Und Version 3 sollte ein neuer und schneller Überblick darüber gegeben werden, was sich mit der offiziellen Frequenzweiche ändern wird. Wenn Sie mehr erfahren möchten, befolgen Sie alle verfügbaren und besten Ratschläge, um Bootstrap 4 sorgfältig zu lesen. Befolgen Sie die auf der entsprechenden offiziellen Website verfügbare Dokumentation, um die neuesten Änderungen im Bootstrap 4-Migrationshandbuch anzuzeigen.

Das Veröffentlichungsdatum für Bootstrap 4 ist noch nicht bekannt. Aber wir werden seine Aufmerksamkeit auf die Arbeitsgruppe richten und wie ihre Fortschritte in der laufenden Arbeit verlaufen. Wenn Sie eine detailliertere Vorstellung von anderen Funktionen haben, wenn Sie sagen. Sie können einen Blick auf die GitHub-Seite des Projekts werfen. Wenn Sie helfen möchten, können Sie sich gerne der Community anschließen! Das Riesenteam hat einen ehrgeizigen Entwicklungsplan und eine lange Liste von Aufgaben, sodass Sie sicher sein können, dass wir mit Ihrer Zusammenarbeit sehr zufrieden sein werden.