Bootstrap lernen - 101 Kurs - Beginnen Sie Ihre Web-Entwicklung Karriere

1. Einführung in den Kurs: Haben Sie Probleme damit gehabt moderne reaktionsschnelle Websites zu erstellen, oder vielleicht sind Sie einfach neu in der Webentwicklung im Allgemeinen. Mein Name ist Kyle und ich werde Sie durch Bootstrap führen und wie Sie damit schnell reaktionsschnelle Websites für Ihre Kunden erstellen können. Wir werden die gesamte Dokumentation durchgehen und auf wichtige Funktionen hinweisen , die in Bootstrap integriert sind und Ihnen einen Wettbewerbsvorteil auf dem Markt verschaffen. Ihre Websites werden großartig aussehen, die funktional sein werden , und Sie werden in dieser Klasse viel lernen. Ich hoffe, ihr seid bereit loszulegen. 2. Abschnitt 2 – Bootstrap Einführung: Alles klar, Willkommen in der Klasse, allerseits. Danke, dass du dich für den Kurs angemeldet hast. Ich hoffe, ihr seid bereit loszulegen. Wenn Sie mit Bootstrap nicht vertraut sind, werden wir die Dokumentation vertiefen, einige Beispiele ansehen und sehen, wie wir diejenigen auf unserer Website nutzen können diejenigen auf unserer Website nutzen , die wir erstellen werden. In diesem Kurs. Wir werden einen Facebook-Klon bauen, nicht unbedingt das Back-End, aber wir werden nur die Front-End-Funktionen aufbauen . Wir beginnen mit der Anmeldeseite und arbeiten uns dann auf die Homepage ein. Wir werden Bootstrap-Elemente so oft wie möglich verwenden . Wenn es zusätzliches CSS gibt, werden wir das angehen. Alles, was wir anpassen müssen. Wir machen es einen Schritt nach dem anderen. Dieser Kurs richtet sich an Anfänger, Menschen, die mit Bootstrap nicht vertraut sind. Wenn Sie jedoch mit Bootstrapping vertraut sind, brauchen Sie nur etwas mehr Erfahrung, brauchen Sie einfach eine Auffrischung. Dieser Kurs wird dies auch bieten. Also hoffe ich, dass ihr bereit seid loszulegen. Also lasst uns damit einsteigen. 3. Abschnitt 3 – Mit Bootstrap nutzen: Okay, um loszulegen, brauchen wir einen Code-Editor für diesen Kurs. Ich werde Visual Studio-Code verwenden. Zögern Sie nicht, den Code-Editor zu verwenden, den Sie mögen. Was wir also tun müssen, ist eine neue Datei zu erstellen. Und ich nenne diese einfach index.html. Und ich speichere es in meinem Download-Ordner. Und ich werde es einfach in einen Ordner namens Kurs Facebook legen . Nennen Sie es gerne, wie Sie möchten und speichern Sie es einfach. Also index.html und speichere es. Großartig. Also jetzt innerhalb des Code-Editors , wo es das Boilerplate HTML platzieren wird , um loszulegen. Und um das zu tun, mache ich hier einfach einen kurzen Code. Geben Sie dies gerne ein oder wenn Ihr Code-Editor über eine Verknüpfung verfügt, verwenden Sie diese für den Titel. Ich werde einfach einen Webkurs machen und ihn speichern. Großartig, jetzt können wir diese Datei tatsächlich in unserem Browser öffnen und haben das nicht getan, gehen Sie einfach zu Ihrem Explorer und suchen Sie den Ordner, den Sie erstellt haben , und doppelklicken Sie auf die Datei. Und dann öffne ich direkt in deinem Browser. Im Moment ist es leer , weil wir nichts im eigentlichen Körper haben . Nur um sicherzustellen, dass dies funktioniert, werde ich nur einen Testkopf ein Element einwerfen und Aktualisieren und Benotung können es dort oben sehen. Also sind wir damit schon fertig und werden die Bootstrap-Installation in der nächsten Lektion angehen . 4. Abschnitt 4 – Connecting: In diesem Abschnitt werden wir erläutern, wie Datei index.html installieren oder verbinden die Bootstrap-Plattform tatsächlich mit unserer Website oder unserer können. Es gibt also ein paar Möglichkeiten , Bootstrap zu verbinden. Was Sie also tun möchten, ist bootstrap.com zu holen und dann auf den Download-Button zu klicken. Von hier aus können Sie irgendwie durchblättern und alle verschiedenen Möglichkeiten sehen , die sie bieten, Bootstrap tatsächlich mit Ihrer Website zu verbinden. Sie haben Paketmanager, CDN-Links, Garn, Juwel, Komponisten, so ziemlich alles. Wenn Sie weiter fortgeschritten sind, können Sie diesen Anweisungen folgen. Wie ich schon sagte, dieser Kurs wird eher auf den Anfänger ausgerichtet sein . Was wir hier also machen werden, ist tatsächlich die CDN-Links zu verwenden. Es heißt also CDN via JS liefern. Überspringen Sie also die heruntergeladenen OJS geliefert wurden, um die zwischengespeicherte Version von Bootstraps kompiliertem CSS und JS für Ihr Projekt bereitzustellen . Das ist genau das, was wir brauchen. Was wir also tun müssen, ist auf In Zwischenablage kopieren zu klicken. Und wir werden wieder zu unserer Indexdatei kommen. Und in den Kopfbereich fügen wir es ein. Und ich schalte den Zeilenumbruch sehr schnell ein. Okay, jetzt, da wir die CSS-Datei und eine JavaScript-Datei mit unserer Website verknüpft haben. Lasst uns weitermachen und es einfach speichern. Ich werde das Header-Element dort behalten , nur um sicherzustellen, dass die Standardschrift und -farbe und alles dergleichen auf den H1 wirksam werden. Auf diese Weise wissen wir mit Sicherheit , dass Bootstrap alles verbunden ist. Also gehe ich zurück in den Browser und aktualisiere mich. Und Sie können sehen, dass sich die Schriftart geändert hat. Es ist immer noch schwarz, das ist in Ordnung. Aber auch einige der Seitenränder und Seitenpolster und ähnliches haben sich geändert. Dies sind nur Anzeichen dafür, dass Bootstrap erfolgreich verbunden wurde. Das ist also genau das, was wir brauchen. 5. Abschnitt 5 – Grid: Einer der größten Vorteile der Verwendung von Bootstrap für Ihre Webentwicklung ist die Tatsache , dass ein Grid-System integriert ist. Dies ist also sehr nützlich, um wirklich spezifische oder benutzerdefinierte Layouts zu erstellen. Dies wird sehr hilfreich sein wenn wir diese Homepage für den Facebook-Feed entwerfen , wo Sie im Wesentlichen einige Informationen auf der linken Seite haben, Ihren Hauptfeed in der Mitte und dann hast du ein paar Freunde und vielleicht ein paar Anzeigen auf der rechten Seite und ähnliches. Es ist also wirklich nützlich dafür , dass alles eingebaut und sehr einfach zu bedienen ist . In diesem Abschnitt geht es also um das Raster oder die Container, wie sie in Bootstrap genannt werden das Raster oder die Container . Um damit zu beginnen, springen wir zurück auf die Website getbootstrap.com, gehen zu Hunden und kommen dann zu Layout und Containern. Hier heißt es also, dass Container ein grundlegender Baustein von Bootstrap sind , Pad enthält und Ihre Inhalte innerhalb eines bestimmten Divisor-Ansichtsfensters ausrichtet . Sie haben tatsächlich ein paar verschiedene Klassen , die Sie verwenden können. Einer davon ist nur ein Container. Es gibt eine, die Container-Strichflüssigkeit und dann einen Container-Strichhaltepunkt ist , der bis zum angegebenen Haltepunkt 100 Prozent beträgt. Toll, was wir also hauptsächlich hier verwenden werden, ist der normale Behälter und die Behälter-Strichflüssigkeit, die 100% oder die volle Breite des Ansichtsfensters haben wird. Wenn wir also ein wenig hier nach unten scrollen, können Sie tatsächlich die Haltepunkte sehen , die in Bootstrap integriert sind. Sie haben also extra klein, klein, mittel, groß, extra groß und XX groß. Das werden also wie Ihre Desktops sein, und das werden Ihre Laptops sein, vielleicht einige Tablets. Und dann werden dies mobile Geräte sein. Wie Sie wissen, steuert Webentwicklung oder Webdesign im Allgemeinen eher auf einen Mobile-First-Ansatz als Desktops zu oder sind nicht mehr so weit verbreitet. Die meisten Ihrer Zielgruppen werden wahrscheinlich von einem mobilen Gerät aus auf Ihre Website oder Anwendung zugreifen , was völlig in Ordnung ist. Deshalb existieren Bootstrap und andere Frameworks wie dieses. Alles ist verantwortungsvoll gebaut also wird es unabhängig von der Bildschirmgröße gut aussehen . Großartig. Wenn wir also ein wenig nach unten scrollen, können Sie hier einige Beispiele sehen. Nur ein sehr einfaches Div mit einer Containerklasse. Und dann stellst du deinen Inhalt auf die Seite. Sie haben reaktionsschnelle Container. Hier kommt der Haltepunkt des Container-Dash-Breakpoints ins Spiel. So können Sie den Container-Strich klein, mittel , groß und alle hier oben auf diese Haltepunkte beziehen . Also werden flüssige Behälter, wie gesagt, die volle Breite haben. werden also den ganzen Weg von links gehen , ganz nach rechts. Und dann kannst du auch Container verschachteln. Sie können einen Container mit voller Breite erstellen, und dann können Sie mit einem Container mit normaler Breite arbeiten. Nehmen wir an, Sie möchten die Hintergrundfarbe in voller Breite und möchten dennoch, dass Ihr Inhalt in 1200 oder 1400 Pixeln enthalten ist. So kannst du also Sachen machen , was wirklich nett ist. Also wollen wir hier anfangen. Wir werden dieses Beispiel direkt hier kopieren, den Standardcontainer. Ich kopiere es einfach. Springe in den Code-Editor. Lassen Sie uns dieses Test-H1-Element loswerden und fügen Sie einfach dieses Beispiel ein. Und lasst uns das Element zurückbringen und einfach testen. Mal sehen, was die Containerklasse wir machen werden. Perfekt. Man sieht also, dass es ein bisschen überspringt. Und das liegt nur an dem Standardstyling. Also werde ich es einfach schnell inspizieren und sehen, was es macht. Sie haben also div mit einem Klassencontainer und dann können Sie hier sehen, Container dot css. Dies sind die Bootstrap-Styles , die auf diesen Klassennamen angewendet werden. So können Sie hier sehen, dass der Container eine maximale Breite von 1320 haben wird, wenn der Bildschirm mindestens 4000 Pixel beträgt. Das ist es, was du genau hier siehst. Sie können also sehen, dass dieses blau schattierte Element eine maximale Breite von 1320 haben wird. Und wenn wir es kleiner machen. Und es wird irgendwie schrumpfen bis es einen bestimmten Punkt erreicht hat . Und dann bleibt es nur links und rechts mit etwas grundlegender Polsterung. Perfekt. Um dies noch einen Schritt weiter zu gehen, zeige ich Ihnen, wie Sie das tun was ich zuvor erwähnt habe. Und das sind Nistcontainer. Springen Sie also zurück in den Code-Editor. Und wenn ich das kopiere und lege ich eine Container-Armaturenflüssigkeit ein. Und wir werden den Behälter wieder hell hineinlegen. Und dann mache ich hier nur ein paar Inline-Styles, nur weil wir noch kein Stylesheet verbunden haben, aber ich sage nur Hintergrundfarbe, Grau. Und dann mache ich auf dem verschachtelten Container eine Hintergrundfarbe. Machen wir einfach Blau nur zu Testzwecken und speichern es. Wenn wir also aktualisieren, können Sie sehen, dass sich das Container-Strichflüssigkeitselement in voller Breite von links nach rechts mit einer Hintergrundfarbe von Grau erstrecken wird . Und dann wird der verschachtelte Container von unserem ersten, von unserem ersten Beispiel an, innerhalb von max. Maximale Breite von 1320, Hintergrundfarbe blau. Und es passt wirklich gut da rein. Und alles wird immer noch gleich funktionieren. Einfach so. Perfekt. Genau das wollen wir. Also werde ich diese Inline-Styles vorerst nur entfernen, und wir sehen uns im nächsten Abschnitt. 6. Abschnitt 6 – -: letzten Abschnitt haben wir Container durchgegangen , die im Grunde nur der Inhaber des Seiteninhalts sind, den wir erstellen werden. Also fragst du dich vielleicht, okay, toll, wir haben jetzt Container was? Bootstrap hat also tatsächlich das sogenannte Grid-System. Und innerhalb von Containern bauen Sie Ihre Layouts tatsächlich aus. Innerhalb von Containern haben Sie also Zeilen und Spalten, und Sie können Ihr Layout mit diesen erstellen. Es gibt verschiedene Arten von Zeilen und es gibt verschiedene Arten von Spalten und Spaltenklassen und Dinge, die verschiedene Dinge tun. Also gehen wir einfach die Dokumentation hier durch und bekommen einfach ein grobes Beispiel für die Verwendung des Rasters. Dieses erste Beispiel ist also wirklich einfach. Wie Sie hier sehen können, gibt es einen Container und dann gibt es im Container eine Reihe mit drei Divs, die die Klasse c, o, l col haben . Und was ist das? Was das tut, ist nur drei separate Spalten in die Zeile zu legen, die sich innerhalb des Containers befindet. Und Sie können hier sehen, dass das obige Beispiel drei Spalten mit gleicher Breite auf allen Geräten und Ansichtsfenstern mit unseren vordefinierten Rasterklassen erstellt auf allen Geräten und Ansichtsfenstern . Diese Spalten sind auf der Seite mit der übergeordneten Containerklasse zentriert . Um dies noch einen Schritt weiter zu gehen, müssen wir zum Abschnitt Rasteroptionen springen. Und das ist den Haltepunkten für die Container sehr ähnlich . Dies werden die Haltepunkte für bestimmte Klassenspalten sein. So können Sie hier das Klassenpräfix Col Dash, Dash, Small, Col Dash, Medium und so weiter sehen. Sie können diesen tatsächlich bestimmte Spaltenlinks hinzufügen. Und so groß wird es an bestimmten Haltepunkten sein. Das Rastersystem basiert also auf 12 Spaltenzeilen. Du könntest also Dinge tun, wie wenn du ein 5050-Layout willst, könntest du sechs Planeten abstürzen. Es gibt zwei Divs mit dieser Klasse, die Ihnen 50 Prozent Spalten geben würden , zwei davon. Also können wir hier weiter nach unten scrollen. Es gibt automatische Spaltenlayouts ohne die Klassen zu verwenden, wie ich gerade erwähnt habe. Diese werden also wie das erste Beispiel sein , in dem Sie nur eine Standardkolumne bekommen. Sie wissen, wie viele Spalten Sie auch in diese Zeile einfügen , sind, wie viele Spalten Sie erhalten werden. Und so ist es irgendwie vordefiniert. In diesem Beispiel können Sie also sehen, dass sich in dieser obersten Zeile zwei Spalten befinden, und dann gibt es drei Spalten in dieser unteren Zeile. Und das werden zwei Spalten in dieser Zeile sein, drei Spalten in der anderen Zeile, egal welche Bildschirmgröße. Auf der anderen Seite können Sie damit beginnen, vordefinierte mit Spalten definierte zu verwenden. In diesem nächsten Beispiel und in dieser obersten Zeile gibt es eine Spalte, eine andere Spalte mit einem Strich sechs und dann eine dritte Spalte. Was das tun wird, ist drei Spalten hinzuzufügen, aber die in der Mitte wird auf sechs definiert. Das wird also immer 50 Prozent Breite sein , egal was passiert. Ich weiß also nicht, ob es durcheinander bringen wird , wenn ich die Größe ändere, aber wie Sie sehen können, bleibt es 50 Prozent, egal was passiert. Okay. Da ist es. Es bleibt also 50 Prozent, egal was passiert. Und dann das Gleiche hier unten. Und wenn wir runter kommen und Sie können die Spalte für die automatische Breite einstellen. Wenn Sie also zwei Spalten anstelle von nur einer definieren möchten und die beiden anderen Arten den Raum automatisch ausfüllen lassen möchten. Sie können es anders machen und zwei Spalten definieren und eine in der Mitte lassen , um irgendwie schwanken zu können. Das ist also genau hier oben. Und dann sind die Responsive Klassen wirklich das, was wir in diesem Kurs am meisten verwenden werden. Auf diese Weise haben Sie überhaupt mehr Kontrolle über Ihre Spalten. Die Haltepunkte besagen, dass wir hier unten ein bisschen weiter kommen. Es besagt, dass Sie die Spalten der Klasse eine Zeile mischen und abgleichen können. Dies ist also eine Art weitere tiefere Diskussion. Ich mag das im nächsten Abschnitt ansprechen, aber das gibt Ihnen eine Möglichkeit, eine Art wie ein strukturierteres Rastersystem und nicht ein Layout zu bauen . Und das kann ich im nächsten Abschnitt erklären. Also überspringen wir das jetzt einfach. Sie können Spalten und Zeilen verschachteln. Was wir hier wirklich ansprechen möchten , ist Backup hier oben, wo Grid-Optionen stehen. Wir werden also die spezifischen Haltepunkte für unsere Spaltenklassen verwenden die spezifischen Haltepunkte für und Sie werden sehen warum, wenn wir an unserem Facebook-Klon arbeiten. Lasst uns also in unseren Code-Editor springen. Und ich werde den Screenshot des Facebook aufrufen , den wir klonen möchten, den Facebook-Screenshot , den wir klonen möchten. Und wir beginnen hier einfach mit dem eigentlichen Inhalt der Seite. Wir werden gerade die Navigation überspringen. Wir springen einfach in die Mitte der Seite hier. Also werden wir auf den ersten Blick drei Spalten machen und wir werden irgendwie tun, was dieses Bootstrap-Beispiel getan hat. Und habe hier eine dritte Spalte, eine Spalte von 50 Prozent eine Spalte von 50 Prozent und dann eine weitere rund 1 dritte Spalte. Also geh und neuer Code-Editor. Und wir können alles behalten, was wir bisher haben. Werden Sie einfach das Header-Element los. Und wir werden Div mit einer Reihe von Row machen. Und dann wollen wir von dort aus eine Spalte mit einem Strich setzen , großen Strich drei. Und danach wollen wir ein Div mit einer Spalte machen , groß sechs. Dies wird der mittlere, der eigentliche Feed-Teil sein. Und dann auf der rechten Seite wollen wir eine weitere dritte Spalte. Also mache ich 1, 2 und 3 und aktualisiere, nur damit wir das Layout-Formular sehen können. Großartig. Sie können also hier sehen, dass wir eine 11-Spalte haben auch hier ist unsere zweite Spalte. Und dann ungefähr drei Haltestellen hier. Wenn wir wollten, dass dies in voller Breite wird, müssen wir nur diese Containerklasse hier loswerden . Und dann wäre die Reihe im Container Dash Fluid div enthalten , was sie von Seite zu Seite strecken würde. Also nur damit du sehen kannst , dass ich den Container auskommentiere und aktualisiere. Sie können sehen, dass es sich in voller Breite erstreckt und es dann gleich zurückbringt, nur weil ich es mehr enthalten möchte. Großartig. Jetzt können wir also tatsächlich in den nächsten Abschnitt springen. 7. Teil 7 – Column: In diesem Abschnitt möchte ich kurz auf den Zeile, Spaltenabschnitt der Dokumentation hier eingehen . Ich habe es im letzten Abschnitt kurz angesprochen, aber ich wollte ein bisschen mehr tief tauchen und euch nur ein Beispiel dafür geben wofür das verwendet werden könnte. Und hier heißt es, dass Sie diese Zeilen-, Spaltenklassen verwenden können , die schnell grundlegende Rasterlayouts erstellen oder Ihre Kartenlayouts steuern können. Wenn ich damit wirklich nützlich finde ist es fast wie ein Bildergalerahraster zu erstellen ein Bildergalerahraster oder einfach nur Dinge zu behalten. Und ich habe eine wirklich strukturierte Position auf dem Bildschirm. Und ich möchte euch zeigen, was ich damit meine. Also gehe ich zum Code-Editor. Und genau unten mache ich einen neuen Container. Und dann mache ich eine Reihe und füge die Zeilenspalten 3 hinzu. Und ich möchte sicherstellen, dass ich diesen Klassennamen korrigiert, wie genau das so nahe ist. Und dann wollen wir drinnen ein Div mit der Klasse Col machen . Und dann mache ich da drin nur das Bild, nur ein Platzhalter hier. Und ich glaube, dass der Link immer noch funktioniert. Und ich kopiere das nur fünfmal. Wir wollen also insgesamt fünf Spalten hier. Wenn du dich erinnerst, sagten wir, dass Rho drei anruft und was das tun wird, ist es einfach zu sperren. Und so erscheinen zu einem bestimmten Zeitpunkt nur drei Spalten hintereinander. Also speichere das und aktualisiere es. Und Sie können hier sehen, dass wir fünf Spalten haben, aber es sind drei, was genau das ist, was wir wollen. Jetzt. Um euch eine bessere Vorstellung davon zu geben, wofür ich diese Zeilenstruktur normalerweise verwende, werde ich nur ein bisschen Stile für die Bilder machen . Ist hier oben und das ist Hub. Einfach ganz schnell. Ich werde einige Stile hinzufügen , die Bild sagen würden, da dies die einzigen Bilder auf der Seite sind, sage ich mit einem Auto von 100 Prozent Höhe. Und das sollte den Platz für die Spalten ausfüllen. Okay, perfekt. So können Sie sich irgendwie mit einigen anderen Stilen anlegen, um diese näher zusammenzubringen. Nun, was wirklich schön ist, ist, wenn man kleiner wird und sie irgendwie das Verhältnis und die TAC beibehalten, was wirklich nett ist. Wie gesagt, dies ist gut für Bildergalerien oder wenn Sie Daten in einer sehr definierten Struktur anzeigen müssen . Und Sie können das auch ein bisschen weiter gehen und Haltepunkte setzen. Man kann also Row-Kumpels sagen, große drei. Und dann sagen wir auf mittleren Bildschirmen wir wollen, dass sie nur zwei zeigen. Und dann wollen wir auf wirklich kleinen Bildschirmen nur eins hintereinander zeigen. Speichern wir das und aktualisieren wir es. Und nichts passiert. Aber wenn wir etwas kleiner werden, werden sie zu zwei wechseln. Und wenn wir kleiner werden, wird es auf eins zurückgehen. Und dann für ganz klein und wir müssen das einstellen, das wird hier tatsächlich wirksam werden. Was wir also tun müssen, ist aktualisiert, damit nur die Standardklassen perfekt sind. Und wie Sie sehen können, , wenn wir größer bleiben unsere Stile perfekt, wenn wir größer werden. Das ist also ein Beispiel für die Verwendung der Zeile, Spalten, Klassen und Bootstrap. Wie ich schon sagte, diese können für alles verwendet werden. Normalerweise verwende ich sie für Bildergalerien. Aber lass deiner Fantasie freien Lauf. 8. Abschnitt 8 – Column: In diesem Abschnitt werden wir ein bisschen mehr über Spalten sprechen . Ich werde etwas tiefer über die benutzerdefinierten Klassen eingehen , die auf diese Spalten angewendet werden. Bootstraps-Spalten sind, ich denke das Raster wird tatsächlich mit Flexbox, CSS, Flexbox erstellt. Es gibt also viele integrierte Stile und Klassen , die Sie verwenden können, die Flexbox-Stile verwenden. Dinge wie vertikale Ausrichtung, horizontale Ausrichtung und ähnliches sind alle richtig in Bootstrap integriert, was es wirklich schön macht, solche Dinge zu tun. So können Sie Ihre Spalten vertikal ausrichten lassen oder sie horizontal ausrichten lassen. Dies ist also praktisch , wenn Sie Ihre Layouts oder Navigationen erstellen . Zum Beispiel ist es wirklich schön, dass Ihre vielen Links vertikal im Container ausgerichtet sind , anstatt zu versuchen, eine Reihe von benutzerdefiniertem CSS zu schreiben eine Reihe von benutzerdefiniertem CSS zu damit sie zentriert erscheinen. Das ist also wirklich schön, dass Bootstrap all diese integrierten Dinge wie den Spaltenumbruch hat . Eine Sache, die ich ziemlich oft verwende, ist die Neuordnung. Das ist also nett. Sagen Sie zum Beispiel, Sie haben Inhalt auf der linken Seite und Bild rechts. Und dann die Zeile darunter, dass Sie ein Bild auf der linken Seite und Inhalt rechts haben . Wenn Sie diese stapeln, werden Sie auf Mobilgeräten Inhalt, Bild und Bildinhalt haben. Was ich also gerne mache, ist, diese Spalten in der zweiten Zeile neu anzuordnen diese Spalten in der zweiten Zeile neu anzuordnen , so dass sie auf dem Handy sind, wo es Taxi geht, Inhaltsbild, Inhalt, Bild und einfach ein bisschen besser für den Benutzer fließen. Das ist also echt nett. Sie können hier sehen, dass das Beispiel zuerst in DOM steht, keine Reihenfolge wird dritter und DOM mit einer Reihenfolge von 1, Sekunde und unten mit einer Reihenfolge mit einer größeren Reihenfolge angewendet . Sie können also sehen, dass es sich hier nur um eine Standardspalte handelt. Der zweite hier hat Dash f5 bestellt, was bedeutet, dass er ganz am Ende platziert wird, da er eine höhere Zahl hat. Und dann hat die dritte Spalte die Reihenfolge eins, die sie sagen würde, wenn sie angezeigt wird, würde sie über fünf gerendert. So bekommen sie dieses Beispiel hier. Und Sie können den Haltepunkt auch auf diese Klassen anwenden , damit sie die Reihenfolge nur an einem bestimmten Haltepunkt ändern. Bootstrap verfügt auch über versetzende Spalten. Wenn Sie also aus irgendeinem Grund keine dritte Spalte haben möchten, können Sie in diesem Beispiel einfach um vier versetzen. Und das würde dir eine Lücke dazwischen geben. Also gehe ich in den Code-Editor und gebe euch einfach ein kurzes Beispiel dafür, worüber ich gesprochen habe. Okay. Also komme ich einfach zwischen den R2-Containern hierher und füge einen neuen mit einer Zeile und dann zwei Spalten innerhalb dieser Zeile hinzu. Ich werde auf großen Bildschirmen sagen, dass wir wollen, dass sie sechs breit sind. Und dann kopiere ich diese Zeile und füge sie direkt darunter ein. Und dann wird in der allerersten Spalte dieser Text gesagt. Die zweite Spalte erhält das gleiche Bild von unten. Und dann wird das gleiche Bild in die erste und die zweite Zeile gehen . Und dann ist dies ein Text, der gehen wird und die zweite Spalte und die zweite Zeile. Und ich lösche einfach unsere alten Container, da wir sie nicht mehr brauchen. Und dann speichern und aktualisieren. Und genau das sollten wir uns was besorgen. Wir haben etwas Inhalt auf dem linken Bild, rechte Bild wird auf der rechten Seite konstant sein. Jetzt, wenn wir den Bildschirm verkleinern, stapeln sie sich. Und Sie können sehen, dass es nicht wirklich am besten aussieht zwei Bilder so wieder an Rücken zu haben. Wir möchten dem Benutzer etwas Platz zum Atmen zwischen den Elementen auf unserer Seite geben . Um diesen Effekt zu erzielen, werden wir tatsächlich alles behalten, wie wir es haben. Und wir ändern einfach die Reihenfolge mit den Standard-Bootstrap-Klassen. Was wir also tun müssen, ist , dass die Auftragsklassen. Also werden wir zu diesem ersten sagen , dass wir Order Dash T2 sagen, was nur sagt, dass wir standardmäßig wollen, dass dies die zweite Spalte sein soll. Und dann werden wir sagen, bestellen Sie Medium eins. Wenn es also größer als ein mittlerer Bildschirm ist, wird es die erste Spalte sein, die es auf der linken Seite hält. Aber abgesehen davon werden wir es an zweiter Stelle wollen, was alles mittlere oder kleinere bedeuten würde. Also Handys, wir wollen, dass das das ist, die erste Spalte. Und dann werden wir in der unteren Spalte Strich eins bestellen und dann Medium 2 bestellen. Lasst uns weitermachen und das speichern und aktualisieren. Man kann sehen, dass sich nichts wirklich ändert. Aber wenn wir kleiner werden, können Sie genau hier sehen, der Text oben steht. Bilder unten, Texte sind oben, das Bild ist unten. Perfekt. Genau das wollen wir. 9. Abschnitt 9 – Überprüfen von allen Komponenten: Das nächste Thema, das ich behandeln möchte, sind einige Standard-Bootstrap-Klassen in Bezug auf Topographie, Bilder, Tabellen und Abbildungen. Bootstrap hat also eine Menge Standard-Styling, das für die meisten Anwendungen ziemlich gut aussieht . Sie können diese natürlich wie Schriftfamilien und Gewichte und Größen und ähnliches anpassen . Was jedoch genau hier eingebaut ist, ist, wie Sie sehen können, eine Standardgröße für Header-Elemente. Sie haben auch Standardstile für das kleine Element, was ihm eher ein verblasstes Aussehen nach sekundären Inhalten verleiht . In der Regel wie ein Untertitel oder so ähnlich. Sie haben Anzeigeüberschriften , die noch größer sind. Und dann können Sie diese natürlich nach Belieben anpassen. Dass der Lead-Absatz , der normalerweise, wie Sie wissen, wenn Sie sich einen Blogbeitrag ansehen, der ein bisschen mehr hervorsticht, mehr einen Punkt macht, führt Sie irgendwie auf die Seite. Und dann haben Sie einfach einen Ton von wirklich schönen integrierten Klassen , die Sie verwenden können, ohne Ihr eigenes CSS schreiben zu müssen, was Ihnen, wenn Sie eine große Website erstellen, viel Zeit sparen kann. Es gibt irgendwie universelle Klassen, so dass sie beim Tippen oder beim Programmieren leicht zu merken sind, können Sie, wissen Sie, während Sie arbeiten, wirklich flüssig sein, was wirklich nett ist. Das sind also die Schriftarten, Bilder des integrierten Bildes der responsiven Klasse, IMG Dash Fluid, die die maximale Breite 100% und die Höhe automatisch anwendet. Dadurch kann das Bild nur den Raum ausfüllen. Wenn Sie sich an eine frühere Lektion erinnern, habe ich dies tatsächlich manuell getan, um das Zeilenbeispiel zu füllen , das ich euch ausdrücken wollte. Also hätte ich diese Klasse sehr leicht benutzen können, aber wie gesagt, ich habe einfach die beiden Stile dort angewendet , um die gleichen Ergebnisse zu erzielen. Es wäre also viel schneller gewesen , diese Klasse nur auf die Bilder anzuwenden. Wenn wir hier unten weiter kommen, haben sie Bild-Miniaturansichten, was nett ist. Es gibt dir eine schöne abgerundete Kante mit einer sehr schwachen Grenze. Sie haben viele Alignment-Klassen für Bilder, um sie linksbündig oder rechts ausgerichtet zu machen, zentriert. Und dann kannst du das Gleiche mit Bildelementen hier machen. Also einfach gut zu wissen Tische. Dies ist wirklich praktisch wenn Sie es mit vielen Daten zu tun haben, die Sie dem Benutzer ausdrücken. Wenn Sie integrierte Tabellenstile , sparen Sie eine Menge Zeit. Sie also einen Teil der Klassentabelle in Ihre HTML-Tabelle legen, werden wir sie wirklich gut gestalten. Sie können sehen, wenn Sie etwas weiter unten kommen, können Sie sekundäre Varianten auf Ihre Tabellen anwenden , um ihnen, je nach Anwendung, eine andere Farbe zu geben ihnen, je nach Anwendung, . Du könntest X und dann Tabellen mit gestreiften Zeilen machen. Auch dies sind alles nur Klassen, um Ihnen Zeit beim Erstellen Ihrer Anwendung oder Ihrer Website zu sparen . Sie haben Schwebereihen. Dunkel für Dunkelmodus, aktiv. Also einfach eine Menge tolles Dinge hier. Also möchte ich diesen Abschnitt nur kurz ansprechen. Ich möchte zu tiefgreifend gehen nur weil viele dieser Dinge beim Aufbau Ihrer Website angepasst werden . Also wisse einfach, dass die hier sind. Es gibt andere integrierte Stile sind Klassen , die Bootstrap für die Textausrichtung und Dinge wie diesen Füllrand hat . Tauchen Sie also definitiv tiefer ein wenn Sie eine Chance haben. Es ist wirklich, sehr nett und es wird Ihre Entwicklung beschleunigen. In diesem Abschnitt erhalten Sie einen schnellen Überblick über alle Komponenten, die in Bootstrap integriert sind. Ich werde nicht auf jeden einzelnen eingehen, aber ich möchte darüber sprechen, wenn wir auf diese Liste gehen und was sie sind. Von oben beginnend haben wir das Akkordeonelement. Und all dies ist nur eine Möglichkeit, Inhalte zu erweitern und zu reduzieren. Nur um Ihrer Seite ein prägnanteres Aussehen und Gefühl zu verleihen. Sie sehen diese oft mit ähnlichen FAQ-Abschnitten. Sie haben die Frage als Titel und dann die Antwort darin. Es ist also eine wirklich gute Möglichkeit, Ihre Seite irgendwie zu verdichten. Und sie bieten ein bisschen mehr Kontrolle über solche Dinge. Sie können die Hintergrundfarbe und die Ränder entfernen , um nahtloser und in Ihre Website integriert zu werden. Wenn du runterkommst, kannst du Dinge wie immer offen machen. Wenn Sie also die Seite der ersten öffnen, können Sie die Zugänglichkeit für weitere Informationen sehen . Das ist also echt nett. Warnungen, dies werden interaktivere Elemente sein. Wenn Sie ein Formular erfolgreich absenden oder fehlschlägt oder der Benutzer etwas herunterlädt oder Sie es eingerichtet haben. Sie haben diese eingebauten Warnungen, die wirklich nett sind. Sie basieren auf Erfolg oder Misserfolg. Wenn es eine Warnung gibt, sagt etwas vielleicht etwas Allgemeineres , überhaupt kein Styling. sind also ziemlich cool. Sie haben auch integrierte Dismising-Funktionen. Du kannst es einfach schließen und es wird verschwinden. Das ist in den JavaScript-Teil von Bootstrap integriert, was wirklich nett ist. Das Badge-Element. Sie sehen hier viel, die Sie wie dieses Beispiel auslösen können, etwas, das neu ist oder eine Benachrichtigung oder was Sie haben. Sie geben Ihnen also die Möglichkeit, Zahlen hinzuzufügen. Hier ist die Art des Benachrichtigungssymbols, an das wir gewöhnt sind, das Posteingangssymbol. Sie können die Hintergrundfarbe ändern, Pillenabzeichen. Du kannst Dinge tun. Weisen Sie vielleicht etwas mehrere Kategorien zu , Brotkrumen. Dies sind also ziemlich Standard gezüchtete Brotkrumen Links auf der gesamten Website. Knöpfe sind echt cool. Diese sind auch ziemlich interaktiv. Also der Hover-Status, alle Arten von verschiedenen Modi hier. Also primärer, sekundärer Erfolg, Gefahrenwarnung und so weiter. Es gibt viele dieser Komponenten, die primäre, sekundäre Erfolgsgefahr, diese Klassennamen sind konsistent. Wenn Sie also eine aufeinanderfolgende Schaltfläche verwenden, können Sie auch eine Erfolgswarnung verwenden. Das ist also wirklich nett, etwas, worüber sie viel nachgedacht haben. Auch hier haben Sie Schaltflächen skizziert, vielleicht einen sekundären Handlungsaufruf dort. Du hast verschiedene Größen. Deaktivierte Bundesstaaten. Du kannst hier alles Mögliche machen. Sie haben den Toggle States. Sie können also sehen, dass dies Hover ist, dies ist aktiv und dann deaktiviert. So richtig nett dort. Sie geben Ihnen auch die Möglichkeit, Schaltflächen zu gruppieren. Du siehst diese oft mit Seiten in einem Blog , während du scrollst, solche Sachen. So ein bisschen integrierte Stile, ihre Karten sind wirklich nette Funktion mit Bootstrap. So haben Sie eine wirklich einfache Möglichkeit, einen Ort oder ein Restaurant oder ein Geschäft oder ähnliches auszudrücken . Ihr zeigt jedoch Ihre Inhalte an. Dies gibt Ihnen eine wirklich schöne schnelle Möglichkeit, ein gut angelegtes Element zu haben. Sie können also sehen, dass Sie die Kartenklasse haben. Darin haben Sie das Bild mit dem Kartenbild, den Kartentext der Spitzenklasse mit dem Titel, dem Text und der Schaltfläche. Und du kannst mehrere Schaltflächen und alle möglichen Dinge wie diese hinzufügen . Und alle diese Komponenten sind anpassbar. Wenn Sie also die primäre Schaltfläche nicht haben möchten, können Sie eine benutzerdefinierte Schaltfläche verwenden, Sie können eine andere Klassenschaltfläche verwenden und so weiter. Also taucht einfach tiefer in das ein und es hat überhaupt kein Bild. Dies hat ein Bild ohne Button und so weiter. Karten sind also definitiv sehr praktisch. Übersehen Sie sie nicht. Wie ich schon sagte, sie sind bereits Bill, also sparen Sie viel Zeit , wenn Sie so etwas manuell programmieren und stylen müssen . Carousel ist ein weiteres wirklich großartiges Feature von Bootstrap. Es ist im Grunde ein Slider , der eingebaut ist. Sie müssen also keinen anderen Drittanbieterdienst verwenden, sonst müssen Sie etwas nicht vollständig von Grund auf neu codieren , um eine Art Schieberkarussellelement zu erhalten. Es ist auch wirklich cool , weil sie hier einige zusätzliche Funktionen wie Indikatoren und Pfeile und ähnliches haben. So richtig cool, sie sind nah. Ich glaube, dies ermöglicht es Ihnen nur , bestimmte Elemente abzuweisen. Ich bin mir nicht sicher. Ich denke, das ist ein ziemlich neueres Element hier mit Bootstrap, also bin ich mit diesem nicht allzu vertraut, aber es sieht so aus, als hätten sie einige verschiedene Optionen damit. Also definitiv etwas, das ich mir selbst genauer anschauen werde. Zusammenbruch. Sie können also sehen, dass dies wie ein Akkordeon ist , nur ein bisschen anders um Inhalte auszulösen. Dies kann hier einer Vielzahl von Anwendungen dienen. Und wieder sind dies alles nur Grundelemente, die sich mit den standardmäßigen Bootstrap-Klassen ändern. Achten Sie also darauf. Für dieses reduzierte Beispiel hier und eine Verknüpfung mit HRF können Sie sehen, dass es einen Daten-Strich-BS-Strich-Titel gleich zusammenbricht. Und wenn Sie dann ein wenig rüber scrollen, ja, das Beispiel für die Flächensteuerungen reduzieren. Das ist es, was Sie tatsächlich betrachten werden, um den Inhalt anzusprechen. So können Sie sehen, dass Beispiele zum Ausschneiden der ID reduziert werden. Wenn Sie also darauf klicken, sagt Bootstrap Ihnen: Okay, wir suchen nach diesem Element und dann, wenn Sie es finden, erweitern Sie es oder reduzieren Sie es basierend auf dem aktiven Status. Sie können also sehen, dass ein Klick hier denselben Text zeigt. So funktioniert das also. Stellen Sie also sicher, dass die IDs die Elemente sind, auf die Sie ausgerichtet sind, wenn Sie diese Beispiele kopieren , die Sie genau beachten . Denn wenn nicht, wird es etwas schwieriger sein, Fehler zu beheben. Stellen Sie also einfach sicher, dass Sie darauf achten . Du kannst solche Sachen sehen. Kleine Animationen. Als nächstes haben wir Dropdowns. Sie werden diese oft sehen und Navigationen oder manchmal Formularfüllungen oder Datei-Uploads und solche Dinge. Also ein weiteres eingebautes Element, das wirklich, sehr nett ist. Listen Sie Gruppen auf. Dies fügt also nur ein wenig Standardstyling zur ungeordneten Liste oder einer geordneten Liste hinzu. Sie können also sehen, dass es einen leichten Rahmen mit einem Randradius gibt. Vielleicht ein bisschen Polsterung um alles herum . Du hast die Aktive. Sie haben den aktiven Status, deaktivierter Status. Sie können dort einige Links und Buttons hinzufügen. Und so weiter. Auch hier eine ausgelöschte Version, so dass sie ein bisschen gut in Ihre Website passt. Sie können Zahlen hinzufügen. Und das ist echt cool. also diesen zum Beispiel hier nehmen, um so etwas von Grund auf neu zu codieren, müssten Sie das gesamte Element erstellen und jedem einzelnen seinen eigenen Klassennamen geben. Baue das aus, positioniere das hier rechts und so weiter. Bootstrap macht es also wirklich einfach, sobald Sie den Dreh raus Hinzufügen dieser integrierten Klassen wird zur zweiten Natur. So können Sie Liste, Gruppenliste, Gruppennummerierung sehen. Das ist es, was diese tatsächlichen Zahlen hier hinzufügen wird. Und dann fügen Sie in Ihrem Listenelement Listengruppenelement hinzu und rechtfertigen den Inhalt zwischen den Start des Artikels. Das sind also die Klassen, über die ich in einem vorherigen Abschnitt gesprochen habe . Und das sind nur die Flexbox-Stile, die alles geben, was ich abnehme. Dies sind die Standardränder und Auffüllklassen und so weiter. Und dann können Sie sehen, dass es nur die Unterüberschrift und der Inhalt ist, also wird der Rest behandelt, das gesamte Styling wird durch all diese Listengruppenklassen behandelt . Das ist also echt cool. Modals sind wieder eine wirklich nette Sache eingebaut zu haben. Ich muss so etwas von Grund auf neu programmieren , könnte viel Zeit in Anspruch nehmen. Wenn Sie diese Beispiele kopieren, stellen Sie einfach sicher, dass alles übereinstimmt. Wenn Sie Klassennamen ändern machen Sie etwas anderes. Es ist also echt cool. Demo gestartet, modal und einfach so. So richtig cool. Hier ist der Schließen-Button, Knopf schließen, solche Sachen. Also alle diese sind einfach eingebaut und super, super nett zu haben. Also Navs und Tabs. Dies ist eine weitere nette Sache hier für Navigationen integriert zu haben, sei es in der Kopf- oder Fußzeile. Nur eine Möglichkeit zu haben, Dinge so zu gestalten , dass sie sofort gut aussehen , ist ein wirklich nettes Feature. Also mache ich weiter. Wir haben Navbar und das verwendet nur einige der Klassen von Navs und Tabs sowie einige zusätzliche Dinge. So können Sie hier oben in diesem Beispiel sehen, dass wir die Navigationsleiste haben. Dies wird eigentlich die Marke genannt, also Nav-Bar, Dash und Marke. Hier können Sie den Namen Ihrer Website oder Ihres Logos mit einem Link versehen. Dann machen wir weiter. Wir haben das eigentliche Menü. Und dies nutzt das Dropdown-Element. Sie haben auch ein integriertes Formular-Styling, das ich noch nicht angesprochen habe. Das wird der nächste Abschnitt sein, aber sie haben auch ein Formular und den Header. Und wenn Sie diese Navbar-Beispiele kopieren, funktioniert die mobile Version standardmäßig wenn Sie diese Navbar-Beispiele kopieren, auch. Sie sehen sich das also auf einem kleineren Bildschirm an, es wird zusammenbrechen und Ihnen den Hamburger-Button zeigen , um das Formular tatsächlich zu erweitern. Und das siehst du hier. Button-Klasse navbar-toggle oder Typ Button Daten, BS-Strichumwand-Einschalten und so weiter. Das hier ist das Hamburger-Symbol. Wenn dies also ein kleinerer Bildschirm wäre, könnten Sie sehen, dass die mobile Schaltfläche angezeigt wird, das Hauptmenü hier und das Formular verschwinden. Und wenn Sie dann auf diesen Menü-Button klicken, erscheinen all diese Elemente wirklich schön gestylt, also wirklich schön dort. Sie haben hier auch verschiedene Stile für Bilder in ihrem Bild- und Tag-Navi, glauben Sie, dass es auch hier eine Dark-Modus-Klasse gibt. So können Sie genau hier sehen, nav bar dash Light, BG light, Sie können das in dunkel ändern und Sie erhalten eine dunklere Version. Hier ist das Formular für die Navbars. Normalerweise ist es nur ein Suchfeld, also ist es ziemlich einfach. Diese Eingabeklassen und Button-Klassen können jedoch an anderen Stellen verwendet werden, an denen sich Formulare befinden. So richtig cool dort kannst du ein paar Icons hinzufügen. Das ist also Nav Bar. Erkunden Sie das auf jeden Fall. Viele großartige Funktionen. Off Canvas. Dies ist den Dropdown-Menüs für Mobilgeräte ziemlich ähnlich. Dies ist eine Möglichkeit, Inhalt des Ansichtsfensters „ Aus“ auf Ihrer Website erscheinen zu lassen. Wie Sie hier sehen können, verlinken Sie mit einem Laufwerk, es gleitet von links hinein. Manchmal werden diese für mobile Menüs verwendet. Zu anderen Zeiten, weißt du, kannst du so ziemlich alles damit machen. Es ist nur eine Möglichkeit, Inhalte zu speichern , die für den schnellen Zugriff verfügbar sind. So ziemlich cool dort. Und manchmal, was einige dieser Komponenten Bootstrap ermöglicht , direkt mit ihm zu verknüpfen. So könnten Sie zum Beispiel ein Akkordeon auf das Akkordeon-Panel zielen , das Sie öffnen möchten, indem Sie der URL einen Parameter hinzufügen, was eine wirklich, wirklich coole Funktion ist. Wenn ihr Fragen dazu habt, lass es mich wissen und ich kann auch näher darauf eingehen. Paginierung oder Paginierung. Ich weiß nicht, ob das richtig ausgesprochen wird. Dies ist jedoch eine großartige Funktion für Blog-Stile und so weiter oder was auch immer Sie durchschauen müssen. Also das wieder eingebaut zu haben. Nette Feature-Platzhalter. Das ist also interessant, das ist eher, wenn Sie es sind, wenn Sie ein Design oder so verspotten und keinen tatsächlichen Inhalt haben. Es sieht so aus, als könntest du tatsächlich nur Platzhalter setzen und es gibt dir irgendwie diese ausgegraute animierte enge Box. Dies kann nützlich sein, wenn Sie Ihr Design mit einem Team oder einem Kunden teilen oder etwas versuchen, eine Genehmigung zu erhalten . Geben Sie einfach ein Beispiel an, so könnte es aussehen. Anstatt tatsächlichen Inhalt zu erstellen, könnte es ziemlich nützlich sein. Popovers ist etwas, das sich auf eine Drittanbieter-Bibliothek namens Popper stützt. Es ist nicht direkt in Bootstrap integriert, aber es könnte ziemlich einfach verbunden werden. Ich benutze das nicht allzu oft, aber so sieht es so aus, als würde man denken, dass sie auch als Tooltip bezeichnet werden. Aber es gibt dir viel Kontrolle darüber, wie du es willst, wie du es aussehen willst, Sachen wie diese. So ziemlich cool. Fortschrittsbalken werden normalerweise zum Anzeigen des Ladefortschritts verwendet. Sie sehen diese nicht allzu oft auf Websites mehr als Anwendungen. Aber die sind hier drin. Sie geben dir die Möglichkeit, Labels hinzuzufügen und reich an Animationen, Hintergründen und so. Also noch ein ziemlich cooles Feature dort. Dies ist auch ein ziemlich gutes Feature, ScrollSpy. Dies gibt Ihnen die Möglichkeit, basierend auf einem Klick zu einem bestimmten Ort auf der Seite zu scrollen . So können Sie hier sehen, Sie zur zweiten Überschrift herunterfahren , wenn Sie auf die zweite Überschrift klicken, oder wenn Sie basierend auf dem dritten Clip zur dritten Überschrift fahren . Das ist also wirklich cool, etwas zu nutzen, wenn Sie eine wirklich lange Seite haben. Auch hier werden Spinner normalerweise zum Laden von Animationen angezeigt. Dies ist auch ein ziemlich neueres Element, glaube ich. Aber auch hier haben Sie übereinstimmenden primären, sekundären Erfolg und so weiter. Farbschemata, ob Sie ein Formular anzeigen, einreichen, laden oder ähnliches. Toasts sind also im Grunde genommen Benachrichtigungen. Diese siehst du oft bei Web-Apps. Nicht so sehr nur eine Standardwebsite, sondern auch hier wird Bootstrap für Websites und Anwendungen entwickelt. Das ist also ziemlich cool. Auch hier sind sie ablehnbar und viele coole Dinge, die Sie hier unten sehen können. Einfach so. So ziemlich cooles Zeug dort. Wieder alles eingebaut. Ich glaube nicht, dass dieser eine dritte Partei benötigt. Jetzt ist es eingebaut. Also nochmal, viele gute Informationen hier wenn Sie das umsetzen möchten. Und dann wieder Tooltips ähnlich den Popovers, aber diese sind nicht so anpassbar. Sie können also sehen, dass es eine viel kleinere, statischere Art von Tooltips ist. Das sind also die meisten Komponenten, die in Bootstrap integriert sind. Wenn Sie einen tiefen Tauchgang wünschen, Sie dies bitte beim Erstellen tun Sie dies bitte beim Erstellen Ihrer Website oder Anwendung. Es wird dir eine Menge Zeit sparen. Schon wieder. Selbst wenn Sie als Ausgangspunkt verwenden möchten, holen Sie sich einfach etwas auf die Seite und dann können Sie es immer von dort aus optimieren, Ihre persönliche Note hinzufügen, aber auf jeden Fall überprüfen, Sie werden es nicht bereue es. Das Letzte, was ich behandeln möchte, bevor wir uns Aufbau unseres Facebook-Klons befassen , ist die Formularfunktion in Bootstrap. Wie Sie hier sehen können, enthalten sie viele Stile für so enthalten sie viele Stile für ziemlich jedes Element, das Sie sich für ein Formular vorstellen können. Also Formularsteuerelemente, Prüfungen und Radios, Eingabegruppen, Layout, Auswahlbereich, schwebende Beschriftungen und Validierung. Der Validierungsteil ist eigentlich ziemlich cool. Wenn Sie also Ihre Formulare erstellen und eine Validierung für die Benutzereingabe erhalten möchten . Bootstrap hat das integriert, was wirklich, sehr nett ist. Also scrollen wir einfach ein wenig nach unten und verschaffen uns einfach einen sehr schnellen Überblick. In diesem Beispiel haben wir hier die E-Mail-Adresse und das Passwort mit einem Absenden-Button. Dies ist höchstwahrscheinlich das, was wir in unserem Beispiel tatsächlich verwenden werden. Aber Sie können dem Code entnehmen, Sie nur ein Standard-Formularelement haben. Und dann hast du ein Div mit der Klasse MV3. Und dann haben Sie eine Etiketten-E-Mail-Adresse mit der Klasse des Formularblatt-Etiketts. Daneben haben Sie die Eingabe mit dem Typ E-Mail mit der Klasse des Formularsteuerelements. Das Formularsteuerelement ist eigentlich das, was ihm die schönen abgerundeten Ecken, einen leichten Rand, einen kleinen Abstand um ihn herum und so weiter gibt. Und dann direkt darunter haben Sie den Helfertext, die Klasse des Formular-Strichtextes erhält, der nur besagt, dass Sie Ihre E-Mail niemals mit jemand anderem teilen werden. Das ist ein bisschen wie ein kleiner Tipp für den Benutzer. Was wird also etwas anders gestylt als das tatsächliche Etikett. Also ist es schön, dass das eingebaute Passwort ist. Auch hier sind sehr ähnliche Klassen, sie bilden Steuerformular, Beschriftung, und dann haben Sie die Schaltfläche „Senden“, tut mir leid, kurz davor haben Sie das Kontrollkästchen, das auch gestaltete Formularprüfung ist beschriften. Ich glaube, das legt das Label neben das Kontrollkästchen und nicht darunter oder oben. Und dann der Button mit einer Primärklasse. Sie können also irgendwie sehen, wie all diese Dinge zusammenkommen. Alle Klassen im gesamten, alle Komponenten arbeiten zusammen, um der Site Konsistenz zu verleihen. Also diese Art von Gerecht und erweitert einige dieser Klassen, die Formulartexte. Es sieht also so aus, als würde dies häufig verwendet werden , um zu beschreiben, wie lang ein Passwort sein sollte. Auch hier ist es nur ein kleinerer. Verschiedene Staaten, Barrierefreiheit. Sie können hier auf der linken Seite sehen, Sie können in jede dieser Eingabegruppen klicken, die nett sind. Es gibt Ihnen die Möglichkeit, Symbole hinzuzufügen. Für Dollarbeträge sind Benutzernamen und ähnliches. also immer nett, dem Benutzer ein wenig Anleitung zu geben ist also immer nett, dem Benutzer ein wenig Anleitung zu geben. Schwebende Etiketten. Das ist irgendwie cool. Wenn Sie in eine Art von Zusammenbruch und darüber klicken , erhalten Sie dann ein wenig Raum, um Validierung einzugeben. Und du kannst das alles durchlesen. Wenn Sie jedoch hier unten auf Formular absenden klicken , werden die Informationen tatsächlich validiert. Verwenden Sie also bitte den Benutzernamen, wählen Sie einen Bundesstaat aus, stimmen Sie den Bedingungen zu und senden Sie es dann ab. Also nochmal, wirklich cool , dass das eingebaut ist. In der Regel müssten Sie einen Drittanbieterdienst verwenden , um so etwas zu erhalten. Also nochmal, wirklich nett, dass Bootstrap das inklusive hat. Und im nächsten Abschnitt werden wir tatsächlich eintauchen und anfangen, unseren Klon mit dem zu bauen, was wir bisher gelernt haben. Wenn du so weit bei mir geblieben bist, vielen Dank. Ich hoffe, euch gefällt der Unterricht. Und von hier aus wird es nur besser werden. 10. Abschnitt 10 – Aufbau von Anmeldeseite: In diesem Abschnitt werden wir tatsächlich mit dem Aufbau unseres Facebook-Klons beginnen. Wenn ihr also so weit bei mir geblieben seid, schätze ich es wirklich sehr. Bitte hinterlassen Sie eine Bewertung des Kurses, wenn es Ihnen gefallen hat. Es hilft mir wirklich, über Themen für zukünftige Kurse nachzudenken, wie ich mich verbessern kann und so weiter. Es ist also sehr hilfreich, dieses Feedback für mich zu bekommen. Also nochmal, danke. Lassen Sie uns damit beginnen, die Anmeldeseite zu erstellen. Also werden wir diesen Ordnerteil nicht erstellen , der nur den obersten Abschnitt hier machen wird. Gehen wir also zurück in den Code-Editor und wir verwenden einfach die Datei index.html, die wir bisher verwendet haben. Und wir werden es ein bisschen aufräumen, damit wir den Stil nicht wirklich brauchen. Und wir schalten den Zeilenumbruch aus irgendeinem Grund wieder ein, der ausgeschaltet ist. Also schalte ich das ein und dann werde ich einfach das Containerflüssigkeitskram los. Wenn ich auf die Anmeldeseite zurückblicke, werde ich dies nur in Bezug darauf aufschlüsseln wie wir das Raster aufbauen werden. Dieser Abschnitt hier ist also ziemlich einfach. Wir machen einen Container in voller Breite. Wir werden einen Container mit zwei Spalten machen. Wir werden etwas Inhalt auf der linken Seite haben, und dann haben wir ein Formular auf der rechten Seite. Springen wir also in den Code-Editor und wir fügen die Container-Strichflüssigkeit hinzu. Und dann fügen wir einen weiteren Container hinzu. Und in diesem verschachtelten Container fügen wir eine Zeile hinzu. Und dann werden wir genau so Spalten mit gleicher Breite machen. Und dann werden wir auf der linken Seite ein Bild machen. Und ich kopiere dieses Facebook-Bild und aktualisiere die Seite. Und Sie können die Facebook-Bilder genau dort sehen. Großartig. Und dann füge ich direkt darunter nur etwas Text hinzu. Mal sehen, was sie hier haben. Sie haben Kontakt mit Freunden und der Welt um Sie herum auf Facebook. Ich kopiere einfach das und füge es ein. Okay, perfekt. Also müssen wir hier ein bisschen stylen nur um die Dinge ein bisschen besser in Einklang zu bringen. Aber bevor wir das tun, möchte ich den Formularabschnitt auf der rechten Seite hinzufügen. Also springe ich zurück in Bootstrap. Ich gehe zwei Formulare runter. Überprüfe, und ich kopiere nur dieses allererste Beispiel hier, aber die E-Mail und das Passwort und kopiere das und springe in den Code-Editor. Ich mache allerdings eine Sache hier. Ich füge ein div mit einer Klasse von Formular-Wrapper hinzu, formiere den Unterstrich-Wrapper und füge es darin ein. Und der Grund, warum ich das tue, ist nur, ihm eine Art Hintergrundfarbe zu geben . Sie können also sehen, dass dies irgendwie in diese weiße Box mit einem Box-Schatten eingewickelt ist. Also wollte ich das Gleiche machen. Großartig, um das zu stylen, also lasst uns ein Stylesheet verbinden. Also werde ich Link machen und dann css, styles.css. Also muss ich meinen Finder öffnen und einfach einen Ordner namens CSS hinzufügen. Und dann muss ich tatsächlich die CSS-Datei erstellen. Was ich hier machen werde, ist in meinem Code-Editor Visual Studio Code, geh Datei öffnen. Und ich öffne einfach diesen Kursordner oder den Site-Ordner, den wir am Anfang erstellt haben. Und so bekomme ich den Datei-Navigator auf der linken Seite hier. Also öffne ich die Datei index.html erneut. Und dann öffne ich meinen CSS-Ordner und erstelle eine neue Datei namens Styles. Das ist CSS. Großartig. Innerhalb der Datei styles.css müssen wir im Grunde auf einige dieser Dinge abzielen. Um mit der Container-Strichflüssigkeit zu beginnen, füge ich eine neue Klasse hinzu und nenne sie einfach Seitenunterstrich-Container. Und dann füge ich im Stylesheet den Klassennamen dort ein. Ich gebe ihm eine Hintergrundfarbe von F6, F6, F6. Das wird ihm einen sehr hellgrauen Hintergrund geben. Und als nächstes zielen wir auf die Reihe ab. Und was wir hier tun wollen, ist die integrierte Bootstrap-Klasse für Zeilen zu verwenden die integrierte Bootstrap-Klasse für , um unsere Elemente vertikal auszurichten. Und das ist einfach so ausrichten Elemente zentrieren. Also mach weiter und speichere das und wir werden aktualisieren und sehen, wie die Änderungen aussehen. Und du kannst es nicht wirklich sagen, nur weil es keine gibt. Höhe oder Polsterung oder irgendetwas auf diesem Behälter. Was wir also tun können, ist zurück in das Stylesheet zu springen und diesem eine Höhe von 100 vh zu geben, was der vertikalen Höhe des Ansichtsfensters entspricht. Das sollte also diese Hintergrundfarbe, volle Höhe des Fensters, dehnen . Und dann kannst du das jetzt sehen. Und dann müssen wir dasselbe für den Container in der Größe tun , während ein Seitencontainer die Containerhöhen von 100 vh unterstreicht . Lasst uns weitermachen und das speichern. Und es funktioniert nicht. Lasst uns also herausfinden, was wir hier falsch machen. Also braucht die Reihe auch und vertikale Höhe 100. Okay? Also können wir es einfach machen, lasst uns das kopieren. Und wir sagen, dass die Reihe darin ebenfalls 100 ist. Okay, großartig, also haben wir, dass alles richtig gut aussieht. Jetzt können wir den weißen Kasten um das Formular legen und das Formular tatsächlich etwas kleiner machen. Gehe zurück in den Code-Editor, in unsere HTML-Datei. Und anstatt die letzte Spalte 6 zu machen, machen wir es vier. Du siehst, dass es ein bisschen schrumpft. Ich gehe hier zurück in die Dokumentation, gehe zu Layout-Spalten. Mal sehen, ob wir den Bereich finden können, in dem es darum geht, eine Lücke dazwischen zu lassen , die ausgeglichen werden sollte. Im Grunde müssen wir also nur eine Offset-Klasse hinzufügen. Offset groß 2. Seit wir also von sechs auf vier gegangen sind, haben wir noch zwei Säulenräume übrig. Also werden wir es auf großen Bildschirmen um 2 ausgleichen, was dazu führen sollte. Und ich werde es tatsächlich in eins ändern , nur damit es etwas zentrierter ist. Einfach so sieht das wirklich, richtig gut aus. Fügen wir dem also einfach einen weißen Hintergrund hinzu. Also werden wir diese Form-Wrapper-Klasse ins Visier nehmen. Sagen Sie Hintergrundfarbe, Weiß, und fügen Sie einen Randradius von 10 Pixeln hinzu. Wir werden rundum etwas Polsterung hinzufügen. Und das sollte nicht ausreichen, um uns das zu geben. Und dann fügen wir einen wirklich leichten Box-Schatten hinzu. Ich werde diese schwarze Farbe hier anpassen, um etwas heller zu sein. Okay, großartig. Also lasst uns weitermachen und dies auf D3, D3, D3 aktualisieren. Und erfrischen Sie sich und sehen gut aus. Lassen Sie uns also einige der Stile auf der linken Seite aktualisieren . Laut der Homepage der Logos viel kleiner und der Text ist ein bisschen größer. Also können wir das tatsächlich ändern, sagen wir einfach ein h3 und statt eines Absatzes. Und dann gebe ich das Bild und die ID des Logos. Also sage ich Logo, maximale Höhe, 75, Breite, Auto. Und das sollte ziemlich gut aussehen. Vielleicht können wir ein bisschen größer werden. Ich bin ein Logo, aber der Text selbst sieht ziemlich gut aus. Lasst uns das also auf 100 ändern. Perfekt und wir sehen ziemlich gut aus. Und noch eine Sache, die wir tun können, ist, die Schaltfläche „Konto erstellen“ hinzuzufügen die Schaltfläche „Konto erstellen , die sich unter dem Formular befindet , das sie hier haben. Also lasst uns weitermachen und das sehr schnell machen. Um das zu tun, wollen wir immer noch in der weißen Box sein, der weißen Hintergrundbox. Also gehen wir hier direkt unter diesen Absende-Button. Wir fügen eine horizontale Zeile hinzu. Und dann füge ich einen Knopfmoment hinzu. Also Klassen-Button und dann werden wir Button Erfolg sagen , damit wir den grünen Hintergrund-Button bekommen können. Ich sage Erstellen, erstelle ein Konto und aktualisiere dann. Okay, großartig. Sie haben sich also nicht zentriert. Springen wir also zurück in Bootstrap und gehen in den Schaltflächenbereich. Und was wir tun wollen, ist, dass wir unserem Button hier einen Typgleichheits-Button hinzufügen können , einfach so. Und dann wollen wir tatsächlich die Alignment-Klasse für diese Schaltflächen erhalten . Also lasst uns danach suchen. Okay, also sieht es so aus, als müssten wir es nur in ein Div mit ein paar Klassen hier stecken . Jemand wird das kopieren und dann unseren Button umbrechen und dieses div autofill versuchen, es mit dem falschen Element auszufüllen. Also lass mich das reparieren. Okay, großartig. Lassen Sie uns also fortfahren und aktualisieren und nach Bedarf anpassen. Und es ändert sich nicht. Lasst uns also herausfinden , was wir hier falsch gemacht haben. Ups, ich muss dieses schließende div loswerden . Einfach so. Okay, perfekt, also haben wir das zentriert. Das ist also ein kurzes Beispiel dafür, wie Sie einige Bootstrap-Stile verwenden um einen gut aussehenden Anmeldebildschirm zu erhalten. Wir haben den Container, die Spaltenklassen der Zeilensumme, einige Zeilenausrichtungsklassen sowie alle Formularklassen verwendet die Spaltenklassen der Zeilensumme, einige Zeilenausrichtungsklassen sowie . Dies ist also ein gutes Beispiel dafür , wie man so etwas in relativ kurzer Zeit bekommt . 11. Abschnitt 11 – Aufbau der Navigation: Und in diesen letzten Abschnitten werden wir unseren Facebook-Klon der eigentlichen Feed-Seite erstellen. Also werden wir die obere Navigation und dann die Seitenleiste auf beiden Seiten sowie den Hauptinhalt aufbauen dann die Seitenleiste auf beiden Seiten . Wir werden einfach genau das machen, was in diesem Screenshot steht. Wir werden nicht die ganze Seite erstellen , während Sie scrollen und solche Sachen, aber zögern Sie nicht, dies bis zu E1 zu bringen. Nimm das, was du hier gelernt hast, und lauf irgendwie damit und sieh, wie weit du es schaffen kannst. Ich wäre sehr interessiert zu sehen, was ihr daraus kreieren könnt. Also lasst uns weitermachen und eintauchen. Was wir tun werden, ist mit der oberen Navigationsleiste zu beginnen. Also, um das zu tun, und machen wir eine neue Datei. Und wir nennen das einfach home.html. Und was wir tun können, ist einfach zu kopieren, was wir auf dem Index haben, und fügen Sie es einfach in die Home-Datei ein. Und lasst uns einfach alles im Körper aufräumen und alles im Kopf behalten. Wir können den Titel auf Homepage ändern , damit wir den Unterschied erkennen können. Und dann können wir weitermachen und loslegen. Lassen Sie uns also in die Bootstrap-Dokumentation einsteigen und wir müssen nur ein paar Informationen über die Navigationsleiste sammeln . Also lasst uns einen suchen , der ähnlich ist. Wir brauchen also ein Logo sowie eine Menü- und Suchfunktion. Ich glaube also, dass dieses Beispiel hier drin ist. Es gibt einige Farbschemata und ich bin mir ziemlich sicher, dass bereits ganz oben das allererste Beispiel passiert ist. Ja, da ist es. Also lasst uns weitermachen und das einfach kopieren. Komm zurück in den Editor und füge ihn ein. Was wir also tun können, ist statt nur Navbar, wir können hier unser eigenes Bild platzieren. Und ich gehe einfach zu Google und hole mir ein Facebook-Logo. Diese Runde hier sollte nicht perfekt sein. Kopieren Sie also einfach die Bildadresse und fügen Sie sie dort ein. Und dann können wir diesem die ID eines kleinen Logos geben. Großartig, also lasst uns das in unserem Stylesheet ein bisschen stylen . Und gib ihm eine Höhe von 30 Pixeln und eine Breite von 30 Pixeln. Vielleicht fahren zu kleine Boote weiter und sehen, wie das in der URL aussieht, ändern Sie es einfach zu Hause. Und du siehst, dass wir das irgendwie schon am Laufen haben. Aber es sieht so aus, als wäre das Bild, das wir kopiert haben, etwas verzerrt, nur weil es einige Leerzeichen gibt. Alles, was bedeutet, ist, dass wir ihm nur etwas mehr Breite und Höhe geben müssen, weil es keine perfekten Quadrate ist. Versuchen wir es mit 50. Okay, perfekt, das sollte gut genug sein. Jetzt müssen wir einige Icons und weitere Symbole auf der rechten Seite hinzufügen . Okay, jetzt haben wir hier oben ein paar Text-Links. Ich werde sie als Text belassen, nur weil ich keine Symbole jagen möchte, aber gerne Symbole verwenden kann. Der einzige Unterschied besteht darin, anstelle von Text hier zu sein, anstatt Link oder Home, Sie werden einfach ein Bild-Tag mit dem Link zum Symbol setzen. Das wird der einzige Unterschied sein. Ich lasse sie einfach als Texturen zurück, weil es ein bisschen einfacher sein wird, um Icons zu finden. Wir möchten auch, dass dieses Menü zentriert ist. Okay, also lasst uns daran arbeiten, es zu zentrieren. Wir müssen also nur das eigentliche Menü finden und einige Klassen ändern. Wenn Sie sich also an die vorherige Lektion erinnern, wobei das Anmeldeformular auf die Schaltfläche Konto erstellen zentriert ist, nahm die Klasse m x dash Auto. Im Moment haben wir M E dash auto, also ändere ich es in MX, speichere es. Und jetzt haben wir einen zentrierten Veranstaltungsort. Perfekt. So können wir das Formular nach links verschieben. Und dann fügen wir hier rechts noch ein paar Buttons hinzu. Also lasst uns weitermachen und daran arbeiten. Aber um das zu tun, müssen wir nur das Formular finden. Ich schneide es ab und schiebe es wieder nach oben. Und dann können wir einige Menüs hinzufügen, Menüpunkte auf der rechten Seite. Und ich habe gerade dieses Dropdown-Menü kopiert nur um etwas Inhalt zu haben, aber ich werde das bereinigen. Ich brauche nichts von diesem Zeug hier. Ich werde diesen Teiler einfach los . Mal sehen, wie das aussieht. Also habe ich die MX Dash Auto-Klasse mit einer ungeordneten Liste mit drei Listenelementen. Ich gehe vorerst auch zu den Dropdown-Artikelklassen und aktualisiere sie. Okay, also sieht es so aus, als würde es ziemlich gut aussehen, aber wir müssen hier einen Kurs machen, damit es so aussieht. Also lasst uns hier hochspringen und wir sagen einfach Navbar Nav, ich bin Ex-Auto. Und hoffentlich wird das den Trick machen. Okay, wir kommen da hin. Sieht aus, als bräuchten wir hier nur ein bisschen zusätzliches Styling. Wir benötigen also die Navigationsgegenstandsklasse für jedes Listenelement. Lasst uns also weitermachen und das umsetzen. Und das sollte es bereinigen, uns einen besseren Abstand geben, also bessere Formatierung. Und das ist es nicht. Lasst uns also herausfinden , was los ist. Der Nav-Link ist auch das, was wir für die Klasse brauchen. Also lasst uns weitermachen und das und das hinzufügen. Okay, perfekt. Also sehen wir gut aus. Schon wieder. Zögern Sie nicht, Icons zu verwenden, wie das Beispiel hier. Ich habe keine Icons auf meinem Computer gespeichert, also habe ich keine zur Verfügung, aber zögern Sie nicht. Ich behalte sie vorerst nur als Links. Und eine letzte Sache, die wir tun können, ist einfach diese MX-Dash-Auto-Klasse in Float Dash End zu ändern . Und dann schnappen wir uns tatsächlich das Ganze und bewegen es direkt unter dieses schließende ungeordnete Listentag hier. Dies wird es tatsächlich im Hauptcontainer für die Navbar halten , wodurch es auch innerhalb der mobilen Navigation aufbewahrt werden kann . Und das meine ich damit. Im Moment sieht alles gleich aus. Aber wenn wir auf die kleineren Bildschirme kommen, wird es korrekt zusammenbrechen und hier unten erscheinen. Wir müssen die Stile so anpassen , dass sie nicht ganz auf der rechten Seite haften. Aber das wird es zumindest im mobilen Menü bekommen. Tausche diese Stile aus. Alles, was wir tun müssen, ist die Float-Dash-End-Klasse zu finden und sie einfach in Float Dash, LG Strichende zu ändern. Auf diese Weise fließt es nur am Ende auf großen Bildschirmen und es wird auf kleineren Bildschirmen Dinge auf der linken Seite sein oder überhaupt nicht schweben. Also nur damit du sehen kannst , dass das gut aussieht. Und da ist es. Das sieht also großartig aus. Genau das sind wir, nachdem wir das Logo mit der Suche bekommen haben, einige Links in der Mitte und dann auch Links auf der rechten Seite. Großartig, also werden wir im nächsten Abschnitt den eigentlichen Körper aufbauen. Während wir mit der linken Seite, der linken Seite beginnen und uns nach rechts hinüberarbeiten. Wir werden noch ein paar Bootstrap-Elemente verwenden um diese Listen in Gang zu bringen, einige Karten und so weiter. Ich freue mich also drauf. 12. Abschnitt 12 – Sidebar: In diesem Abschnitt werden wir hier anfangen, den eigentlichen Inhalt unserer Homepage zu erstellen . Also beginnen wir mit dem Aufbau der Struktur. Wir machen eine linke Spalte, den mittleren Inhalt, und dann haben wir eine rechte Spalte. Also wenn ihr euch ein paar Minuten nehmen wollt, um zu sehen, ob ihr das alleine in Gang bringen könnt. Und wenn du das Video anhalten willst, probiere es aus und komm zurück. Ich fange an. Okay, jetzt springen wir in den Code-Editor und kommen einfach direkt in die Datei home.html. Und wir fangen direkt unter dem Nav-Element an. Und wir werden mit einer Containerklasse div gehen. Und wir möchten, dass dies volle Breite hat, also erstreckt es sich über die gesamte Breite des Darstellungsfensters. Und dann werden wir in diesem Container in einem Div mit einer Klasse von Col Dash, großem Strich, machen . Lass uns drei gehen. Und dann werden wir neben dem einen Col mit einer Klasse von oder es tut mir leid, einem Div mit einer Klasse von Col, Dash Large Sechs machen . Und dann wird die letzte Spalte hier dieselbe sein wie die erste. Einfach so. Und dann nur um sicherzustellen , dass alles funktioniert, lasst uns weitermachen und einfach ein paar Platzhalter hier platzieren. Und noch etwas: Wir müssen alle diese Spalten in eine Zeile umwickeln . Lasst uns weitermachen und das sehr schnell machen. Einfach so. Wir können die Seite auffrischen und wir sollten hip sehen, also werden Archons gleich hier enden. Das wird gleich hier enden. Und dann wird das bis zum Ende beginnen. Perfekt. Lasst uns also zu unserem Beispiel zurückkehren. Wir haben also eine Liste mit einem, im Grunde ein Symbol oder ein Bild mit etwas Text. Sehen Sie mehr. Und dann darunter das Gleiche, aber wir haben einen Titel in diesem Abschnitt. Und dann noch einmal, um mehr zu sehen, also konzentrieren wir uns zuerst auf diese Seitenleiste. Wenn Sie in die Bootstrap-Dokumentation springen möchten, können wir auf Komponenten zugreifen und dann zur Listengruppe nach unten scrollen. Und das wird gut genug sein, um hier anzufangen. Also lass mich sehen, ob sie ein Yep haben. Spülen. Das ist es, wonach wir hier suchen. Dies wird uns ein bisschen mehr Platzhaltergruppe geben mehr Platzhaltergruppe , die wir irgendwie anpassen können, wie wir wollen. Kopieren wir einfach dieses Beispiel und fügen Sie es in unsere erste Spalte ein. Und wir lassen den ganzen Text vorerst gleich, speichern ihn und aktualisieren ihn, um sicherzustellen, dass er funktioniert. Okay, perfekt. Jetzt müssen wir hier nur ein Icon bekommen und es gibt ein paar verschiedene Möglichkeiten, dies zu tun. Was ich tun möchte, ist das Rastersystem innerhalb dieser Listengruppe zu verwenden . Es gibt andere Möglichkeiten wie Pseudoelemente mit CSS. Es könnte nur ein wenig schwierig sein, das richtige Bild oder Symbol darin zu bekommen . Mit diesem Netzsystem können wir also ein bisschen mehr Kontrolle haben damit wir damit beginnen können. Innerhalb dieser Listengruppen befinden sich diese Listenelemente. Löschen Sie den Text, und dann legen wir eine Zeile ein. Mit einer Kolumne. Dieser wird sehr klein sein, also sagen wir einfach „ Col Dash Large Two“. Und dann wird das unser Image sein. Und wenn Sie sich dann an den vorherigen Abschnitt erinnern, werden wir einen Platzhalter erstellen. Dies kann 25 mal 25 sein. Und dann kann die nächste Spalte einfach den Rest des Platzes ausfüllen. Und das wird hier ein Text sein. Okay, stellen wir sicher , dass das richtig funktioniert. Okay? Unsere Kolumne könnte also etwas größer sein als wir brauchen. Wir können das vielleicht machen, aber alles andere sieht gut aus. Also lasst uns weitermachen und das anpassen. Und dann können wir einfach dieses gesamte Listenelement kopieren und unsere anderen hier ersetzen, damit sie übereinstimmen. Lasst uns hier fünf Elemente machen. Aktualisieren, okay, perfekt, also sieht das wirklich gut aus. Mal sehen, wie es aussieht, wenn wir etwas kleiner werden. Okay, also können wir das wahrscheinlich komprimieren. Also auf mittleren Bildschirmen, Lasst uns wieder hierher springen. Und diese erste Kolumne könnten wir „mittel“ sagen. Lass es uns eins und dann klein behalten. Das behalten wir auch bei. Mal sehen, was das bedeutet. Okay, sieht gut aus. Lasst uns weitermachen und das einfach für alle unsere Kolumnen hier in Kraft setzen. Okay? Auf extra kleinen Bildschirmen sehen wir ziemlich gut aus und müssen dafür auch eine Klasse hinzufügen. Also werden wir einfach Col Dash machen und es einfach behalten. Lassen Sie uns das schnell zu unseren Kolumnen hinzufügen und dann machen wir weiter. Großartig. Sieht gut aus. Okay, was wir jetzt tun können, ist das Akkordeonelement hinzuzufügen, das uns unsere Schaltfläche „Mehr sehen“ gibt , der im Wesentlichen nur mehr Listenelemente anzeigt. Also lasst uns weitermachen und das ein bisschen größer machen und wir gehen in die Bootstrap-Dokumentation ein. Und wir springen wieder hinein und navigieren zum Akkordeon. Wir können einfach das erste Beispiel hier kopieren und dann einfach aufräumen, was wir nicht brauchen. Also kopiere ich diese Flush-Version hier. Also kopiere das alles. Und wir werden einfach nach unserer bestellten Liste und Einfügen hierher kommen . Und dann können Sie sich diese Kurse schnell hier anschauen. Wir schalten Wort Rot ein. Sie können hier schnell durchschauen und gemäß der Header-Flush-Überschrift 1 sehen. Wenn also dieses H2-Element auf diese Schaltfläche geklickt wird, wird dieser Inhalt im Wesentlichen genau hier angezeigt. So können Sie Flush-Überschrift, eine, Flush-Überschrift, einen Bereich sehen , der mit gekennzeichnet ist. So kommunizieren sie also miteinander. Also lasst uns einfach weitermachen und die beiden anderen Akkordeongegenstände loswerden . Okay, lasst uns weitermachen und aktualisieren. Und das sollte uns ein tolles Akkordeon geben, und es wird ein bisschen großartig expandieren. Also lasst uns das ein bisschen aufräumen. Anstelle von Akkordeon, Punkt Nummer eins, wollen wir mehr sehen. Und dann werden wir innerhalb des Akkordeonkörpers einfach hierher kommen und unsere ungeordnete Liste kopieren. Und dann füge es in den Akkordeonkörper ein. Und vielleicht brauchen wir nicht alle fünf. Lasst uns einfach zwei da reinlegen. Und speichern und aktualisieren. Großartig, also haben wir mehr gesehen, wenn Sie darauf klicken und Sie noch ein paar Listenelemente haben. Es gibt also ein bisschen Styling, das Polsterung an den Seiten hinzufügt, wenn Sie dies aufräumen und wieder spülen lassen möchten . Es sieht also einfach wie eine Fortsetzung der obigen Liste aus. Experimentieren Sie damit. Ich lasse es einfach so, wie es ist nur weil es ein wenig aussieht, es sieht so beabsichtigter aus. Du bist, du erweiterst und kollabierst Inhalte. Es wird nur erwartet, dass es ein bisschen anders aussieht. So großartig. In unserem Beispiel sieht es so aus, als gäbe es eine horizontale Reihe oder einen Rahmen. Und dann im Grunde dasselbe direkt darunter mit einem Titel. Also lasst uns weitermachen und das machen. Also am Ende unseres Akkordeons, wenn es hier runter kommt und an einem horizontalen Reihenelement befindet. Und dann werden wir sagen, sagen wir ein H4. Ich glaube, das hieß Abkürzungen. Und dann müssen wir wirklich alles kopieren, was wir oben haben , und direkt unten wieder runter kommen und es einfügen und aktualisieren. Okay, es gibt also ein Problem und wir können das in einer Sekunde beheben. Wie Sie sehen können, erweitert das Erweitern eines Akkordeons beide. Aber es sieht aus wie unsere Abkürzungen, vielleicht ein bisschen groß, aber unsere Listenelemente sehen gut aus, alles sieht gut aus. Also lasst uns weitermachen und dies in ein H5 umwandeln. Und dann lasst uns unser Akkordeon beheben. Hier sehen Sie also Akkordeon-Flush-Beispiel. Und was das tut, ist im Grunde genommen diesem speziellen Akkordeon einen Ausweis zu geben. Derzeit teilen sich beide Akkordeons auf der Seite dieselbe ID. Was wir also tun könnten statt Laut flush Beispiel können wir diese ID einfach in Shortcut Akkordeon umbenennen. Und dann können wir das kopieren und direkt hier unten einfügen , damit sie sich gegenseitig bewusst sind. Okay, was wir also auch tun müssen, ist die Collapse-Content-ID zu aktualisieren . Sie können also genau hier sehen, dass diese ID auch der obigen ähnelt. Fügen wir also einfach eine Verknüpfung direkt darin hinzu. Und dann aktualisiere, wo es sein muss. Okay, mal sehen , ob das der Trick ist. Perfekt. Also dass einer arbeitet , das funktioniert. Großartig. Dieser Abschnitt sieht also ziemlich gut aus. Diese Seitenleiste hier reagiert immer noch auf kleineren Bildschirmen, alles sieht gut aus. Im nächsten Abschnitt werden wir hier zum mittleren Inhalt übergehen . Wir bauen diese Karten oben aus. Wir fügen hier ein bisschen ein, ein Formularelement mit ein paar Schaltflächen hinzu. Und dann gehen wir zur eigentlichen Karte weiter. Und dann im folgenden Abschnitt beenden wir die rechte Seitenleiste. Und du wirst bereit sein. Sie sind auf dem Weg, großartig aussehende Websites zu erstellen , indem Sie Bootstrap als Framework verwenden. 13. Abschnitt 13 – Hauptinhalt: Im letzten Abschnitt haben wir über die linke Seitenleiste gesprochen und diesem Abschnitt gehen wir zum mittleren Inhalt über. uns also unser Beispielbild ansehen, fangen wir hier ganz oben an. Und was wir tun werden, ist, dass wir einen Container mit einer Reihe mit ein paar Spalten hinzufügen . Wir werden fünf Spalten haben. Und das ist ein gutes Beispiel. einen vorherigen Abschnitt berühren hier einen vorherigen Abschnitt berühren, als wir über die Spaltenzeile sprachen , in der jedes Ding identisch ist. Das wird also ein wirklich gutes Beispiel sein, ähm, oder Anwendungsfall dafür. Also werden wir das benutzen. Wir werden weitermachen, einen Formularbereich mit einem kleinen Symbol, ein paar Schaltflächen und dann der Karte erstellen mit einem kleinen Symbol, . Also lasst uns weitermachen und gleich eintauchen. Lassen Sie uns also in die Bootstrap-Dokumentation einsteigen. Und wir wollen ins Layout gehen. Und dann werden wir ins Netz gehen. Und lasst uns nach unten scrollen. Und wir wollen Zeilenspalten. Also lasst uns einfach dieses Beispiel hier kopieren und dann in den Code-Editor springen. Und lasst uns hier in unsere mittlere Spalte übergehen. Und ich gebe einfach etwas Platz dazwischen. Und das füge ich aus der Dokumentation ein. Und im Moment sieht es so aus, als hätten wir vier Spalten. Ich füge ein Fünftel hinzu. Und dann passe ich das ein bisschen an. also auf die Dokumentation zurückblicken, verwenden Sie die, verwenden Sie die Responsive Row Cows Asterix-Klassen um schnell die Anzahl der Spalten festzulegen, die Ihren Inhalt und Ihr Layout am besten wiedergeben. Während normale Col-Dash-Masterclasses für einzelne Spalten gelten, werden die Zeilenanzahlklassen in der übergeordneten Zeile als Verknüpfung mit rho cause auto festgelegt als Verknüpfung mit rho cause auto Sie können die Spalten mit natürlicher Breite angeben. Wir können also weitermachen und versuchen, dies anzupassen. Was wir also tun wollen, basiert auf dem Haltepunkt, zeigt eine bestimmte Anzahl von Spalten an. Wenn wir uns dieses Beispiel genau hier ansehen, werden wir das im Wesentlichen tun, ich das alles kopieren werde, all diese Zeilenklassen und springe in unser Beispiel und füge sie dann einfach hier ein. Also eine, wo wir auf großen Bildschirmen losgingen, musste ich zeigen und wir wollen wahrscheinlich , dass alle Phi auch auf mittleren Bildschirmen zeigen. Und wenn wir dann etwas kleiner werden, gehen wir auf drei runter. Und dann werden auf kleinen Bildschirmen nur zwei angezeigt. Also lasst uns das speichern, aktualisieren und sehen, wie das aussieht. Okay, lasst uns weitermachen und uns hier ein bisschen anpassen. Okay. Sie können also sehen, dass es sich stapelt. Ich würde einen großen Bildschirm bis zu fünf anzeigen. Okay, lass uns weitermachen und anfangen, das zu stylen. also in der ersten Spalte hier Löschen Sie also in der ersten Spalte hier den Platzhaltertext. Und ich setze einfach ein Div mit einer Klasse von Story-Inhaber. Und dann wollen wir ein Icon, wir brauchen ein Hintergrundbild und dann einige Texte mit der Aufschrift Add to story. Fangen wir damit an. Ich bin kein Fan, es tut mir leid, wir machen ein Bild. Und dann drinnen für die Quelle werden wir es einfach wieder halten. Lassen Sie uns einfach 25 plus Zeichen leuchten, die die Spanne mit den Texten haben , auf denen „Zur Geschichte hinzufügen“ steht. Und dann werde ich gerade ein Inline-Styling machen, um eine Hintergrundfarbe darauf zu setzen . Ich werde nicht schwarz machen, lass uns blau machen, also zeigt der Text, okay, also jetzt genau das, wonach wir noch suchen, aber wir sind auf dem Weg. Lassen Sie uns also hier noch ein paar Stile hinzufügen. Also werde ich diesen Inline-Stil tatsächlich entfernen. Und ich kopiere diesen Kurs und gehe dann in unser Stylesheet. Ich sage Höhe auf 100 Pixel. Lassen Sie uns rund um acht Pixel auffüllen. Zeigen Sie Flex an. Und dann können wir den Inhalt oder den Edu-Raum dazwischen rechtfertigen . Und lasst uns einfach sehen , wie das sehr schnell aussieht . Und noch nicht ganz. Also lasst uns Flex-Richtungs-Säule machen. Okay, wir kommen dorthin und es sieht so aus, als würde unser Bild etwas zu sehr verzerrt. Also lasst uns weitermachen und Geschichte sagen. Älteres Bild, Höhe 25 mit 25. Okay, also haben wir unsere Ikone, oben, es ist ein bisschen klein. Wir können das wahrscheinlich ein bisschen größer machen. Außerdem ist unser Text auch etwas zu groß. Also lasst uns weitermachen und 35, 35 machen. Und dann spannt unser Story-Inhaber, wenn ich es richtig buchstabieren kann. Wir möchten, dass dies Schriftgröße 10 Pixel, Farbe, weiß sein soll. Text ausrichten, links. Lassen Sie uns unsere Hintergrundfarbe auf dem Story-Halter machen. Okay, sieht ziemlich gut aus. Was wir jetzt tun können, ist, diese Klasse auf den Rest der Spalten anzuwenden und wir werden auf dem Weg sein. Kopieren wir das einfach und legen es in unsere verbleibenden Spalten. Und lasst uns auffrischen. Okay, sieht gut aus. So können wir den Text ein bisschen größer machen und einen Randradius hinzufügen. Machen wir weiter und machen den Randradius 10 Pixel. Eigentlich machen wir 15. Und dann unsere Spanne, Lass uns bei 12 Pixeln ein bisschen größer werden, und das sollte reichen. Okay, großartig. Wir sehen bisher ziemlich gut aus. Als nächstes haben wir diesen Abschnitt hier. Wenn ihr das alleine versuchen wollt, unterbrechen Sie das Video und kommen zurück, wenn Sie es bereit haben. Wenn nicht, können Sie einfach weiter folgen. Also zurück zur Datei home.html direkt unten. Und wir wollen einen weiteren Container mit einer Reihe machen. Und dann machen wir etwas Ähnliches wie die Listenelemente, die wir zuvor gemacht haben. Und wir machen einfach eine Kolumne mit einem großen Strich. Und dann das Bild. Wir werden einfach das gleiche Bild verwenden. Und dann werden wir in der nächsten Spalte nur den verbleibenden Platz ausfüllen lassen. Und das wird tatsächlich eine Form sein. Was wir also tun können, ist in die Bootstrap-Dokumentation zu springen , zwei Komponenten zu überspringen und dann tut es mir leid, ich habe zwei Formulare direkt über den Komponenten gesprungen und einfach auf Übersicht geklickt. Und das wird uns hier genug von einem Beispiel geben. Wir können dieses erste Element wahrscheinlich genau so beschreiben . Und komm gleich hier rein. Und lasst uns einfach etwas von diesem Zeug aktualisieren. Wir müssen also nicht genau die E-Mail-Adresse angeben. Ich glaube nicht einmal, dass es ein Label an unserem Beispiel gibt. Es sagt, was dir in den Sinn kommt, Josephine. Fügen wir also einfach einen Platzhalter damit wir das Etikett loswerden können. Und dann können wir innerhalb unserer tatsächlichen Eingabe sagen, dass Platzhalter gleich ist. Was ist dir im Kopf. Ich nenne einfach meinen Namen. Wir können sagen, wenn Sie die ID lesen, brauchen Sie das nicht unbedingt für den Moment. Und dann können wir das auch loswerden. Wir haben kein Label mehr und wir werden es einfach in Text ändern. Großartig, also lasst uns auffrischen. Und wir hatten unsere Icons wieder etwas zu klein, aber wir haben unseren Input gut gestylt. Lassen Sie uns also noch ein paar Stile hinzufügen, um dies zu erhalten, wie es aussehen soll. Wichtigste zuerst: Lassen Sie uns das ein bisschen größer machen. Lass uns 50 mal 50 machen. Und ich werde eine zusätzliche Klasse auf diesen Container legen zusätzliche Klasse auf diesen Container und Statuscontainer sagen. Und dann gehe ich zum Stylesheet. Und direkt unter unseren Geschichten werde ich oben Marge 35 sagen und links und rechts steht einfach „Auto“. Und dann sollten wir wahrscheinlich dasselbe für unseren Story-Inhaber tun. Lasst uns also hierher zu diesem Container springen und Story-Container sagen Story-Container und hier ein ähnliches Styling anwenden. Und der Grund, warum ich hier separate Instanzen habe, ist, dass wir eine Hintergrundfarbe von Weiß mit einem Randradius auf diesen setzen müssen . Eigentlich ist unser gesamter Seitenhintergrund weiß und unser Beispielbild, der Hintergrund von Facebook, ist wie ein hellgrau mit weißen Hintergrundelementen. Das werde ich tatsächlich rückgängig machen. Also werde ich den Hintergrund weiß behalten, aber ich werde das tatsächlich sehr hellgrau machen. Machen Sie weiter und aktualisieren Sie es. Okay, großartig, also hatten wir hier einen besseren Abstand. Dieser Abschnitt könnte immer noch etwas Liebe gebrauchen. Also lasst uns weitermachen und das machen. Lassen Sie uns hier etwas Polsterung hinzufügen . Sagen wir einfach 20 Pixel. Das Grenzrennen war etwas zu hoch, da es auf 12 zurückging. Und dann können wir nur zum Spaß Status-Container-Image machen. Und dann setzen wir einfach einen Grenzradius von 50 Prozent darauf, also ist es ein vollständiger Kreis. Okay, sieht gut aus. Und das nächste, was wir tun müssen, ist eine Reihe von Schaltflächen hinzuzufügen . Sie können in diesem Fall Links sein, aber wir werden Bootstrap-Elemente verwenden. Also werden wir Knöpfe machen. Sie können also zu Komponenten gehen. Es ist Zwei-Knopf-Gruppe. Und wir können dieses erste Beispiel einfach kopieren. Aber zuerst, was wir tun wollen , ist in unserem Statuscontainer, wir möchten eine weitere Zeile mit einer Spalte voller Breite hinzufügen. Und dann können wir unsere Button-Gruppe einfügen , die wir gerade kopiert haben. Und dann aus unserem Beispiel haben wir ein Bildausweis-Schrägstrich-Video-Tag, Freunde und Gefühle slash-Aktivität. Also lasst uns das kopieren. Foto. Markieren Sie Freunde und fühlen. Aktivität. Okay, also können wir weitermachen und auffrischen und sehen, womit wir uns jetzt befassen müssen. Okay, also noch nicht ganz genau das, was wir wollen. Und eine Schaltflächengruppe ist möglicherweise nicht das beste Beispiel oder Elemente, die dafür verwendet werden. Ich könnte das tatsächlich ändern. Gehen wir also zurück und implementieren Sie einfach ein Rastersystem in dieser Zeile und entfernen Sie eine Schaltflächengruppe. Ich denke, es wird mehr Styling sein um dies so zu gestalten, wie wir es wollen anstatt es einfach in einem Gittersystem zu machen. Also manchmal Dinge wie dieses oder Versuch und Irrtum, es gibt wirklich keinen falschen Weg, es zu tun. Aber ich wechsle es hier hoch. Also lasst uns weitermachen und einfach diese Button-Gruppe loswerden. Und dann die Reihe, Spalte großer Strich 12. Lasst uns weitermachen und das einfach in vier ändern. Und dann fügen wir hier drin einfach einen Link hinzu. Und dann wird dieses Foto Slash-Video sagen. Und wir können dies kopieren, zweimal einfügen und dies aktualisieren lassen, um Freunde zu kennzeichnen, sowie Schrägstrich-Aktivitäten zu fühlen. Das sollte uns also etwas mehr von dem geben , wonach wir suchen. Okay, perfekt. Also lasst uns weitermachen und das einfach gestalten , damit es wie unser Beispiel aussieht. Wir können also Status-Container sagen und dann den Link anvisieren, da dies derzeit die einzigen Links in diesem Container sind. Statuscontainer a. Und wir können Farbe sagen, 333, Textdekoration, keine. Und dann lasst uns in den Stance-Container selbst springen , um sagen wir, text-auszurichten. Toll, also sollte das reichen, um uns das zu besorgen , wonach wir suchen. Vielleicht fügen wir etwas Polsterung hinzu um ihm mehr Platz zu geben. Wir können also Statuscontainer Zeile sagen, und wir können einfach Marge, 10 Pixel Auto sagen. Okay, perfekt. Sieht bisher ziemlich gut aus. Wir müssen unsere Icons hier hinzufügen. Also lasst uns weitermachen und das sehr schnell machen. Und um die Dinge einfach zu halten, bearbeiten wir einfach hier drinnen. Wir halten es klein, 25. Okay, perfekt. Aus unserem Beispiel stehen wir uns ziemlich nah dran. Sieht aus, als gäbe es hier eine Grenze, also können wir das sehr schnell machen. Wir können einfach nur eine Klasse namens Button row zu der Zeile machen eine Klasse namens Button row , in der die Tasten enthalten sind. Und dann können wir hierher kommen und Statuscontainer sagen, Button-Zeile als Rand eines Pixelfestkörpers. Und dann machen wir noch einen hellgrauen Farbton. Und es sieht so aus, als würde das gut aussehen, aber wir brauchen nur ein bisschen Platz zwischen dem Rand und unseren Knöpfen, damit wir einfach oben auffüllen können, sagen wir 15 Pixel. Okay, perfekt, sieht bisher richtig gut aus, unser nächster Abschnitt hier ist eine riesige Karte mit Inhalten. Wir haben also ein anderes Bild mit einem Namen, Subtext oder einem Untertitel, dem eigentlichen Inhalt und dann einem Bild. Also Bootstrap, mach das wirklich einfach. Sie können in Komponenten und dann auf Card kommen. Und dann können wir uns die Beispiele hier ansehen und einfach das finden , das unseren Bedürfnissen entspricht. Im Moment sieht das ziemlich gut aus. Titel ist ein Inhalt und dann Links. Während wir weiter scrollen. Du siehst, das ist eine Art voll ausgebauter hier. Wir könnten das machen. Kopf- und Fußzeilenelemente. Sie können einige Block-Anführungszeichen hinzufügen, solche Dinge. Nicht genau das, wonach wir suchen, aber wir können definitiv damit arbeiten. Und es sieht Textausrichtung, Navigationskarten, irgendwie interessant aus. Und dann Bilder. Das ist also, genau hier ist genau das, was wir nach diesem Autotitel des Bildes unten suchen. Also lasst uns weitermachen und das kopieren. Lass uns weitermachen und das untere kopieren. Und wir können wieder hierher kommen. Und dann fügen wir direkt unter diesem Abschnitt einen neuen Abschnitt oder einen neuen Container hinzu. Und wir geben dieser eine zusätzliche Klasse namens Content Container. Und dann machen wir drinnen eine Reihe mit einer Spalte voller Breite. Und dann fügen wir unsere Karte ein. Perfekt. Was wir also tun müssen, ist, dies einfach zu speichern und zu sehen, womit wir arbeiten müssen, bevor wir große Änderungen vornehmen. Wir können diesen Text nach oben verschieben und dann diesen Inhalt darunter. Nehmen wir also weiter und nehmen wir einige Änderungen vor. Wir können diesen Absatz unter dem Titel haben. Beachten Sie die gedämpfte Textstumm-Klasse, die ihr tatsächlich verblasst oder ein helleres graues Aussehen verleiht. Auch das kleine Element gibt ihm kleineren Text. Machen wir weiter und legen hier ein Platzhalterbild ein. Und dann kann dieser, sagen wir, 600 Pixel mal 400 Pixel hoch sein. Und lasst uns weitermachen und das speichern. Aktualisieren. Okay, sieht bisher gut aus, vielleicht ist das Bild ein bisschen größer. Nicht unbedingt ein Problem, aber das schließt es für diesen Abschnitt ab. In unserem letzten Abschnitt werden wir hier mit der rechten Seitenleiste schließen, die der sehr ähnlich sein wird ersten Seitenleiste sehr ähnlich sein wird, die wir gemacht haben. Aber ich hoffe, euch gefällt der Kurs bisher und wir springen direkt in den nächsten Abschnitt. 14. Abschnitt 14 – Rechte Side-bar und Abschluss: Willkommen im letzten Abschnitt dieses Kurses. Wir werden hier mit der rechten Seitenleiste fertig sein . Und wenn wir uns unser Beispiel ansehen, können wir viele der Elemente wiederverwenden , die wir bisher verwendet haben. Wir können den Titel und einige andere ähnliche Stile durchgehend verwenden. Gehen wir also weiter und tauchen Sie einfach ein, springen Sie in den Code-Editor und gehen Sie zurück in die Datei home.html. Und dann navigieren wir hier in unsere letzte Kolumne. Darin wollen wir einen Container. Und dann werden wir uns streiten wollen. Und dann machen wir eine Spalte voller Breite. Und dann wollen wir ein H5 machen. Und dann wird dieser Header gesponsert sagen. Dies ist also für den Abschnitt „Hinzufügen“. Und dann werden wir gleich darunter eine weitere Reihe machen. Und dann wird dies tatsächlich das kleine Icon mit dem Namen enthalten . Und dann haben wir ein Bild direkt darunter. Also lasst uns mit einer großen Spalte gehen. Und dann wird dies vorerst unser Bild mit einem Platzhalter sein. Perfekt. Und dann gleich daneben , lasst uns eine expandierende Spalte machen. Und dann kann das nur ein Absatz sein. Und wir sagen einfach Pizza Platz. Und dann direkt unter dieser Zeile machen wir eine weitere Zeile mit einer Spalte voller Breite. Eigentlich ist dieses Bild enthalten. Was wir also machen wollen, ist 11 zu machen. Und wir sagen „Offset“. Eins. In dieser Kolumne machen wir ein Bild. Und wir sagen einfach 300 mal 175 und erfrischt und sehen, was wir haben. Okay, sieht gut aus. Sie können also sehen, dass wir einen kleinen Abstand direkt oben benötigen . Aber wir haben unser Symbol mit unserem Namen und dann haben wir den Offset einer Spalte, damit das Bild diesen Raum angemessen ausfüllt. Also lasst uns weitermachen und hier einfach ein paar Stile hinzufügen , um diesen Look besser zu machen. Was wir tun können, ist einfach den gesponserten Container zu sagen, diese Klasse in das Stylesheet zu kopieren und wir werden nach unten gehen. Wir werden nur Marge sagen, Top 20 Pixel. Und dann reicht das Bild einfach. Eigentlich haben wir hier zwei Bilder, also müssen wir etwas genauer sein. Was wir tun können, ist gesponserten Titel zu sagen, und dann sagen wir einfach gesponserte Inhalte. Schnappen wir uns zuerst die Titelklasse. Ich bin hier drüben. Und dann wollen wir für das Bild hier einen Grenzradius von 50 Prozent. Und dann werden wir für unsere Inhalte ein bisschen weniger wollen. Also sagen wir einfach vielleicht 12 Pixel. Okay, sieht gut aus. Und wir können hier zum nächsten kleinen Abschnitt übergehen, nämlich Geburtstage. Auch dies wird ein ziemlich einfacher Abschnitt sein. Fügen wir also eine horizontale Reihe, weitere Reihe und dann eine weitere horizontale Straße hinzu. Dann springen wir hierher. Beginnen Sie mit einem anderen Container und wir geben diesem auch die Geburtstags-Containerklasse und stellen ihn hier ein. Wir machen einen Streit. Dies hat auch ein Icon, also kopieren wir es einfach hier. Sparen Sie uns etwas Zeit und dann wechseln wir einfach den Pizzeria in Geburtstage. Und dann tatsächlich direkt unter den Geburtstagen. Ich lasse das tatsächlich ein bisschen durcheinander bringen. Was wir meinen, ist eine Titelzeile, genau wie diese. Also div mit der Klasse der Zeile voller Breite Spalte, kann dies Geburtstage speichern. Und dann hier unten brauchen wir das tatsächlich, um den Geburtstag zu sagen. Das sagt also Jessica Eric zu anderen. Jessica, Erica in andere haben heute Geburtstage. Ich werde mich nicht mit den Schriftgewichten in diesem Abschnitt anlegen , aber zögern Sie nicht. Und am Ende füge ich einfach eine weitere horizontale Zeilenaktualisierung hinzu. Und wir sehen ziemlich gut aus. In unserem letzten Abschnitt hier zum Abschließen finden Sie nur die Kontaktliste. Ich glaube, das ist für die Messenger-Funktion von Facebook. Nun, lasst uns weitermachen und einfach etwas wiederverwenden, das wir bereits gebaut haben, was hier den Abkürzungen sehr ähnlich ist. Also lasst uns einfach in unserer home.html nach oben scrollen und unsere ungeordnete Liste der Verknüpfungen finden , genau so. Kopieren Sie das und scrollen Sie dann wieder nach unten. Genau hier können wir div mit einem Container sagen. Wir sagen Contact Container. Und dann fügen wir diese Liste mit einer Zeile, der vollen Spaltenbreite oder einer Spalte voller Breite einfach hier ein. Bereinigen Sie den Abstand ein wenig, wechseln Sie in den Kontext. Und wir können uns auffrischen. Und wir sehen ziemlich gut aus. Das ist also, wir können hier ein bisschen mehr tun. Lassen Sie uns fortfahren und diese Bilder kreisen, und dann fügen wir ihnen eine kleine Grenze hinzu. Was wir also tun können, ist zur Contact Container-Klasse und unserem Stylesheet zu kommen . Und wir können sagen, dass die Bilder einen Grenzradius von 50 Prozent haben werden . Und um es uns einfach zu machen, können wir für dieses Beispiel Kontaktcontainer Image und vom Typ ungerade sagen. Und wir können sagen, dass diese einen Rand von zwei Pixeln haben, solide blaue Schaltfläche, speichern und aktualisieren. Und es wird tatsächlich wirksam. Wir müssen also nur unseren Stil hier schnell anpassen. Anstelle des Bildes brauchen wir es tatsächlich, um die Lüge zu sein , die den n-ten Typ hat. Und dann sagen wir das Bild in diesen Listenelementen. Okay? Und da siehst du zuerst, drittens, fünft, ich lasse diesen Stil anwenden. Das schließt also unseren Facebook-Klon der Homepage ein. Oben Abschnitt hier, wenn du willst. Ich hoffe, dass euch dieser Kurs bisher sehr gut gefallen hat. Fühlen Sie sich frei, mit dem fortzufahren, was wir bisher haben. Vermisst ein sehr grobes Design eines Facebook-Klons. Wenn ihr das also erweitern wollt, macht es sich irgendwie zu eigen bei tatsächlichen Inhalten, echten Bildern, machen Sie alles reaktionsschneller und so weiter. Ich wäre wirklich neugierig zu sehen, wie weit ihr das so isoliert nehmen könnt , dass ihr diesen Kurs besucht habt. Ich hoffe, du hast viel gelernt. Wenn Sie Fragen haben, lassen Sie es mich gerne wissen. Du kannst mich über Skillshare erreichen oder ich bin auch auf Twitter. Ich hoffe, dass euch diese Klasse wirklich gefallen hat. Bitte hinterlasse mir dein Feedback. Lass mich wissen, wie ich es gemacht habe und ob es etwas gibt, das ich verbessern kann , wenn es irgendwelche Themen gibt , die ich behandeln soll. Lass es mich auf jeden Fall wissen. Ich habe es wirklich genossen, diesen Unterricht zu machen und ich hoffe, ihr habt es genossen, sie zu nehmen. Danke nochmal, Leute.