Vollständige Webentwicklung für Anfänger:innen Teil 2: Flexbox, CSS-Raster und Bootstrap 4

1. Willkommen beim Kurs!: Willkommen bei Full Stack Web Development für Anfänger. Dieser Kurs soll Sie vom Anfänger zu einem Webentwickler führen, der nicht nur Front-End-Benutzeroberflächen einer Website erstellen kann, sondern auch das Back-End für die Interaktion mit erstellen kann. Also, wer bin ich? Mein Name ist Chris, und ich werde Ihr Lehrer für diesen Kurs sein. Ich bin ein Webentwickler und auch Produzent von vielen Tutorials, die Tausenden von Schülern die Fähigkeiten, die sie benötigen, um Websites und Anwendungen zu erstellen. Dies ist ein zweiter Teil der vollständigen Serie, in der wir weiterhin auf Ihrem HTML-, CSS- und Responsive-Webdesign-Wissenaufbauen und Responsive-Webdesign-Wissen und Ihnen die CSS Flexbox, das Grid und auch das Bootstrap 4 Framework vorstellen werden. In diesem Kurs geht es darum, flexible Layouts zu erstellen, beginnend mit der CSS Flexbox, um uns eine erstaunliche Kontrolle darüber zu haben, wie Elemente auf einer Seite angelegt werden. Wir gehen dann auf das CSS Grid, das eine der mächtigsten und modernsten Techniken zu lernen ist. Das Auslegen von vollständigen Webseiten, Erstellen fast jede Art von Layout, das Sie sich vorstellen können. Wir beenden mit dem beliebten Bootstrap 4 Framework, wo wir eine Burger-Restaurant-Website erstellen werden. Dies gibt Ihnen die Möglichkeit, dasBootstrap-Gittersystem, Bilder und Texte, Navigationsleisten, rotierende Karussells,Modelle, Formulare und vieles mehr zu lernen und in die Praxis Bootstrap-Gittersystem, Bilder und Texte, Navigationsleisten, rotierende Karussells, umzusetzen. Wir schauen uns auch die Utility-Klassen an, die Bootstrap für einfaches Styling bietet. Zusammen mit, wie Sie einen dieser Stile überschreiben und Ihre Projekte vollständig anpassen. Ich hoffe, Sie freuen sich, alles über Bootstrap und Layout von Websites im zweiten Teil dieses Kurses zu erfahren. 2. Was ist Flexbox?: In den letzten Abschnitten haben wir viel über das Erstellen und Ändern von Layouts gelernt. Viele der historischen Möglichkeiten zum Erstellen von Layouts mit Tabellen von Lasten beteiligt. Wir haben bereits über die Einschränkungen dieser Methoden gesprochen und warum sie nicht ideal zum Auslegen von Seiten sind. In diesem Abschnitt werden wir uns sowohl die Flexbox als auch das Raster ansehen. Diese modernen Layer-Methoden machen das Auslegen von Web-Seiten so viel einfacher. Wir beginnen mit der CSS Flexbox. Flexbox wurde entwickelt, um für eindimensionale Layouts verwendet zu werden, d. h. es handelt sich um eine Achse zu der Zeit, entweder um eine Zeile oder eine Spalte. Genau wie Sie hier sehen können. Flexbox steuert nicht nur die Richtung, sondern ermöglicht es uns auch, die Ausrichtung auf festzulegen, wie wir es hier getan haben. Wir können ein Element oder eine Gruppe von Elementen links oder rechts oder sogar oben oder unten ausrichten . Flexbox ermöglicht es uns auch, die Größe der einzelnen Artikel zu steuern. Hier in der obersten Reihe haben wir zwei Boxen, die einen Teil aufnehmen und dann einen Gegenstand, der zwei Teile aufnimmt. Dann haben wir für die zweite Reihe zwei Elemente. Ein Artikel nahm das Dreifache der Größe der Bestellung auf. Diese sind auch bedeutungsflexibel, wenn mehr oder noch weniger Platz zur Verfügung steht, werden diese drei Teile immer proportional zu dem einen Teil sein. Eine weitere große Funktion von Flexbox ist die Möglichkeit, die Reihenfolge zu steuern, in der die Elemente auf der Seite angezeigt werden. Traditionell erscheinen Elemente in der Reihenfolge eines Orts sie in der HTML-Datei. Flexbox ermöglicht es uns, diese Quellreihenfolge zu steuern. Dies kann besonders nützlich sein, wenn Elemente für verschiedene Layouts umgeschaltet werden. Wir könnten bestimmte Elemente in einer Reihenfolge haben, für größere Bildschirme, und dann eine völlig andere Reihenfolge für kleinere Bildschirme. Bevor wir mit Flexbox etwas bauen, gibt es ein wichtiges Konzept, das man zuerst verstehen muss. Dies ist die Haupt- und Querachse. Wir definieren die Hauptachse, indem wir die Flexrichtung einstellen. Zeile ist standardmäßig festgelegt, und dadurch werden die Elemente in einer Zeile von links nach rechts in einem Standardbrowser von links nach rechts platziert . Wie Sie auf der rechten Seite sehen können, ist Zeilenumkehrung das Gegenteil und dies erscheint von rechts nach links. Dann haben wir Spalte, die von oben nach unten ist, und dann auch Spaltenrückwärts, die gegenüber von unten nach oben ist. Wenn wir diese Flexrichtung einstellen, wird dies als Hauptachse betrachtet. Dann verläuft die Querachse senkrecht zur Hauptachse. Wenn ich also die Flex-Richtung auf Zeile gesetzt hätte, wird Spalte die Querachse sein. Wenn wir die Flexrichtung auf Spalte setzen, dann würde Zeile dann die Querachse werden. Wenn das jetzt ein wenig schwer zu verstehen ist, denken Sie daran, dass die Hauptachse eine Richtung ist, die wir festgelegt haben, und dann ist die Querachse das Gegenteil. Dies ist eine grundlegende Übersicht über die Funktionsweise der Flexbox. Im nächsten Video werden wir es in unserem Texteditor einrichten und in Aktion sehen. 3. Flexrichtung: Wir kennen jetzt einige Grundlagen über Flexbox. Beide gesehen Untätigkeit wird uns wirklich helfen zu verstehen, wie die Dinge funktionieren. Um zu beginnen, werde ich ein neues Projekt namens Flexbox erstellen. Klicken Sie mit der rechten Maustaste auf „Neuer Ordner“ und Name ist eine Flexbox. Dann können wir weitermachen und dies in unserem Texteditor öffnen. Ziehen Sie das hier rüber. Dann können wir unsere vertraute index.html erstellen. Dann werde ich die Verknüpfung von html Spalte 5 verwenden und dann aufstößt, den Titel einstellen und dies kann Flexbox sein und das speichern. In diesem Beispiel werde ich einige Elemente auf dem Bildschirm festlegen, um mit dem zu arbeiten. innerhalb des Body-Abschnitts Lassen Sie unsinnerhalb des Body-Abschnittsvoran und erstellen Sie ein div. Dies wird eine ID des Containers haben. Hier drinnen können wir auch noch ein paar divs hinzufügen. Dies kann Item 1 und dann eine Klasse von Item sein. Ich möchte fünf weitere dieser Elemente erstellen. Ich werde diesen Abschnitt hier kopieren und ihn dann in fünf weiteren Malen einfügen, so dass wir sechs verschiedene Elemente in unserem Container haben. Artikel 2, 3, 4, 5 und 6 und sie können auch den gleichen Klassennamen des Elements für jeden dieser haben. Dann hoffen wir, dass wir die Style-Tags innerhalb des Kopfbereichs öffnen können. Um zu beginnen, lassen Sie uns dieses Element mit Punkt Punkt Ziel, und dann werden wir einige Farben hinzufügen. Die Hintergründe, gehen wir für Lichtkorallen, einige Polsterung von 30 Pixeln, etwas Rand von 10 Pixeln, und die Textausrichtung der Mitte. Dies ist nur, um Ihnen einige grundlegende Styling zu geben, damit wir die Elemente auf der Seite sehen können. Nun, wenn wir dies im Browser öffnen, gehen wir zur index.html und öffnen Sie dies. Da sind unsere sechs Artikel auf dem Bildschirm. Wir sehen nur das Standardverhalten im Moment. Da es sich um Elemente auf Blockebene handelt, sind sie alle online. Um mit der Flexbox zu beginnen, müssen wir dann den Anzeigetyp auf den Flex setzen. Dies geschieht auf den übergeordneten Elementen und den übergeordneten Elementen, die wir eine ID des Containers gegeben haben. Gehen wir zurück zu den Style-Tags. Verwenden Sie dann oben den harten, weil es eine ID ist, und dann können wir den Container anvisieren und dann den Anzeigetyp auf flex setzen. Gibt uns speichern und dann den Browser neu laden und wir haben jetzt eine Änderung. Der Grund, warum wir sie jetzt in einer Reihe wie dieser sehen, ist, weil, wie wir in den Folien in der letzten Vorlesung gesehen haben, die Standard-Flexrichtung Zeile ist. Werfen wir einen Blick auf die Zeilenumkehrung. Dies ist auch auf die Eltern und wir haben gesagt, dass mit der Flex-Richtung der Zeilenumkehr speichern. Bevor wir Item 1 auf der linken Seite und Item 6 auf der rechten Seite hatten, aktualisieren. Nun beginnt der erste Gegenstand auf der rechten Seite und er bewegt sich nach links. Wir haben auch eine Richtung der Spalte, die stapeln diese Elemente übereinander. Zeilenumkehrung ändern. Es wird jetzt eine Spalte sein und es gibt einen Stapel von oben nach unten. Wieder genau wie zuvor, wenn wir möchten, dass Artikel 1 das Gegenteil und unten unten unten ist, können wir dies auf Spaltenrückwärts setzen, Flexrichtung sagen Spaltenrückwärts, und jetzt unsere Artikel wechseln von unten nach oben. Dies ist eine vier Flexrichtungsoptionen, die wir für uns zur Verfügung haben. Denken Sie daran, wenn Zeichen Flexrichtung, dies wird die Hauptachse betrachtet. Wir haben Zeile, Zeilenumkehr, Spalte und Spaltenrückkehr zu. Das ist jetzt unser erster Blick unsere Flexbox und als nächstes werden wir einen Blick auf, wie wir Flex-Box verwenden und Inhalte rechtfertigen können. 4. Flexibler Umbruch und Ausrichten des Inhalts: In diesem Video werden wir uns Flex-Wrap ansehen und wie man den Inhalt rechtfertigt. Lassen Sie uns zunächst voran und ändern Sie die Flex-Richtung zurück in die Standardzeile innerhalb des übergeordneten Containers. Alle Elemente, die wir hinzugefügt haben, befinden sich jetzt in derselben Zeile. Wir sollten aktualisieren und dann von links nach rechts gehen. Wenn wir weiterhin weitere Elemente hinzufügen, werden alle weiterhin in der gleichen Zeile angezeigt. Gehen wir zu unseren Gegenständen und kopieren Sie diese und fügen Sie sie ein. Nummer 6, direkt darunter. Angesichts dieser 12 Elemente kann dieses Verhalten mithilfe der flex-wrap-Eigenschaft geändert werden. Die Standardeinstellung ist auf „Kein Umbruch“ festgelegt. diesem Grund sehen wir alle unsere Artikel auf der gleichen Linie. Dies gilt auch für den Container. Wenn wir zum Style-Abschnitt gehen und den Container anvisieren, fügen wir die Flex-Wrap-Eigenschaft hinzu und setzen Sie diese dann auf Wrap, speichern Sie das, neu laden. Jetzt werden die Elemente auf mehrere Zeilen umbrochen. Wenn wir den Browser noch schmaler machen, jedes Mal ist weniger Platz, werden sie alle auf zwei Zeilenumbrüche fallen. Verdrängt Elemente in der Zeile direkt darunter. Wenn Sie die gegenteiligen Effekte wollten, können wir Wrap Reverse verwenden, also fügen Sie umgekehrte am Ende davon hinzu. Geben Sie das Speichern und laden Sie es neu. Nun erscheinen die zusätzlichen Elemente, die in der Zeile unten waren, jetzt in der Zeile oben, weil es jetzt von unten nach oben funktioniert. Genau wie zuvor, wenn wir den Browser verkleinern, springen alle zusätzlichen Elemente auf eine Ebene anstatt unten. In der Tat gibt es auch eine Abkürzung für diesen Flex-Wrap und auch für die Flex-Richtung, um in eine Eigenschaft zu aktualisieren. Dies wird als Flex-Flow bezeichnet. Wir können diese beiden Zeilen hier und dann ungerade Flex-Flow löschen. Es nimmt zwei Werte ein. Die erste war unser Wert der Zeile für die Flexrichtung und dann die zweite für Warp. Diese erste Zeile mit Flex-Richtung, dann die zweite ist für den Flex-Wrap. Speichern Sie das. Jetzt haben wir diese beiden Zeilen zu einer zusammengeführt. Das nächste, was ich Ihnen zeigen möchte, ist, wie Sie den Inhalt rechtfertigen können. Dies wird verwendet, um zu steuern, wie unsere Artikel über die Hauptachse verteilt sind. Dies ist auch eine CSS-Eigenschaft, die dem Container hinzugefügt wird. Also lassen Sie uns rechtfertigen Inhalt hinzufügen und dann beginnen wir mit Flex-Starts. Wenn wir aktualisieren, sehen wir keine Änderung im Browser. Dies liegt daran, dass der Flex-Punkt standardmäßig ist. Wir können sehen, wie das effektiver mehr, wenn wir versuchen, Flex-End. Eher Flex-beginnt, lassen Sie uns Flex-End hinzufügen. Denken Sie daran, dass unsere Artikel standardmäßig in einer Reihe sind. Auf der Seite von links nach rechts richtet Flex-Start daher alle Elemente auf der linken Seite aus und richtet dann Flex-End alle Elemente an der rechten Seite aus, die das Ende der Hauptachse ist. Lassen Sie uns auch versuchen, zentrieren, speichern und neu laden. Jetzt ist alles an der Mitte der Hauptachse ausgerichtet. Wir haben immer noch das gleiche Verhalten, wenn wir den Browser verkleinern, alle Elemente würden immer noch auf die nächste Zeile fallen, beginnend von der Mitte. Dies platziert natürlich die Elemente entlang der Mittellinie der Hauptachse, die gerade hier durch ist. Die nächsten freien Optionen beziehen sich auf Verteilung des verfügbaren Speicherplatzes zwischen diesen Elementen. Wenn wir mit Leerzeichen zwischen beginnen. Anstatt zentrieren, können wir einen Raum dazwischen hinzufügen und sehen, wie das aussieht. Jetzt sind die Elemente immer noch in der gleichen Zeile, die normalerweise sein würde. Aber jetzt habe ich die gleiche Menge an Platz, die zwischen jedem Element verteilt ist. Wenn wir stattdessen wollten, dass der Raum überall um sie herum ist. Um also gleich auf der linken und rechten Seite zu sein, haben wir Raum dafür. Wechseln Sie den Raum zwischen, um Raum herum zu sein. Dieser Abstand wird jetzt auf beide Seiten angewendet. Gegenstände haben doppelt so viel Platz dazwischen, als es am Ende tun wird. Denn zum Beispiel hat Artikel 3 hier die Hälfte des Platzes und dann hat Punkt 4 auch hier die Hälfte des Platzes. Wenn Sie den Platz auf jeder Seite gleich haben wollen, haben wir auch Platz gleichmäßig. Lasst uns das mal ausprobieren. Jetzt gibt es sogar Platz zwischen allen Elementen. Dies ist es jetzt für dieses Video, aber Sie sollten jetzt in der Lage sein, zu sehen, wie leistungsstark die Flexbox für das Layout ist. Sogar wir fügen nur ein paar Zeilen CSS hinzu. 5. Elemente ausrichten: Beginnen wir dieses Video, indem wir zu unseren sechs Originalelementen auf der Indexseite zurückkehren. Lassen Sie uns diese letzten sechs, die wir früh hinzugefügt haben, löschen und dann neu laden und jetzt zurück zu unseren ursprünglichen sechs Elementen. Zuerst wollen wir mit einem Blick auf eine Zeile zu beginnen. Im letzten Video sahen wir uns rechtfertigen Inhalte an, die ausgerichtet oder Elemente und auch den Raum zwischen ihnen bestimmt. All dies geschah über die Hauptachse. Wir haben die Hauptachse auf Zeile gesetzt. Dies bedeutet, dass die gesamte Ausrichtung und der Abstand auf der Seite von links nach rechts verlaufen. Elemente ausrichten funktioniert auch mit denselben Elementen, diesmal jedoch auf der Querachse. Derzeit würde die Querachse mit unserem aktuellen Setup vertikal oder von oben nach unten verlaufen. Für diese Demo können wir einige verschiedene Höhen zu diesen Artikeln hinzufügen. Dies wird uns helfen, besser zu sehen, wie die Elemente ausrichten funktioniert. Lassen Sie uns über unsere sechs Elemente gehen und dann lassen Sie uns etwas Stil hinzufügen, so dass die Stil-Attribute. Fügen wir die Höhe hinzu und lassen Sie uns für 300 Pixel gehen, dann kopieren Sie diesen Abschnitt. Wir können das in ein paar mehr Male hinzufügen. Ich werde für 250 gehen und dann 320am Ende, und dann aktualisieren. Jetzt sieht das ein wenig seltsam aus. Wir haben nur die Höhen von drei dieser Elemente festgelegt, aber es sieht so aus, als hätten sie sich alle geändert. Dies liegt daran, dass der Standardwert für Ausrichtungselemente Strecken ist, sodass sich die Flex-Elemente auf die Höhe des höchsten dehnen , um die Höhe des Containers zu füllen. Also zurück zu unseren Styles oben auf der Seite. Auch dies ist während des übergeordneten Containers. Wir können ausrichten Elemente hinzufügen und wie wir gerade erwähnt, Strecken ist die Standardeinstellung, so dass das Hinzufügen eines Zeichens keine Änderungen verursacht. Beginnen wir mit Flex-Start. Flex-Start startet die Elemente an der Startkante der Querachse. Also für diejenigen wäre dies der Anfang der Seite und dann nach unten arbeiten. Jetzt sehen wir die drei Elemente, welche Höhe wir geändert haben, und die rechte noch, wie ursprünglich waren. Wenn wir möchten, dass Änderungen am unteren Rand der Seite beginnen, würden wir dann flex-end verwenden. Denken Sie daran, diese Flex-Start und Flex-End-Position ist abhängig von der Achse, ist unser Haupt und Kreuz. Wenn ich voran ging und die Hauptachse in Spalte änderte, also anstatt Zeile, wenn Sie dies in Spalte ändern, aktualisieren und jetzt setzt dies die Hauptachse auf vertikal, was bedeutet, dass das Flex-Ende, das eine Querachse setzt, würde nun auf der rechten Seite vorbei sein. Wenn wir es wieder in Zeile ändern und dann wieder einschalten. Außerdem gibt es die Möglichkeit, die Elemente zu zentrieren. Auch wenn wir Elemente ausrichten verwenden, können wir Flex-End ändern, um Mitte zu sein. Sie können sich wahrscheinlich vorstellen, was das bewirkt. Dies fügt eine Zeile direkt in der Mitte des Containers und alle Elemente werden gleichmäßig oberhalb und unterhalb dieser Zeile angeordnet. Diese Art von Layouts war früher viel komplexer, aber mit Flex-Box, dies ermöglicht uns, all dies mit nur ein paar Zeilen CSS zu tun. Wir können die Dinge noch weiter gehen, indem wir uns an der Grundlinie des Textes ausrichten. Dieser Text, der sich zwischen jedem Element befindet. Lassen Sie uns das Zentrum ändern, um Basislinie zu sein, zu aktualisieren. Innerhalb des Browsers auf den ersten Blick sieht es nicht anders aus als die Flex-Start-Option. Denken Sie daran, dass dies eine Linie in die Basislinie ist. Die Grundlinie ist die unterste Zeile des Textes und das ist, was wir hier sehen. Um eine Änderung zu sehen, müssen wir die äußere Position des Textes verschieben. Horizontale Linie sollte dies für uns tun. Lassen Sie uns zu unseren Artikeln gehen und in diesem ersten div können wir jetzt eine horizontale Linie hinzufügen. Lassen Sie uns sehen, welche Wirkung dies im Browser hat. Jetzt haben wir mehr Inhalt hier drinnen. Dies nach unten gedrückt ist Element ein Text und alle anderen Elemente sind noch am unteren Rand davon ausgerichtet. Wenn wir die äußere Position des Textes auch auf einem anderen Element verschieben, wird es auch immer noch ausgerichtet. Dieses Mal fügen Sie zwei horizontale Linien hinzu, dies ist innerhalb von Element drei und dann aktualisieren. Jetzt können wir sehen, dass alle Elemente noch ausgerichtet sind, obwohl ich zwei zusätzliche Inhalte hinzugefügt habe. Dies ist, wie wir Artikel in Flex-Box ausrichten verwenden können. Im nächsten Video werden wir einen Blick auf eine andere Querachsenausrichtungsmethode werfen, die als Inhalt ausrichten bezeichnet wird. 6. Inhalt ausrichten: Als Nächstes werden wir einen Blick auf align-content werfen. Ich weiß, dass wir ein paar Begriffe sehen, um unseren Kopf hier zu kriegen. Obwohl Sie sich align-content als ähnlich zu justify-content vorstellen können , die wir bereits verwendet haben. Diesmal gilt es jedoch eher für die Querachse als für die Hauptachse. Dafür benötigen wir noch ein paar Zeilen Inhalt. Also lassen Sie uns diese Stile verschieben, die im letzten Mal hinzugefügt wurden. Also die erste, die horizontale Linie, diese beiden Linien hier und dann die letzten beiden Stilattribute. Entfernen Sie das. Dann werde ich die sechs Elemente noch einmal kopieren und sie dann einfügen. In der Tat fügen wir diese in zwei weitere Male es geht 18 verschiedene Elemente. Speichern Sie das, und aktualisieren Sie es. Also haben wir jetzt etwa drei Zeilen Inhalt zu arbeiten wenn wir den Browser ein wenig verkleinern. Es würde auch für diese Demo helfen, wenn wir eine Hintergrundfarbe auf den Container setzen und ihn auch auf die volle Höhe des Bildschirms einstellen. also in diesem Container Lassen Sie unsalso in diesem Containereinige CSS hinzufügen. Vor allem die Hintergründe. Ich will auf hellgrün gehen. Stellen Sie dann die Höhe auf Vollbild mit 100vh ein. Denken Sie daran, dass vh eine relative Größe ist, die nur 100 Prozent der View-Port-Höhe sein muss. Lassen Sie uns schließlich diese Align-Elemente und Rechtfertigungs-Inhalte aus früheren Videos entfernen. Ich werde das nur aussagen. Also ist es immer noch da, dann erfrischen. So können wir jetzt an align-content arbeiten. Denken Sie daran, dass wir noch an der Querachse arbeiten. All dies wird von oben nach unten gelten. Genau wie Align-Items, die wir uns vorher angesehen haben. Strecken ist auch die Standardeinstellung für den Align-Inhalt. diesem Grund alle unsere Artikel und technisch volle Höhe des Viewportts. Wir haben auch einen vertrauten Flex-Start und auch Flex-End. Mal sehen, wie diese in align-content aussehen. Beginnen Sie mit Flex-Start, und aktualisieren Sie dann. Jetzt haben wir nicht den Standard-Streckungswert und alle Elemente, die sich am Anfang der Querachse befinden, die oben auf der Seite ist. Wie Sie sich wahrscheinlich vorstellen, schiebt Flex-End dies an den unteren Rand der Seite und steigt dann nach oben. Lassen Sie uns dies also mit Flex-End-Refresh demonstrieren, und jetzt ist alles unten am unteren Rand der Querachse. Wir haben auch das Zentrum. Was in diesem Fall alles in die Mitte der Höhe oder in die Mitte der Querachse schiebt . Sie sollten auch hier anfangen, ein Muster zu sehen. Die meisten Eigenschaften werden betrachtet, sind ziemlich gleich, aber nur auf eine andere Achse angewendet. Genau wie Inhalte rechtfertigen, gibt es auch einen Raum zwischen und Raum herum. Fangen wir mit Zwischenraum an. Dadurch wird der gesamte Abstand zwischen den Elementen angewendet. Wie wir gerade erwähnt haben, haben wir auch Raum-herum und dies wird uns gleich Platz um alle Gegenstände geben. Von oben nach unten befindet sich die Hälfte des Platzes auf dem Gegenstand und die andere Hälfte unterhalb des Artikels. Dies gibt uns den Effekt, dass wir doppelt so viel Platz zwischen jedem Element haben. Wenn wir die Hauptachse ändern ist Zeit, Spalte zu sein. Aktualisieren Sie dann den Browser. Jetzt Spalte legt die Hauptachse vertikal zu sein. Dies bedeutet, dass eine horizontale nun die Querachse ist. Dies bewirkt, dass Align-Inhalt und jetzt auf der Seite angewendet werden, da dies jetzt die Querachse ist. Gehen wir also voran und ändern Sie es zurück in Zeile und laden Sie dann den Browser neu. Dies ist eines der Dinge, die nur ein bisschen Übung braucht, um uns den Kopf zu bewegen. Sobald Sie anfangen, es in unserem CSS zu verwenden , werden die Dinge regelmäßiger viel einfacher. Dies ist es für jetzt für den Abstand aus den Elementen und ich werde Sie im nächsten Video sehen. 7. Unterobjekte steuern: ordnen: Alle Flexbox-Eigenschaften, die wir bisher angesehen haben , wurden dem übergeordneten Container hinzugefügt. Dies ermöglicht es uns, die Elemente als Gruppe zu steuern. Sowohl in diesem Video als auch in den verbleibenden Flexbox-Videos werden die Eigenschaften direkt auf die einzelnen Flex-Elemente angewendet. Dies gibt uns eine größere Kontrolle über einzelne Artikel. Zuerst werden wir uns mit der Festlegung einer Bestellung beschäftigen, die unsere Artikel erscheinen wird. Gehen wir zurück zu unserer Indexseite und wir können zu unseren sechs Originalartikeln zurückkehren. Lassen Sie uns diese letzten 12 löschen Elemente eins bis sechs lassen und in der Tat können wir auch die Höhen entfernen, die Sie früher festgelegt haben. Lassen Sie uns diese Zeile löschen und wir können auch eine Zeile Inhalt aus dem letzten Video kommentieren. Standardmäßig werden unsere sechs Elemente auf dem Bildschirm in der Quellreihenfolge angezeigt, so dass Artikel 1 bis Punkt 6 über diese Hauptachse angezeigt wird. Die Bestelleigenschaft ermöglicht es uns, jeden dieser Artikel neu anzuordnen. Ich werde damit beginnen, eine neue Klasse von in der CSS zu erstellen. Ich werde dies die Bestellung nennen und dann können wir die Bestelleigenschaft hinzufügen. Lassen Sie uns damit beginnen, dies auf eins zu setzen. Die Bestelleigenschaft ermöglicht es uns, jeden dieser Artikel neu anzuordnen , so dass alles, was wir tun müssen, ist diese Bestellklasse zu einem dieser Artikel hinzuzufügen. Lassen Sie uns für Punkt zwei gehen und als Klasse bestellen. Verlassen Sie den Browser und laden Sie ihn dann neu. Damit wird unser zweiter Artikel nun bis zum Ende gebracht. Dies liegt daran, dass alle Elemente eine Standardreihenfolge haben, die diese Eigenschaft hier von Null ist. Dies bedeutet, dass unser Artikel zwei jetzt ein Gewicht von eins hat es bis zum Ende bewegt. Diese Zahl kann z. B. 10, 15 oder sogar 30 sein, und sie werden immer noch in der Reihenfolge angezeigt, in der wir festgelegt haben. Negative Zahlen sind auch erlaubt, so dass wir dies auf negative setzen. Dies wird jetzt Punkt zwei platzieren, direkt am Anfang, da alle Ihre Artikel eine Reihenfolge von Null haben. Dies ist besonders nützlich für Änderungen in Layouts mit Responsive Design. Die Reihenfolge kann in einer Medienabfrage geändert werden. Sie haben verschiedene Layouts für verschiedene Bildschirmgrößen, so dass es ein wirklich nützliches Werkzeug zu haben ist. Auf diese Weise können wir die Bestellung mithilfe von Flexbox neu anordnen. Es ist wirklich einfach und nur eine Codezeile, aber Sie können sehen, wie effektiv dies sein kann. Als Nächstes wird erläutert, wie die Elemente mit dem verfügbaren Platz wachsen und verkleinern können. 8. Unterobjekte steuern: wachsen und schrumpfen: Wir werden weiter untersuchen, wie wir diese untergeordneten Gegenstände kontrollieren können. Genauer gesagt, wie sie wachsen und auf den verfügbaren Platz schrumpfen. Zunächst werde ich nach unten gehen und unsere Demonstration auf vier Produkte reduzieren. Wir können diese Bestellklasse auch entfernen. Dann auch das entsprechende CSS knapp darüber. Um dies zu tun, können wir eine Eigenschaft namens flex-grow und auch flex-shrink verwenden. Beginnen wir mit einem Blick auf Flex-Grow. Dadurch wird bestimmt, wie ein Element entlang der Hauptachse wachsen kann. In den Momenten wird die Elementgröße durch die Menge des Inhalts in der Mitte und auch durch jede Polsterung gesteuert . Derzeit nehmen sie nicht die volle Breite des Bildschirms ein, die Sie im Browser sehen können. Wenn wir voran gehen und Flex-Grow zu einem dieser Elemente als Inline-Stil hinzufügen, muss es natürlich nicht in der Linie sein. Es kann auch in der CSS2 enthalten sein. Fügen wir das Flex-Grow und setzen Sie dies auf den Wert eins. Speichern. Dann nimmt unser erster Gegenstand viel mehr Platz ein als die restlichen drei. Grundsätzlich bleiben diese drei Elemente hier, Nummer zwei , drei und vier, je nach Inhalt immer die gleiche Größe. Dann würde derjenige flex-wachsen, wird den zusätzlichen Platz in Anspruch nehmen. Wenn wir dasselbe für Punkt zwei tun, wenn wir dieses Flex-Grow kopieren, dann sehen wir, was das tut. Artikel drei und vier, beide nehmen immer noch den gleichen Platz ein, sie haben es immer getan. Dann wird der verbleibende Speicherplatz gleichmäßig zwischen den Elementen eins und zwei geteilt. Weil beide einen gleichen Flex-Grow-Wert von 1 haben. Wenn wir voran gehen und dies zu allen Artikeln hinzufügen. Artikel 3 und Punkt 4 auch, wir sehen jetzt, dass alle vier Elemente die gleiche Menge an Speicherplatz teilen. Dieser Flex-Grow-Wert von 1 ist keine bestimmte Maßeinheit, wie z. B. ein Pixel oder ein m. Er ist signifikant im Vergleich zu den restlichen Werten. Der Unterschied passiert, wenn sie nicht alle gleich sind. Wenn wir Item 3, einen Flex-Grow-Wert von zwei, von für den Browser, und jetzt Artikel 3 wird versuchen, den doppelten Speicherplatz als der Rest zu beanspruchen , wenn es verfügbar ist, Es ist Änderungen zu drei. Jetzt sollte noch breiter sein. Während diese Flex-Grow-Eigenschaft befasst sich mit, wie Elemente über diese Hauptachse wachsen, wenn der Raum verfügbar ist. Wir haben auch Flex Shrink zu. Dies befasst sich damit, wie Artikel verkleinern sollten, wenn nicht genügend Platz für sie vorhanden ist. Lassen Sie uns zuerst den Rap entfernen, indem wir den Flex-Flow auskommentieren , der hier ist. Schrägstrich mit Befehl und Schrägstrich. Wenn Sie Visual Studio Code verwenden, dann können wir eine feste Breite von 600 Pixel für den Container hinzufügen. Lassen Sie uns das unten hinzufügen. Breite von 600 Pixeln. Dann können wir sicherstellen, dass diese Elemente nicht in seinen Container passen , indem wir sie auf eine Breite setzen, sagen wir 160 Pixel. Also könnten wir es so machen und die Breite für das Element auf 160 Pixel einstellen. Dies ist eine Möglichkeit, dies zu tun, oder wir könnten eine neue Flex-Box-Eigenschaft verwenden, die Flex-Basis genannt wird. Lassen Sie uns dies ändern, um Flex-Basis-Leerzeichen und immer noch 160 Pixel. Diese Flex-Basis definiert eine Standardgröße eines Elements, bevor der verbleibende Raum verteilt wird. Hier sind die vier Elemente zu breit, um in den Behälter zu passen. Hier kommt Flex-Schrumpfung ins Spiel. Flex-Shrink bestimmt, welche Elemente verkleinert werden, um den verfügbaren Platz zu passen. Lassen Sie uns nach unten gehen und Flex ändern, um dieses Mal Flex Shrink zu sein. Ich werde für alle vier Elemente ändern. Lassen Sie uns die letzten beiden auf einen Wert von 2 setzen. Aktualisieren Sie dann. Jetzt sehen wir, dass die Punkte 3 und 4 geschrumpft sind. Da ein höherer Wert im Vergleich zu den Posten 1 und 2. Wenn wir über eine Erhöhung gehen, einer dieser Elemente zu drei statt. Dies führt dazu, dass der Artikel am meisten verkleinert wird, wenn nicht genügend Platz für alle in einen Container passen. In diesem Video haben wir uns Flex-Grow, Flex-Shrink und Flex-Basis angesehen. Diese drei Eigenschaften lassen sich so in der Flex-Kurzschrift kombinieren. Bis zum Artikel können wir diese Flex-Basis auskommentieren und sie dann durch flex ersetzen. Wenn wir Null hinzufügen, eins und dann Auto. Dies sind die Standardeinstellungen. Null ist zunächst ein Flex-Grow. Einer ist für alle Flex-Shrink, und dann Auto ist für die Flag-Leerzeichen, die Sie direkt oben hier hinzugefügt haben. Wenn wir das speichern und dann sehen, wie es im Browser aussieht, würden wir so mit den Standardeinstellungen aussehen. Wir haben diese feste Breite von 600 Pixeln für den Container. Dann unsere vier gleichen Elemente, weil sie alle auf den Wert Null gesetzt sind. Wir können mit diesen Werten herumspielen, genau wie zuvor. Zum Beispiel, wenn wir festlegen würden, dass alle Elemente einen Flex-Grow-Wert von eins haben, also eins und eins, dann über den Browser. Sie nehmen nun jeweils den verfügbaren Platz in einem Container in gleichem Umfang ein. Diese Flex-Eigenschaft ist viel einfacher und sauberer, als gerade jetzt diese drei Eigenschaften getrennt. Wir haben jetzt mit der Betrachtung fertig, wie Artikel wachsen und schrumpfen. Als Nächstes werden wir den Blick auf die Flex-Box beenden, indem wir etwas über eine Linie selbst lernen. 9. Unterobjekte steuern: Ausrichtung: Früher in diesem Abschnitt haben wir die gesamte Gruppe von Elementen auf verschiedene Arten ausgerichtet. Das funktioniert gut. Aber manchmal möchten Sie vielleicht, dass ein bestimmtes Element anders ausgerichtet ist als der Rest. Aber in diesem Fall haben wir das Selbsteigentum ausrichten. Um zu beginnen, werde ich die Inline-Stile entfernen, die wir gerade hinzugefügt haben, und das sind die vier Elemente unten. Entfernen Sie die Inline-Stile, bei denen es sich um einen Flex-Schrumpfwert handelt. Vor Schriftart 2. Self ausrichten funktioniert genauso wie Align-Elemente, die wir auf dem Container verwendet haben. Aber dieses Mal fügen wir es dem Artikel hinzu, wir wollen die Serie in Aktion steuern. Ich werde den Container so einstellen, dass er die volle Höhe hat. Scrollen Sie nach oben zum Abschnitt Stil, und dann lassen Sie uns die Höhe auf 100 vh einstellen, die sich daran erinnern, ist die Höhe des Ansichtsports. Wenn wir in den Browser gehen, genau wie wir mit Align-Elementen gesehen haben , ist der Standardwert stretch, weshalb diese oben nach unten auf der Seite platziert werden. Um eines dieser einzelnen Elemente zu steuern, können wir ausrichten selbst und Änderungen Standardwerte hinzufügen. Gehen wir zu den Produkten und fügen Sie dies zu einem dieser hinzu. Lassen Sie uns den Stil wieder einführen. Dieses Mal können wir hinzufügen, ausrichten selbst, und beginnen wir mit Zentrum, dann aktualisieren. Jetzt steuern wir ein einzelnes Element und nicht die gesamte Gruppe von Elementen. Wir haben auch einige vertraute aussehende Eigenschaften, wie Flex Start, die wir wissen sollten, was jetzt passiert, wenn wir aktualisieren. Damit wird dies nun an den Anfang der Achse gesetzt. Wenn wir am unteren oder entgegengesetzten Ende platziert verteilen wollen, haben wir auch ein Flex-Ende, das wir bereits gesehen haben. Dies gibt uns ein erwartetes Verhalten. Wir haben auch Grundlinie zwei, auf die wir nach Überwerten gesucht haben. Lassen Sie uns Flex Ende der Baseline ändern, aktualisieren. Diese werden nun an der Basislinie des Textes von übergeordneten Elementen ausgerichtet. Dies ist es jetzt für unseren Blick auf die CSS Flex-Box. Sie können sehen, wie nützlich es für die Erstellung von Websites sein kann. Als nächstes werden wir eine andere Layout-Technik abdecken die CSS-Raster genannt wird. Wir sehen uns bald. 10. Zeit zum Üben: Flexbox in Tech Store integrieren: Bevor wir etwas über das CSS-Raster lernen, während Flexbox immer noch frisch in unseren Köpfen ist, möchte ich, dass Sie losgehen und jetzt etwas Übung mit dieser Flexbox machen. Diese Flexbox ist ein wirklich nützlicher Weg, um unsere Websites zu verlegen. Aber genau wie wenn sie etwas Neues lernen, können sie zunächst eine Menge zu übernehmen scheinen. Es wird jedoch einfacher mit der Praxis. Das ist es, was ich möchte, dass Sie jetzt voran gehen und tun. Ich möchte, dass Sie einige der Flexbox-Techniken verwenden, die Sie gelernt haben , und sie dann auf unsere Textilprojekte anwenden. Sie müssen nicht verrückt werden und das gesamte CSS komplett neu schreiben. Aber versuchen Sie einfach, ein paar Dinge zu ändern, um diese Flexbox, einige Ideen, Qubits, damit die Produkte automatisch füllen den Behälter. Oder Sie könnten noch weiter gehen und Flexbox verwenden , um das Layout für Geräte unterschiedlicher Größe zu ändern. Geh den Kopf und gib das mal los und dann Comeback, um alles über das CSS-Raster zu erfahren. 11. Was ist das CSS-Raster?: Wir gehen nun zu einer weiteren leistungsstarken Technik für das Layout von Websites, genannt CSS-Raster. Grid löst so ziemlich alle Layout-Probleme, die Webentwickler in der Vergangenheit umgehen mussten. Die Flexbox, die wir uns gerade angesehen haben, hilft auch, viele dieser Layout-Probleme zu lösen, aber sie ist eindimensional. Wir können nur in Spalten oder Zeilen gleichzeitig arbeiten. Grid hingegen ist wirklich flexibel und ermöglicht es uns, in zwei Dimensionen zu arbeiten. Dies bedeutet, dass es einfach verwendet werden kann, um eine vollständige Website zu erstellen, während flexbox in der Regel besser für kleinere Ausrichtungen und Positionierungen geeignet ist. Sie können beide zusammen verwendet werden und arbeiten tatsächlich sehr gut zusammen. Vergeuden wir keine Zeit damit, direkt ins Netz zu springen, um mehr über das Gitter zu erfahren. 12. Erster Einblick in das CSS-Raster: Okay, also lasst uns mit dem Gitter beginnen. Zu Beginn werde ich den Flexbox-Projektordner duplizieren und dann das Raster umbenennen. Also über den Desktop oder den Ort, an dem Sie Ihr Projekt gespeichert haben, werde ich dieses Projekt duplizieren und dann, wenn das fertig ist, lassen Sie uns das Raster umbenennen. Öffnen Sie dies in Visual Studio Code. Dann können wir auch den Index oder HTML innerhalb des Browsers öffnen. Dies wird sagen, dass wir den gesamten Standard-HTML-Code einrichten, wir brauchen , um loszulegen. Lassen Sie uns zum Index oder HTML gehen. Wir können die Seitenleiste schließen und dann einige Änderungen vornehmen, um dies zu bereinigen. Also der Titel das Gitter. Dann können wir alle Stile aus dem Container entfernen. Nur in dieser Hintergrundfarbe verlassen. Wir können das auch wiederverwenden. Viele wiederverwendete Elemente auch, wählen Sie entfernen die Flex-Eigenschaften, so dass in nur einer Hintergrundfarbe und auch das Muster ist in Ordnung. Bis zum div, wird wieder den div-Container und auch die einzelnen Elemente verwenden , also lassen Sie uns einfach die Style-Eigenschaft von innen entfernen und dann sind wir gut zu gehen. Gut. Genau wie bei der Flexbox müssen wir zuerst den Anzeigetyp des Containers ändern, aber dieses Mal verwenden wir das Gitter, anstatt es auf Flex zu setzen. Zeigen Sie also mit der Art des Rasters an und lassen Sie uns sehen, was im Browser passiert. Wenn wir neu laden, sehen wir noch keine Änderungen. Wenn wir das Raster setzen, die untergeordneten Elemente des Containers auf Blockebene, so tun Sie die volle Breite der Seite. Wenn Sie möchten, dass die Elemente inline sind, können wir den Rastertyp in Inline ändern. Lassen Sie uns zu hier gehen und ändern Sie dies in Inline-Grid, neu laden und dann alle Elemente jetzt inline statt blockieren. Ich werde aber vorerst bei Gittern bleiben. Lassen Sie uns dieses Inline entfernen und es wieder normal machen. Dann erklären Sie, wie wir wollen, dass diese Elemente angelegt werden. Wir legen die Anzahl der Spalten und Zeilen fest, die wir verwenden möchten. Ich werde mit den Spalten beginnen und dies geschieht innerhalb des Hauptcontainers. Wir tun dies mit der CSS-Eigenschaft, die grid-template-columns genannt wird, und dann werde ich dies auf 100 Pixel und auch den Browser einstellen. Um diese Elemente besser zu sehen, lassen Sie uns einen Rahmen um die Außenseite von jedem hinzufügen und dies muss innerhalb der Elemente erfolgen. Nur ein einfacher Rand von einem Pixel und durchgezogene Linie. Da gehen wir. Wir haben momentan nur eine Spalte angegeben, die eine Breite von 100 Pixel ist. Deshalb sehen wir sie alle in einer Spalte wie diese gestapelt. Wenn wir mehr als eine Spalte wollen, geben wir mehr Zahlen an. Also kurz nach den 100 Pixeln für die Rastervorlagenspalten fügen wir eine zweite Spalte von 300 Pixeln und dann eine dritte von 80. So sieht das im Browser aus. Wir haben hier drei Größen angegeben. Die ersten drei Elemente dieser Größen. Wir haben die ersten 100, dann 300 und dann 80. Dann werden alle zusätzlichen Elemente wiederholt, wie wir für diesen vierten Punkt hier unten sehen, der in die erste Spalte von 100 Pixeln fällt. Dies kann bei mehr Gegenständen besser gesehen werden. Lassen Sie uns zum HTML gehen. Jetzt können wir eines dieser Divs duplizieren. Lassen Sie uns das noch ein paar Mal einfügen. Also 5, 6 und dann 7 und es gibt unsere wiederholten Artikel in der zweiten Reihe. Dann bleibt ein zusätzliches Element übrig, das standardmäßig die erste Spalte enthält. Diese Spalten und auch Zeilen, die wir als nächstes betrachten werden als Spuren bekannt. Im Moment haben wir eine 100 Pixel pro Spur, eine 300 Pixel breite Spur und dann eine 80 Pixel breite Spur auf der rechten Seite. Außerdem müssen diese auch nicht in Pixeln dimensioniert werden. Wir können Dinge, die wir bereits wissen, nicht benutzen. So fünf Prozent oder sogar automatisch, um automatisch den verbleibenden Platz zu nehmen. Statt 80 Pixel hier können wir diese dritte Spur auf auto setzen und dann wird diese dritte Spur automatisch den verbleibenden Platz einnehmen. Jetzt, auf Zeilen, im Moment, wird die Höhe jeder der Zeilen durch den Inhalt festgelegt, dies schließt ein Teil in zwei ein. Mit Visual Studio Code können wir einige Beispieltext namens Lorem Ipsum hinzufügen. Gehen wir runter zu einem unserer Artikel. Nehmen wir an, Punkt zwei und wenn wir Lorem mit einer Temp eingegeben haben, erhalten wir dann mehr Textinhalt. Mal sehen, welche Auswirkungen dies auf den Browser hat. Diese erste Reihe ist wegen des zusätzlichen Inhalts jetzt größer. Das wollen wir aber nicht immer, wir wollen oft selbst die Kontrolle darüber haben. Hier kommt Grid-Template-Zeilen ins Spiel. Wenn wir zurück zu unserem Container gehen, können wir auch die Grid-Template-Zeilen setzen und lassen Sie uns dies auf einen Wert von 100 Pixel setzen. Dann zurück und alle drei Zeilen sind nun auf 100 Pixel hoch gesetzt. Nun, der Inhalt hat nicht mehr die Kontrolle über die Höhe , weil wir es so eingestellt haben, dass es genau das ist, was wir wollen. Genau wie Spalten wirkt sich nur das Setzen eines Wertes nur auf die erste Zeile aus. Ich kann weitermachen und unsere Werte hinzufügen. Gehen wir weiter und fügen Sie den ersten hinzu. Nehmen wir an, 250 Pixel, 150 Pixel und dann 100. Ok. Gut. Jetzt haben Sie drei einzeln Nebenstraßen. In nur wenigen Zeilen haben wir das Layout für unseren Inhalt in zwei Dimensionen gesteuert, wobei sowohl Spalten als auch Zeilen verwendet werden. Dies steht im Gegensatz zu der Flexbox, die nur für jeweils eine Dimension verwendet werden soll, entweder für eine Zeile oder Spalte. Dies ist unser erster Blick auf die Gitter. Es gibt noch so viel mehr zu decken, obwohl und wird im nächsten Video weiter. 13. Rasterlücken: Im letzten Video haben wir einen Rahmen um diese Rasterelemente hinzugefügt. Wir kommen zurück, um zu sehen, wie sie angelegt sind. Wenn wir zum CSS gehen und diesen Rahmen entfernen und zurück zum Browser. Es wird schwierig, die Zeilen und Spalten zu sehen. Standardmäßig gibt es kein Leerzeichen zwischen den Spalten und Zeilen, aber um dies zu beheben, können wir Gitterlücken verwenden. Um eine Raster-Lücke zwischen Spalten hinzuzufügen, haben wir Gitter-Spalten-Lücke. Dies wird auch auf den Container angewendet. Lassen Sie uns also voran und fügen Sie Gitterspalte-Lücke hinzu. Der Wert lag bei uns. Beginnen wir also mit 10 Pixeln und dies wird eine 10-Pixel-Lücke zwischen jeder der Spalten hinzufügen. Wie Sie vielleicht schon erraten haben, gibt es auch Gitter-Zeilen-Lücke und Sie können dies auch dem Container hinzufügen. Also Gitter-Zeilen-Lücke und lassen Sie dies wieder auf 10 Pixel setzen, aktualisieren. Es gibt jetzt einen Abstand von 10 Pixeln zwischen den Zeilen und den Spalten. Beachten Sie, dass diese Lücken nur zwischen den Zeilen und Spalten liegen, nicht um den Rand. Dies löst eines der alten Probleme, die wir beim Abstand neuer Elemente mit CSS-Methoden wie Marge hatten , wobei der Raum um die Elemente herum liegen wird, sogar die umgebende Kante standardmäßig. Außerdem gibt es eine Kurzschrift-Version, die auch Gitterlücke genannt wird. Anstatt hier zwei Codezeilen zu haben, können wir diese entfernen und stattdessen Gitterlücke verwenden. Genau wie bei der Verwendung von Marge und Padding können wir zwei Werte festlegen. Die erste ist für die Zeilen, also 20 Pixel und dann für die Spalten, 10 Pixel, dann aktualisieren. Oder wenn wir wollten, dass ein Wert sowohl auf die Zeilen als auch auf Spalten angewendet wird, können wir einfach einen Wert belassen, z. B. 10 Pixel, und dann hinterlässt er gleich lange Lücken. Sie können sehen, wie viel wir mit nur ein paar Zeilen CSS steuern können. Diese Art von Layout ohne das Gitter wäre viel komplexer und zeitaufwändiger. Dies ist es jetzt für Gitterlücken. Als nächstes schauen wir uns an, wie man Spuren wiederholt und auch die Min- und Maximalgrößen einstellt. 14. Spurwiederholung und die Einheit fr: In diesem Video werden wir uns einige Möglichkeiten ansehen, um unsere Tracks besser zu kontrollieren. Zuerst ist, wie man Spuren wiederholt, die die gleichen Größen haben. Wenn wir wollten, dass alle unsere Spalten 200 Pixel breit sind, genau so. Anstatt alle frei zu setzen, wenn wir 200 Pixel hatten, wissen wir bereits, dass der vernünftige Wert wie diesen, wird nur dazu führen, dass eine Spalte angezeigt wird. Um dabei zu helfen, werden Grid-Provider wiederholt, so dass wir dies innerhalb unserer Spalten hinzufügen können. Lassen Sie uns Wiederholungen hinzufügen, und dann können wir unseren Wert innerhalb der Klammern wie folgt hinzufügen. Wir behalten immer noch die Größe des LKWs hier, aber vorher fügen wir die Anzahl der Male hinzu, die wir wollen, dass es wiederholen. Wenn vier Spalten wollen, würden wir vier bei 200 Pixel tun, und neu laden, und Elemente von vier Spalten mit gleicher Breite. Wir können nach wie vor weitere einzelne Tracks hinzufügen, entweder vor oder nach. Wenn wir wollten, dass der erste 100 Pixel ist, und dann vor oder danach wiederholen, fügen wir einfach einen neuen Wert hinzu. 100 Pixel und dann werde ich nachher wiederholen. Dies gibt uns unsere erste Spalte mit einer Breite von 100 Pixeln und vier wiederholten Spalten mit jeweils 200 Pixeln. Wollten wir einen fünften Track, um den verbleibenden Platz auf der rechten Seite zu beanspruchen, könnten wir dies auch tun. Wir könnten eine feste Größe hinzufügen oder wir könnten die Auto-Eigenschaft wiederverwenden, die wir zuvor gesehen haben, aktualisieren und jetzt haben wir ein zusätzliches Element am Ende. Oder alternativ, wenn wir wissen, wie viele Spalten wir verwenden möchten, können wir auch dieses Auto auf setzen, wählen auto vom Ende entfernen, und den ersten Wert, und sagen wir, wir wollen freie Spalten. Wir könnten auch Auto innerhalb der Wiederholungen verwenden. Da gehen wir hin. Es gibt unsere drei Spalten und jetzt ändern sich die Tracks automatisch auf den Inhalt. Als nächstes möchte ich Ihnen eine neue Maßeinheit zeigen, die FI-Einheit genannt wird, die kurz für Bruchteil ist. Diese Einheit bezieht sich auf einen Teil des verfügbaren Platzes. Es funktioniert wie früh, was wir uns angesehen haben, Flexwerte, wobei ein Wert von eins ein Teil des verfügbaren Platzes ist und der Wert von drei dreimal größer ist. Lassen Sie uns es zu unseren Spalten hinzufügen und sehen, was passiert. Immer wenn Sie Vorlagenspalten erstellen, können wir anstelle von Auto eine fi hinzufügen, und aktualisieren. Jetzt hängt die Breite unserer Spalten nicht vom Inhalt ab. Sie nehmen alle den gleichen verfügbaren Platz ein, und natürlich das Hinzufügen einer neuen Spalte in fi wird das Hinzufügen einer neuen Spalte in fidoppelt so viel Platz in Anspruch nehmen. Fügen Sie eine vierte Spalte hinzu, aktualisieren Sie sie. Dies ist jetzt doppelt so groß wie diese drei, wie Sie es erwarten würden. Wiederholen kann auch auf Zeilen angewendet werden. unten können wir auch Wiederholungen hinzufügen. Wieder in der Klammer fügen wir hinzu, wie viele Zeilen wir wollen, und dann die Größe, und entfernen Sie dann unsere letzte Spalte von oben. Holen Sie sich jetzt für Neuladungen auch drei gleich große Zeilen. Auch hier können unsere Zeilen auch mit anderen Größenspuren gemischt werden, was bedeutet, dass dies wirklich flexibel zu bedienen ist. 15. Minimale und maximale Spurgrößen: Das CSS-Raster ermöglicht es uns auch, einen Bereich für die LKW-Größe festzulegen, indem wir die minimale, maximale Größe hinzufügen, die sein sollte. Wir tun dies mit der min-max-Funktion und wir können dies innerhalb unserer Spalten oder Zeilen tun. Wenn wir zu den Spalten gehen, um zu beginnen, können wir diese Wiederholungen entfernen und dann durch die min max Funktion ersetzen. Innerhalb der Klammern nimmt dies auch zwei Werte ein. Die erste ist die minimale Größe der Spalte. Nehmen wir an, 160 Pixel und dann ist der zweite Wert die maximale Größe, lassen Sie uns für 200 Pixel gehen. Dieser Abschnitt gilt für die erste Spalte und lassen Sie uns ein paar weitere Spalten hinzufügen. Der zweite Modus kann ein fr sein, und dann wird der dritte es doppelt so groß wie 1fr machen, dann über den Browser. Dieser erste ist der, an dem wir interessiert sind. Dies ist eine, die min-max verwendet und die Größe sollte zwischen 160 und 200 Pixel betragen. Um zu überprüfen, dass dies funktioniert, öffnen wir die Entwicklertools und überprüfen die erste Spalte. Gehen wir rüber zum Inspektor. Wenn wir diesen Artikel öffnen, können wir sehen, dass die Größe auf 200 Pixel eingestellt ist. Dann ist die zweite 1fr, also nehmen wir einen Pfad des verfügbaren Platzes. Der dritte ist auf 2fr gesetzt, also sollte es doppelt so viel Platz haben wie der verfügbare Platz. Das ist 518 und dieser ist 259, das ist genau die Hälfte. Wir können dieses Min-Max auch besser in Aktion sehen , indem wir den Browser auf kleinere Größe verkleinern. Dann lassen Sie dieses erste Element wieder öffnen und Sie können sehen, obwohl sein Browser wirklich klein ist, haben wir jetzt einen Mindestwert von 160 Pixeln. Diese Min-Max-Funktion ist wirklich nützlich, wenn wir eine gute Kontrolle über die Größe unserer Spuranzeige haben wollen und so können wir sie verwenden. 16. Rasterliniennummern: Jede der Spuren, die wir erstellen, sogar in einer Reihe oder Spalte hat diese nummerierten Rasterlinien zwischen ihnen. Diese Rasterlinien beginnen bei einer, d. h. dem Anfang der Spur, fahren dann entlang der Rasterrichtung bis zum Ende der Spur fort. Hier sehen wir, dass wir unsere Säulenspuren von 1-5 nummeriert haben, und die Zeilen nummeriert von 1,2,3,4. Aber warum müssen wir das wissen? Nun, wir können diese Gitterliniennummern verwenden, um ein Element genau dort zu positionieren, wo wir auf einem Raster sein wollten. Wir verwenden Gitterzeilenstarts, Rasterzeilenende, Rasterspaltenbeginn und Rasterspaltenende, um Startpositionen über jede Achse anzugeben, wo wir ein Element platzieren möchten. Hier haben wir ein Element zwischen den Zeilen zwei und drei in der Zeile, und dann zwischen den Zeilen drei und vier für die Spalten. Gehen wir zum Texteditor und geben das selbst. Um zu beginnen, werde ich dieses Raster von den Folien replizieren, öffnen Sie die Rastervorlagenspalten, lassen Sie uns eine Wiederholung hinzufügen, entfernen Sie das min-max, und dann werde ich dieses Mal wiederholen und fügen Sie einfach vier Spalten bei jeweils 1 fr hinzu, und dann für die Zeilen können wir drei wiederholen, bei 1 fr auch und diese können alle gleich sein. Indem wir dies in Aktion sehen, brauchen wir auch einige weitere Artikel. Lassen Sie uns eines dieser divs kopieren, die Elemente, und fügen Sie dann ein, und lassen Sie uns für 12 Elemente gehen. 8, 9,10,11 und dann 12, und da als unsere 12 Elemente auf dem Bildschirm, die Positionierung mit diesen Rasterlinien werden die ersten Eigenschaften, die wir bisher abgedeckt haben, die für den Artikel und nicht für einen Container gelten. Ich werde die Klasse für eines dieser Elemente ändern. Lassen Sie uns zu den Elementen gehen, und gehen Sie für dieses, und ändern Sie es zu Element eins, und ändern Sie dann die Hintergrundfarbe und das CSS, so dass dies ein wenig mehr abhebt. Artikel eins Ich werde für die Hintergrundfarbe gehen, dies kann alles andere als hellblau ist in Ordnung und aktualisieren, und jetzt haben wir ein Element, das sich herausstellt, großartig. Wir gehen jetzt, um mit diesem einen Element zu arbeiten, begann mit dem Beispiel von den Folien. Wenn wir zu unserem Element ein CSS gehen, können wir mit Rasterzeilenstarts beginnen, die wir in den Folien gesehen haben, und dies ist die Ausgangsposition in der Zeile, also gehen wir für Opposition zwei, und wir müssen auch hinzufügen Gitterzeilenende für die Endposition. Auch wenn Sie durch die Folien gehen, ist dies die Position drei und dann die gleiche für die Spalten. Rasterspalten beginnen, drei positionieren, Rasterspaltenende, Position vier und gegenüber dem Browser. Beachten Sie, wie dieser Artikel eins verschoben wird und der Rest angepasst wurde und immer noch in Ordnung geblieben ist. Diese Rasterlinien können eine beliebige Zahl sein, um das Element an einer beliebigen Stelle im Raster zu platzieren, oder sie können sogar mehrere Zeilen und Spalten umfassen. Wenn wir wollten, dass dieses blaue Element auch die Zeile darunter nimmt, könnten wir in das CSS gehen und das Gitterzeilenende ändern, diesmal auf Nummer 4. Reload und jetzt erstreckt sich über zwei Rasterzeilen, gleich mit den Spalten zwei. Wenn wir wollten, dass sich die Elemente auch über die Spalte rechts davon erstrecken, könnten wir einfach die Zahlen anpassen. Das Gitterspalte Ende, um Nummer 5 zu sein, und da gehen wir, und immer noch werden alle Elemente fließen und auch Ordnung halten. Es gibt auch eine Kurzschriften-Syntax, um dies noch einfacher zu machen. Anstatt vier Zeilen in unserem CSS zu haben, können wir, wenn wir dies auskommentieren, Rasterzeile verwenden. Wieder diese Rasterzeile, können wir unsere zwei Gitterzeilenwerte hinzufügen, von zwei und vier, durch einen Schrägstrich getrennt, und dann haben wir auch eine Abkürzung für Gitterspalte, die, wie Sie vielleicht erraten haben, ist eine zwei Rasterspalte Größen von drei, und dann fünf, und wenn wir jetzt einen Blick darauf werfen, nach dem Nachladen, alles sieht immer noch gleich aus, aber stattdessen haben wir dies jetzt über zwei Zeilen. Schließlich gibt es eine noch kürzere Version, die auch Rasterfläche genannt wird. Lassen Sie uns auch unsere diese beiden Zeilen hier kommentieren, und dann unter diesem können wir und zum Rasterbereich, aber dieses Mal fügen wir unsere vier Werte hinzu. Wir müssen sehr vorsichtig sein, weil die ersten beiden Werte unsere beiden Start-Unterteilungen sind. Der erste ist der Zeilenstart, und dann haben wir Spaltenstart, also sind die ersten beiden Werte zwei und dann drei. Dann sind die letzten beiden unsere beiden Endpositionen, das ist diese eine, vier und dann fünf. Auch hier sollten wir keinen Unterschied im Browser sehen, aber dieses Mal befindet sich das CSS nur in einer Zeile, aber seien Sie vorsichtig mit der Reihenfolge, in der die vier Werte hinzugefügt werden sollen. Grid stellt uns auch das Schlüsselwort-Tool span zur Verfügung. Auf diese Weise können wir die Zeile angeben, mit der wir beginnen möchten, und dann, wie viele Zeilen oder Spalten wir überspannen möchten. Wenn Sie Beispiel verdoppeln wollen, um auch diese untere Reihe zwei hier unten zu nehmen, könnten wir unsere Position zwei beginnen, wie wir es bereits tun. Dann erstrecken Sie sich über unsere drei Reihen, also eins, zwei und drei. Zurück zu unserem Rasterbereich. Anstelle des Zeilenende auf vier gesetzt werden, können wir dann sagen, span über drei Zeilen. Sieh mal, wie das aussieht, gut. Jetzt beginnen wir an der gleichen Position und Spannweite, eins, zwei und drei. Überspannungen über mehrere Tracks wie diese ist wirklich nützlich für die Gestaltung unserer Webseiten. Zum Beispiel könnten wir über die obere Reihe erstrecken, um einen Kopfbereich zu erstellen, oder einen Bereich für die Seitenleiste und auch den Hauptbereich abschneiden . Dies ist es jetzt vier Zeilennummern, und ich werde Sie im nächsten Video sehen. 17. Rasterliniennamen: Im letzten Video schauten wir uns die Rasterlinien an und wie sie nummeriert sind. Grid gibt uns auch die Möglichkeit, diese Rasterlinien zu etwas passenderem zu benennen. Sie werden oft auf Namen wie Zeilenbeginn oder Zeilenende stoßen. Eine weitere nützliche Möglichkeit besteht darin, sie in Bezug auf den Abschnitt aller Seiten wie Kopfzeile, Fußzeile, Seitenleiste und so weiter zu benennen . Wir werden nun wieder auf das Hinzufügen von Eigenschaften zum Container zurückkehren. Wir können Artikel 1 zurückgeben, um nur Artikel zu sein. Lassen Sie uns das entfernen am Ende von hier und jetzt, wenn wir zurück zu unserem Container CSS scrollen, können wir weiter gehen und unsere Spalten hinzufügen. Lassen Sie uns diese Wiederholung von hier entfernen und alles, was wir tun müssen , ist einen Namen innerhalb der eckigen Klammern für jede Spalte hinzuzufügen, gefolgt von der Größe der Spur. Wir öffnen und schließen die eckigen Klammern. Wir können unsere erste setzen, um zuerst aufgerufen zu werden und dann die Größe von 1FR. Wir können dies dann mit den eckigen Klammern wiederholen und diese zweite nennen, und das kann 2FR sein. Wenn wir die dritte Spalte wollen, genau das gleiche. Der Name ist dritter, genannt 1FR und dann ganz am Ende können wir diesen letzten nennen und dies auf 2FR setzen. Erinnern Sie sich an diese Namen in den eckigen Klammern, ganz nach Ihnen. Mal sehen, wie das aussieht und mal sehen, wie wir vier Spalten in Aktion sind. Güte, unsere vier Säulen mit 1FR, zwei, eins und dann zwei. Anstatt einzelne Namen zu verwenden, wie wir es gerade getan haben, können wir den gleichen Namen für jede Spur wiederholen, wie Col-Starts und dann Col-End, Col-Start 2, Col-End 2, Start 3, Ende 3, Start 4 und dann Ende 4. Um dies zu erreichen, müssen wir nur Col-Start und auch Col-Ends hinzufügen. Dann werden diese Zahlen automatisch nach jedem hinzugefügt, um zwischen jeder Spalte zu unterscheiden, und wir können auch genau das gleiche für Zeilen 2 tun. Wir können dies erreichen, indem wir zurück zum Projekt gehen und wiederholen. Um zu beginnen, diese Col-Start und Col-End zu jeder Spalte hinzuzufügen, können wir voran gehen und verwenden Sie die Wiederholungsmethode von vor und löschen Sie die vier einzelnen Namen, dann gehen Sie weiter und fügen Sie wiederholen. In den Klammern werde ich vier Spalten hinzufügen. Fügen Sie also vier durch das Komma getrennt hinzu. Dann können wir weitermachen und unsere eckigen Klammern hinzufügen. Der erste Wert, den wir als col-Start festlegen werden, und dies ist der Name für den Anfang jeder einzelnen Spalte. Es wird Col-Start sein, dann Col-Start 2, Col-Start 3 und so weiter. Dann die Größe, die wir wollen, dass jede Spalte sein soll, es sei denn, ich möchte, dass es 1FR ist. Dann ein zweiter Satz von eckigen Klammern, um den Namen am Ende jeder Spalte hinzuzufügen. In unserem Fall werden wir col-end verwenden und das dann speichern und auch das gleiche für die folgenden Zeilen tun. Wir können drei Reihen behalten, es ist in Ordnung. Wir können den Namen der Zeilenstarts hinzufügen, die Größe von 1FR und dann unser Endname von Zeilenende geben, dass speichern und dann aktualisieren. Dann sind wir zurück zu einem Standard für vier mal drei Rasterlayout. Jetzt können wir voran gehen und fügen Sie unseren Artikel eine Klasse wieder an Ort und Stelle und wir können das Element zu bewegen, wo wir wollen, mit diesem Gitternamen. Die erste, es ist unter Klasse von Punkt 1. Damit wir den blauen Gegenstand wieder sehen können. Um die Dinge klarer zu machen, werde ich den Rasterbereich auskommentieren , den wir hier für Punkt 1 verwendet haben , und dann zurückgehen, um diese vier individuellen Werte zu verwenden , damit es ein wenig einfacher ist, mit zu arbeiten. Kannst du die Reihe haben, um bei zwei und vier zu beginnen? Lasst uns das einfach vorerst lassen. Stattdessen für die Spalten, lassen Sie uns für col-Start gehen und dann die Position zu mir beenden col-end. Denken Sie daran, dies sind die Namen, die wir oben in den eckigen Klammern gesetzt . Laden Sie den Browser neu. Wie erwartet, haben wir den Zeilenstart an Position zwei, das ist eins und dann zwei, und dann endet es Position vier, die wir mit diesen beiden Werten hier beginnen. Wir legen dann die Spalten als Spalten-Start und Spaltenende fest. Denken Sie daran, die Col-Starts und Col-End ist Start- und Endposition unserer ersten Spalte. Deshalb hat es hier nur einen Abschnitt aufgenommen. Wenn wir wollten, dass dies zwei Spalten wie über zu dieser hier erstreckt, die sich dann zu col-end 2 ändert. Nun beginnt dies am Anfang der ersten Spalte und endet am Ende von Spalte 2. Jetzt wollen wir die Reihen. Wenn wir den ersten Wert auf Zeilenstart setzen und dann der zweite Zeilenende 4 des Browsers sein. Nun, dies beginnt bei Zeilenstart, die hier die erste Zeile ist und endet dann an Zeilenende 4, die hier die vierte ist. Wir machen hier nichts anderes, als wir es bereits gelernt haben. Der einzige Unterschied besteht darin, dass wir diese Rasterlinien durch einen Namen und nicht durch eine Zahl referenzieren. Als nächstes werden wir uns ansehen, wie wir Rastervorlagenbereiche verwenden können, um eine vollständige Websites zu erstellen. 18. Rasterschablonenbereiche: Neben der Positionierung von Elementen mit diesen Rasterlinien können wir auch vollständige Bereiche wie Kopfzeile, Inhalt, Seitenleiste und Fußzeile erstellen . Grid bietet uns eine Eigenschaft namens Rastervorlagenbereiche, dies zu tun. Zuallererst müssen wir darüber nachdenken, wie unser Raster mit Zeilen und Spalten strukturiert wird. Betrachtet man das Diagramm hier, haben wir eine Kopfzeile auf einer Zeile, Inhalt und Seitenleiste in der nächsten Zeile und schließlich eine Fußzeile in der dritten Zeile. Daher brauchen wir keine drei Reihen des Gitters. Wir brauchen nur zwei Spalten für den Inhalt und die Seitenleiste. Denken Sie daran, dass sich die Kopf- und Fußzeilenbereiche über diese beiden Spalten erstrecken. So werden unsere Rasterlinien aussehen, sobald wir die freien Reihen und zwei Spalten Trucks gesetzt haben. Gehen wir zurück zum Texteditor und sehen dies in Aktion. Lassen Sie uns daran arbeiten, das einzurichten. Wir werden zunächst mit diesen Rasterbereichen arbeiten. Wir können alle diese 12 Artikel auskommentieren. Lassen Sie uns alle diese für jetzt mit dem Kommentar entfernen. Dann können wir innerhalb des Containers mit dem Hinzufügen unseres Headers arbeiten. Fügen Sie die Sub-Header-Elemente und den Text von Header 2 hinzu, wir hatten auch einen Hauptabschnitt für den Inhalt, dann Sidebar, mit den Seitenelementen, und dann unten unten hatten wir auch eine Fußzeile. Wir können diese Bereiche besser sehen, lassen Sie uns eine Grenze zu allen vier hinzufügen. im Abschnitt Stil Lassen Sie unsim Abschnitt Stilfür die Kopfzeile, die Hauptseite, die Seite und die Fußzeile gehen . Fügen Sie die Rahmeneigenschaft eines Pixels und dann eine gestrichelte Linie hinzu. Über den Browser, drücken Sie Refresh und es gibt unsere vier Content-Bereiche, die wir gerade hinzugefügt. Dann zurück zu unserer Rastervorlage Zeilen und Spalten, und wir können damit beginnen, dies einzurichten, so bis zum Anfang. Denken Sie daran, für die Spalten benötigen wir zwei, eine für den Inhaltsbereich und eine für die Seitenleiste. Entfernen Sie die Wiederholungen und die erste kann 3fr sein, auf der Seitenleiste kann kleiner sein, so 1fr ist in Ordnung. Dann auf die Reihen. Wir brauchen drei Zeilen, eine für die Kopfzeile, eine für den Inhalt und eine für die Fußzeile. Die Kopfzeile kann 1fr, 3fr für den Hauptinhalt und dann 1fr für die Fußzeile sein. Wenn wir nun den Browser neu laden, werden jetzt alle vier Abschnitte aussehen. Da wir zwei Spalten setzen, sind die vier Elemente in den beiden Zeilen angeordnet, wie Sie hier sehen. Lassen Sie uns mit Änderungen in diesem mit unserem Rastervorlagenbereich arbeiten. Lassen Sie uns die CSS-Eigenschaft in, Rastervorlagenbereiche hinzufügen. Erinnern Sie sich an das S am Ende. Mit dieser Eigenschaft richten wir Namen für jeden Abschnitt ein. Diese Namen sind wie eine Tabelle angeordnet. Wir haben zwei Spalten und drei Zeilen, so dass unsere Namen wie eine drei durch zwei Tabelle angeordnet sind. Wir fügen die Zitate für unsere erste Zeile hinzu und dann können wir unsere zweite Zeile und dann eine dritte Zeile direkt unten hinzufügen. Denken Sie daran, das Semikolon auch am Ende hinzuzufügen. Wir möchten, dass sich der Kopfbereich über diese beiden oberen Spalten erstreckt. Wir fügen Header in der ersten Spalte und dann Header auch in der zweiten Spalte hinzu, damit sich dies direkt über die Zeile erstreckt. Aber unsere zweite Reihe, wir wollen, dass der Inhalt auf der linken Seite und dann eine Seitenleiste auf der rechten Seite. Dann am unteren Ende, genau wie die Kopfzeile, wollen wir, dass der Fußzeilenbereich beide Spalten umfasst. Wenn wir das speichern, werden wir noch keinen Unterschied im Browser sehen, aber wir aktualisieren. Wir müssen zuerst unsere Artikel in den Abschnitten platzieren. Wir tun dies mit den gleichen vier Eigenschaften, die wir bereits verwendet haben. Wenn wir zu Element 1 gehen, haben wir Gitterzeile, beginnt, Zeilenende, Spaltenbeginn und Spaltenende verwendet Zeilenende, Spaltenbeginn , oder wir können eine Kürzel aus Rasterzeile und Rasterspalte verwenden, die wir bereits nachgeschlagen haben. Lasst uns das aufstellen. Zuallererst können wir den Header anvisieren. Wir legen die Größe dieser Kopfzeile mithilfe von Rasterzeile und Rasterspalte fest. Zunächst einmal Grid-Zeile, dies kann der Header-Abschnitt sein, den wir oben eingestellt, so dass die nur hier und dann das gleiche für Gitterspalte ist. Direkt unterhalb dieser fügen Sie Gitterspalte hinzu und setzen Sie auch den Header-Bereich, den wir erstellt haben. Wir wiederholen dies dann zur Hauptbeiseite und Fußzeile. Im Hauptbereich setzen wir die Rasterzeile auf den Inhalt und dann die Rasterspalte, um auch der Inhalt zu sein. Wir haben auch einen Bereich für die Sidebar erstellt und wir geben diesem hier einen Namen Sidebar. Unten für den Sidebar-Abschnitt, der die beiseite Elemente war. Genau wie vorher machen wir Grid Zeile und setzen dies die Sidebar Grid Spalte. Dies ist die Sidebar 2. Dann schließlich der Fußzeilenbereich. Rasterzeile, der Name der Fußzeile und Rasterspalte und dies ist auch die Fußzeile. Speichern Sie das und dann Oh zum Browser und aktualisieren Sie. Gut, nur um zusammenzufassen, wir haben unseren Header über die Spitze verteilt. Dies liegt daran, dass wir den Header so eingestellt haben, dass Rasterzeile und Rasterspalte dieser Headervorlage haben, die wir oben festgelegt haben. Gerade hier, die sich über unsere zwei Spalten der ersten Zeile erstreckt, setzen wir dann die zweite Zeile, die zwischen dem Inhalt aufgeteilt wird, der der 3fr-Abschnitt und dann die Seitenleiste werden wir 1fr sein. Wir definieren diese unten, wieder mit Rasterzeile und Rasterspalte für die beiseite und den Hauptabschnitt. Dann ganz unten legen wir den Fußzeilenbereich fest und genau wie die Kopfzeile erstreckt sich dieser auch über die beiden Spalten. Festlegen der Fußzeile und der Kopfzeile auf die volle Breite der Seite. Gut. Dies lässt unser Layout jetzt vollständig und wie wir beabsichtigten, Rastervorlagenbereiche zu verwenden. Als nächstes werden wir einen Blick auf die Verschachtelung von Gittern werfen. 19. Raster verschachteln: Dieses Rasterlayout ist jetzt, wie wir es beabsichtigt haben. Aber was, wenn Sie unsere 12 Artikel auch als Raster im Hauptbereich verschachteln wollten? Lasst uns mal sehen, was passiert. Wenn wir zu unseren Projekten zurückgehen und dann unsere 12 Artikel wieder einbauen . Lassen Sie uns diesen Abschnitt hier auskommentieren und entfernen Sie auch die Klasse von Element eins. Dann können wir weitermachen und diese Gegenstände ausschneiden und sie dann in unseren Hauptbereich legen . Schneiden Sie diese Outs ab. Dann können wir die Texte der Inhalte entfernen. Ich füge das in diesem Hauptabschnitt ein. Wir haben die Kopfzeile oben, den Hauptbereich mit 12 verschachtelten Elementen, die Seitenleiste und die Fußzeile. Mal sehen, wie dies anfänglich im Browser aussieht. Die Gegenstände sind alle da. Aber wenn wir nach unten scrollen, befinden sie sich nicht in einem Rasterlayout. Elemente werden nur als Elemente auf Blockebene angezeigt. Das Hauptelement ist für diese Elemente offensichtlich. Wir können den Anzeigetyp ändern, um Raster von NCSS zu sein. Gehen wir zum Hauptbereich und ändern Sie dann den Anzeigetyp in Raster. Auch können wir dies eine Rasterlücke geben, lassen Sie uns fünf Pixel für die Lücke hinzufügen. Mal sehen, was passiert jetzt das an Ort und Stelle, wir müssen aktualisieren. Waren haben jetzt hier unsere Netzlücke. Dann müssen wir definieren, wie viele Spalten und Zeilen wir wollen, genau wie wir es normalerweise tun würden. Dies ist wiederum innerhalb des Hauptabschnitts. Lassen Sie uns die Rastervorlagenspalten hinzufügen. Lassen Sie uns für Wiederholungen gehen. Wir haben vier Säulen, eine FR. Dann werden die Rastervorlagenzeilen direkt darunter angezeigt. Wiederholen Sie diese auch. Dann fügen wir einfach ein FR hinzu, um so viele Zeilen wie nötig hinzuzufügen und sie alle zu halten. Rüber zum Browser, aktualisieren. Jetzt haben wir unser Raster innerhalb des Hauptinhaltsbereichs verschachtelt. Genau wie früher, als wir uns Flexbox angesehen haben, ermöglicht uns das Raster auch eine feinere Kontrolle darüber, wie einzelne Elemente ausgerichtet sind. Das werden wir als Nächstes abdecken. 20. Ausrichtung: Wir gehen jetzt weg von unserem Layout und konzentrieren uns auf die Ausrichtung. Vieles, was wir in diesem Video abdecken, ähnelt der Flexbox, wo wir Elemente am Anfang ausrichten und die Strecke zentrieren, um Platz zu füllen. Koordinieren Sie die Elemente hat den gesamten verfügbaren Platz in Anspruch genommen. Wir müssen die Elemente etwas kleiner machen, um sie auszurichten. Lassen Sie uns zuerst die Tracks auskommentieren und dies sind die im Hauptbereich. Vorlagenspalten und Vorlagenzeilen legen Sie dann eine Größe für die Elemente fest. Die Items-Klasse, die gerade hier haben wird, entfernen wir zuerst die Polsterung und fügen dann eine Höhe zu den einzelnen Elementen von 60 Pixeln hinzu. Neu laden, können wir standardmäßig sehen, dass die Elemente eine Streckung über die Zeile gesetzt werden. Zuerst schauen wir uns die Rechtfertigungselemente an, die wir dem Container hinzufügen, um alle untergeordneten Elemente als Gruppe auf der Zeilenachse zu beeinflussen. Viele davon werden bereits vertraut sein, wie zum Beispiel Ende, um die Elemente am Ende der Zeile zu platzieren und auch zu beginnen. Gehen Sie zum Hauptabschnitt, der ein Container für diese Rasterelemente ist. Gerade hier können wir Elemente hinzufügen, rechtfertigen und sie bis zum Ende setzen, aktualisieren. Jetzt werden alle Elemente an das Ende der Zeile geschoben. Wir haben auch Start und Sie können wahrscheinlich erraten, was das auch tut, das bewegt alles an den Anfang. Denken Sie daran, dass das zweite Element, das hier verwendet wird, wenn wir zurück nach unten scrollen, mehr Text hat. Daher füllt es mehr den verfügbaren Platz. Wir können dies für alle Gegenstände wieder einführen, die sich gleich bewegen. Lassen Sie uns dieses Element zwei umbenennen. Da gehen wir, alle Gegenstände sind jetzt gleich. Der Standardwert hierfür ist Strecken, Ersetzen auswählen, mit Strecken beginnen. Wie viel Sie den gleichen Effekt bekommen, mit dem Sie begonnen haben, werden wir auch zentriert haben. Dadurch werden alle Elemente in der Mitte der Zeile durch die Breite ersetzt , die durch den Inhalt im Inneren bestimmt wird. Wir haben auch die Möglichkeit, Baseline auch, wenn wir den Text ausrichten. Als Nächstes können wir auch Elemente ausrichten verwenden. Dies gilt auch für den übergeordneten Container, wirkt sich dieses Mal auf die Elemente entlang der Spalte und nicht auf die Zeile aus. Um dies zu sagen, brauchen wir etwas mehr Höhe, um mit der Arbeit zu arbeiten. im Hauptbereich Lassen Sie unsim Hauptbereichdas Haupt ein wenig höher machen. Die Höhe von 1200 Pixel und dann können wir Elemente ausrichten. Beginnen wir mit der Mitte über den Browser, aktualisieren. Jetzt haben wir einen größeren Hauptabschnitt und alle Elemente sind an der Mitte ausgerichtet. Wir können oben sehen, wir haben eine gleiche Lücke oben hier und auch den unteren Abschnitt zu. Ich werde nicht durch all diese Optionen gehen, weil wir die gleichen Werte verwenden können , wie wir gerade gesehen haben und alle auf die gleiche Weise arbeiten, aber dieses Mal auf der gegenüberliegenden Achse. Die nächsten beiden Eigenschaften, die wir auf die untergeordneten Elemente anwenden, um sie einzeln zu steuern. Lassen Sie uns wieder unseren Artikel eine Klasse vorstellen. Dies kann eines der Elemente sein. Lassen Sie uns das einfach hinzufügen und dann können wir diese einzelnen Artikel steuern. Sichern Sie dann im Hauptbereich, gehen Sie zu kommentieren, rechtfertigen Sie Elemente und richten Sie auch Elemente aus, damit sie sich nicht stören. Jetzt können wir wieder auf den Punkt eins gehen und dann können wir einzelne Artikel ausrichten, aber dieses Mal verwenden wir rechtfertigen sich. Beginnen wir mit Ende und dann über zum Browser, aktualisieren und da dies auch in der Zeile funktioniert, schiebt dies dieses blaue Element bis zum Ende. In der Tat denke ich, dass dies ein wenig durcheinander mit diesen Gittersäulen ist. Es ist jetzt haben wir alle diese Elemente, setzen Sie die Strecke, und dann dieses einzelne Element am Ende der Zeile. Zentrieren wird auch wie erwartet ausgeführt und dieses ein Element in die Mitte der Zeile verschoben. Änderungen in der Mitte zu sein, und denken Sie daran, dass wir alle die gleichen Eigenschaften zur Verfügung haben, wie wir gerade nachgeschaut haben. Speichern und dann aktualisieren, und das ist unser Artikel jetzt in der Mitte dieser Zeile. Wenn einer auf der Spalte und nicht auf der Zeile zentriert werden soll. Wir haben auch Align-selbst. Lasst uns das mal ausprobieren und das auch zum Mittelpunkt stellen. Nun ist dies über Zeile und Spalte zentriert. Verwendung von Justify-self und Align-self zusammen ist eine wirklich einfache Möglichkeit, ein Element sowohl vertikal als auch horizontal zu zentrieren. Dies war früher viel komplexer vor Grid und Flexbox. Lassen Sie uns voran und versuchen Sie noch eine, ausrichten - selbst, setzen Sie dies am Ende. Werfen Sie einen Blick darauf und jetzt wird der Artikel nach unten geschoben. Wir können sehen, dass wir viele nützliche Optionen haben, wenn Sie das Gitter verwenden, was für so ziemlich jede Art von Layout verursacht, die wir jemals brauchen werden. 21. Zeit zum Üben: Song Finder-Layout: Später in diesem Kurs erstellen wir diese Anwendung, in der der Benutzer nach einem Künstler oder einem Song suchen kann und sie als Raster angezeigt werden. Zum Beispiel, wenn wir in einen Künstler hier eingeben, genau wie diese, und dann drücken Sie „Suche“ wird es dann mit einer Liste von Songs präsentieren. Wir würden auch ein Audio-Player, um eine Vorschau davon zu spielen. Wir werden dies später im API-Abschnitt erstellen. Wir haben das Album-Artwork, den Künstler, Songtitel und diesen Musik-Player unten , den wir in den ersten 29 Sekunden abspielen werden. All diese Musikinformationen werden bereitgestellt, indem eine Verbindung zu iTunes über eine API hergestellt wird. Wenn Sie nicht sicher sind, was eine API gerade ist, sich keine Sorgen. Wir decken später alles ab, was Sie wissen müssen. Aber wir werden mit dieser Anwendung beginnen, indem wir die HTML und CSS erstellen , die wir brauchen, fügen Sie das CSS-Rasterlayout. Dann können wir die Funktionalität in einem späteren Abschnitt fragen. Wir werden das ein wenig anders machen als über Übungsübungen. Ich werde durch dieses Projekt-Setup und auch den HTML-Code zusammen mit [unhörbar] gehen, so haben wir den gleichen HTML. bedeutet, dass wir die gleichen Dinge tun können, wenn wir das JavaScript später hinzufügen, so dass es keine Verwirrung gibt. Dann werde ich Sie überlassen, um die Projekte CSS selbst abzuschließen , um Ihnen einige zusätzliche Übung zu geben, indem Sie in den Rastereigenschaften anwenden. Beginnen wir mit dem Erstellen des Projektordners. Lassen Sie uns dies schließen und dann einen Projektordner erstellen. Auch hier können Sie dies überall hinzufügen. Ich möchte meinen anrufen, der Song Finder öffnet dies im Texteditor. Ich ziehe diesen Projektordner dorthin. Dann können wir voran gehen und eine neue Datei namens index.html erstellen. Um zu beginnen, lassen Sie uns die HTML-Struktur hinzufügen. Ich werde die HTML fünf Verknüpfungen verwenden und dann „Tab“ drücken, um diese unsere Struktur zu groove. Der Dokumententitel von Song Finder. Dann runter zum Körperteil. Beginnen wir mit dem Kopfbereich und weisen Sie dann Titel in h1 des Song Finders zu. Öffnen wir das im Browser und überprüfen Sie, dass alles in Ordnung ist. Da geht es los, da ist unser Songtitel auf der Indexseite. Dann brauchen wir einen Eingabebereich, um den Songnamen des Künstlers einzugeben. Beginnen wir mit einem Label, und nennen wir dies die Sucheingabe. Dann der Text der Suche nach Ihrem Lieblingskünstler, und schließen Sie dann dieses Label aus am Ende. Hier können wir auch unsere Eingabe hinzufügen, mit der Art des Textes. Dann die ID, die mit dieser Sucheingabe übereinstimmt. Dann brauchen wir danach einen Knopf. Dies wird der Button sein, der weitergeht und unsere Suche vervollständigt. Fügen Sie einfach eine einfache Schaltfläche hinzu. Dann eine horizontale Linie ganz unten, nur um diese Kopfzeile abzuschneiden. Laden Sie neu und sehen Sie, wie das aussieht. Das ist unser Label oder Textfeld und die Schaltfläche, die unterhalb dieses Kopfzeilenabschnitts nach unten scrollen. Lassen Sie uns den Hauptabschnitt erstellen. Dies wird der Bereich sein, in dem alle unsere Songs erscheinen. Für jetzt lasst uns diesem eine ID von Songs geben. Dann können wir hier einen Artikel hinzufügen. Dieser Artikel wird der Wrapper für jeden der einzelnen Songs sein. Jeder einzelne Song benötigt ein Bild. Moment werde ich nur einige Dummy-oder einige Beispieldaten hinzufügen , nur um zu sehen, wie es auf dem Bildschirm aussehen wird. Wir können voran gehen und dies mit dem CSS stylen. All dieser Text und Bilder werden später durch einige Daten ersetzt , die aus iTunes gezogen werden. Wir können dieses Bild sehen, ich werde eine Breite von 100 Pixel hinzufügen, eine Höhe von 100 Pixel zu. Dann fügen Sie eine Stil-Eigenschaft, nur damit wir dieses Bild sehen können, Hintergrund blau. Jetzt sollten wir ein blaues Quadrat auf dem Bildschirm sehen. Als nächstes können wir die p-Tags hinzufügen. Das wird für unseren Künstlernamen sein. Jeder Künstler und Song ist in Ordnung, also fügen Sie einfach alles drin. Dann ein zweiter Satz von p Elementen für den Songnamen. Schließlich werden wir uns ein neues Element ansehen, das wir noch nicht gesehen haben, und das ist das HTML5-Audio-Element. Dies ermöglicht es uns, unsere Musik im Browser abzuspielen. Es benötigt ein Quellattribut, das Sie für jetzt leer lassen können. Auch der Text der Steuerelemente, die uns einige Steuerelemente geben, mit denen wir arbeiten können, wie unser Spiel, das sich auch in eine Pause verwandelt, der Timer und auch der Fortschrittsbalken. Nun lassen Sie uns diesen Artikel kopieren und einfügen, so dass wir sechs davon haben. Also zwei, drei, vier, fünf und sechs und dann speichern und dann neu laden. Jetzt habe ich sechs verschiedene Elemente auf dem Bildschirm. Denken Sie daran, dass HTML, ist nur Platzhaltertext in Bildern. Alle diese Daten werden später von unserer API abgerufen. Für jetzt aber werde ich Sie mit Ihnen überlassen, um einen Link zu einem externen Stylesheet zu erstellen, etwas Styling und auch ein Rasterlayout auf die Songs anzuwenden. Es gibt keinen richtigen oder falschen Weg, dies zu tun, nur Stil, wie Sie möchten. Aber ich würde empfehlen, zumindest das Gitter anzuwenden. Es muss nichts Komplexes sein. Nur ein einfaches Raster mit freien Spalten und einer Rasterlücke wird in Ordnung sein. Viel Glück. Wir sehen uns im nächsten Abschnitt. 22. Was ist Bootstrap?: Willkommen zurück zu diesem brandneuen Abschnitt. Hier werden wir einen Blick auf eines der beliebtesten Frameworks für den Aufbau von Websites werfen, das Bootstrap genannt wird. Bootstrap Crony, die neueste Version von Version 4 ist Open Source und kostenlos zu verwenden, ist eine Bibliothek für HTML, CSS und auch JavaScript, die wir noch nicht angesehen haben , aber machen Sie sich keine Sorgen darüber im Moment. Sie können es auf getbootstrap.com finden. Einige der Komponenten, die wir in Bootstrap verwenden, wie z. B. ein Karussell, benötigen JavaScript, um zu funktionieren. Aber wir brauchen zu diesem Zeitpunkt kein JavaScript zu wissen, um sie zu verwenden. Bootstrap ermöglicht es uns, schnell mit dem Erstellen von Projekten zu beginnen, und ermöglicht es uns auch, viele vorgefertigte Komponenten wie Navigationsleisten, Bildkarussells und Formulare zu nutzen wie Navigationsleisten, , um nur einige zu nennen. Einstieg ist auch ganz einfach. Wir können Bootstrap einfach wie jede andere CSS-Datei zu unserem Projekt hinzufügen und anfangen, unsere Website wie gewohnt zu schreiben. Wir können dann entweder eine vorgefertigte Komponenten verwenden oder unser eigenes HTML wie gewohnt schreiben und dann die Bootstrap CSS-Klassen nutzen, die zur Verfügung gestellt werden, um uns ein Basis-Styling zu geben, auf dem wir aufbauen können. Wenn wir fortfahren und die Dokumentation von der Navigationsleiste öffnen, gibt es ziemlich viel zu durchkommen, und wir werden viel davon für diesen Abschnitt behandeln. Zunächst werde ich zu den Komponenten auf der linken Seite gehen und darauf klicken. Im Inneren hier können wir alle verschiedenen verfügbaren Komponenten Werkzeuge sehen. Zum Beispiel, wenn wir eine navbar wollten, klicken wir auf den navbar Abschnitt und dann erhalten wir einige weitere Informationen darüber, wie es zu verwenden. Wir erhalten dann auch viele Codebeispiele und auch die Demonstration. Wenn wir diese navbar in unserem Projekt verwenden wollten, könnten wir diesen Code unten kopieren. Dies ist der ganze Abschnitt hier, der diese navbar produziert. Es gibt in der Regel einige verschiedene Beispiele mit einem anderen Layout zu, und Sie können all diese sehen, wenn wir nach unten scrollen. Es gibt auch einige Formen. Klicken Sie auf die Formularelemente auf der linken Seite, und genau das gleiche wie zuvor. Wir nehmen dann einen Blick auf viele verschiedene Beispiele. Dies alles nutzt die Vorteile von Standard-HTML-Elementen, wie Eingaben, Auswahlen und Textbereiche. Aber Bootstrap bietet dann etwas CSS, das wir dann verwenden können, indem wir die Bootstrap-Klassen wie Form-Gruppe und Form-Control hinzufügen, genau wie wir hier sehen können. Wir werden auch einige dieser Komponenten während des gesamten Projekts genauer betrachten, z. B. rotierende Karussells, und auch Modale verwenden. Es ist auch erwähnenswert, dass alle diese Stile, die Bootstrap bietet, nur ein Ausgangspunkt ist. Wir sind frei, voran zu gehen und jeden der Stile mit einigen benutzerdefinierten CSS zu ändern. Wenn Sie immer noch nicht sicher sind, was Bootstrap ist, müssen Sie jetzt nur verstehen, dass wir das vordefinierte CSS von Bootstrap nutzen können , um unseren HTML nicht nur viel besser aussehen zu lassen, sondern auch einige Best Practices anzuwenden, und halten Sie unser Styling in verschiedenen Browsern konsistenter aussehen. Jetzt haben wir einen kleinen Hintergrund in Bootstrap. Lassen Sie uns nun auf eine Bootstrap-Projekt-Setup gehen. 23. Das bauen wir auf: Während wir diesen Abschnitt durchlaufen, werden wir diese Gourmet-Burgers-Website bauen. Dieses Projekt ermöglicht es uns zu lernen, wie Bootstrap funktioniert und wie wir verschiedene Komponenten sowie verschiedene Utility-Klassen verwenden können und wie das Bootstrap Grid System funktioniert. Wir beginnen oben mit unserem Header-Abschnitt, der eine Navigationsleiste ist, einschließlich des Website-Titels, verschiedenen Links und auch ein Suchfeld in der Ecke. Scrollen Sie nach unten, können Sie auch sehen, dass wir ein rotierendes Karussell haben. Jedes andere Bild hat eine eigene Beschriftung. Wir werden auch Steuerelemente verwenden, um es uns zu ermöglichen, nach links zu blättern und auch durch diese Bilder zu schreiben. Dieses rotierende Karussell ist eine der Bootstrap-Komponenten, ebenso wie die Navigationsleiste oben. Ich werde mir vielleicht verschiedene Formen davon ansehen und wie alle Klassen während dieses Projekts funktionieren. Wenn wir weiter nach unten scrollen, haben wir dann Informationen über unsere Burger-Sites. Dies wird uns lehren, wie Sie die Bootstrap-Container, Zeilen und Grid-System verwenden , um unsere Elemente auf der Seite auszurichten und anzuordnen. Diese Website wird auch voll reagieren, so dass für gehen Sie voran und schrumpfen, der Browser. Wir werden eine Layoutänderung für verschiedene Bildschirmgrößen sehen, einschließlich unserer Navigationsleiste tendiert zu einem Drop-down-Menü für die kleinsten Bildschirme. Lassen Sie uns diese volle Größe noch einmal machen. Wenn wir dann noch weiter nach unten gehen, haben wir einen Anmeldebereich. Wenn wir darauf klicken, wird dann zu einer modalen Komponenten eingeführt, die im Grunde ein Pop-up, wo wir einige Informationen für den Benutzer hinzufügen können. In diesem Fall werden wir einen Blick darauf werfen, wie wir Bootstrap-Formularkomponenten verwenden können , um unsere Formulare wirklich schön aussehen zu lassen. Hier haben wir einen Namen, eine E-Mail und auch einen Textbereich, zusammen mit einigen Kontrollkästchen unten. Dann beenden wir schließlich mit einem Fußbereich unten unten. Am Ende dieses Abschnitts haben Sie auch diese vollständig fertige Website und auch einige Kenntnisse über die Verwendung von Bootstrap-Komponenten, Bootstrap-Dienstprogrammen, zusammen mit der Verwendung von Containern, Zeilen und Spalten , um ein Rastersystem zu erstellen. Zusammen mit dem Wissen, wie Sie alle Bootstrap-Klassen überschreiben , um dies vollständig benutzerdefiniert zu machen. Okay, gut, also hoffe, du freust dich darauf. Nun gehen wir weiter, um unser Projekt zu starten. 24. Erstellen eines Bootstrap-Projekts: Ein Projekt mit Bootstrap zu starten ist wirklich einfach. Um zu beginnen, wenn wir zu getbootstrap.com gehen, die eine Bootstrap-Homepage ist, und gehen Sie dann zum Abschnitt „Erste Schritte“ hier. Denken Sie jedoch daran, dass Websites wie diese oft Layouts ändern können . Wenn Sie also ein wenig anders aussehen, wenn Sie besuchen, schauen Sie sich einfach ein wenig um für die Installation oder den Abschnitt Erste Schritte. Es gibt ein paar verschiedene Möglichkeiten, um zu gehen. Wir können den vollständigen Startordner herunterladen indem Sie auf den großen „Download“ -Button in der oberen Ecke klicken. Das ist großartig, beinhaltet aber viele Dinge, die wir in diesem Stadium nicht brauchen. Wir können auch auf den Download-Bereich auf der linken Seite gehen. Wenn wir dann nach unten scrollen, können wir die CSS und JavaScript-Dateien herunterladen. Dann legen Sie diese in unseren Projektordner ab. Die ganze Art und Weise, wie ich es in diesem Projekt tun werde, ist die Verwendung eines CDN. Gehen wir zurück zur Einführung und scrollen Sie dann nach unten. Ein CDN ist ein Netzwerk für die Inhaltsbereitstellung. Das bedeutet im Grunde, anstatt die CSS- und JavaScript-Dateien in unser Projekt hinzuzufügen und diese dann in unserem HTML zu verknüpfen. Stattdessen werden diese Dateien auf einem externen Server gehostet, folgt, um eine Verknüpfung zu. Hier können wir sehen, wir haben unsere CSS und JavaScript Abschnitte. Wir können diesen Link für das CSS kopieren. Wir haben auch hier einige JavaScript-Links, wo wir unsere Skript-Tags mit dem CDN verknüpfen können. Wenn wir noch weiter nach unten scrollen, haben wir eine Starter-Vorlage, und das ist ein wirklich bequemer Ort, um zu starten. Dies hat alle grundlegende HTML-Struktur, die wir brauchen, zusammen mit allen Links zu dem erforderlichen CSS und auch das JavaScript auch. Lassen Sie uns damit beginnen, diese Starter-Vorlage mit der Schaltfläche „Kopieren“ in der oberen Ecke zu kopieren. Lasst uns das festhalten. Dann, wenn wir auf den Desktop gehen und einen neuen Ordner namens Gourmet-Burgers erstellen. Öffnen Sie Visual Studio Code, und dann können wir in diesem Projektordner ziehen, um zu beginnen. Wie immer erstellen wir unsere index.html, aber dieses Mal haben wir jetzt einen Bootstrap-Starter, so dass wir die Skelettstruktur einfügen können. Geben Sie dem ein Sparen. Dann können wir voran gehen und dies im Browser öffnen. Lassen Sie uns auf die index.html doppelklicken, rufen Sie den Browser auf, und es gibt unser Hallo, Weltbeispiel. Das funktioniert alles gut. Zurück zum Projekt, können wir jetzt beginnen, unsere eigenen Anpassungen hinzuzufügen. Wir können den Titel ändern, um Gourmet-Burger zu sein, und dann speichern. Unsere Änderung wird nun im Browser widergespiegelt. Dieser Text der Hallo Welt mag wie ein Standard-h1-Element aussehen, aber es hat ein wenig Standard-Bootstrap-Styling, wie alle anderen Elemente auch haben werden. Wir können dies sehen, wenn wir den CSS-Link im Kopfbereich ausgeben. Das Bootstrap CSS ist gerade da. Wenn wir diese Zeile befehlen und dann aktualisieren, sehen wir, dass die Bootstrap-Standardstile jetzt entfernt wurden. Lassen Sie uns einfach diese Befehle entfernen und fügen Sie dies wieder hinzu. Um zu sehen, was hinter den Kulissen passiert, können wir einen Blick auf das CSS werfen, das von Bootstrap bereitgestellt wird. Wenn wir diesen Link innerhalb des href rechts bis zum Ende kopieren, kopieren Sie das, und dann in den Browser, können wir dies wie eine normale URL einfügen. Dies ist das Stylesheet, mit dem unter dieser URL verknüpft ist. Es ist ein wenig schwer zu lesen, weil es momentan verkleinert ist. Dies bedeutet, dass der gesamte Leerraum entfernt wurde, um die Dateigröße kleiner zu halten. Um dies noch besser zu sehen, wenn wir alle auswählen und dann kopieren. Ich werde nach CodeBeautify suchen. Das ist, was wir brauchen, codebeautify.org, also wählen Sie dies aus. Die, die wir brauchen, ist das CSS, also wählen Sie diesen Link hier aus. Auf der linken Seite können wir die CSS-Eingabe hinzufügen. Fügen Sie unseren Bootstrap-Code ein und klicken Sie dann in der Mitte auf „Verschönern“. Oben auf der rechten Seite können wir die Ausgänge sehen. Wir können dies auf die Größe des Vollbildschirms machen. Dies ist alles CSS, das Bootstrap bietet. Es sieht nun in einer Weise formatiert aus, die vertraut aussieht. Wenn Sie durch sie blättern, gibt es eine ganze Menge. Wenn wir „Command“ oder „Ctrl“ „F“ drücken, wird der Code durchsucht. Lassen Sie uns für die h1 suchen und drücken Sie Enter, dann können wir alle CSS sehen, die auf diese h1 Elemente angewendet wird. Zuerst haben wir h1 bis zu h6, was auf Standard-Rand unten gilt, eine Schriftfamilie von Erben. Wir haben auch eine Schriftstärke, eine Zeilenhöhe, und erbt auch die Textfarbe. Runter zum nächsten. Wir können auch sehen, dass die Schriftgröße 2,5 rem ist, weshalb, wenn wir die Bootstrap Stylesheets entfernen, die h1 dann kleiner erschien. Wir können auch durch scrollen und einen Blick auf einige weitere Stile werfen, wenn wir wollten, aber hoffentlich bekommen Sie die Idee, was hinter den Kulissen vor sich geht. Wir werden auch viele der erstellten Fotos der Klasse nutzen , während wir diese Projekte erstellen. Dies wäre auch das gleiche wie eine CSS-Datei, wenn wir sie herunterladen und zu unserem Projektordner hinzufügen würden. Das letzte, was ich darauf hinweisen möchte, ist, dass, obwohl all diese Stile großartig zu verwenden sind und unser Projekt besser aussehen lassen, wir dennoch jeden dieser Basisstile mit unseren eigenen Stylesheets überschreiben können. Wir tun dies, indem wir unsere eigene CSS-Datei erstellen, genau wie wir es in früheren Projekten getan haben und im Kopfbereich unter diesem Bootstrap-Link darauf verlinken. Es wird tatsächlich ermutigt, einen dieser Standard-Bootstrap-Stile hinzuzufügen oder zu überschreiben , aus dem einfachen Grund, dass viele Websites Bootstrap verwenden und wir nicht möchten, dass alle Websites online gleich aussehen. Es ist eine gute Idee, Bootstrap zu verwenden, schnell Websites und Komponenten mit Best Practices, konsistentes Styling in verschiedenen Browsern und auch eine ausgezeichnete Grundlage für konsistentes Styling in verschiedenen Browsern den Aufbau zu verwenden. Jetzt haben wir unser Projektsetup. Als nächstes gehen wir zu verstehen, wie das Bootstrap-Raster funktioniert. 25. Das Bootstrap-Raster: Unser Beispiel „Hello World“ ist jetzt eingerichtet. In diesem Video werden wir uns wahrscheinlich eines der wichtigsten Konzepte ansehen , die bei der Arbeit mit Bootstrap zu verstehen sind. Dies ist das Bootstrap-Grid-System. Die Gitter im Grunde, ermöglicht es, Dinge schön und einfach zu legen und verwendet die CSS Flex Box unter der Haube. Um zu beginnen, im Allgemeinen ist das erste, was wir tun müssen , einen Container für unsere Inhalte zu erstellen. Dies wird als CSS-Klasse von Containern hinzugefügt. Lassen Sie uns zum Projekt gehen und zuerst die h1 der hallo Welt entfernen , die gerade hier ist. Wir können dann unser div mit der Klasse des Containers hinzufügen, also erstellen Sie einfach ein div, genau wie wir es normalerweise tun würden. Dieses Mal können wir eine Bootstrap-Klasse von Container hinzufügen. Container sind erforderlich, wenn Sie mit dem Bootstrap-Grid-System arbeiten , da sie als Wrapper für unsere Inhalte fungieren. Verwendung ermöglicht es uns auch, unsere Inhalte sowohl horizontal als auch vertikal zu versenden. Innerhalb verschachtelt, fügen wir ein zweites div hinzu, und dieses hat eine Klasse von Zeile. Innerhalb der offenen innerhalb der Klasse der Zeile. Diese Zeilen fungieren als Wrapper zum Auslegen von Inhalten mithilfe von Spalten. Bootstrap-Gitter ist 12 Spalten breit. Das bedeutet, wenn wir zwei gleiche Abschnitte nebeneinander in Reihe wollen, könnten wir beide auf jeweils sechs Spalten breit setzen. Wenn wir drei Abschnitte wollten, müsste jeder vier Spalten sein. Lassen Sie uns unser erstes div in der Zeile hinzufügen. Das wird eine Klasse von col-md-4 haben. Innerhalb von hier können wir etwas Text mit den p-Tags von einem Drittel Breite hinzufügen. Da das Raster 12 Spalten breit ist, nehmen wir hier vier Teile ein, also ist dies ein Drittel der Breite der Zeile. Wenn wir das dann kopieren und zwei weitere Male eingefügt haben. Stellen Sie auch sicher, dass dies richtig eingerückt ist, genau so. Nun, wenn wir das eine gespeichert und dann den Browser aktualisieren, erhalten wir drei Abschnitte auf dem Bildschirm, jeder mit einem Drittel der Breite der Zeile. Um diese Rasterabschnitte besser zu sehen, können wir einige Hintergrundklassen hinzufügen, die auch von Bootstrap zur Verfügung gestellt werden. Nach col-md-4 können wir nicht erfolgreich sein. Dies gibt uns eine grüne Farbe. Die zweite könnte bg primär sein. Das ist für Blau. Der dritte könnte bg sekundär sein und das ist eine graue Farbe. Dies zeigt uns nun die Wirkung des Containers, den wir hinzugefügt haben. Der Behälter hat eine feste Breite. Wenn wir den Browser nur breiter oder kleiner gestreckt haben, sehen wir, dass sich die Breite mit verschiedenen Bruchpunkten ändert. Es ist auch ein Container in voller Breite verfügbar. Alles, was wir tun müssen, ist den Behälter zu wechseln, um Containerflüssigkeit zu sein. Dies erstreckt sich über die gesamte Breite der Seite. Aber ich bleibe vorerst bei dem Container. Wir können auch mehrere Zeilen innerhalb dieses Containers haben. Wenn wir zurück in die Klasse von col-md-4 gehen, steht dieser md für mittelgroße Geräte. Sie können genau steuern, wie viele Spalten breit wir den Inhalt für verschiedene Bildschirmwurzeln wollen. Wenn wir zurück auf die getbootstrap-Website, die getboostrap.com ist, und dann Dokumentation. Wenn wir zum Layout-Abschnitt auf der linken Seite gehen. Dann haben wir hier unten die Option für das Gitter. Wählen Sie diese Option aus. Wenn wir nach unten zu der Tabelle scrollen, die gerade hier ist, sehen wir hier haben wir ein Klassenpräfix, und wir haben col-md für mittelgroße Geräte verwendet. Diese Tabelle zeigt, dass es eine Größe gibt, für die jede Klasse gilt. Zum Beispiel ist klein 540 Pixel und groß 960. Wir können so viele dieser Präfixe hinzufügen, wie wir möchten. Zum Beispiel könnten wir ein Layout 12 Spalten breit auf kleinen Bildschirmen haben, und dann ändern, um sechs Spalten breit auf mittleren Bildschirmen und dann bis zu vier Spalten auf größeren Geräten. Wir haben nur die mittleren Präfixsätze, die 720 Pixel und höher sind. Wenn wir den Browser innerhalb unserer Indexseite auf unter 720 verkleinern, gilt die Breite von vier Spalten nicht mehr, wie wir hier sehen können. Wir können dies ändern, indem wir col-sm hinzufügen. Anstatt md ändern Sie es in sm, aktualisieren. Dies gilt nun für kleine Bildschirme. Wenn wir wollen, dass dieser grüne und der blaue Abschnitt nebeneinander stehen, müssten wir dies auf jeweils sechs Teile setzen. Wir könnten weitermachen und es in col-sm-6 ändern. Dann wechselt auch unsere Medium-Geräte zurück zu vier und auch für das zweite können wir col-sm-6 hinzufügen. Beide ersten Abschnitte, sowohl auf kleineren Geräten mit sechs Säulen breit und dann mit vier Säulen breit auf mittleren Geräten ändern. Wenn wir speichern, aktualisieren, sind diese beiden Abschnitte jetzt sechs Spalten und der graue Abschnitt ist die standardmäßige 12 Spalten. Wenn wir dies breiter machen, um über die mittleren Geräte zu gehen, wird sich dies wiederum auf vier Teile ändern, weil wir das hier gesagt haben. Werfen wir nun einen Blick auf ein anderes Szenario. Stellen Sie sich vor, wenn wir beide kleinen divs zu vier Spalten ändern, so col-sm-4 und das gleiche für dieses auch. Das bedeutet, dass wir nicht das volle 12-Säulen-Raster aufnehmen. Wir geben nur acht Teile für kleinere Bildschirme an, die, wenn wir speichern und aktualisieren und dann auf den kleinen Bildschirm gehen, wird dies jetzt ein Leerzeichen am Ende der Zeile verlassen. In diesem Fall können wir den Inhalt verschieben, indem wir einen Offset hinzufügen. Wir können diesen Offset auf der linken Seite hinzufügen, indem wir diese beiden in die Mitte schieben. Wenn wir Offset-sm tun, gilt dies wiederum nur für kleine Geräte. Dann zwei Säulen. Dadurch wird nun die Zeile um zwei Spalten gedrückt , die den grünen und blauen Abschnitt in der Mitte verlassen. Wenn wir den Browser dehnen, gilt dies auch für alle Größen über zwei. Jetzt haben wir auf den mittleren Geräten immer noch diese zwei Säulen Offset. Dies kann leicht gelöst werden, indem der Offset für den Bildschirm, den wir entfernen möchten, auf Null gesetzt wird. Lassen Sie uns versuchen, es von den mittelgroßen Bildschirmen und höher zu entfernen. Lassen Sie uns den Offset-md-0 haben. Dadurch wird sichergestellt, dass der Offset, wenn auf mittelgroßen Geräten und höher entfernt wird. Wenn wir jetzt aktualisieren, wird der Offset jetzt auf einem Medium Geräte entfernt, beide, wenn wir dies nach unten verkleinern, sollte es immer noch auf einem kleinen Bildschirm gelten. Wir können die Dinge noch weiter vereinfachen. Wenn wir nur wollen, dass alle divs innerhalb einer Zeile gleich sind, können wir einfach col angeben. Anstatt all diese Pluspunkte hier zu haben, wenn Sie die Dinge wirklich einfach halten möchten, fügen Sie einfach col hinzu. Gleiches für den zweiten Abschnitt und auch den dritten, erhalten Sie, dass gespeichert, neu laden. Damit werden alle unsere Abschnitte auf allen Bildschirmgrößen gleich viel Platz einnehmen . So verwenden wir Spalten mit dem Bootstrap-Grid-System, um unsere Elemente zu gestalten. Jetzt wissen wir mehr über das Bootstrap-Grid. Lassen Sie uns nun weitergehen, um einige Inhalte zu diesem Projekt hinzuzufügen. 26. Bilder und Text hinzufügen: Da Bootstrap ist nur HTML, CSS und etwas JavaScript hinter den Kulissen. Das Hinzufügen von Text und Bildern ist genauso, wie wir es bereits gelernt haben. Beginnen wir mit dem Einrichten aller drei Abschnitte auf vier Spalten, die mittleren Geräte und höher. Ändern Sie also den Anruf in MD-4. Wir könnten dies für alle drei Abschnitte tun. Fügen Sie MD-4 in diese beiden hinzu. Wir brauchen diese Spalten nicht mehr, damit wir den Hintergrund entfernen können. Erfolg, Primär und sekundär. Wir werden den Inhalt dieses Mal auch den Unterschied zwischen den drei Abschnitten sehen. Wenn wir zurück zur fertigen Seite gehen, die wir gerade hier haben, werden wir die Bilder und den ganzen Text für diese drei Abschnitte erstellen. Dies ist unser erster vierspaltiger Abschnitt, unser zweiter und unser dritter, der das 12-Säulen-Raster bildet. Ich habe einige Bilder für Sie zum Download enthalten. Wenn du das Gleiche wie ich verwenden willst. Wenn nicht, können Sie natürlich voran gehen und Ihre eigenen wählen, wenn Sie es bevorzugen. Ich habe diese Bilder auf meinem Desktop gespeichert. Ich gehe zum Projektordner und füge diese hinzu. Hier ist mein Bilderordner. Also werde ich diese in das Gourmet-Burgers-Projekt ziehen. Mit diesen jetzt innerhalb des Projekts, können wir jetzt daran arbeiten, dies auf unserer Website hinzuzufügen. Also offensichtlich der Index unser HTML werden wir in diesem Container-Abschnitt arbeiten. Zunächst einmal dieser erste Aufruf, MD-4, können wir den Text verschieben und dann zu Bildelementen hinzufügen. Genau wie bei normalem HTML fügen wir die Quellattribute hinzu. Ich habe diese innerhalb Bilder Ordner hinzugefügt. Wenn wir die Seitenleiste öffnen, und dann Bilder, haben wir Karussell eins und Karussell 2 für den rotierenden Schieberegler. Wir haben hier unten drei verschiedene Bilder, die wir für die drei Abschnitte verwenden werden. Wenn wir das schließen, ist der erste, den wir hinzufügen werden, offen. Dies hat die Punkt-JPEG-Erweiterung. Der alte Text, den wir immer hinzufügen sollten. Direkt unter diesem Bild können wir dann einige normale Elemente wie H2 für den Titel hinzufügen . Nehmen wir an, über 50 Restaurants. Dann unten einige Texte mit dem P-Tag 2. Dafür fügen wir den Text von Gönnen Sie sich das nächste Mal, wenn Sie in der Gegend sind. Sie können es in einen beliebigen Text ändern, den Sie bevorzugen. Es spielt keine Rolle. Jetzt zu unseren Projekten, und laden Sie dann die Indexseite neu. Sie können sehen, wir haben ein Bild, wir haben H2 und dann etwas Text. Dieses Bild ist im Moment wirklich groß, aber wir werden das bald beheben. Nun, zum mittleren Abschnitt, können wir diesen Text auch wieder entfernen und durch ein Bild ersetzen. Die Bildquelle ist Zeit, ist Bilder/Herausforderung. jpg. Der alternative Text von Eat-in Challenge Bild. Jetzt, unter dem Bild. Wenn wir einen Blick auf die fertige Seite werfen, ist das, was wir jetzt suchen. Die H2 der Phantasie Herausforderung, und dann der Text unten, warum nicht versuchen, eine unserer berühmten Burger Essen Herausforderungen. Beginnend mit dem H2 und dann der Text unten mit den p-Tags. Also Burger essen Herausforderungen. Das sind unsere ersten beiden jetzt. Dann der dritte, entfernen Sie den Text und fügen Sie ein Bild für diesen dritten hinzu. Die Quelle ist diesmal sign.jpg. Im Ordner images, sign.jpg, das alte Text- oder Reputationsbild. Dies ist der erste Abschnitt, der auf der rechten Seite vorbei ist, der 2003 gegründet wurde. Dann ein Text unten. Das H2, dies wird jeder Text Ihrer Wahl sein. Mehr als 15 Jahre hochwertige Qualität. Sobald Sie dies eingeschlossen haben, gehen wir zum Browser, und wir werden wahrscheinlich ein bisschen ein Chaos sehen, um ehrlich zu sein, wenn wir aktualisieren. Es gibt also drei verschiedene Bilder, und die drei Abschnitte, weil die Bilder viel zu groß sind, um an Ort und Stelle zu passen. Um dies zu beheben, können wir unsere eigene CSS-Datei hinzufügen, um alle Bootstrap-Standardwerte zu überschreiben. Also Courtney, wenn wir uns im Kopfbereich erinnern, haben wir den Bootstrap Core CSS. Aber das ist nur ein Ausgangspunkt für uns, mit dem wir arbeiten können. Wie wir bereits gesagt haben, wird es ermutigt, unsere eigenen Stylesheets hinzuzufügen. Wenn wir zu unserem Projektordner gehen und dann können wir eine neue Datei hinzufügen. So styles.css für benutzerdefinierte Stile. Jetzt werde ich den Anruf MD-4 ansprechen. Dann alle Bilder, die folgen. Wir könnten natürlich die benutzerdefinierte Klasse hinzufügen, wenn wir wollten. Aber bleiben wir einfach bei den Klassen, die wir haben. Die Breite wird also 140 Pixel haben, um sie ziemlich klein zu halten und eine Höhe von 140 Pixeln zu haben. Denn denken Sie daran, dass diese nur Miniaturbildgröße Bilder sein sollen. Natürlich müssen wir dies in der Indexseite verknüpfen. Unser benutzerdefiniertes CSS geht also immer nach unten. So können wir jeden dieser Standardstile für beide überschreiben. Die Link-Beziehung ist also Stylesheet, die href. Dies ist also die gleiche Ebene wie die Indexseite. Dies kann nur in der href als styles.css gehen und dann schließen Sie dies ab. Sobald Sie das getan haben, lassen Sie uns sehen, wie das im Browser aussieht. Gut. Nun, alle drei Spalten sind jetzt nebeneinander mit den kleinen Bildern, Seite zu und auch dem Text. Der nächste Inhalt zu diesem Abschnitt hinzuzufügen, wenn wir zur fertigen Version hier gehen, diese Schaltflächen, die unten unten sind. Diese Anleihen sind ziemlich einfach hinzuzufügen. Diese nur Anker-Tags, die einige Bootstrap-Klassen, um sie schöner aussehen zu lassen. Zurück zum Texteditor, und dann zu unserem ersten Abschnitt, kurz nach diesen P-Tags hier. Ich werde noch ein paar P-Tags hinzufügen und als nächstes den Link innen. Dieser Link wird einige Bootstrap-Klassen haben. Das wird also btn sein. Dann zweitrangig. Dies wird als graue Farbe gehen, die wir zuvor gesehen haben. Diese primären, sekundären ähneln dem, was wir für die Hintergrundfarben verwenden , wenn wir die Gitter im letzten Video betrachten. Dies sind Standardstile, die Bootstrap für verschiedene Elemente bereitstellt. In diesem Fall ist sekundär die graue Farbe, die wir gerade hier sehen können. Später verwenden wir eine andere Farbe für diesen grünen Abschnitt. Zurück zu unserem Button, btn und btn und sekundär. Dann brauchen wir einen Link. Also der href. Wir können dies vorerst leer lassen, da wir keine Seiten haben, auf die wir verlinken können. Wir fügen eine Reihe von Schaltflächen hinzu. Dann der Text innerhalb der Ansicht Details. Danach werden wir diesen Pfeil nach rechts hinzufügen , der gerade hier ist. Dies geschieht mit einer HTML-Entität. Denken Sie daran, HTML-Entitäten beginnen mit kaufmännischen Unds Der Entitätscode für die Pfeile ist raquo, und dies muss in einem Semikolon enden. Speichern Sie das. Dann gibt es unseren Knopf mit den Pfeilen auf der rechten Seite. Ich werde diese Schaltfläche kopieren und in die anderen beiden Abschnitte einfügen. Also kopieren Sie diesen Link, den wir gerade hinzugefügt haben. Dann können wir nicht Tage am Ende unseres zweiten Areals. Dann lügt der dritte Bereich, direkt unter unserem Ruf nicht. Füge das Ende dreimal hinzu. Nun, es ist in unseren Baumabschnitten auf dem Bildschirm. Diese Bilder sehen jetzt viel besser aus. Jetzt passen sie in die Behälter. Aber wir können die Dinge noch weiter mit einigen Bootstrap-Klassen. Um die Ecken abgerundet zu machen, kann w e dies mit einer abgerundeten Kreisklasse tun , die Bootstrap bietet. Der erste Abschnitt hier für die Restaurants innerhalb des Bildes in der Klasse der abgerundeten Kreis. Dasselbe für das zweite Bild. Dann das dritte und letzte Bild. Mal sehen, wie das aussieht. Scheint, es gibt ein Problem dieses mittleren, wir sollten einen Bindestrich innerhalb von dort hinzufügen. Okay, gut. Diese abgerundeten Ecken werden also mit dem CSS-Grenzradius hinzugefügt. Bootstrap ermöglicht es uns, diesen Radius oben, rechts, unten links oder Kreis hinzuzufügen , genau wie wir es hier drinnen verwenden. Wir können diese Klassen sehen, wenn wir zu getbootstrap.com gehen. Dann, wenn wir zur Dokumentation gehen, und wenn wir nach unten zu Dienstprogrammen scrollen, so haben die Grenzen, können wir kühnere Farben hinzufügen. Dies ist eine, die wir gerade benutzt haben, was ein Grenzradius ist. Wir verwenden den abgerundeten Kreis, den wir hier sehen. Schließlich können wir diesen neuen Inhalt auch an der Mitte jedes Abschnitts ausrichten. Es sieht also eher so aus wie diese hier. Wir können dies tun, indem Sie eine Textmittelklasse zu dem Container hinzufügen. Also fügen Sie kurz nach dem Container die Klasse des Tech Centers zum Browser hinzu. Dadurch wird nun der gesamte Inhalt an den einzelnen Abschnitten ausgerichtet. Großartig, so dass jetzt der gesamte Inhalt zentriert ist. Ich werde dieses Video dort lassen und weitermachen, um es nach oben zu suchen. Bootstrap Navigationsleisten. 27. Bootstrap-Navigationsleisten: Eine der wirklich nützlichen Komponenten, Bootstrap bietet, ist Responsive Navbars. Wenn wir zur Dokumentation im Komponentenabschnitt gehen, wenn wir zum Navbar-Tab scrollen, können wir einige Beispiele dafür durchgehen, was Bootstrap bietet. Wenn wir nach unten scrollen, können wir einige weitere Informationen darüber finden, wie diese funktionieren, die Klassen, die wir anwenden müssen, oder wir könnten nach unten zu einigen schönen Beispielen scrollen. Dies wird eine sein, die ähnlich dem ist, was wir einbauen werden. Es wird unseren Website-Titel in der oberen Ecke haben, dann einige verschiedene Links. Wir können sogar ein Dropdown-Menü haben, wenn wir wollen , ein Suchfeld und eine Suchschaltfläche, dies wird auch reagieren. Wenn wir also den Browser verkleinern würden, würde dies in ein nettes Dropdown-Menü wie dieses verwandeln. Lassen Sie uns über in unserer Index-Seite zu arbeiten. innerhalb unserer index.html Lassen Sie unsinnerhalb unserer index.htmlein wenig mehr Platz geben. Um am Anfang des Body-Abschnitts zu beginnen, werden wir dies wie ein normaler Header-Abschnitt beginnen. Lassen Sie uns die HTML-Header-Tags verwenden und dann im Inneren können wir weitergehen, um ein nav zu konstruieren , in diesem nav, werden wir unsere ein Tag hinzufügen und dies wird für unseren Website-Titel sein. Wir können unseren Gourmet-Burger-Titel-Insider hier hinzufügen, und wir können einfach die href als leeres Attribut für jetzt behalten. Das ist in Ordnung. Da ist unser Seitentitel drin. Dann gleich nachdem wir div erstellen werden, das wäre Container folgen Links. Fügen Sie diese einfach für jetzt hinzu, wir gehen voran und fügen bald einige Bootstrap-Klassen hinzu. Aber im Moment wollen wir Ihnen nur die Struktur zeigen. In diesem div haben wir eine ungeordnete Liste und dies wird für unsere Listenelemente sein. Wir werden zu Hause haben und auch Standorte. Lassen Sie uns die li-Tags hinzufügen und diese werden auch Links sein, also verschachteln Sie einen Link innerhalb von hier. Der erste ist zu Hause und dann ein zweites Listenelement, wieder mit einem Tag verschachtelt innen, und dies wird für Standorte sein. Da sind unsere Links, unsere ungeordnete Liste. Dann nach dieser ungeordneten Liste, werden wir ein Formular hinzufügen. Dies wird für das Suchfeld sein, also das Formular nur hier. Stellen Sie sicher, dass dies immer noch in diesem umgebenden div ist. Also nur für dieses schließende div-Tag. Dann können wir weitermachen und unsere Eingabe in das Formular einfügen und dann werde ich kurz danach eintragen. Dies wird die Schaltfläche mit der Art der Übermittlung sein und dann schließen Sie dies mit dem Text der Suche. Speichern wir das und öffnen Sie es dann im Browser. Es gibt unseren Standard aussehenden Header Abschnitt, den Titel, die Links und dann die Suche unten. Jetzt müssen wir nur noch einige Bootstrap-Klassen hinzufügen , um dies schöner aussehen zu lassen und auch reaktionsschnell zu sein. Beginnen wir ganz oben, innerhalb des Navigationsabschnitts. Lassen Sie uns die Klasse hinzufügen. Die erste, die wir brauchen, ist navbar, weil dies eine navbar ist, und dann auch eine zweite Klasse von navbar-expand-md. Dadurch wird die Navbar auf mittelgroßen Geräten erweitert. Dann navbar-dark, dies ist für das dunklere Thema. Dann die feste Spitze, so ist es oben auf der Seite fixiert. Dann bg-dark. Lassen Sie uns das speichern und gehen Sie zum Browser. Wenn wir neu laden, können wir sofort eine dunkle Hintergrundfarbe sehen. Aber lassen Sie uns in die Entwicklertools gehen und sehen, was jede dieser Klassen tatsächlich in der Praxis tut. Lass uns ein bisschen mehr Platz machen und dann unser Navi inspizieren. Dieses feste Top war eines der Dinge, die wir hinzugefügt haben. Dies fügt die zu fixierende Position hinzu und es legt sie auch direkt am oberen Rand der Seite fest. Wir haben dunkle Hintergrundfarbe, die diese dunkle Hintergrundfarbe setzt, die wir hier sehen. Denken Sie daran, dass wir auch navbar-expand-md hinzugefügt haben. Dies tritt innerhalb der Medienabfrage mit der Mindestbreite von 760 Pixeln ein, genau wie wir es in frühen Videos gesehen haben. Zurück zu unserem Code, und fangen wir mit den a-Tags an. Wir haben die leere href. Lassen Sie uns voran und fügen Sie hier auch eine neue Klasse hinzu, und diese kann Navbar-Marke sein. Denken Sie daran, dies sind alle Klassen, die von Bootstrap bereitgestellt werden. Speichern und dann aktualisieren, und jetzt haben wir diese weiße Farbe Link. Denken Sie daran, bevor wir einen umgebenden div-Container hinzugefügt haben , der all diesen Abschnitt hier umgibt. Dies ist ein Abschnitt, der auf den kleinsten Grüns zusammenbricht. Daher bietet Bootstrap uns einige Klassen, die wir hinzufügen können genannt collapse und auch navbar-collapse. Dadurch wird der Collapse-Abschnitt gut aussehen. Bis zur ungeordneten Liste haben wir die Klasse von navbar-nav und dann eine zweite, die mr-auto ist. MR-Auto wendet den automatischen Rand rechts von dieser ungeordneten Liste an. Dies schiebt diese Suchleiste auf die rechte Seite. Wenn wir aktualisieren, gilt dies jetzt automatisch Rand auf der rechten Seite dieser ungeordneten Liste. Halten Sie diesen Abschnitt auf der rechten Seite. Wir werden später in diesem Abschnitt mehr über Marge und Polsterung sprechen. Aber jetzt gehen wir zu den Listenelementen und fügen Sie unsere Klassen hier hinzu. Der erste ist nav-item, und dann können wir dasselbe für das zweite Listenelement tun, die gleiche Klasse von nav-item. Dann gibt es auch einige Links. Wir fügen die Klasse für den Link von nav-link hinzu, und dann die zweite, die gerade hier ist. Dies ist auch nav-link. Speichern und gehen Sie in den Browser und jetzt haben wir ein wenig mehr Abstand und auch einige andere Färbung. Auch hier können wir in die Entwicklertools gehen und sehen, was jede dieser Klassen individuell macht. Rüber zum Nav-Link. Wir haben diese navbar-dark und auch die navbar-link, die Ihnen diese Farbe gibt. Wir haben einige Medienabfragen, die einige Polsterung in verschiedenen Größen anwenden. Das gleiche mit diesem nav-link, den wir hinzugefügt haben. Es hat einen Anzeigetyp von Block und auch etwas Polsterung. Dies wird sicherstellen, dass unsere navbar schön alle aufgereiht ist, mit einigen Abständen herum. Wenn wir den Browser verkleinern, wird er geschlossen. Wir sehen die Schaltfläche in der oberen rechten Ecke noch nicht auf kleineren Bildschirmen, wie wir es in der Bootstrap-Demo in der Dokumentation gesehen haben. Dazu müssen wir unserem Code eine Schaltfläche hinzufügen. Direkt unter dem Gourmet Burgers Titel und kurz vor diesem div, das ein kollabierender Abschnitt ist, werden wir eine Schaltfläche hinzufügen. Dann innerhalb dieser Schaltfläche wird dies eine Klasse von Navbar-Toggler aufnehmen. Dies wird den Typ der Schaltfläche haben und dann wird der nächste Teil für Datenumschaltung sein und wir setzen dies zu kollabieren. Dies macht die Schaltfläche eine Umschaltfläche, die erweitert und reduziert den Inhalt des nav Element. Die anderen Elemente, auf die wir uns beziehen, ist dieses div unten mit der Klasse von collapse und navbar-collapse. Um diese Schaltfläche mit diesem div zu verknüpfen, müssen wir zunächst eine ID hinzufügen und wir können sie alles nennen, was wir wollen, aber ich werde dies die NavBarCollapse nennen. Jetzt hat dies eine eindeutige Referenz. Wir können auf unsere Schaltfläche gehen und ein Datenziel hinzufügen und diesem den gleichen Namen geben. Also werde ich einen Hash hinzufügen, weil es eine ID ist und dann haben wir NavBarCollapse. Gehen wir nun zum Browser und aktualisieren Sie dann. Nun, wenn wir den Browser verkleinern, können wir sehen, dass wir den Knopf in der oberen rechten Ecke haben, aber er steht im Moment nicht zu sehr heraus. Also schauen wir uns einfach an. Eigentlich innerhalb der Schaltflächen müssen wir das Symbol für die Schaltfläche hinzufügen. Wir tun dies mit den span Elemente und fügen Sie dann einige Klassen von navbar, und dies ist navbar-toggler-Symbol. Speichern Sie das, und dann schrumpfen Sie den Browser nach unten, und da gehen wir. Dies ist die Span-Elemente mit dem Symbol im Inneren. Wir können jetzt unsere Schaltfläche sehen, und das fällt auch herunter, weil es mit dem separaten div-Abschnitt verknüpft ist. Das div, mit dem es verknüpft ist, ist dieses hier mit der ID von NavBarCollapse, das Datenziel nur hier einführt. Dies ist jetzt der Abschnitt abgeschlossen und wir werden eine schön aussehende Navigationsleiste haben , indem Sie einfach einige Bootstrap-Klassen und Helfer anwenden. Im nächsten Video werden wir ein Bilderkarussell zu dieser Homepage hinzufügen. 28. Bootstrap-Karussells: Genau wie die Navbars, die wir zu Beginn des letzten Videos in der Bootstrap-Dokumentation gesehen haben . Zurück in diesen Komponenten Abschnitt auf der linken Seite, haben wir auch einen Link zu Karussells. Klicken Sie also auf den Karussell-Link auf hier. Dann wieder, wenn wir nach unten scrollen, können wir verschiedene Beispiele aus dem Code sehen. Also hier ist ein einfaches Beispiel hier, das nur der Code darunter ist. Wenn wir nach unten zu der Version scrollen, die besagt, dass wir Untertitel haben. Also hier sind Indikatoren hier, die bald hinzugefügt werden. Aber wir wollen diese Version hier mit den Untertiteln, löst ein wenig Text über jedes Bild. Das wird ähnlich dem sein, den wir bauen werden. Also wir, wie diese Beschriftungen, und auch diese Indikatoren zwischen den verschiedenen Folien klicken. Gehen wir also zu unserer Indexseite. Dann lassen Sie uns oben in diesen Kopfzeilenelementen etwas Platz für unser Karussell machen. Also fügen wir zuerst ein umgebendes div-Tag hinzu. Dann im Inneren hier werden wir einige Bootstrap-Klassen hinzufügen. Der erste wird von Karussell und dann der zweite von Rutsche sein. Wir fügen auch eine Datenfahrt-Attribute hinzu. Das wird gleich Karussell sein. Die Datenfahrt-Attribute von Karussell weist Bootstrap an, das Karussell automatisch zu spielen, sobald die Seite geladen wird. Hier drinnen werden wir ein zweites div hinzufügen, das in der Mitte verschachtelt ist. Das wird die Klasse des Karussellinneren haben. Diese Klasse von Carousel-inner wird als Wrapper für unsere Folien oder Bilder fungieren, die wir jetzt hinzufügen werden, Lassen Sie uns unser erstes div für unsere erste Folie hinzufügen. Dies wird eine Klasse haben, und das ist Karussell-Artikel. Dann können wir hier unser Bild hinzufügen, das wir im Karussell anzeigen möchten. Das Bild hat auch eine Klasse zwei, und das wird w-100 sein. W-100 ist eine Bootstrap-Dienstprogrammklasse um die Bildbreite auf 100 Prozent des Containers festzulegen. Wir können dann die Quelle für unser Bild hinzufügen, das ist unser Bilderordner. Dann das Bild von carousel.jpeg. Dann Attribute ein Alt mit etwas Text. Ich werde nur den Text so einstellen, dass er erste Folie für jetzt ist. Das ist also unser erstes div für den ersten Karussellartikel. Wenn wir diesen Abschnitt kopieren, können wir ein weiteres Bild direkt unten hinzufügen. Dies wird in den gleichen Klassen nehmen, aber alles, was wir tun müssen, ist Änderungen, um unser zweites Bild von carousel2 zu sein. Also über zum Browser und dann Index-Seite. Wenn wir aktualisieren, wird nichts auf dem Bildschirm angezeigt. Dies liegt daran, dass eines unserer Bilder die aktive Klasse hinzugefügt haben muss. Dadurch wird die Diashow angezeigt. Und es beginnt mit der Folie mit dieser aktiven Klasse und nicht in der Quellreihenfolge. Also zurück zum Code. nach einem dieser Karussellelemente können wir aktiv hinzufügen, speichern und dann aktualisieren. Gut. Das ist also die erste Folie, die wir hier sehen. Jetzt können wir sofort sehen, dass das funktioniert. Als wir uns die Beispiele auf der Bootstrap-Website anschauten, erwähnten wir auch das Hinzufügen von Untertiteln zu diesen Folien. Wir können diese in für jeden Bildabschnitt hinzufügen. Also zurück zu unserem Karussell Artikel. Dann können wir dies direkt nach dem Bild hinzufügen. Also lasst uns hier drunter etwas Platz machen. Dann können wir div hinzufügen, das unseren Untertitelbereich umgeben wird. Dies benötigt eine Bootstrap-Klasse und das ist beschreibend, das ist Karussellunterschrift. Denken Sie daran, wenn Sie genau wissen möchten, was CSS eine dieser Klassen angewendet wird, gehen Sie einfach zum Browser und gehen Sie in die Entwicklertools und Sie können genauer sehen. Lassen Sie uns eine Überschrift der Ebene 5 hinzufügen. Dies wird für den Titel oder die Beschriftung sein. Also werde ich „Made to order“ für dieses erste Bild hinzufügen, und dann unten nur ein Standard-p-Tag mit etwas Text der Verwendung nur die besten Zutaten. Gut. Machen wir es hier ein bisschen mehr Platz. Wenn Sie Probleme sehen, wenn Sie diesen Bootstrap-Abschnitt durchlaufen, stellen Sie einfach sicher, dass alle Verschachtelungen korrekt durchgeführt werden. Stellen Sie sicher, dass sich diese Karussellbeschriftung beispielsweise direkt unter dem Bild befindet und dieser Abschnitt in diesem Karussellelement verschachtelt ist usw. Dies ist normalerweise die größte Ursache für Codierungsprobleme bei der Arbeit mit Bootstrap und auch für die Klassen, die auf die falschen Elemente angewendet werden. Also jetzt gehen wir voran und scrollen Sie nach unten zum zweiten Bild. Also das zweite Bild innerhalb dieses Karussellartikels, werden wir das umgebende div wie zuvor hinzufügen. Dies hat auch die gleiche Klasse von Karussell Beschriftung, ein h5, um dies mit dem Text von über 50 Typen auf unserer Speisekarte konsistent zu halten. Dann unten, unsere Standard-p-Elemente mit dem Text „Oder bauen Sie Ihre eigenen“. Es gibt unsere zwei Untertitel für unsere beiden Bilder. Lassen Sie uns dies in Aktion über den Browser sehen. Gut. Es gibt unsere Kumpels, um Level 5 Überschrift und die Texturen unten zu bestellen. Wenn wir davon ausgehen, sehen wir hoffentlich eine Rotation. Da gehen wir, sagt unser zweites mit der Beschriftung unten unten. Gut, dieses Bild Karussell funktioniert jetzt und stehen, um gut aussehen. Im nächsten Video fügen wir einige linke und rechte Schaltflächen hinzu, damit wir durch diese Bilder springen können. 29. Steuerelemente zum Karussel hinzufügen: Willkommen zurück. Wir haben jetzt eine funktionierende Diashow-Anzeige, was schön ist. Wir können dies noch besser machen, indem wir einige Steuerelemente hinzufügen, um zwischen diesen Folien zu überspringen. Um dies zu tun, werde ich dem Karussell ein paar Knöpfe hinzufügen. Einer auf der linken Seite, um nach links zu springen, und dann eine auf der rechten Seite, um vorwärts zu springen. Diese wurden am Ende unseres Karussell div Abschnitts hinzugefügt. Nach unten, wenn wir das öffnende Tag, die Karussell Folie, und dann scrollen Sie nach unten nach unten. Wir werden dies kurz vor dem schließenden Tag hinzufügen. Beginnen wir mit einem Tag, weil es ein Link sein wird. Dies wird die Klasse der Karussell-Steuerung-prev haben, die von unseren vorherigen zeigen. Eine Rolle der Schaltfläche, und dann auch eine Datenfolie. Dies wird gleich dem vorherigen sein, das P-R-E-V ist. Daten-Folie gibt an, zu welchen Folien zu gehen, die beiden Werte, die Sie hinzufügen können, ist, vorherige oder nächste. Dieser wird zurück gehen, wir wollen diesen Wert der vorherigen. Dann werden wir unsere Span-Tags hinzufügen, und dies wird für die Symbole sein. Dies funktioniert in ähnlicher Weise wie unser Drop-down-Menü, wo wir die Spanne hinzufügen und dann einige Klassen hinzufügen, um das Symbol anzuzeigen. Die Klasse, die wir hier verwenden möchten, ist Karussell Control-Previous-icon. Dies wird der linke Pfeil sein, genau wie eine dieser sich öffnenden Hedge-Wandhalterungen hier. Dies ist unser Symbol und dann werden wir eine zweite Spanne kurz danach hinzufügen. Dies wird den Text des vorherigen haben. Wir werden das nicht wirklich auf Standardbrowsern sehen. Dies wird nur für Bildschirmlesegeräte gelten. Jetzt erklären wir, dass dies für Bildschirmlesegeräte ist, indem wir nur eine Klasse von sr hinzufügen. Wenn wir das speichern und dann neu laden, können wir auf der linken Seite sehen, dass wir den Text des vorherigen nicht haben. Wir haben nur dieses kleine Symbol da. Dann können wir genau das gleiche tun, lassen Sie uns dies ein Tag kopieren und dann das gleiche für unsere nächste tun. Richten Sie das alles aus. Das a-Tag wird die Klasse haben, die wir ändern müssen, um dies als nächstes zu sein. Die Daten-Folien können auch als nächstes sein. Das Symbol, das geändert werden muss, um das nächste zu sein. Dann endlich die Texte von weiter für die Bildschirmlesegeräte, speichern Sie das und laden Sie dann den Browser neu. Es ist ein bisschen schwer zu sehen, aber wir haben den rechten Pfeil hier und den linken hier auch. Aber wenn wir auf sie klicken, scheinen sie nicht zu funktionieren. Das liegt daran, dass wir sie mit unserer Diashow verknüpfen müssen. Diese Bindungen sind Verknüpfungen, die die a-Elemente verwenden. Aber wie bei allen Links müssen wir mit den href-Attributen angeben, wo eine Verknüpfung hergestellt werden soll . Zuerst fügen wir eine ID zum Karussell Wrapper div hinzu. Gehen wir zum öffnenden Tag. Dieses div mit der Klasse Karussell Folie, können wir eine ID hinzufügen. diese ID von Karussell-Steuerelementen. Dieser Name liegt ganz bei uns. Wir müssen nur sicherstellen, dass diese ID mit der href für die beiden Links übereinstimmt. Kopieren Sie dieses Karussell-Steuerelement. Wir können diese ID direkt unten als href verwenden. Die erste a, lassen Sie uns eine href hinzufügen und verwenden Sie ein # dieses Mal und fügen Sie in carouselcontrols. Dann für den zweiten Link hier unten, die href Attribute, wieder mit der # von carouselcontrols. Diese beiden Bilder beziehen sich nun auf unser Hauptkarussell. Also hoffentlich, wenn wir speichern und dann zum Browser gehen, sollten diese beiden Links jetzt funktionieren. Gut, damit wir durch unsere Bilder hin- und vorwärts gehen können. Toll, das funktioniert alles und das ist es jetzt für unser Karussell. Im nächsten Video werden wir uns eine andere der Bootstrap-Komponenten ansehen , die das Modell ist. 30. Bootstrap-Modale: Jetzt ist es an der Zeit, sich eine andere nützliche Bootstrap-Komponenten anzusehen, die als Modal bezeichnet wird. Ein Modal ist ein Popup-Fenster, das alle Informationen an den Benutzer geben kann. In unserem Fall werden wir einen Anmeldebereich am Ende unserer Website hinzufügen. Wenn der Benutzer dann auf den Anmelde-Button klickt, wird dann ein modales Fenster aktiviert, in dem sich der Benutzer über ein Formular anmelden kann. Sobald das Modal aufgetaucht ist, können wir es immer noch abklicken und zur ursprünglichen Seite zurückkehren. Lassen Sie uns nun auf unsere Index-Seite gehen und sehen, wie man modal hinzufügt. Um am Ende der Seite zu beginnen, werde ich einen Anmeldebereich erstellen. Dies wird im Grunde eine Zeile, die einige Texte auf einer Seite sein. Sagen Sie „Anmeldung“ für exklusive Angebote. Dann eine Schaltfläche auf der rechten Seite zu klicken, die das Modal aktiviert. Ganz unten in unserem HTML. Scrollen Sie nach rechts Ich werde einen neuen Container für diesen Abschnitt hinzufügen. Dies kann ganz unten gehen. Direkt über diesen JavaScript erstellen wir ein neues div, und dies wird eine neue Klasse von Containerflüssigkeit haben, die die Flüssigkeit in voller Breite der Seite macht. Dann auch bg-dark, um ihm eine Hintergrundfarbe zu geben. Im Inneren können wir unser div mit der Klasse der Zeile hinzufügen. Schließ das ab. Dann müssen wir zwei neue Klassen hinzufügen, folgen Sie dem linken Abschnitt und dem rechten Abschnitt. Der linke Abschnitt wird ein div sein. und dies wird die Klasse von col-md-7 haben , die Sie es sieben Teile breit auf den mittelgroßen Geräten und höher machen. Dann ein zweiter Abschnitt knapp darunter, wir die restlichen fünf Teile aufnehmen werden. Dies muss die Klasse von col-md-5 haben, was uns unser 12-Säulen-Raster gibt. Jetzt ist dieses Raster vorhanden, wir können zuerst einige Anmeldetext hinzufügen , der auf der linken Seite innerhalb dieser p-Tags gehen wird. Melden Sie sich für exklusive Angebote, Punkt, Punkt, Punkt. Dann müssen wir eine Schaltfläche auf der rechten Seite hinzufügen, die unser modales Pop-up aktiviert. Innerhalb des fünf Abschnitts auf der rechten Seite fügen wir eine Schaltfläche mit dem Typ der Schaltfläche hinzu. Dann ein paar Knopfklassen. Der erste ist btn, und dann btn-success, btn ist die Standard-Basisstile für eine Schaltfläche, dann wird btn-success ihm die grüne Hintergrundfarbe geben. Wenn wir das speichern und dies im Browser überprüfen, ist dies ganz unten. Wir können unseren Text auf der linken Seite hier sehen, und dann den Button hier. Dies sieht im Moment nicht zu gut aus, aber einige Bootstrap-Klassen sollten dies beheben. Wir müssen auch etwas Text innerhalb der Schaltfläche hinzufügen, lassen Sie uns das zuerst tun. Wir können den Text der Anmeldung hier hinzufügen. Innerhalb dieser Zeile können wir die Klasse des Textcenters hinzufügen, und dies schiebt den gesamten Text in die Mitte des div. Mal sehen, wie das aussieht. Aktualisieren, gut, unsere Schaltfläche und auch der Text ist in der Mitte von jedem der Container. Lassen Sie uns diese Texte jetzt leicht und kursiv machen. Dies auf der linken Seite. Wir können es in diesem, div nur hier hinzufügen. Nach md-7 haben wir die Dienstprogrammklasse von Texten Licht. Dies wird auch von Bootstrap zur Verfügung gestellt und auch kursiv geformt. Diese sind ziemlich selbsterklärend. Wenn wir speichern und sehen, wie das aussieht, gut, jetzt ist unser Text jetzt weiße Farbe und auch kursiv. Wir werden dies auch später verbessern, indem wir etwas Marge und Padding hinzufügen. Wir machen das in einem späteren Video. Aber für jetzt, lassen Sie uns mit der Konstruktion unseres Pop-up-Modals fortfahren. Dies kann überall in unserem Code hinzugefügt werden , aber ich werde meins direkt unter dem Registrierungsbereich hinzufügen. Zurück zu unserem Code. Dann wieder ganz unten, unterhalb des Anmeldediv hier, werden wir unseren modalen Abschnitt hinzufügen. Lassen Sie uns einen Kommentar hinzufügen. Jetzt müssen wir unsere Umgebung ein div hinzufügen. Dies wird eine Klasse von modal haben und auch verblassen. Diese Fade-Klasse ist ein Fading-Effekt, der von Bootstrap bereitgestellt wird. Dies wird den Übergang schön und glatt machen. Hier drinnen werden wir ein neues div hinzufügen. Dies sollte ziemlich vertraut sein, wir konstruieren nur im Grunde divs mit Bootstrap-Klassen, um unser nettes Styling hinzuzufügen. Die Klasse des modalen Dialogs. Diese Klasse des modalen Dialogs macht einen modalen schmaler. Wenn wir dies entfernen, macht es ein Modal die volle Breite der Seite. Ich werde nur modalen Dialog an Ort und Stelle halten, um dies schön und kompakt zu halten. Dann ist ein neues div innen verschachtelt. Dies wird die Klasse von Modal-Content haben. Dies ist der Inhalt, den wir innerhalb unseres Modals haben möchten, und dies wird zwischen einem Kopfbereich, einem Körper und einer Fußzeile aufgeteilt . Jetzt addieren wir drei neue divs auf der gleichen Ebene. Dies ist der erste für den Header. Die Klasse des modalen Headers. Wenn wir diesen Abschnitt hier kopieren und diesen in einfügen, zwei weitere Male. Da gehen wir, also ist das unser Header. Die mittlere wird für den Körper sein, und dann die letzte ist die Fußzeile. Stellen Sie sicher, dass es Fußzeile, Körper und Kopfzeilenabschnitt ist alles in diesem modalen Inhaltsdiv verschachtelt, sonst werden die Dinge nicht wie beabsichtigt aussehen. Mal sehen, wie wir so weit über im Browser aussehen. Lassen Sie uns aktualisieren und klicken Sie auf die Schaltfläche „Registrieren“. Wir sehen sofort, dass das Pop-up nicht passiert, wenn Sie auf die Schaltfläche klicken. Wie Sie vielleicht erwarten, müssen wir diese Schaltfläche mit dem Modal verknüpfen, damit es funktioniert. Zuerst fügen wir eine ID auf tatsächlichen Modal ein. Wenn wir nach oben gehen, wird diese ID ein beliebiger Name unserer Wahl sein. Ich werde das nur Modal nennen. Dann müssen wir der Schaltfläche zwei Attribute hinzufügen, die sie aktivieren. Der Anmelde-Button gerade hier. Wir sagen, dass diese Schaltflächen das Modal aktivieren, indem Sie zuerst das Datenumschaltungsattribut hinzufügen und dies auf modal setzen. Dann legen wir fest, welches Modal wir aktivieren wollten, indem wir das Datenziel verwenden. Dann signieren Sie dies gleich der ID des modalen, dem Hash-Modal. Dies ist die gleiche ID, die wir dem Modal direkt unten gegeben haben. Wenn wir speichern und versuchen Sie dies im Browser. Klicken wir nun hier auf die Schaltfläche „Registrieren“. Der Knopf funktioniert nicht ganz. Lassen Sie uns zu unserem Code gehen und alles hier überprüfen. Wir haben die ID von modal und dann die Schaltfläche, wir müssen Datenumschalter hinzufügen und sicherstellen, dass es richtig geschrieben ist, neu laden, klicken Sie auf unsere Schaltfläche. Da ist unser Pop-up, das in der Tat unser Modal ist. Aber denken Sie daran, dass wir dem modalen Header, dem modalen Körper und dem modalen Fußzeilenabschnitt keinen Inhalt hinzugefügt haben. diesem Grund sehen wir freie leere Abschnitte auf dem Bildschirm. Dies ist, was wir als nächstes bewegen, wenn wir unser Formular zu diesem Modal hinzufügen, so dass der Benutzer seine Anmeldedetails hinzufügen kann. 31. Bootstrap-Formulare: Wir wissen schon früh im Kurs alles über die Verwendung von Formularen. Dieses Video sollte keine Überraschungen aufwerfen. Wir werden uns jedoch anschauen, wie Bootstrap diese Formulare behandelt. Es verwendet genau die gleichen Elemente, wie wir bereits gesehen haben, aber fügen Sie dann eine schöne Styling-Positionierung hinzu, indem Sie die Bootstrap-Klassen hinzufügen. Unser Modal erscheint nun auf dem Bildschirm, wenn wir auf das Zeichen klicken und in diesem Modal ist, wo wir unser Anmeldeformular hinzufügen werden. Zuerst können wir dem modalen Header-Abschnitt etwas Text hinzufügen , der hier oben ist. Lasst uns gehen. Eigentlich, bevor wir das tun, wenn wir das Modal abklicken, schließen wir es. Dann zum Texteditor, lassen Sie uns hier nach unten zu unserem modalen Header Abschnitt scrollen, und hier werde ich eine Ebene 5 Überschrift mit dem Text der Anmeldung für exklusive Angebote hinzufügen . Bootstrap hat auch einige Klassen zur Verfügung, und dieses Mal wird dieser modale Titel genannt, also speichern Sie das, und gehen Sie dann zum modalen Pop-up, klicken Sie auf die Schaltfläche, und als unser Text ganz oben, dann fügen Sie in unserer Form innerhalb dieses mittleren Abschnitts , der der Körper ist, also zurück zu unserem Modal. Dieses Mal in diesem modalen Körperabschnitt werden wir ein Formular hinzufügen, dieses Formular wird ein div innerhalb mit der Klasse der Formulargruppe verschachtelt haben. Dies gruppiert alle Formularabschnitt enthalten alle Eingaben aktiviert. Wir fügen jede Eingabe aktivieren innerhalb dieser Formulargruppe eine Struktur zu Ihren Formularelementen hinzuzufügen, wie z. B. jeder Rand, um sie zu platzieren. Beginnen wir mit einem Label und dieses Label wird die üblichen vier Attribute haben. Dies wird zu unseren Eingaben verlinken. Lassen Sie uns dies eine Namenseingabe nennen, weil wir einen Namensabschnitt und dann den Text Ihres Namens hinzufügen werden. Dann, nachdem dieses Label unsere Eingabe hinzufügen kann, wird dies die Art von Text und dann einige Klassen haben, so dass die Bootstrap-Klassen von Formular-Steuerelement, ID und diese ID Namenseingabe sein wird, die diesem Label entspricht, so id der Namenseingabe. Dann danach können wir einige Platzhalter-Text hinzufügen und dies kann alles von unserer Wahl sein, ich werde zu vereinfachen, geben Sie Ihren Namen ein. Bevor wir diese Bootstrap-Klasse von Formular-Steuerelement hinzugefügt haben, wird dies für alle textbasierten Eingaben wie die Art von Text, Auswahl und Textbereich verwendet . Dies wird jeden Stil wie Farben anwenden und auch die Eingabe auf 100 Prozent breit, wenn wir das speichern, können wir sehen, welche Wirkung dies innerhalb des Modals hat, also klicken Sie auf die Schaltfläche und es gibt unsere 100 Prozent Lied-Eingaben in der Mitte mit dem Etikett Ihres Namens. So sieht unser Formular standardmäßig aus. Wir haben das Etikett, eine Eingabe, auf separaten Zeilen. Bootstrap wendet den Anzeigetyp des Blocks und wartet auf 100 Prozent auf die meisten Formularelemente. Wenn wir wollten, dass dieses Label und die Eingabe in der Linie sind, gibt es eine Klasse für diese beiden. Wir können dies dem umgebenden Formularcontainer hinzufügen und die Klasse wird Form in Zeile genannt, speichern Sie das, und dann neu laden, klicken Sie auf das Modal, und jetzt ist unsere Beschriftung und Eingabe in Zeile. Aber ich werde dies behalten, wie es ursprünglich ohne diese Klasse von Formular in Linie war , die dies für jetzt und wieder in unsere E-Mail- und Adressformulargruppen entfernen sollte, so wie dieser Namensabschnitt hier, umgeben wir auch andere Eingaben mit diese Klasse der Formulargruppe. Lassen Sie uns dies kopieren und fügen Sie dann direkt unten ein. Dieser wird für die E-Mail sein, also können Sie Ihren Namen ändern, um Ihre E-Mail zu sein. Dies wird auch den Eingabetyp von E-Mail haben. Wir müssen auch das Label für Attribute ändern, um E-Mail-Eingabe zu sein, was hier mit dieser ID übereinstimmen wird. Ändern Sie dies auch als E-Mail-Eingaben. Ich denke, alles andere ist in Ordnung. Nur ein Platzhalter, also geben Sie Ihre E-Mail ein und das sieht gut aus. Direkt unter dieser E-Mail werden wir dies in einer weiteren Zeit einfügen und dies wird auch das umgebende div mit einer Klasse von Formulargruppe haben das umgebende div mit einer Klasse von , aber dieses Mal wird es für Ihre Adresse sein. Dieses Mal werden wir einen Textbereich haben, anstatt die Standardeingaben. Lassen Sie uns diese Eingabe von hier löschen. Nach diesem Label werden wir dann den Textbereich erstellen. Denken Sie daran, dass der Textbereich ein öffnendes und schließendes Tag hat und die Eingabe nur das selbstschließende Tag hat. Der Textbereich kann eine Klasse von Formularsteuerelementen haben, die mit diesen oben übereinstimmt, da es sich um eine textbasierte Eingabe handelt. Dann eine ID, die mit dieser Bezeichnung der Adresse übereinstimmt. Denken Sie daran, von früher mit einer Texteingabe, wir können auch angeben, wie viele Zeilen wir hinzufügen möchten, und wir setzen es standardmäßig auf 3. Dann ein Platzhalter, mit dem Text der geben Sie Ihre Adresse. Ich denke, das ist alles für die freien Eingaben getan, also lass uns sehen, wie es aussieht. Aktivieren Sie das Modal. Gut. Wir haben den Namen, die E-Mail und auch die Adresse, die ein Textbereich ist. Jetzt können wir das nach unten ziehen, um es größer oder kleiner zu machen. Dies verlässt nur den Fußbereich unten. In ihm hier möchte ich einige Checkboxen hinzufügen, um zu fragen, ob der Benutzer per E-Mail oder Post kontaktiert werden möchte , dann auch einen Absende-Button, um das Formular zu senden. Fügen wir zuerst diese Kontrollkästchen hinzu, also sollte es zu unserem Modal eine modale Fußzeile sein, also stellen Sie sicher, dass wir uns geändert haben. Wir haben den Körper, die Kopfzeile und dann die Fußzeile unten. Beginnen wir mit unseren E-Mail- und Posteingaben. Das umgebende div, mit Bootstrap-Klassen der Formularprüfung weil dies ein Kontrollkästchen sein wird und dann Formularcheck in Zeile, hält diese Elemente in Linie, dann können wir unsere Eingaben mit der Art der Checkbox, den Bootstrap-Klassen der Form hinzufügen Eingaben überprüfen. Nach der Klasse werden wir eine ID hinzufügen, die zu unserem Label verlinkt wird. Diese ID werde ich nennen dies die E-Mail-Prüfung. Schließlich wird ein Wert, der der Option 1 gleich sein wird und dann diesen abschließen wird. Denken Sie daran, dass der Wert der Text ist, der an den Server gesendet wird , sobald dieses Formular gesendet wurde. Nach der Eingabe müssen wir unser Label hinzufügen. Dieses Label wird eine Klasse von Formularüberprüfungsbeschriftung haben. Die vier Attribute, die gehen, um unsere ID der Checkboxen zu verlinken und dies war E-Mail-Check. Schließlich überprüfen Sie innerhalb von Kontakten per E-Mail. Lassen Sie uns ein wenig kleiner machen, damit wir auf dem Bildschirm sehen können. Dann werde ich das nur kopieren, um die Dinge zu beschleunigen, also stellen Sie sicher, dass Sie dieses vollständige umgebende div kopieren es einfach unten einfügen und dann können wir einfach diese ändern, um per Post Kontakt zu sein. Die Klassen alle gleich, wir müssen nur den IDs Unterschied überprüfen. Die ID dieses Mal wird Post-Check sein. Das Formularattribut kann auch Post Check sein, Kontakt per Post, und ich sollte nach jedem von ihnen ein Fragezeichen hinzufügen. Schließlich lasst uns dieses Modal mit einer Schaltfläche einschließen, um das Formular, den Text von submit, die Art der Übermittlung auch, die Bootstrap-Klassen von btn und dann btn-primär zu senden, was ihm das blaue Farbe für die Schaltfläche, so dass sollte alles jetzt für die Fußzeile sein, ich werde mit zwei Checkboxen hier dann unsere Submit-Button gehen. Werfen wir einen Blick auf das in Aktion. Aktivieren Sie das Pop-up. Der Fußzeileninhalt ist jetzt da, aber er sieht ein wenig fehl am Platz aus. Wir können dies schnell mit einer kleinen Flexbox beheben. Anstatt alle Flexbox in unserer CSS-Datei hinzuzufügen, stellt Bootstrap uns auch einige Utility-Klassen zur Verfügung. Wir können flexbox in sehr schnell einsetzen. Über zu unserem Code und dann können wir einen Flexbox-CSS-Helfer in diesem modalen Fußzeilendiv hinzufügen. Kurz nach modalen Fußzeilen können wir hinzufügen rechtfertigen Inhalt zwischen. Dies funktioniert genau wie rechtfertigen Inhalte zwischen uns in unserem CSS getan. Bootstrap bietet es innerhalb einer CSS-Klasse, also speichern Sie das und über in unserem Modal. Da gehen wir. Jetzt sind die Dinge schön in der Fußzeile angeordnet. Das ist genau wie das, was wir bereits gelernt haben. Wir können auch zwischen mit Mitte, Anfang, Ende und um ersetzen , zum Beispiel zwei. Der einzige Unterschied ist, dass wir hier eine Klasse verwenden, die von Bootstrap bereitgestellt wird, unter der Haube, es wendet immer noch eine CSS-Stil-Eigenschaft an, genau wie wir es früher im Kurs getan haben. Wenn wir die Entwickler-Tools öffnen und dann nach unten scrollen würden. Wenn wir dann diesen Fußzeilenbereich des modalen überprüfen, klicken Sie darauf, können wir diese Klasse von Rechtfertigung Inhalt zwischen sehen, die wir gerade hier hinzugefügt haben, ist einfach die Anwendung der Rechtfertigung Inhalt Flexbox-Eigenschaft auf diese Elemente. Lassen Sie uns das schließen. Nun, wenn wir zurück zu unserem HTML gehen, wenn wir einen Blick auf die umgebende Form, innerhalb des modalen, so dass das Formularelement, das das schließende Tag hat, und es gibt das öffnende Tag. Sie bemerken, dass dieses Formularelement verschoben werden muss, um alle Formularelemente zu umgeben. Im Moment umgibt es nur diesen Inhalt von Name, E-Mail und Adresse. Lassen Sie uns dieses schließende Form-Tag hier rausschneiden und dann, wenn wir das nach unten bewegen, bewegen wir es nach unten nach unten. Stellen Sie sicher, dass es die Schaltfläche mit der Art der Übermittlung hat, und jetzt können wir dies in direkt nach dem Fußzeilenabschnitt hinzufügen. Jetzt sind alle unsere Eingaben jetzt innerhalb dieser Form Elemente. Nur um die Dinge zu beenden, werde ich eine Schaltfläche auf dem Formular hinzufügen, die nur ein x sein wird, damit der Benutzer klicken kann, um das Modal zu schließen. Sie können auch aus dem Bildschirm klicken, um ein Modal zu schließen, wie wir es zuvor gesehen haben. Aber manchmal weiß der Benutzer vielleicht nicht, dass er dies tun kann , so dass ein kleines Kreuz in einer Ecke des Formulars wirklich profitieren wird. Ich werde dies im modalen Header-Abschnitt hinzufügen. Lassen Sie uns scrollen bis zum Modal hatte einen Teil hier, und dann können wir einen Boden hinzufügen. Kurz nach diesem H5, lassen Sie uns eine Schaltfläche hinzufügen, dann können wir eine HTML-Entität hinzufügen, die ein Symbol der Zeiten sein wird, und das wird ein kleines Kreuz sein, was wir in nur einem Moment sehen werden. Die Unterseite benötigt einen Typ von Schaltfläche, eine Klasse von schließen und dann Daten von modal schließen. Data Dismiss modal wird erklären, dass wir wollen, dass dieser Boden ein Modal schließt, wenn es angeklickt wird. Geben Sie das Speichern und wir können dies im Browser ausprobieren. Laden Sie neu, öffnen Sie das Modal, und es gibt unsere HTML-Entität, die das Kreuz ist, klicken Sie darauf, und jetzt schließt dies unser Modal. Dies ist unser Modal jetzt voll funktionsfähig und auch die Form sieht jetzt besser aus. Wie bei allen Elementen und Komponenten, die wir bisher verwendet haben, überprüfen Sie die Bootstrap-Dokumentation für einige Varianten und einige verschiedene Möglichkeiten, wie wir sie zusammen mit jedem Beispielcode verwenden können, um uns in Gang zu bringen. Als nächstes werden wir Bootstrap-Raum in Dienstprogrammen suchen, um Rand und Padding hinzuzufügen. 32. Bootstrap-Dienstprograme: Wie wir bereits wissen, ist Bootstrap nur HTML, CSS und etwas JavaScript. Wenn wir ein CSS wie Marge und Padding hinzufügen möchten, können wir immer noch jede unserer Bootstrap-Klassen oder -Elemente auswählen und sie dann zu unserer eigenen CSS-Datei hinzufügen und dann die CSS-Eigenschaften ändern, wie wir zuvor haben. Es gibt einen anderen Weg, den Bootstrap uns zur Verfügung stellt und dies ist mit einigen nützlichen Dienstprogrammhelfern. Wenn wir zur Bootstrap-Dokumentation gehen und dann im Menü auf der linken Seite auf „Utilities“ klicken. Dienstprogramme sind im Grunde eine Möglichkeit für uns, schnell einige Stile zu einem Element hinzuzufügen , ohne auch nur zur CSS-Datei gehen zu müssen. Beginnend mit Grenzen, können wir hier sehen, können wir Grenzen zu einem Element mit einigen beschreibenden Klassennamen hinzufügen . Wir haben Grenze, die eine Grenze auf alle vier Seiten anwenden wird. Wir haben auch Rand oben, rechts, unten und links zu. Wenn wir einen Blick auf das Menü auf der linken Seite nehmen, können wir sehen, dass diese Helfer für die meisten gängigen CSS-Eigenschaften zur Verfügung stehen. In der Tat haben wir einige davon bereits in unserem Projekt verwendet. Wenn wir auf „Flex“ klicken, können wir einen Blick auf den Flexbox-Bereich werfen und nach unten scrollen. Wir sehen einige Flex-Werte, die wir als Klasse hinzufügen können. Wir haben bereits Begründungsinhalte zwischen für unseren Formularbereich verwendet , der Zugriff auf alle Flexbox-Dienstprogramme hat. Wenn wir auch nach unten gehen und auf „Text“ klicken, nur hier, auch wenn wir uns diesen Textabschnitt ansehen, haben wir bereits die Tech-Center-Klasse verwendet, die wir gerade hier sehen können. Es gibt auch Text links, Text rechts und auch einige Dienstprogramme, um dies nur auf verschiedene Ansichtsfenstergrößen anzuwenden. Scrollen Sie weiter nach unten, wir haben die Größe, und wir haben dies bereits früher in unserem Karussell verwendet. Wir haben die W 100-Klasse verwendet, die wir hier haben und damit unsere Bilder auf 100 Prozent der verfügbaren Breite eingestellt. Es gibt auch Platz in Utilities hier und das ist, was wir in diesem Video betrachten werden. Dies wird verwendet, um einige Marge und Padding Werte zu unserem CSS hinzuzufügen. Wenn wir einen Blick darauf werfen, wie wir dies verwenden können, müssen wir einen Klassennamen erstellen. Wir bauen dies auf, beginnend mit einem M oder einem P, das für Marge oder Polsterung steht. Dann geben wir nach diesem m oder p an, auf welche Seite des Elements wir es anwenden möchten. Wir können T für oben, B für unten, links, rechts und so weiter hinzufügen. Wenn wir etwas Marge nach rechts hinzufügen wollten, beginnen wir mit m, r dann nach diesen Buchstaben, wir geben dann an, welche Größe wir mit einer Zahl von Null bis fünf hinzufügen möchten , oder wir haben auch die Option Auto. Null setzt jeden Standardrand und die Polsterung zurück auf Null zurück. Zwei würden uns einen Wert von 0,5 Widder geben und so weiter. Wir haben auch x, die die Klassen nach links und rechts anwenden wird, oder y, was für die obere und untere ist. Lassen Sie uns zu unserem Projekt gehen und wenn wir den Browser nach unten verkleinern, werden wir innerhalb der Navigation beginnen. Lassen Sie uns das runter fallen und wir werden anfangen, an seinem Formularabschnitt zu arbeiten. Zuerst möchten wir einige Klassen hinzufügen, um dies ein wenig schöner aussehen zu lassen, und dann verwenden wir einige der Spacing-Dienstprogramme. Lassen Sie uns unseren Texteditor öffnen und dann in unserem Headerbereich arbeiten. Wir scrollen nach unten zu unserem Formular innerhalb dieser Kopfzeile. In der Tat, lassen Sie uns dieses Karussell aus der Kopfzeile entfernen und platzieren Sie es einfach danach, so scrollen Sie Route nach unten nach diesen Steuerelementen, schneiden Sie diesen Abschnitt aus, dann unten in unserer Kopfzeile, lassen Sie uns dies außerhalb einfügen und , um sicherzustellen, dass dies alles in Ordnung ist, erweitern Sie den Browser. Großartig. Jetzt haben wir nur unsere Navigation in der Kopfzeile. Lassen Sie uns mit unserem Formularbereich arbeiten, indem Sie einige Bootstrap-Klassen hinzufügen. Gerade hier können wir eine Formularklasse der Form-in-Linie hinzufügen und dann können wir einige Marge hinzufügen, wir können m y verwenden. Dies wird einige Marge auf der y-Achse anwenden, die oben und unten ist und dann der Wert von 2, speichern Sie das, neu laden und das Drop-down-Menü hat jetzt einen gewissen Rand oben und unten im Formular. Dann können wir weitermachen und dies mit einigen Bootstrap-Klassen etwas schöner aussehen. Zuallererst können die Eingaben eine Klasse von Formularsteuerelementen haben. Dann fügen wir den Typ für die Eingabe von Text, und dann einen Platzhalterwert der Suche. Nun, die Schaltfläche, wir haben die Art der Übermittlung, lassen Sie uns einfach einige Klassen hinzufügen. Der erste kann btn sein, was wir vorher gesehen haben, dann btn Outline-Erfolg. Umriss wird sicherstellen, dass diese Farbe nur als Rahmen und nicht als Vollfarbe gilt und der Erfolg wird uns die grüne Farbe geben, die wir gerade hier sehen werden. Diese sind in separaten Zeilen, weil wir hier auf einer kleineren Ansicht sind. Wenn wir das etwas breiter machen, bekommen wir jetzt diese Komponenten in Linie. Diese my2, die wir hier hinzugefügt haben, wird Marge für alle Bildschirmgrößen anwenden. Wir können auch einen anderen Randwert für andere Bildschirmgrößen festlegen. Wenn wir zum Beispiel diese Marge auf mittelgroßen Geräten und höher reduzieren wollten, könnten wir my-md Medium-Geräte hinzufügen und diese dann auf 1 und nicht auf 2 reduzieren. Wenn wir speichern und aktualisieren, jetzt, wenn wir den Browser, die mittelgroßen Geräte machen , wird diese Marge jetzt auf dem Formular reduziert. Großartig. Jetzt haben wir unterschiedliche Margenwerte für oberhalb mittelgroße Geräte. Dieser Suchknopf ist auch ein wenig zu nah an diesen Eingaben. Es würde ein wenig schöner aussehen mit etwas Abstand dazwischen. Um dies zu beheben, können wir auch einige Marge zu dieser Eingabe hinzufügen. Diese Eingaben nur hier, lassen Sie uns eine neue Klasse von mr hinzufügen, die Marge ist, rechts. Dann kleine Geräte und höher, lassen Sie uns dies auf 2 setzen, aktualisieren und da gehen wir, also ist das eine Marge auf der rechten Seite und dies sollte auf kleineren Geräten gelten, die gerade hier und oben. Gut. Wenn wir den Browser auf die kleinste Größe verkleinern, die wir zuvor gesehen haben, ist diese Schaltfläche auch eng gegen die Eingabe. Lassen Sie uns einen gewissen Rand zu der Schaltfläche hinzufügen, um dies zu platzieren, so unten auf die Schaltfläche, nach btn Umriss Erfolg, können wir meine verwenden und dann lassen Sie uns dies auf 2 setzen. Lassen Sie uns das in Aktion sehen. Großartig. Das sieht auf den kleineren Bildschirmen gut aus. Wenn wir diese dehnen, so die größeren Bildschirme. Wir könnten diese Marge auch für größere Bildschirme zurücksetzen. Aber es sieht gut aus, also werde ich es jetzt so behalten. Jetzt auf die drei Bilder unten unten. Wir müssen auch etwas Platz in dem Abschnitt hinzufügen. Ich werde etwas Polsterung zum Inneren dieser Elemente hinzufügen. Gehen wir runter zum Container, die drei Bilder unter dem Karussell. Es ist dieser hier nach Container und Textmitte, lassen Sie uns etwas Polsterung auf der Y-Achse hinzufügen und dies kann ein Wert von 5 sein, neu laden. Gut. Jetzt haben wir oben und unten etwas Polsterung. Lassen Sie uns diesen Container ein bisschen größer machen, fügen Sie etwas mehr gleichen Abstand hinzu. Schließlich, um diese Homepage zu beenden, lassen Sie uns einen Fußzeilenbereich hinzufügen, zurück zum HTML. Direkt nach unten und wir schließen dieses div ab. Wir können einen Fußzeilenabschnitt hinzufügen. Dies wird ein einfacher Fußzeilenbereich sein. Wir werden beginnen, indem wir eine Back-Stop-Button hinzufügen, so dass, wenn der Benutzer darauf klickt, sie wieder an den Anfang der Seite gebracht werden. Anschließend fügen wir ein Copyright-Symbol mit dem Namen Gourmet Burgers hinzu. Wir fügen ein Haus und Standorte Link, nur um die Dinge zu beenden. Beginnen wir mit dem Hinzufügen einiger Klassen zu diesem Fußzeilenbereich. Wir können dies zu einem Container und bg-light machen, um ihm eine helle Hintergrundfarbe zu geben. Um Dinge auszuräumen, fügen wir ein paar Polsterung auf der y-Achse und einem Tal von 4 hinzu, öffnen die p-Elemente und das wird unser Text oder zurück nach oben sein. In der Tat werden wir das einfach ausschneiden und dies als Link mit den a-Elementen hinzufügen und es innen einfügen. Die p-Tags können eine Klasse haben und wieder, dies ist eine Utility-Klasse von float rechts, Dies wird den Text auf der rechten Seite der Seite schweben lassen. Dieser Link kann auch ein href-Attribut mit einem Wert eines Hash haben. Das heißt, wenn ein Benutzer auf diesen Link klickt, er zurück zu dieser Homepage weitergeleitet wirder zurück zu dieser Homepage weitergeleitetund dann ganz oben auf der Seite beginnt. Werfen wir einen Blick auf das. Aktualisieren, klicken Sie auf „Zurück nach oben“ und dann wird die Seite ganz oben neu geladen, so dass es unseren „Zurück nach oben“ -Link gibt. Dann gleich danach können wir einen neuen Satz von p Tags hinzufügen. Dies wird unseren Text von Gourmet Burgers mit dem Copyright-Symbol enthalten und dann zwei Links hinzufügen, die für Zuhause und Standorte sein wird. Kurz nach diesem öffnenden p-Tag werde ich die HTML-Entität des Urheberrechts hinzufügen, die kaufmännisches Und-Kopie und ein Semikolon ist, und dann das Textil von 2018 Gourmet Burgers. Dann werde ich eine zweite HTML-Entität hinzufügen, die Middot genannt wird. Dies wird einfach ein Punkt sein, der diesen Text hier von den Links trennt , die wir als nächstes hinzufügen werden. Als nächstes können wir zwei Links für Zuhause und Standorte noch innerhalb dieses p-Tags hier hinzufügen. Lassen Sie uns unseren ersten Link mit dem Text von zu Hause hinzufügen. Dies kann ein leeres href-Attribut haben, da wir nichts zu verlinken haben. nach diesem Link können wir diesen Mittelpunkt noch einmal hinzufügen , um unsere beiden Links zu trennen und dann können wir unseren letzten Link hinzufügen , der für alle Standorte sein wird. Auch dies kann auch die leere href haben, geben Sie diesem ein Speichern, aus dem Browser heraus. Gut. Also, wenn wir hineinzoomen und dann nach unten scrollen, gibt es einen Link, der zurück nach oben ist , der mit diesem Dienstprogramm hier rechts schwebt , dann haben wir unser Copyright-Symbol und den Text von Gourmet Burgers, ein Punkt in zwischen, um unsere Links von Haus und Standorten zu trennen. Dies ist es jetzt für unser Projekt und auch für unsere Spacing Utilities. Ich hoffe, Sie können jetzt sehen, wie die Verwendung von Bootstrap uns wirklich einen Vorsprung beim Erstellen von Websites geben kann. Natürlich werden alle Standardstile nicht immer genau das sein, wonach wir suchen , und es wird empfohlen, sie zu überschreiben und Anpassungen an Ihre Bedürfnisse anzupassen. Dies ist es jetzt für unseren Lookup Bootstrap und ich sehe Sie im nächsten Abschnitt. 33. Vielen Dank: Herzlichen Glückwunsch zum Ende dieses Kurses. Ich hoffe, Sie sind jetzt viel komfortabler mit der CSS-Flexbox, Grid und Bootstrap 4. Wir begannen ganz am Anfang und nahmen einen Blick auf die CSS Flexbox. Dann gingen wir auf das CSS Grid-System, was eine erstaunliche Möglichkeit ist, fast jede Art von Layout zu erstellen, die Sie sich vorstellen können. Schließlich lernte, wie man ein Bootstrap 4 Framework verwendet um es uns zu ermöglichen, großartig aussehende Websites wirklich schnell zu erstellen. Oder beim Aufbau einer Burger-Restaurant-Website, setzen Sie einfach alles, was Sie gelernt haben, in die Praxis um. Denken Sie daran, all dies ist nur der zweite Teil dieses Kurses. Achten Sie also darauf, den nächsten Teil zu überprüfen, um ein tieferes Wissen zu gewinnen und alles zu erfahren, was Sie wissen müssen, um vollständige Stack-Anwendungen zu erstellen. Tschüss für jetzt, und wir sehen uns im nächsten Teil dieses Kurses. 34. Folge mir auf Skillshare: Ein herzlicher Glückwunsch von mir, dass ich das Ende dieser Klasse erreicht habe. Ich hoffe, Sie haben es wirklich genossen und haben etwas Wissen daraus gewonnen. Wenn Sie diese Klasse genossen haben, stellen Sie sicher, dass Sie den Rest meiner Klassen hier auf Skillshare überprüfen, und folgen Sie mir auch für alle Updates und auch um über alle neuen Klassen informiert zu werden, sobald sie verfügbar sind. Vielen Dank nochmals, viel Glück, und hoffentlich sehe ich Sie in einer zukünftigen Klasse wieder.