Bootstrap 4 mit Editor-Schulung. Anordnung adaptiver Blöcke in einer Reihe

Basierend auf der Anzahl der Sterne auf GitHub.

Wenn Sie Bootstrap beherrschen möchten, insbesondere die neueste, vierte Version, dann wurde dieses Material speziell für Sie vorbereitet. Hier werden anhand eines kleinen End-to-End-Beispiels, das wirklich in einer halben Stunde bewältigt werden kann, die Grundlagen von Bootstrap demonstriert. Sobald Sie sie verstanden haben, können Sie mit diesem Framework etwas Eigenes machen.

Voraussetzungen Dieses Material richtet sich an beginnende Webentwickler, die über grundlegende Kenntnisse von HTML, CSS und jQuery verfügen.

Hier ist eine einseitige Website, über deren Erstellung mit Bootstrap wir sprechen werden.

Fertiges Projekt, erstellt mit Bootstrap

Npm Bootstrap installieren
Bootstrap kann über ein Content-Delivery-Netzwerk mit einer Seite verbunden werden. Fügen Sie dazu den folgenden Link zum Tag hinzu:

Die neueste Version von Bootstrap kann hier heruntergeladen und lokal verwendet werden.

Die Projektstruktur sollte wie in der folgenden Abbildung aussehen.

ProjektstrukturÜber die Fähigkeiten von Bootstrap 4 Die erste stabile Version von Bootstrap 4 wurde Ende Januar dieses Jahres veröffentlicht. Bootstrap enthält jetzt einige interessante Funktionen, die in der Vorgängerversion nicht vorhanden waren. Wenn wir nämlich über Verbesserungen und Änderungen sprechen, können wir Folgendes feststellen:

Bootstrap 4 wurde mithilfe der Flexbox-Technologie neu geschrieben, während Bootstrap 3 die Float-Technologie verwendete. Wenn Sie mit Flexbox nicht vertraut sind, schauen Sie sich diese Ressource an.
Das CSS von Bootstrap 4 verwendet rem-Einheiten, während zuvor px-Einheiten verwendet wurden. Sie können herausfinden, wie sie sich unterscheiden.
Einige Komponenten, wie z. B. Paneele, wurden entfernt. Details zu den Änderungen finden Sie in Bootstrap 4.

Tatsächlich hat Bootstrap 4 im Vergleich zu Bootstrap 3 viele neue Dinge, wenn Sie es brauchen, können Sie sich mit diesen Neuerungen vertraut machen. Wir beginnen jetzt mit der Arbeit an unserem Bildungsprojekt. Das Bootstrap Grid System ist für die Erstellung von Seitenlayouts konzipiert. Es erleichtert die Entwicklung responsiver Websites. In der neuen Version von Bootstrap haben sich die Klassennamen nicht geändert (es ist zu beachten, dass class.xs nicht mehr existiert).

Das Raster ist in 12 Spalten unterteilt, diese nach den Bedürfnissen des Entwicklers konfigurierte Struktur ist die Grundlage des Seitenlayouts.

Um das Bootstrap-Raster verwenden zu können, müssen Sie die .row-Klasse zum Hauptelement der Seite hinzufügen. Beim Festlegen der Größe verschachtelter Elemente werden die folgenden Klassen verwendet (anstelle eines Sternchens am Ende des Klassennamens wird die Anzahl der Spalten des grundlegenden 12-Spalten-Rasters angegeben, die ein bestimmtes Element belegen soll):

col-lg-* – Klasse, die für Seiten verwendet wird, die für Großbildgeräte wie Laptops gedacht sind;
col-md-* – Klasse für Seiten, die für Geräte mit mittlerem Bildschirm wie Tablets entwickelt wurden;
col-sm-* – Klasse für Seiten, die für kleine Bildschirme konzipiert sind, wie sie beispielsweise auf Smartphones zu finden sind.

Navigationsleiste Navigationsleisten in Bootstrap werden mithilfe der .navbar-Klasse erstellt. Tatsächlich handelt es sich um einen Wrapper, in dem die Elemente platziert werden, die die Navigationsleiste bilden. Unten sehen Sie das Panel, das wir jetzt erstellen werden. Es befindet sich oben auf der Seite und verschwindet beim Scrollen nicht.

Navigationsleiste

Damit also eine Navigationsleiste auf der Seite angezeigt wird, fügen wir index.html ein Tag mit der Klasse .navbar hinzu, in dem wir andere Klassen wie .navbar-brand, .navbar-toggler und .nav verwenden -item erstellen wir einige spezielle Elemente und die Struktur des Site-Navigationssystems. Mit der Klasse .fixed-top können Sie die Navigationsleiste oben auf der Seite fixieren. Hier ist das Layout der Navigationsleiste:

Heim

Jetzt erstellen wir eine main.css-Datei und verbinden sie mit der Seite, indem wir Folgendes in das Datei-Tag index.html einfügen:

Dadurch können Sie die Stile von Seitenelementen anpassen, indem Sie CSS-Regeln in dieser Datei platzieren. Fügen wir dieser CSS-Datei Regeln hinzu, die das Farbdesign der Navigationsleiste festlegen:

Navbar( Hintergrund:#F97300; ) .nav-link , .navbar-brand( Farbe: #f4f4f4; Cursor: Zeiger; ) .nav-link( Rand-rechts: 1em !important; ) .nav-link:hover( Hintergrund : #f4f4f4; Farbe: #f97300; ) .navbar-collapse( justify-content: flex-end; ) .navbar-toggler( Hintergrund:#fff !important; )
Das neue Bootstrap-Raster basiert auf Flexbox, daher müssen Sie die entsprechenden Eigenschaften verwenden, um Inhalte auszurichten. Um beispielsweise das Navigationsleistenmenü rechts zu platzieren, müssen Sie die Eigenschaft „justify-content“ verwenden und ihren Wert auf „flex-end“ setzen:

Navbar-collapse( justify-content: flex-end; )
Um die Hintergrundfarbe der Navigationsleiste anzupassen, können Sie die Klassen .bg-light (heller Hintergrund), .bg-dark (dunkler Hintergrund) und .bg-primary (primäre Hintergrundfarbe) verwenden. Wir verwenden die folgenden Einstellungen:

Bg-dark( Hintergrundfarbe:#343a40!important ) .bg-primary( Hintergrundfarbe:#343a40!important )

Seitenkopf Der folgende Tag wird zur Beschreibung des Seitenkopfs verwendet:

Bereiten wir ein Layout für den Seitenkopf vor. Wir möchten, dass es die gesamte Höhe des Fensters einnimmt, daher wird sich jQuery hier als nützlich erweisen. Lassen Sie uns eine main.js-Datei erstellen und sie vor dem schließenden Tag mit index.html verbinden:

Fügen wir der Datei main.js Folgendes hinzu:

$(document).ready(function())( $(".header").height($(window).height()); ))
Es wäre eine gute Idee, ein schönes Hintergrundbild in der Kopfzeile der Seite zu platzieren. Machen wir es so:

/*header style*/ .header( Hintergrundbild: url("../images/headerback.jpg"); Hintergrundanhang: fest; Hintergrundgröße: Cover; Hintergrundposition: Mitte; )
Das ist es, was uns am Ende gebracht hat.

Seitenkopf mit Hintergrundbild

Im Moment sieht der Header der Site etwas leer aus, also fügen wir ihm ein Element hinzu und weisen ihm die Klasse .overlay zu, was zur Erstellung eines Blocks führt, der sich über dem Hintergrundbild des Headers befindet. Ändern wir den Abschnitt der Datei index.html, in dem wir den Header beschrieben haben, wie folgt:

Fügen Sie dann in main.css Folgendes hinzu:

Overlay( Position: absolut; Mindesthöhe: 100 %; Mindestbreite: 100 %; links: 0; oben: 0; Hintergrund: rgba(244, 244, 244, 0,79); )
Fügen wir nun der Kopfzeile eine Beschreibung des Projekts hinzu. Wir werden es in einem neuen Element mit der Klasse .containter platzieren. Dies ist eine Hilfsklasse für das Bootstrap-Framework, die dazu dient, Inhalte basierend auf den Anforderungen eines responsiven Layouts zu gestalten. So ändert sich das Markup in diesem Schritt:

Fügen wir hier nun ein weiteres Element hinzu, dem wir die class.description zuweisen:

▍ Hallo, Willkommen auf meiner offiziellen Website

Cillum dolore eu fgiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Mehr sehen
Wir werden diesem Tag auch die Klasse .text-center zuweisen, die es ermöglicht, seinen Inhalt in der Mitte der Seite auszurichten. Am Ende der Seitenbeschreibung befindet sich eine Schaltfläche. Lassen Sie uns darüber sprechen, wie Sie es einrichten.

Buttons Bootstrap bietet viele Klassen für Buttons. Sie können einige Beispiele für die Gestaltung von Schaltflächen sehen. Wie Sie im Markup-Beispiel aus dem vorherigen Abschnitt sehen können, haben wir dem Element die Klassen .btn und hinzugefügt. btn-outline-secondary .

Jetzt richten wir Stile für die class.description ein:

Beschreibung( Position: absolut; oben: 30 %; Rand: automatisch; Polsterung: 2em; ) .description h1( Farbe:#F97300 ; ) .description p( Farbe:#666; Schriftgröße: 20px; Breite: 50%; line-height: 1,5; .description button( border:1px solid #F97300; background:#F97300; color:#fff; )
So sieht der Seitenkopf aus, nachdem Sie die oben genannten Schritte ausgeführt haben:

Seitenkopf mit einer Beschreibung des ProjektsÜber den Abschnitt Schauen wir uns zunächst an, was wir erstellen möchten. Hier ist ein Abschnitt der Seite mit Informationen über den Webentwickler.

Abschnitt „Über“.

Hier verwenden wir die Rasterfunktionen von Bootstrap, um ein zweiteiliges Abschnittslayout zu erstellen. Beginnen wir mit dem Hinzufügen einer .row-Klasse zum übergeordneten Element des Abschnitts:

Der erste Teil des Layouts befindet sich auf der linken Seite und enthält ein Foto. Der zweite Teil, der sich rechts befindet, enthält eine Beschreibung.

So sieht das Markup auf der linken Seite dieses Abschnitts aus:

// linke Seite S.Web-Entwickler
Und das passiert, nachdem hier die Beschreibung der rechten Seite des Layouts hinzugefügt wurde:

S.Web-Entwickler ▍D.John

Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporary incididunt ut labore et dolore magna aliqua. Bis zu einem gewissen Grad ist es uns gelungen, unsere Arbeit zu erledigen, ohne dass wir sie von der entsprechenden Kommode übernehmen müssen. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fgiat nulla pariatur. Excepteur sint occaecat cupidatat non

Beachten Sie die oben beschriebene Einstellung der Spaltenbreiten mithilfe der Klassen col-lg-* , col-md-* und col-sm-* .

Hier sind die Stile für all das:

About( margin: 4em 0; padding: 1em; position: relative; ) .about h1( color:#F97300; margin: 2em; ) .about img( height: 100%; width: 100%; border-radius: 50% ) .about span( display: block; color: #888; position: absolute; left: 115px; ) .about .desc( padding: 2em; border-left:4px solid #10828C; ) .about .desc h3( color: #10828C; ) .about .desc p( line-height:2; color:#888; )

Abschnitt „Portfolio“ Kommen wir nun zu dem Abschnitt, in dem das Portfolio des Entwicklers vorgestellt wird. Es wird eine Galerie mit Werken enthalten.

Portfolio-Bereich

Beim Erstellen des Layouts dieses Abschnitts werden die gleichen Prinzipien der Arbeit mit dem Raster angewendet, die wir oben besprochen haben:

Portfolio
Durch das Hinzufügen der Klasse .img-fluid zu jedem Bild werden diese responsiv.

Jedes Element in unserer Galerie belegt auf mittleren und großen Bildschirmen 4 Spalten (denken Sie daran: Klasse col-sm-12 wird für Geräte mit kleinen Bildschirmen verwendet, Klasse col-md-4 wird für mittlere Bildschirme verwendet, col-lg-4 - für Geräte mit großen Bildschirmen). Dadurch macht auf großen und mittleren Bildschirmen ein Element etwa 33,3 % des Containerelements aus, auf kleinen Geräten nimmt jedes Element den gesamten Bildschirm ein (12 Spalten).

Gestaltung der Werkgalerie:

/*Portfolio*/ .portfolio( margin: 4em 0; position: relative; ) .portfolio h1( color:#F97300; margin: 2em; ) .portfolio img( height: 15rem; width: 100%; margin: 1em; )

Blog-Bereich und Arbeiten mit Karten Lassen Sie uns über die Erstellung eines Abschnitts sprechen, der Ankündigungen von Materialien aus dem Blog enthält, der von unserem bedingten Webentwickler verwaltet wird.

Blog-Bereich

Um diesen Abschnitt zu erstellen, benötigen wir sogenannte Karten (Karten in der Bootstrap-Terminologie).

Um eine Karte zu erstellen, müssen Sie ein Element in das Layout einbinden und ihm die Klasse .card hinzufügen. Mit den folgenden Klassen können Sie verschiedene Kartenelemente konfigurieren:

.card-header: Kopfzeile
.card-body: Hauptinhalt
.card-title: Titel
.card-footer: Fußzeile
.card-image: Bild

Das HTML-Markup für diesen Abschnitt sieht folgendermaßen aus:

Blog Beitragstitel

Proident hat sich aus Verschulden von Amts wegen zurückgezogen, obwohl er arbeitslos war.

Beitragstitel

Proident hat sich aus Verschulden von Amts wegen zurückgezogen, obwohl er arbeitslos war.

Beitragstitel

Proident hat sich aus Verschulden von Amts wegen zurückgezogen, obwohl er arbeitslos war.

Mehr lesen
Hier sind die Stile für die Karten:

Blog( Rand: 4em 0; Position: relativ; ) .blog h1( Farbe:#F97300; Rand: 2em; ) .blog .card( Box-Shadow: 0 0 20px #ccc; ) .blog .card img( Breite: 100 %; Höhe: 12em; ) .blog .card-title( color:#F97300; ) .blog .card-body( padding: 1em; )
So wird unsere einseitige Seite nach der Erstellung des Blog-Bereichs aussehen:

Seite nach dem Hinzufügen des Blog-Bereichs Abschnitt „Team“ Dieser Abschnitt enthält Informationen über das Projektteam.

Teambereich

Um diesen Abschnitt zu bilden, verwenden wir ein Raster, das den verfügbaren Platz gleichmäßig auf die Bilder aufteilt. Jedes Bild (auf großen und mittleren Bildschirmen) nimmt 3 Rasterspalten ein, was 25 % der Gesamtfläche ausmacht.

Hier ist das HTML-Markup für diesen Abschnitt:

Unser Team Sara Managerin Chris S. Ingenieur Layla Frontend-Entwicklerin J.Jirard Teammanager
Und hier sind die Stile:

Team( Rand: 4em 0; Position: relativ; ) .team h1( Farbe:#F97300; Rand: 2em; ) .team .item( Position: relativ; ) .team .des( Hintergrund: #F97300; Farbe: #fff ; text-align: center; border-bottom-left-radius: 93%;
Lassen Sie uns diesen Abschnitt mit einer Animation dekorieren, die erscheint, wenn Sie mit der Maus über die Bilder fahren. Es sollte wie im Bild unten aussehen.

Animation beim Bewegen der Maus über ein Bild

Um diesen Effekt zu erzielen, fügen Sie main.css die folgenden Stile hinzu:

Team .item:hover .des( Höhe: 100 %; Hintergrund: #f973007d; Position: absolut; Breite: 89 %; Polsterung: 5em; oben: 0; border-bottom-left-radius: 0; )

Feedback-Formular Dieser Abschnitt der Seite enthält ein Formular, mit dem Website-Besucher Nachrichten an den Website-Eigentümer senden können. Um die Elemente zu gestalten und ihre Reaktionsfähigkeit sicherzustellen, nutzen wir hier wie üblich die Fähigkeiten von Bootstrap.

Feedback-Formular

Wie Bootstrap 3 verwendet Bootstrap 4 die Klasse .form-control für Eingabefelder, aber jetzt gibt es etwas Neues. Beispielsweise wird anstelle des veralteten class.input-group-addon das neue class.input-group-prepend verwendet (für Symbole und Beschriftungen). Weitere Details hierzu finden Sie in der Bootstrap 4-Dokumentation. In unserem Fall wird jedes Eingabefeld in einem Element platziert, dem eine .form-group-Klasse zugewiesen ist.

Fügen wir der Datei index.html Folgendes hinzu:

In Kontakt kommen
Hier sind die Stile für den Feedback-Formularabschnitt, die in der Datei main.css platziert werden sollten:

Contact-form( margin: 6em 0; position: relative; ) .contact-form h1( padding:2em 1px; color: #F97300; ) .contact-form .right( max-width: 600px; ) .contact-form . right .btn-secondary( Hintergrund: #F97300; Farbe: #fff; border:0; ) .contact-form .right .form-control::placeholder( Farbe: #888; Schriftgröße: 16px; )

Schriftarten Standardschriftarten sind nicht für jeden geeignet. Wir haben die Google Font API genutzt, um die Schriftart Raleway in unserem Projekt zu verwenden. Hier wird es sehr gut aussehen. Um die Schriftart zu importieren, fügen Sie die folgende Anweisung zur Datei main.css hinzu:

@import url("https://fonts.googleapis.com/css?family=Raleway");
Als nächstes legen wir globale Stile für verschiedene HTML-Tags fest:

Html,h1,h2,h3,h4,h5,h6,a( Schriftfamilie: „Raleway“; )

Scrolling-Effekte Das Bild unten zeigt das Seitenverhalten, das wir erreichen möchten.

Scrollen der Seite beim Klicken auf Links in der Navigationsleiste

Damit die Seite beim Klicken auf die Links in der Navigationsleiste reibungslos zum gewünschten Abschnitt scrollen kann, müssen wir auf die Funktionen von jQuery zurückgreifen. Wenn Sie mit dieser Bibliothek nicht sehr vertraut sind, wissen Sie, dass es hier nichts Kompliziertes gibt – fügen Sie einfach den folgenden Code zur Datei main.js hinzu:

$(".navbar a").click(function())( $("body,html").animate(( scrollTop:$("#" + $(this).data("value")).offset ( ).top ),1000) ))
Fügen Sie anschließend jedem Link in der Navigationsleiste ein Datenwertattribut hinzu und lassen Sie das Markup wie folgt aussehen:

Portfolio

Blog

Team

Kontakt

Damit das alles endlich funktioniert, muss nur noch das id-Attribut zum Hauptelement jedes Abschnitts der Seite hinzugefügt werden. In diesem Fall müssen Sie sicherstellen, dass der Wert mit dem im Datenwertattribut des entsprechenden Links angegebenen Werts übereinstimmt. Hier ist zum Beispiel das entsprechende Attribut für den Abschnitt „Info“:

Damit ist unser Beispiel abgeschlossen. Tags hinzufügen

Im Januar dieses Jahres wurde Bootstrap 4 (auch bekannt als v4) endlich veröffentlicht, nachdem es über zwei Jahre lang in Alpha-Versionen herumlungerte. Es stellt eine ernsthafte Neufassung der Funktionalität dar. Es führt nicht nur viele Änderungen unter der Haube ein, Bootstrap 4 enthält auch eine Reihe neuer Konzepte, mit denen Sie sich vertraut machen müssen.

Daher werde ich in diesem Artikel über die wichtigsten Änderungen an Bootstrap in Version 4 im Vergleich zu Version 3 sprechen. Ich gehe davon aus, dass Sie Bootstrap bereits verwendet haben, daher werde ich die Grundprinzipien nicht erläutern.

Schauen wir uns nun die wichtigsten Änderungen an (in keiner bestimmten Reihenfolge):

#1: Schaltflächenansicht

Beginnen wir mit etwas Lustigem und Visuellem! Die Tasten in v4 sind flacher gestaltet als in v3. Hier sind die vorherigen Schaltflächen:

Und hier sind einige der Neuen:

Dies entspricht eher modernen Design-Leitfäden, wie beispielsweise den Material-Design-Leitfäden, die in den letzten Jahren enorm an Popularität gewonnen haben.

#2: Verbesserte Medienabfragen

Meiner Meinung nach hatte Boostrap v3 zu wenige Kontrollpunkte für das Raster, der kleinste, xs, lag beispielsweise bei 768 Pixeln. Heutzutage kommt viel Datenverkehr von viel kleineren Geräten, was für viele Entwickler frustrierend war.

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

$ Grid - Haltepunkte: (

xs: 0,

sm: 576px,

md: 768px,

lg: 992px,

xl: 1200px

) ! Standard ;

Dadurch ist es einfach, Raster zu erstellen, die auf allen Bildschirmgrößen gut funktionieren.

#3: Die Flexbox-Unterstützung gibt uns mehr Flexibilität

Die berühmten Grids von Bootstrap werden jetzt mit Flexbox statt mit Float erstellt. Auf den ersten Blick macht das für Entwickler keinen großen Unterschied, da die meisten Grid-Layouts genau gleich funktionieren. Dies eröffnet jedoch mehrere neue Möglichkeiten.

Zuvor mussten wir die Breite jeder Spalte definieren (von 1 bis 12). Jetzt können Sie die Breite einer Spalte definieren und Flexbox dann automatisch die Breite der anderen festlegen lassen. Hier ist ein Beispiel dafür:

Wie Sie sehen, stellen wir die Breite der mittleren Spalte auf 6 ein (was der Hälfte der Gesamtbreite entspricht) und die anderen Spalten nehmen einfach den Rest des Platzes ein.

1 von 3 2 von 3 (breiter) 3 von 3

< div class = "container" >

< div class = "row" >

< div class = "col" >

1 von 3

< / div >

< div class = "col-6" >

2 von 3 (breiter)

< / div >

< div class = "col" >

3 von 3

< / div >

Flexbox-Klassen

Bootstrap 4 enthält außerdem eine Reihe von Klassen, mit denen Sie Container und Flexbox-Elemente verwalten können. Um ein Element in einen Flexbox-Container umzuwandeln, geben Sie ihm einfach die Klasse d-flex.

Ich bin ein Flexbox-Container!

< div class = "d-flex" >Ich bin ein Flexbox-Container!< / div >

Dies ergibt einen Flexbox-Container mit Text darin:

Notiz. Ich behandle nur Flexbox-bezogene Stile.

Fügen wir noch ein paar weitere Elemente hinzu und führen eine weitere Klasse ein, um zu steuern, wie sie im Container positioniert werden.

Bootstrap 4-Framework

Lernen Sie die Grundlagen von Bootstrap 4 anhand eines praktischen Beispiels für die Gestaltung eines Blogs von Grund auf

< div >Flex-Artikel< / div >

< / div >

Dadurch werden die Elemente im Container zentriert:

#4: Einrückungen mithilfe von Klassen verwalten

Es ist ziemlich cool. Sie können jetzt den Abstand und die Ränder mithilfe der Klassen p-* und m-* steuern. Der Abstand kann zwischen 0,25 und 3 rem variieren, indem Zahlen von 0 bis 5 verwendet werden. Stellen wir beispielsweise den Flexbox-Container auf die Klasse p-5 ein, um einen maximalen Abstand zu erzielen.

Ein Artikel, in dem wir das Bootstrap 4-Raster analysieren, das zum Erstellen responsiver Website-Layouts verwendet wird.

Rasterzweck

Das Bootstrap 4-Grid-Framework ist für die Erstellung responsiver Website-Layouts konzipiert.

Das Bootstrap 4-Raster basiert auf CSS Flexbox und CSS-Medienabfragen. Wenn Sie sie studieren, können Sie die Funktionsweise des Bootstrap 4-Rasters genauer verstehen.

Ein adaptives Layout ist ein Layout, dessen Aussehen sich abhängig von der Breite des Hauptbereichs (Ansichtsfenster) des Browsers ändern kann. Das bedeutet, dass das responsive Layout bei einigen Ansichtsfensterbreiten möglicherweise in eine Richtung aussieht, bei anderen jedoch möglicherweise völlig anders.

In Bootstrap 4 wird das Ändern des Erscheinungsbilds des Layouts durch Medienabfragen implementiert. Jede Medienanforderung in Bootstrap basiert auf der Mindestbreite des Browser-Ansichtsfensters (Haltepunkt, Haltepunkt, Gerätename).

Das Bootstrap 4-Framework verfügt über 5 Haltepunkte oder Gerätenamen (unbeschriftet, sm, md, lg, xl) und ermöglicht Ihnen daher die Erstellung eines Layouts, das auf jedem davon anders aussehen kann.

In Bootstrap 4 wurde im Vergleich zu Bootstrap 3 die Anzahl der Haltepunkte geändert. In Bootstrap 3 gab es vier davon: xs, sm, md und lg.

Rasterelemente

Das Bootstrap 4-Raster besteht aus den folgenden Elementen:

Verpackungsbehälter (Behälter und Flüssigkeitsbehälter);
Zeilen (Zeile);
Adaptive Blöcke (col).

Behälter einwickeln

Ein Wrapper-Container ist ein Bootstrap-4-Rasterelement, von dem aus die Erstellung eines responsiven Seiten- oder Blocklayouts beginnt. Andere Rasterelemente (Zeilen und adaptive Blöcke) müssen darin platziert werden.

Bootstrap 4 verfügt über zwei Arten von Container-Wrappern: Responsive-Fixed und Responsive-Fluid.

HTML-Markup eines Responsive-Fixed-Containers:

...

HTML-Markup des responsiven Rubber-Containers:

...

Der erste (responsive-fixed) Container wird verwendet, wenn Sie ein Layout mit einer Breite erstellen müssen, die innerhalb einer bestimmten Browser-Ansichtsfensterbreite konstant bleiben muss.

Die Abhängigkeit der Breite eines adaptiv-festen Containers von der Breite des Browser-Ansichtsfensters ist in der Tabelle dargestellt:

Das bedeutet, dass ein adaptiv-fester Container Folgendes hat:

100 % Breite für eine Ansichtsfensterbreite von bis zu 576 Pixel;
540 Pixel mit einer Ansichtsfensterbreite von 576 bis 768 Pixel;
720 Pixel mit einer Ansichtsfensterbreite von 768 bis 992 Pixel usw.

In horizontaler Richtung wird der fest-responsive Container zentriert positioniert, dies geschieht in bootstrap.css über die CSS-Eigenschaften margin-left: auto und margin-right: auto .

Der zweite Container (Responsive Rubber) wird verwendet, wenn Sie ein völlig flexibles Layout einer Seite oder eines Blocks erstellen müssen. Dieser Container hat eine Breite von 100 % für jede Ansichtsfensterbreite.

Darüber hinaus verfügen Wrapper-Container (Container und Container-Fluid) auch über eine Innenpolsterung links und rechts von 15px. Das Festlegen des Abstands zum Umschließen von Containern erfolgt in der Bootstrap 4-CSS-Datei mithilfe der Eigenschaften padding-left: 15px und padding-right: 15px.

Platzieren Sie beim Erstellen eines Layouts mit dem Bootstrap 4-Raster keine Wrapper-Container in anderen.

Reihen

Eine Zeile ist ein spezielles Rasterelement (Zeile), das beim Erstellen eines Layouts in den folgenden Fällen verwendet wird:

zwischen dem Container und den adaptiven Blöcken, die darin platziert werden müssen;
zwischen einem und anderen adaptiven Blöcken, die im ersten adaptiven Block platziert werden müssen.

Zeilen-HTML-Markup:

...

Im Gegensatz zu Bootstrap 3, wo die Zeile nur dazu diente, die linke und rechte interne Polsterung von Wrapper-Containern oder responsiven Blöcken auszugleichen, spielt sie in Bootstrap 4 eine sehr wichtige Rolle. Dies liegt daran, dass dieses Raster auf CSS Flexbox basiert. In diesem Raster fungiert es als Flex-Container für Flex-Elemente (adaptive Blöcke). Diese. Wenn Sie adaptive Blöcke außerhalb der Zeile verwenden, funktionieren diese nicht. In Bootstrap 4 müssen sich reaktionsfähige Blöcke in einem Block mit der Zeilenklasse befinden.

Die Kompensation der internen Auffüllung der Ränder erfolgt auf die gleiche Weise wie in Bootstrap 3, da die linken und rechten Ränder negativ sind und 15 Pixel betragen (Rand links: -15 Pixel und rechter Rand: -15 Pixel).

Ein Beispiel für die Kompensation des Feldauffüllens:

Container (+15px) -> Zeile (-15px) -> Spalte (+15px) -> Inhalt Container-Fluid (+15px) -> Zeile (-15px) -> Spalte (+15px) -> Zeile (-15px) -> Spalte (+15px) -> Inhalt

Daher beträgt der Rand vom linken und rechten Rand des Verpackungsbehälters zum Inhalt immer 15 Pixel.

Darüber hinaus müssen adaptive Blöcke, die logisch nicht miteinander in Beziehung stehen, nicht in einer Zeile im Rahmen einer Art Wrapper-Container oder eines anderen adaptiven Blocks platziert werden. Der korrekteste Weg besteht darin, sie in separate logische Gruppen zu unterteilen und jede davon in einer separaten Zeile anzuordnen.

Zum Beispiel:

... … … … ...

Adaptive Blöcke

Adaptive Blöcke sind die Hauptbausteine eines responsiven Layouts. Sie bestimmen, wie das Webseitenlayout an verschiedenen Kontrollpunkten aussieht (kein Symbol, sm, md, lg und xl).

Das Erstellen eines adaptiven Blocks ist sehr einfach: Durch Hinzufügen einer oder mehrerer Klassen col-?-? auf das erforderliche HTML-Element.

In der Klasse col-?-?> wird anstelle des ersten Fragezeichens der Name des Kontrollpunkts angegeben: keine Bezeichnung, sm, md, lg oder xl. Anstelle des zweiten Fragezeichens wird die Breite des adaptiven Blocks angegeben, die er am angegebenen Kontrollpunkt haben soll. Die Breite des Antwortblocks wird in relativer Form mit einer Zahl von 1 bis 12 (Bootstrap-Spalten) angegeben.

Diese Zahl bestimmt, wie viel der Breite der adaptive Block am angegebenen Kontrollpunkt von der Breite des übergeordneten Blocks einnimmt, d. h. Reihe. Die numerische Zeilenbreite (Bootstrap-Spalten) beträgt 12.

Beispielsweise nimmt ein Block mit der Klasse col-md-4 am Kontrollpunkt md 4/12 der Zeilenbreite ein, d. h. 33,3 % (d. h. 4/12*100 % = 33,3 %).

Adaptive Blöcke sowie Container verfügen über einen linken und rechten Abstand von 15 Pixeln. Diese Auffüllungen für adaptive Blöcke des Bootstrap 4-Frameworks werden mithilfe der CSS-Eigenschaften padding-left: 15px und padding-right: 15px festgelegt.

Adaptive Blöcke müssen in einer Reihe platziert werden. Diese. Jeder adaptive Block muss einen Block mit der Klassenzeile als übergeordnetem Block haben.

Überlegen Sie beispielsweise, wie breit der folgende Reaktionsblock auf jedem Gerät sein wird:

...

Dieser adaptive Block verfügt über:

bis zu sm (mal xs) eine Breite, die 12 Bootstrap-Spalten entspricht (d. h. 12/12*100 %=100 % der Zeilenbreite);
auf einem SM-Gerät eine Breite, die 9 Bootstrap-Spalten entspricht (d. h. 9/12*100 %=75 % der Zeilenbreite);
auf einem MD-Gerät eine Breite, die 7 Bootstrap-Spalten entspricht (d. h. 7/12*100 %=58,3 % der Zeilenbreite);
auf einem LG-Gerät eine Breite, die 5 Bootstrap-Spalten entspricht (d. h. 5/12*100 %=41,6 % der Zeilenbreite);
auf einem XL-Gerät eine Breite, die 3 Bootstrap-Spalten entspricht (d. h. 3/12*100 %=25 % der Zeilenbreite).

Darüber hinaus gilt die Angabe der Breite des adaptiven Blocks für einen Kontrollpunkt nicht nur für diesen Punkt, sondern auch für alle nachfolgenden, sofern diese nicht angegeben sind.

Ein reaktionsfähiger Block auf MD- und LG-Geräten hat eine Breite von 6 Bootstrap-Spalten: (12) -> sm(6) -> md -> lg -> xl(3) .

Ein reaktionsfähiger Block auf einem SM-Gerät hat eine Breite von 8 Bootstrap-Spalten und auf LG- und XL-Geräten eine Breite von 4 Bootstrap-Spalten: (8) -> sm -> md(4) -> lg - > xl .

Der Antwortblock auf allen Geräten hat eine Breite von 6 Bootstrap-Spalten: (6) -> sm -> md -> lg -> xl .

Adaptive Blöcke ohne Spalten

Dem wurden spezielle Klassen col, col-sm, col-md, col-lg, col-xl, col-auto, col-sm-auto, col-md-auto, col-lg-auto und col-xl hinzugefügt Bootstrap 4 Grid -auto .

Die erste Klassengruppe (col, col-sm, col-md, col-lg, col-xl) dient zur Erstellung adaptiver Blöcke, deren Breite vom freien Platz der Zeile abhängt. Die freie Breite (freier Platz) der Linie wird gleichmäßig auf alle Blöcke verteilt. Darüber hinaus haben diese adaptiven Blöcke eine Breite von Null, bevor sie freien Zeilenraum zuweisen (standardmäßig).

Schauen wir uns ein paar Beispiele an.

1. Erstellen Sie 5 adaptive Blöcke mit der gleichen Breite hintereinander.

1/5 2/5 3/5 4/5 5/5

Breitenberechnung:

freier Zeilenraum - 100 % (da ihre Breite 0 ist);
die Breite jedes adaptiven Blocks beträgt 20 % (100 %/5);

2. Die Breite von Blöcken mit der Klasse col, wenn es einen adaptiven Block mit der Anzahl der Spalten in der Zeile gibt.

? 7 Spalten? ?

Breitenberechnung:

freier Zeilenraum – 41,67 % ((12-7)/12*100 %);
Die Breite jedes adaptiven Blocks mit Ausnahme von Spalte 7 beträgt 13,89 % (41,67 %/3).

In einigen Versionen von Safari-Browsern gibt es einen Fehler bei der Verwendung eines solchen Markups; es kann in mehrere Zeilen aufgeteilt werden.

Es gibt zwei Möglichkeiten, dies zu beheben:

durch Setzen der adaptiven Blöcke border.col ( border: 1px solid transparent; )
durch Festlegen der CSS-Eigenschaft „Responsive Blocks“ flex-basis .col ( flex: 1 0 20%; )

Darüber hinaus können Sie mit dem Bootstrap 4-Raster reaktionsfähige Blöcke platzieren, ohne die Anzahl der Spalten in mehreren Zeilen anzugeben.

... ... ... ...

Diese Aktion wird ausgeführt, indem ein leeres div-Element mit der Klasse w-100 zum Markup vor dem adaptiven Block hinzugefügt wird, der mit einer neuen Zeile beginnen sollte.

Wenn diese Aktion nur für einige Kontrollpunkte verwendet werden muss, müssen Sie ihr auch Bootstrap 4-Responsive-Utility-Klassen hinzufügen (die W-100-Klasse).

In diesem Beispiel werden adaptive Blöcke nur auf Geräten mit einem winzigen oder kleinen Ansichtsfenster in eine neue Zeile übertragen.

... ... ... ...

Die zweite Klassengruppe (col-auto, col-sm-auto, col-md-auto, col-lg-auto und col-xl-auto) dient der Erstellung adaptiver Blöcke, deren Breite entsprechend bestimmt wird deren Inhalt.

Zum Beispiel:

(1) (2) – die Breite an den MD-, LG- und XL-Kontrollpunkten wird basierend auf dem Inhalt bestimmt (3)

Ergebend:

auf xs und sm werden adaptive Blöcke vertikal (untereinander) angeordnet und nehmen die gesamte Breite der Reihe ein;
auf md hat der responsive Block 2 die Breite, die zum Anzeigen seines Inhalts erforderlich ist; Wenn Block 2 nicht die gesamte Breite der Zeile einnimmt, teilen die adaptiven Blöcke 1 und 3 diese gleichmäßig untereinander auf. wenn Block 2 die gesamte Breite der Linie einnimmt, ist das Bild dasselbe wie an den Kontrollpunkten xs und sm;
Auf LG und XL hat der responsive Block 2 die erforderliche Breite, um seinen Inhalt anzuzeigen. Wenn Block 2 nicht die gesamte Breite der Zeile einnimmt, nimmt Block 3 eine Breite ein, die zwei Bootstrap-Spalten entspricht, und Block 1 nimmt die gesamte verbleibende Breite der Zeile ein. Wenn Block 2 die gesamte Breite der Zeile einnimmt, ist das Markup das gleiche wie bei xs und sm, nur Block 3 in 3 Zeilen hat eine Breite, die 2 Bootstrap-Spalten entspricht.

Anordnung adaptiver Blöcke in einer Reihe

Standardmäßig sind adaptive Blöcke in einer Reihe in horizontalen Linien angeordnet. Innerhalb der horizontalen Linie sind adaptive Blöcke der Reihe nach von links nach rechts aufgereiht. Adaptive Blöcke mit einer Gesamtzahl von Spalten von nicht mehr als 12 können in eine horizontale Zeile passen. Adaptive Blöcke, die nicht in die aktuelle Zeile passen, werden in die nächste verschoben.

(1) (2) (3) (4)

Schauen wir uns ein weiteres Beispiel an, in dem adaptive Blöcke an verschiedenen Kontrollpunkten unterschiedliche Breiten haben:

Das Grundprinzip des Layout-Layouts

Das Grundprinzip beim Entwerfen eines Webseitenlayouts im Bootstrap 4-Raster besteht darin, einige adaptive Blöcke in anderen zu verschachteln.

Gleichzeitig ist die Breite adaptiver Blöcke immer ein relativer Wert, der in den Bootstrap-Spalten festgelegt wird und nur von der Breite des übergeordneten Blocks abhängt, d. h. Reihe.

Webseiteninhalte sollten nur in responsiven Blöcken platziert werden.

Zum Beispiel werden wir im bestehenden Layout, nämlich im adaptiven Block Spalte 8, zwei weitere Blöcke hinzufügen:

... ...

Dazu müssen Sie zunächst eine Zeile (Container für adaptive Blöcke) in den Block col-8 einfügen:

... ... Bootstrap 4 – Einfügen einer Zeile in den Inhalt eines responsiven Blocks, Spalte 8

Fügen Sie danach zwei adaptive Blöcke hintereinander hinzu:

... ... ... Bootstrap 4 – Responsive Blöcke hintereinander einfügen

Adaptive Blöcke ausrichten

Das Ausrichten adaptiver Blöcke in horizontaler und vertikaler Richtung erfolgt in Bootstrap 4 mithilfe von Utility-Flex-Klassen.

Vertikale Ausrichtung reaktionsfähiger Blöcke

Die vertikale Ausrichtung adaptiver Blöcke innerhalb einer Zeilenzeile erfolgt über eine der folgenden Klassen, die zusätzlich zur Zeile hinzugefügt werden müssen:

align-items-start (relativ zum Zeilenanfang);
align-items-center(center);
align-items-end (relativ zum Ende).

Lassen Sie uns beispielsweise alle adaptiven Blöcke an der Mitte der Zeilenlinie ausrichten:

1/2 2/2

Standardmäßig nehmen responsive Elemente die gesamte Höhe der Zeilenzeile ein, in der sie sich befinden.

Die vertikale Ausrichtung eines bestimmten adaptiven Blocks innerhalb einer Zeile kann durch eine der folgenden Klassen erfolgen:

align-self-start (relativ zum Zeilenanfang);
align-self-center (Mitte);
align-self-end (relativ zum Ende).

Diese Klassen müssen zu adaptiven Blöcken hinzugefügt werden, nicht zu einer Zeile.

Beispielsweise richten wir den adaptiven Block 2 am unteren Rand der Linie aus:

(1) (2)

Horizontale Ausrichtung adaptiver Blöcke

Die folgenden Klassen sind für die Ausrichtung adaptiver Blöcke in horizontaler Richtung vorgesehen:

justify-content-start (relativ zum Anfang der Zeilenzeile – Standard);
justify-content-center (Mitte);
justify-content-end (relativ zum Ende der Zeile);
justify-content-around (gleichmäßig, unter Berücksichtigung des Platzes vor dem ersten und letzten adaptiven Block);
justify-content-between (gleichmäßig, mit gleichem Abstand zwischen den reagierenden Blöcken).

Lassen Sie uns beispielsweise adaptive Blöcke gleichmäßig in horizontaler Richtung verteilen:

(1) (2)

Responsives randloses Layout

Die interne Auffüllung adaptiver Blöcke und externe negative Ränder von Zeilen können entfernt werden, wenn die Klasse „No-Gutters“ zu letzterem (d. h. Zeile) hinzugefügt wird.

... ... ...

Bitte beachten Sie, dass diese Klasse (keine Dachrinnen) nur adaptive Blöcke betrifft, die direkt in dieser Zeile platziert sind. Diese. CSS-Eigenschaften zum Entfernen von Auffüllungen gelten nicht für adaptive Blöcke, die diese Zeile nicht als übergeordnete Zeile haben.

In Bootstrap 4 können reaktionsfähige Blockoffsets wie folgt durchgeführt werden:

Klassen-Offset (für eine bestimmte Anzahl von Spalten);
Service-(Versorgungs-)Margenklassen.

Offset-Klassen

Die Offset-Klassen dienen dazu, adaptive Blöcke um eine bestimmte Anzahl von Spalten nach rechts zu verschieben.

Diese Klassen haben die folgende Syntax:

Offset-(1) oder Offset-(Haltepunkt)-(1)

(Haltepunkt) – Kontrollpunkt, ab dem ein Offset auf diesen Block angewendet wird (wenn er nicht angegeben ist, wird der Offset beginnend mit den kleinsten Geräten angewendet).

(2) – der Offset-Wert, der anhand der Anzahl der Bootstrap-Spalten angegeben wird.

Als Beispiel stellen wir den Offset zu den adaptiven Blöcken ein, wie in der Abbildung gezeigt.

(1) (2) (1) (2) (1)

Offset mithilfe von Margin-Klassen

In der vierten Version von Bootstrap können Sie den Offset für adaptive Blöcke auch mithilfe von Randeinzügen festlegen (margin-left: auto und (oder) margin-right: auto). Diese Offset-Option kommt zustande, weil das Raster in der neuen Version von Bootstrap (4) auf CSS Flexbox basiert.

Diese Verschiebungsoption (unter Verwendung von Randklassen) wird verwendet, wenn Blöcke um einen variablen Betrag relativ zueinander verschoben werden müssen.

In Bootstrap 4 können Sie für eine bequemere und adaptivere Einstellung von Randeinzügen für Blöcke (margin-left: auto und (oder) margin-right: auto) die Klassen ml-auto, mr-auto, ml-(breakpoint) verwenden )-auto und mr-( breakpoint)-auto .

Bootstrap 4 – Responsiver Block-Offset

(1) (2) (1) (2) (3) (1) (2)

Ändern der visuellen Reihenfolge adaptiver Blöcke

Standardmäßig werden responsive Blöcke visuell in der Reihenfolge angezeigt, in der sie sich im HTML-Code befinden.

Das Ändern der visuellen Reihenfolge eines reaktionsfähigen Blocks in Bootstrap 4 erfolgt mithilfe der Klasse order-(visual_number). Diese Klasse ist für den XS-Checkpoint. Wenn die Reihenfolge eines Elements nicht für den Kontrollpunkt xs, sondern für sm, md, lg oder xl bestimmt werden muss, wird die folgende Version dieser Klasse verwendet:

Order-(Haltepunkt)-(visuelle_Nummer)

Anstelle von (visual_number) müssen Sie eine Zahl von 1 bis 12 angeben.

Diese Zahl bestimmt, wie die Elemente optisch auf der Seite angezeigt werden. Alle adaptiven Elemente folgen nämlich visuell in aufsteigender Reihenfolge dieser Zahlen. Wenn für ein Element keine Ordnungsklasse festgelegt ist, ist der Standardwert 0.

Ändern wir beispielsweise die Reihenfolge zweier adaptiver Blöcke:

Erstes (nicht geordnet, ohne Ordnungsklasse) Zweites, wird aber als letztes angezeigt Drittes, wird aber als zweites angezeigt

Ein weiteres Beispiel (unter Verwendung adaptiver Ordnungsklassen):

Erstens (auf xs wird sm als zweites angezeigt) Zweitens (auf xs wird sm zuerst angezeigt)

Neben Zahlen (standardmäßig von 1 bis 12) können Sie auch die Wörter first und last verwenden. Mit diesen Klassen (order-first, order-(breakpoint)-first, order-last, order-(breakpoint)-last) können Sie ein Element visuell an den Anfang bzw. das Ende verschieben.

Die Klassen order-first und order-(breakpoint)-first üben ihre Wirkung aus, indem sie die CSS-Order-Eigenschaft des Elements auf -1 (order: -1) setzen, und die Klassen order-last und order-(breakpoint)-last legen das CSS fest Bestellen Sie die Eigenschaft auf den Wert 13 (Reihenfolge: $columns + 1).

Schreiben wir das obige Beispiel mithilfe der Auftragsklassen um, die die Schlüsselwörter „first“ und „last“ verwenden:

Zuerst (bei xs wird sm zuletzt angezeigt) Letzter (bei xs wird sm zuerst angezeigt)

Ein Beispiel, bei dem die Ordnungsklassen sowohl mit einer Zahl als auch mit den Wörtern first und last verwendet werden:

#1 (XS), #LAST (SM), #1 (MD, LG und XL) #2 (XS), #7 (MD, LG und XL) #3 (XS), #6 (MD, LG und XL ) #4 (XS), #5 (MD, LG und XL) #5 (XS), #4 (MD, LG und XL) #6 (XS), #3 (MD, LG und XL) #7 (XS ), #2 (MD, LG und XL) #8 (XS), #FIRST (SM), #8 (MD, LG und XL)

Ein Beispiel für ein adaptives Layout im Boostrap 4-Raster

Erstellen wir mithilfe des Bootstrap 4-Rasters ein responsives Layout für den in der Abbildung gezeigten Webseitenblock. Bootstrap 4 – Beispiel für ein responsives Blocklayout

1. Block-Markup für mobile Geräte (xs) erstellen.

(1) (2) (3) (4) (5)

2. Richten Sie das Markup für den sm-Kontrollpunkt ein:

(1) (2) (3) (4) (5)

3. Stellen Sie die Blöcke auf die Anzahl der Spalten ein, die sie auf MD- und LG-Geräten haben sollen:

(1) (2) (3) (4) (5)

4. Markup für xl erstellen:

(1) (2) (3) (4) (5)

Wir entfernen unnötige Kontrollpunkte aus adaptiven Blöcken:

(1) (2) (3) (4) (5)

Darüber hinaus hat der reaktionsfähige Block in Bootstrap 4 zunächst eine Breite von 100 %. Dadurch können Sie beim Erstellen adaptiver Blöcke die Anzahl der Spalten nicht angeben, wenn deren anfängliche Breite 12 Spalten (100 %) betragen soll.

(1) (2) (3) (4) (5)