Bootstrap Bootcamp (für Bootstrap 5)

1. Über den Kurs: Hey, was passiert am Montag, das ist hey, Zahlen mit einem Designer, der codiert. Vielen Dank, dass Sie sich meinen Bootstrap-Bootcamp-Kurs angeschaut haben. Ich wollte wirklich einen Kurs erstellen, in dem Sie sich sicher fühlen, Bootstrap 5 zu verwenden, sowohl die Informationen in den Docks verstehen als auch verstehen, wie alles zusammenarbeitet. Wir werden eine einfache Portfolio-Website erstellen. Wir werden die Navigation in erster Linie gestalten und vor allem sicherstellen, dass sie auch zu einer reaktionsschnellen Navigation wird. Unten konzentrieren wir uns auf Flex, indem wir die Informationen von Bootstrap Five verwenden, um den Text in die Mitte der Seite zu verschieben und darüber zu sprechen, wie Sie verschiedene Teile basierend auf einem XL, einem L, einem Medium, Klein aufteilen können L, einem Medium, und ein mobiles Design. Alles in unserem Design wird immer zuerst mobil sein, da Bootstrap 5 das ist. Im Anschluss an diese Homepage konzentrieren wir uns auch auf das Footer-Design, um die Bootstrap-Symbole von Social Media zu erstellen. Wenn Sie Facebook oder andere Icons einbringen möchten, können Sie dies gerne tun. Für dieses Projekt konzentrieren wir uns auf Twitter und Instagram. Wenn Sie auf unserer About-Seite in dieses Design eingehen, zeige ich Ihnen, wie Sie die Floats in Bootstrap verwenden können , um ein Bild auf der rechten Seite zu positionieren. Und wenn es dann auf das Mobile-Framework trifft, fällt es direkt in die Mitte der Seite. Danach werden wir die Portfolio-Seite aufrufen. Und auf der Portfolio-Seite konzentrieren wir uns auf das Raster. Dadurch habe ich ein Drei-Säulenraster und dann habe ich in einem mobilen Design ein Zwei-Säulenraster und dann habe ich ein Ein-Säulenraster. Wir werden uns auf das Raster konzentrieren und auch auf die Funktionsweise dieser Karten. Neben der Funktionsweise dieser Schaltflächen ist dies eine wirklich großartige Detailseite, die mit Bootstrap 5 wirklich hervorgehoben wird. Endlich werden wir die Kontaktseite aufrufen. Und nicht nur Orgel, um ein Kontaktformular zu erstellen, sondern ich erstelle auch ein Kontaktformular, an das ich Informationen senden kann. Dieses Formular funktioniert. Und mit der Leistungsfähigkeit von Netlify kann ich auf „Senden“ klicken und eine Kontakterfolgsseite erstellen , auf der ich Danke für Ihre Einreichung besagt. Sie werden alle wichtigen Details darüber erfahren , wie Bootstrap 5 in diesem Kurs, dem Bootstrap-Bootcamp-Kurs, funktioniert . 2. Bootstrap: Hey, was passiert, wenn er sagt: Hey, Datums, und vielen Dank für meinen Bootstrap-Bootcamp-Kurs. Ich habe zwei Bildschirme hier oben ist mein kleiner Chrome-Bereich, den ich auf meiner Website sehen kann , die Breite ist und meine Projekte testen kann. Und unten verwende ich Visual Studio-Code. Dies ist eines meiner bevorzugten Tools für die Codebearbeitung. Es wurde von Microsoft hergestellt. Ich kann ihn das nicht sagen lassen, aber Visual Studio Code ist die Knie der Biene. Wenn es um die Mitbearbeitung geht, können Sie jede Farbe verwenden, die Sie verwenden möchten. Aber für mich werde ich während des gesamten Kurses Visual Studio-Code verwenden. Sie können also wieder wählen, welche Farbe Sie verwenden möchten Sublime Coda. Sie können Microsoft Word verwenden, wenn das Ihnen gefällt, aber insgesamt muss ich bei diesem Projekt bei VS-Code bleiben. Um loszulegen, gehe ich zu getbootstrap.com. Ich komme runter und sage, los geht's, nur um loszulegen. Und hier unten auf halbem Weg durch die Seite ist, wenn ich danach suche, die Startervorlage, ich werde das kopieren, weil das alles ist , was ich benutzen muss, damit Bootstrap tatsächlich funktioniert. Ich kopiere es. Ich komme in Visual Studio-Code, erstelle eine neue Datei und füge sie ein. Und dann gehe ich zu meinem neuen Ordner, der Projekt neu ist , Projekt neu ist , und nenne diesen Indexpunkt HTML. Und was an VS Code cool ist, ist es automatische Farbkoordinaten. Alle Dateien sind alle Dateien, alle Dateinamen und andere Wörter, die sich auf das HTML oder welches Dokument, an dem Sie gerade arbeiten, koordinieren . Wenn Sie dies also schnell durchlaufen, damit Bootstrap funktioniert, sind ein paar Komponenten erforderlich und die Vorlage bietet mir bereits all das. Oben oben musst du eine Art Sprache angeben, als wäre es ein Arabisch. Es wird umschalten und wir werden in diesem Projekt zeigen , dass es nicht mehr links und rechts gibt, sondern einen Anfang und ein Ende, da Arabisch von rechts nach links geht und Englisch von links nach rechts geht. Das ist richtig, von links nach rechts. Ich sage es richtig. Ja, das hab ich richtig gesagt. Danach schauen wir uns die UTF oder den Zeichensatz innerhalb des Codes an. Dies wird uns im Wesentlichen sagen, dass wir die Zeichen verwenden möchten , die Englisch von UTF-8 sind. Wir brauchen auch das Darstellungsfenster. Dies ist erforderlich, da das Ansichtsfenster beim Skalieren und Absteigen unseres Projekts ermöglicht, das Projekt zu wachsen und zu schrumpfen, wobei die Breite das Gerät mit dem XYZ-Breitengerät ist, wobei der Anfangsmaßstab bei 100% liegt, die Magie wirklich passiert, wenn wir das Bootstrap-CSS einbeziehen. Dies wird in einem CDN- oder Content-Delivery-Netzwerk bereitgestellt, sodass es praktisch großartig ist. Und es ist ein Stylesheet. Und der andere Teil unten ist dieses Skript, mit dem das JavaScript ausgeführt werden kann, das insbesondere unsere Navigation ausführen würde. Und noch ein paar andere Dinge im Hintergrund. Diese drei Dinge, die erforderlichen Meta-Tags, Bootstrap, CSS und das Skript sind wirklich das, was für den Betrieb von Bootstrap erforderlich ist. Dies ist ein separater Popper und Bootstrap JS. Es ist alles hervorgehoben, weil es kommentiert wurde. Was muss man sich darüber Sorgen machen. Das einzige, was ich machen möchte, ist auf dieser Indexseite gut, also haben Sie gerade gehört, dass ich eine benutzerdefinierte CSS-Datei erstellen möchte. 3. Eine benutzerdefinierte Css-Datei hinzufügen: Was ich hier mache, ist, dass ich eine CSS-Datei hinzufüge und das CSS nach der Bootstrap-Minified Datei hinzufügen möchte, weil ich hier Hallo überschreiben oder ändern möchte. Ich möchte irgendwann einige Einstellungen ändern, die standardmäßig auf Bootstrap sind, nicht viel, nur ein paar Dinge. Also werde ich sagen, dass zuerst eine Falle verbunden ist. Ich füge zuerst die CSS-Datei hinzu und erstelle dann die CSS-Datei als nächstes, ich werde sagen, ich werde sagen, dass Perioden Slash CSS Slash Custom. Css. Und RHEL wird ein Stylesheet sein. Lassen Sie das herein und wir schließen, nicht mit einem X, mit einem Fragezeichen, sondern einem Größeren als Symbol. Wenn ich das speichere und erstelle ich eine neue Datei. Also komme ich in die Datei oder Command N für eine neue Datei. Und ich speichere diese Datei. Und auch über Visual Studio Code ist es sich daran erinnert, wo Sie Ihre letzte Datei zuletzt gespeichert haben. Es weiß also, dass er es hier reinlassen muss. Ich sage CSS für einen Ordnernamen. Und ich gebe diesem einen benutzerdefinierten Punkt-CSS-Namen. Wenn ich oft tun musste, muss es sicherstellen, dass es funktioniert. Ich füge einen Körper hinzu und füge eine Hintergrundfarbe von 0 hinzu, die seit einiger Zeit nicht mehr aufgetaucht ist . Aquamarin gibt sich eine helle Farbe, um zu sehen, dass es funktionieren wird, denn wenn wir diese Hintergrundfarbe sehen können, wissen wir, dass sowohl CSS als auch HTML miteinander verknüpft sind. Wenn ich das speichere, kehre ich in meinen Ordner zurück und ziehe meine Indexdatei. Und hallo world. Es ist Hello World. Mit diesem echt verdammten hässlichen Aquamarin. Das ist okay. Ich komme zur CSS-Datei, werde diesen Körper los, spare. Und wenn ich die Seite auf Chrome aktualisiere , verschwindet dieser Aquamarin und jetzt haben wir unser CSS erfolgreich verlinkt. 4. Der Behälter: Jetzt, da wir die CSS-Datei haben, können wir sie gerade zur Seite stellen. Ich möchte anfangen, an der Navigation zu arbeiten, jemand, der in diesem Projekt von oben nach unten entworfen wurde. Wenn ich in der Indexdatei nach unten scrolle, heißt es Hello World, direkt nachdem der Körper dort ist, wo ich anfangen werde zu arbeiten. Ich sage div und sage dann Klassencontainer. Und dieser Container ist wahrscheinlich das leistungsstärkste Tool, das Sie in Bootstrap verwenden werden. Und ich zeig dir warum. Lassen Sie uns den Container hinzufügen und lassen Sie uns das H1-Tag tatsächlich in den Container bringen. Also bringe ich es rein. Wenn ich das also speichere und Chrome aktualisiere, schau dir an, was passiert? Hello world bewegt sich von links nach oben in die Mitte der Seite. Warum ist das so? liegt daran, dass wenn ich mein Design verschiebe, schau dir Hello World an, wenn es nahe und nahe an den Rand kommt, es springt. Das liegt daran, dass der Container Haltepunkte enthält. Es gibt fünf Haupthaltepunkte, auf die man sich konzentrieren muss. Wir gehen zurück, um Bootstrap zu holen und ich scrolle nach oben. Ich suche den Doc, um sicherzustellen, dass ich an der richtigen Stelle bin. Was ich Ihnen zeigen möchte, ist innerhalb des Layouts, wo Sie Raster finden werden. Und das Raster hat verschiedene Haltepunkte. Eigentlich befindet es sich im Container, sich auf das Raster konzentriert. Ich bin ein paar Schritte voraus gesprungen. Der Container hat ein paar verschiedene Bereiche. Es gibt klein, mittel, groß, XL. Wo beziehen sich diese auf unseren Haltepunkt. Unter 576 ist Ihre extra kleine oder im Wesentlichen Ihre mobile Größe. Ihr kleines bei 576 ist eher ein vertikales horizontales Tablet-Telefon. Dein Medium. Mehr von der horizontalen Tablette schrägst größeres Tablet. Und der große und extra große und doppelte XL geht auf die Bildschirmgröße des Desktop-Bildschirms. Und man merkt, dass sie verschiedene Haltepunkte haben. Also benutzen wir einfach das Wort Container hier unten. Auf dem Handy ist es zu 100 Prozent breit, aber dann werden es 540 Pixel, 720 Pixel, 960, 1140, 1320. Wenn wir also wieder hierher kommen, können wir sehen, wie es an verschiedenen Haltepunkten in diesem Design brechen wird. Wichtig ist auch diese Akronyme, sind diese kleinen Abkürzungen, die SM, MMD, LG, XL, Double XL und Fluid sind . Flüssigkeit können wir fast ignorieren, weil es im Grunde heißt, dass alles 100 Prozent über das gesamte Spektrum hinweg zu 100 Prozent macht. Ich benutze das selten nur, weil ich es vorziehe, einen Container mit allen Rela für relevante Haltepunkte zu verwenden . Aber SM bezieht sich auf kleine, mittlere, große XL und Double XL. Sie werden sehen, dass wir diese verschiedenen Teile auf dem Weg auf unserer Reise verwenden werden. Und wenn wir unseren Container nur eine bestimmte Größe machen wollen, können wir sagen, dass der Container eine bestimmte Größe hat. Im Moment behalte ich den Container einfach so, wie er ist. Aber achten Sie auf diese SM, MMD, LG, Exil und Double XL. Beachten Sie ein anderes Stück und wenn Sie von Bootstrap 4 kommen, ist dies ein Unterschied. Beachten Sie, dass das Extra Klein nicht den Überschuss hat. In der Vergangenheit hätten Sie SM und dann Dash X S. Bootstrap fünf das Spiel geändert. Jetzt ist es zuerst mobil oder standardmäßig extra klein. Und wenn ich es ändern möchte, müssen wir SM, MMD, LG XL und Double XL hinzufügen . Wenn Sie in diesem Projekt vorankommen, ist zuerst alles mobil, vorausgesetzt, es wird herunterkommen, nicht nach oben, was bedeutet, dass es vom Handy aus gehen wird, alles andere. Und wenn wir es ändern wollen, müssen wir etwas Kleines einstellen und auf diese Weise gehen, ich werde die Straße runterschießen, was ich damit meine, aber es schien sich bewusst zu sein, dass zuerst alles mobil ist und es keinen anderen gibt Sprache, um tatsächlich extra klein abzugrenzen. 5. Die Navigation einrichten: Willkommen später wieder im Container. Aber das nächste, was ich nach den Containern machen möchte, möchte ich dieser Hallo Welt eine Navigation hinzufügen. Also verschiebe ich jetzt Hallo World aus dem Container. Wir lassen sie direkt rückwärts fallen, und im Container möchte ich meine Navigation hinzufügen. Schreiben wir folgendes und stellen sicher, dass es richtig markiert ist. Perfekt. Ich werde weniger als Zeichen sagen und ich werde sagen nav class ist gleich navbar, navbar expandieren. Ich sage LG und ich zeige dir, warum das so ist. Und ein bisschen nach dem LG müssen wir sagen, ist es hell oder ist es dunkel? Navbar, Navbar, Navigationsleiste. Ich sage, dass es leicht ist. Dies bedeutet, dass es sich um einen hellen Hintergrund handelt. Wenn wir dunkel sagen, ist das eher für den Dunkelmodus. Also werde ich sagen, schließen Sie es aus, öffnen und schließen Sie mein Navi und ich füge etwas anderes hinzu. Ich füge noch einmal einen Container hinzu, nur um den Space-Div-Klassencontainer zu halten. Und hier drin werde ich meine eigentliche Navigation hinzufügen. Meine erste Kunst ist, dass ich mich auf das Logo konzentrieren muss. Also werde ich sagen, dass das Logo hier geht, indem du es speichere. Hallo, Logos hier. Wir werden einen Raum für das Logo erstellen, war nur ein Text. Und danach bringen wir das Logo mit der mitgelieferten Datei ein, um oben links zu legen und den Text oben rechts zu legen. Wo also Logo steht, geht hier und Hello Worlds zurück außerhalb des Containers, da es ganz links auf der Seite ist, auf der das Logo hier steht. Wenn ich das mache, sage ich a und dann sage, dass Klasse gleich Navbar Marke ist. Und hier drin sage ich H ref, und ich sage index.html. Um wieder auf den Index zu verweisen, schließe ich ihn. Und genau darin werde ich John Smith Entwürfe sagen. Ich hebe es auf. Da ist es. Beachten Sie, dass es keinen Rollover hat, wenn ich mit der Maus darüber fahre. Als Logo oder Design oben links sollten Sie so statisch wie möglich bleiben. Und dadurch gibt es keinen Rollover, weil wir die Klasse der Marke Navbar dazu hinzugefügt haben , ein Tag. Völlig in Ordnung. Was ich machen wollte, ist an der richtigen Stelle. Jetzt, da ich Platz für mein Logo habe, werde ich fortfahren und meine Navigation auf der rechten Seite aufbauen und dann zurückkommen und das Logo fallen lassen. Nach dem a möchte ich ein Kleinkind hinzufügen, was bedeutet, dass ich ein kleines Hamburger-Symbol hinzufügen möchte. Wenn dies also eine bestimmte Größe erreicht, sagen wir unter dem großen, weil ich gesagt habe, expandieren, was bedeutet, wenn es auf das Medium trifft, möchte ich einen Hamburger oder ein mobiles Menüsymbol sehen. Was ich also machen werde, ist nach dem A, ich werde Button sagen und dann sagen, dass Klasse gleich Navbar, Kleinkind. Und für zusätzlichen Platz werde ich ein paar Dinge für die Lesbarkeit tun. Ich lasse das runterlassen. Und was ich tun werde, ist, dass ich nicht vergesse, es zu schließen. Ich schließe den Knopf so. Und hier drin füge ich noch eins hinzu, klar, noch ein paar Dinge. Und nach dem Unterricht, Dab Bar Kleinkind, werde ich sagen, Typ gleich Button. Und dann sagen wir Daten BS für Bootstrap. Und wir werden sagen, dass Toggle gleich Zusammenbruch ist. Und nach dem Umschalten der Daten BS sage ich Daten BAS, Target und gleich. Und ich lege hier einen Ausweis ein und wir können die beiden und ein bisschen verbinden. Ich sage „nav bar“, nav. Ich werde das Ende kapitalisieren. Stellen Sie sicher, dass Sie der genauen Abgrenzung folgen. Ich habe hier auch ein Kapital N benutzt. Als Groß- und Kleinbuchstaben gibt es zwei verschiedene Dinge. Die Aria-Steuerelemente werden Nav-Bar sein, nav. Aria expandiert wird falsch sein, weil es standardmäßig nicht erweitert wird. Und ich sage Arie, Label ist gleich Toggle Navigation. Viele davon, ich weiß viel nur für einen Knopf, macht absolut Sinn. Nach dieser Schaltfläche setze ich ein Span-Tag, LF-Span-Tags. Sie sind die Superhelden des Internets, weil sie absolut nichts tun. Span, ich werde sagen, ist Klasse gleich, ich sage Navbar, Kleinkind, Icon, Drop im Span-Tag. Lass es öffnen und schließen. Also viel Arbeit nur für einen Knopf. Und wenn ich das speichere, wird nichts auftauchen, weil wir das Navi hier noch nicht aufgenommen haben. Es gibt nichts zu öffnen und zu schließen. In Bezug auf eine Navigation. Die Hälfte des Span-Tags. Ich werde sagen, div class ist gleich Collapse, Navbar-Kollaps. Und dann ID, die ich oben bei Navbar nav eingegeben habe. Ich werde gleich hier zurücklegen. Ich sage ID und schnapp mir das Navbar-Navigationsgerät und lass es rein. Ich bin irgendwie eine Kopie und Paste, um sicherzustellen, dass ich es nicht vermassele, was ich sehr gut mache. Und öffnen und schließen Sie das Div in dieser Div-Klasse, wo wir unsere Navigation hinzufügen werden. Also werde ich es tun, dass ich UL sagen werde. Und hier drin füge ich eine UL-Klasse hinzu, ich sage Navbar. Ich kenne viele Wörter für Navbar, Navbar, Nav. Und dann sage ich MS auto. Und ich zeige dir ein bisschen, was das bewirkt. Dies ist der Zeitpunkt, an dem Sie nicht sofort sehen werden, aber ich zeige Ihnen ein wenig, wie dieser funktioniert, MS Auto und Textzentrum. In dieser URL füge ich also ein LI hinzu. Und im LI füge ich einen H-Ref hinzu. Und für jetzt setzen wir ein Pfundschild. Und wir sollten sagen, ups, ich habe vergessen, dass die Klasse H ref class gleich nav link ist. Und auch in der LI, die ich auch übersprungen habe, müssen wir Klasse sagen und dann nav item sagen. Ich habe zu schnell über den Nav-Link nachgedacht und vergessen, in das Navigationsgerät zu springen. In diesem a sagen wir Link Nummer eins. Und wenn ich das speichere und einlege und die Seite aktualisiere, passiert nichts. Mir wurde klar, als ich den Button eintippte, dass es mir nicht den Schließen-Button gab. Also komme ich wieder hierher. Wenn ich weniger als das Zeichen „Schließen“ eintippe, möchte ich die Span-Klasse mit der Schaltfläche umkreisen. Ich schneide das aus und lasse es runter und füge das Span-Tag innerhalb der Schaltfläche hinzu und wir lassen es gleich dort fallen. Aus irgendeinem Grund, warum ich plötzlich den Abstand nicht richtig bekomme, aber er sollte genau dort stehen. Und die Span-Klasse, als ich auch bemerkte, dass ich Zusammenbruch falsch buchstabierte, sagte ich Collage. Das ist COLS LAP chaotisch. Wenn ich diese beiden Dinge mache. Und ich speichere es auf Pops Link Nummer eins. Lassen Sie uns die Größe des Browsers ändern und prüfen, ob das mobile Menü ebenfalls angezeigt wird. Also hole ich mir meinen Browser. Und sobald es unter die Größe trifft, wird es dieses Medium treffen und sich einem mobilen Menü zuwenden. Beachten Sie auch, dass sich der Typ in der Mitte der Seite befindet und die Navigation auf der rechten Seite weit vorbei ist. liegt daran, dass diese MS Auto für ein paar Dinge den Rand links sagt, aber auf die neue Art, Code in Bootstrap zu schreiben, repräsentiert S den linken und englischen und den Start-Schrägstrich auf Arabisch, damit dieses MS-Auto. Wenn ich es für 1 Sekunde herausnehme, landet meine Navigation auf der linken Seite, direkt neben John Smith Designs. Ich wollte es auf der rechten Seite. MS. Auto bewegt es also im Wesentlichen von links nach rechts. Und wenn Sie ein Araber sind, bewegt sich das von rechts nach links oder vom Anfang in die andere Richtung. Was macht das Textzentrum, wenn ich das herausnehme und speichere, und lege ich es ab. Beachten Sie, wie die Wörter und Sie dies in Ihrem Design haben möchten. Link Nummer 1 wird direkt unter John Smith Designs angezeigt. Ich bevorzuge es in der Mitte für mein Design. Und denken Sie daran, wenn es um ein mobiles Design geht, innerhalb von Chrome inspizieren. Es ist echt klein. Also noch einmal bevorzuge ich es eher in der Mitte der Seite, aber es liegt an dir. Für mein Design. Ich werde es weiterhin Tech Center sagen. Jetzt sagt Text Center im Wesentlichen alles von der mobilen APP zum Tight aus. Aber wenn wir das mobile Design verlassen, befindet sich dieser Link in einer eigenen kleinen Zelle. Dabei bleibt das Tech-Center umstritten, weil sich alles von alleine nach rechts bewegt. Wie auch immer, ich werde das speichern, um sicherzustellen, dass ich es richtig habe. Was als Nächstes mache, ist, dass ich drei Navigationsstücke hinzufügen möchte. Also diesen Navigationsgegenstand, den ich duplizieren werde, werde ich nav item sagen. Aus irgendeinem Grund stehen meine Tabs nicht perfekt an. Ich weiß nicht, was los ist. Nein, ich möchte zurück. Jedenfalls bekomme ich aus irgendeinem Grund aus irgendeinem Grund keine perfekten Tabs. Es ist sowieso alles falsch ausgerichtet, keine große Sache. Auf diese Weise geht's mir total gut. also in diesem Bereich Lassen Sie es mich also in diesem Bereich kopieren und ablegen. Und jetzt habe ich Link eins. Und wenn ich Link Nummer 2 sage, Link Nummer drei. Jetzt habe ich Link eins, Link zwei und verbinde drei. Ich werde dies auf Portfolio und Kontakt ändern. Also hier drin werde ich sagen, ich Portfolio sagen werde. Und ich sage „Kontakt“. Wenn ich Kontakt richtig buchstabieren kann. Und danach werde ich sparen, um sicherzustellen, dass es auftaucht. Und ich füge die href hinzu, weil ich diese Indexdatei sowieso kopieren und einfügen werde. Also werde ich diese H-Referenz ändern und über HTML, Portfolio, Dot-HTML und Kontakt HTML sprechen. Wenn ich das speichere, klicke ich nicht. Aber ich hatte Rahway mit der Maus drüber. Sie können unten in Chrome sehen, es heißt über Portfolio und Kontakt. Diese sollen auch in Zukunft gehen. Wenn ich diese Seite für die About-Seite, die Portfolio-Seite und die Kontaktseite dupliziere . 6. Das the hinzufügen: Wenn ich das letzte Mal tun muss, fügen Sie das Logo zu John Smith Designs hinzu. Ich habe das Bild hinzugefügt, wenn Sie meine Version verwenden möchten oder Sie können das gewünschte Logo in Ihrem Projekt verwenden. Ich erstelle einen neuen Ordner und sage Bilder. Und darin komme ich zu meinem anderen Ordner und hole mir meinen Bilderordner und finde den John Smith-Titel SVG. Ich benutze SVGs, weil es sich um Pixelliste handelt. Sie sind im Wesentlichen Vektordateien online. Und ich füge auch die KI-Datei für den Fall ein, dass ich etwas in meinem Webprojekt ändern möchte . Ich bringe John Smith herein. Da ist es. John Smith entwirft. Und hier drin komme ich wieder an die Spitze. Und lasst uns den Ort finden, an dem eine Klasse Navbar-Marke John Smith entwirft. Ich bringe das Bild mit. Also werde ich sagen, ich schneide das ab, ich bringe es in einer Sekunde zurück. Ich sage IMG SRC und sage Punktschrägstriche. Und ich will John Smith Titel. Nun, für mein Design werde ich auch sagen, mit 225 und die Höhe wird 76 sein. Wenn Sie Ihr eigenes Design-Logo erstellen, achten Sie auf Ihre Breite und Höhe proportional zu Ihrem Design. Und dann werde ich alt sagen, und ich werde Logo für John Smith sagen, Design, Plural Design oder habe am Ende das S genau dort bekommen. Und nach diesem Bild werde ich es schließen, weil sich die Bilder selbst schließen. Und was ich auch darin machen möchte, ein Tag ist, dass ich gerne Informationen zu sagen habe, was ist dieser Link? Also sage ich „Span Class“. Und hier drin steht das D in Bootstrap zur Anzeige. Ich sage „Keine anzeigen“. Und ich füge John Smith-Designs ein. Ich mag es, dass tatsächlicher Text in meinem Code angezeigt wird, aber nicht visuell auf dem Bildschirm, um das Bild abzugrenzen. Wenn ich das also speichere und hierher zurückkomme, bekomme ich jetzt John Smith Designs. Und dann mag ich auch an Bootstrap, wenn du es dir ansiehst, sitzt der Text nicht nach rechts oder unten nach unten, entschuldige mich, oder oben oben. Aber es sitzt eher als Basislinie in der Mitte. Für eine ziemlich coole Design-Ästhetik. Großartig. Wir haben jetzt unsere Navigation erledigt, und jetzt möchte ich als Nächstes diese Heldengrafik innerhalb meiner Homepage erstellen. 7. Die hero einrichten: Süß. Jetzt, da wir unsere Navigation erledigt haben, ist es an der Zeit mehr von dem Inneren dieser Indexseite zu gestalten. Ich werde an der Navigation vorbei kommen und direkt zwischen HelloWorld im div werde ich das Wort main sagen, da dies der Hauptinhalt unserer Seite ist. Hier drin sage ich Header. Und drinnen werde ich ein paar Dinge hinzufügen. Ich füge ein div hinzu und schließe dieses div. Und dann füge ich in diesem Div das eine hinzu. Was ich tun will, lass mich das hier rein lassen. Ist das ein paar Dinge abgegrenzt. Erstens ist der Hauptinhalt unserer Seite. Auch der Header beschreibt den Titel unserer Seite. Eine, die ich auch machen werde, ist, dass ich hier ein großes Bild machen werde, buchstäblich ein großes Foto. Ich füge ein Farb-Overlay hinzu, das genau hier dieses div sein wird. Und der Text ist kein Einblick in ihn. Was ich also tun kann, ist, dass ich mit einem Bild beginne. Wenn ich also zurück zu meinem Finder komme und die bereitgestellten Bilder habe, hole ich das Bild von meinem anderen Bildschirm. Was ich tun werde, ist, dass ich dieses Indexbild ziehe, sieht so aus. Ich werde dieses Bild oben über die Seite stellen. Also möchte ich tun, ist in diesem Header, ich werde sagen, dass Stil gleich Hintergrund, Bindestrich, Bild, Doppelpunkt und URL sagt. Und hier werde ich das Bild platzieren. Ich sage URL, einfache Anführungszeichen, Punkt, Schrägstriche und Indexbild. Jetzt wird das standardmäßig nicht viel bewirken, es wird einfach so aussehen. Es wird seinen Elternteil füllen, was in Ordnung ist, weil der Text gerade den Platz ausfüllt. Was ich tun möchte, ist, dass ich das auf der Seite etwas größer machen möchte. Also los zum CSS, wir gehen, was ich hier machen werde, ist, dass ich einen Header hinzufüge. Ich sage Header, HA DR. Und dann werde ich im Header Hintergrund Doppelpunkt sagen. Keine Wiederholung. Und dann zentrieren und zentrieren Sie sich, um sicherzustellen, dass es sich in diesem Design befindet. Danach werde ich die Hintergrundgröße sagen. Und ich sage Deckung. Der Grund, warum ich Cover gerne verwende, ist, dass es den Platz enthält, egal in welcher Größe des Browsers. Und da ich weiß, dass dieser Header eine Änderung der Textfarbe erfordert, sage ich, dass die Farbe weiß ist. Speichern, aktualisieren. Und da ist es. Sie können also feststellen, dass es in den Raum dieses Textes passt. Wenn ich etwas tiefer auf dem Bildschirm sein wollte, füge ich eine Farbüberlagerung hinzu und das bestimmt die Größe in diesem Design. Was ich also tun werde, ist in diesem Index, in diesem Div werde ich Klasse sagen. Ich kann den Unterricht richtig buchstabieren. Ich sage „Color Overlay“. Für dein Design. Möglicherweise möchten Sie eine Farbe , die Ihnen überlassen ist, wie Sie das erreichen möchten. In der Farbüberlagerung. Ich komme zurück zum CSS. Und ich sage Color Overlay-Periode mit einem Klassennamen. Und ich scrolle nach oben. Und diese Farbüberlagerung wird ein paar Dinge sagen. Zuerst wollte ich die Hintergrundfarbe diktieren. Also sage ich Hintergrundfarbe, und ich möchte ihm einen RGB A geben. Der Grund, warum ich das a verwende, ist für Alpha. Also sage ich RGBA. Und dieses Design werde ich sagen 0 Komma 0 Komma 0.4. Und wenn ich das speichere, merke ich, wie es das Bild ein wenig verdunkelt. Ziemlich cool, aber es lässt das immer noch nicht etwas tiefer fallen. Was ich also machen will, ist in dieser Farbüberlagerung, ich sage „Min Höhe“. Der Grund, warum ich min-height verwende, ist in dem Fall, dass ich hier viel Inhalt einlege. Dies kann sich über die Mindesthöhe von 60 vertikalen Höhe hinaus erstrecken. Wenn ich das speichere, bekomme ich jetzt das Design, das in den Raum passt. Denken Sie jetzt daran, ob ich den Browser etwas größer hätte. Beachten Sie, wie das Bild je nach Browsergröße inkrementell größer ist. Das einzige, was ich jedoch beheben möchte, ist, dass es ein bisschen zu groß für ein mobiles Design ist. Also werde ich eine sofortige Abfrage schreiben, um dies zu beheben. Was ich also tun möchte, ist, wenn ich es nach der Farbüberlagerung dahin zurückbringe, sage ich bei Medien und verwende die Haltepunkte in Bootstrap 5, ich werde sagen maximale Breite, Doppelpunkt 767,98 px. Öffne und schließe die Klammern. Und jetzt wird sich das ändern, wenn es unter 767,98 Pixel liegt, was im Wesentlichen 766 oder 767 entspricht. Wie auch immer, ich werde hier Farbüberlagerung sagen. Und ich werde die Min-Höhe von 60 auf 30 ändern. Also sage ich min-height, ich sage 30, vertikale Höhe. Was das macht, und ich bekomme ein bisschen mehr Platz. Es ist nur ein bisschen atmen auf der Seite ist jetzt und ich aktualisiere diese Seite, wenn ich unter eine Größe von 767,98 Pixeln gehe, wird sie einfach so größer werden. Jetzt werden wir offensichtlich nie ein Design einer mobilen Site haben , die diese Art von rechteckig ist. In Wirklichkeit wird es aussehen, wenn ich das ein bisschen größer bringe und zu Inspect gehe und es hier fallen lasse. Jetzt passt dieses Design viel besser in diesen vorgesehenen Raum, also ist es nicht super groß. Wenn ich 60 hier hatte, als ich das vor ein paar Tagen abgebildet habe, fühlte es sich einfach an, dass dies auf einer mobilen Seite einfach viel zu groß war. Da geht es. Für mich nahm es also zu viel Platz ein und ich wollte mehr von diesem rechteckigen Design. So ging es von 60 auf 30. Und es passt jetzt in diesen Raum. Perfekt, naja, fast perfekt. Hallo Welt sitzt oben links. Aber was ich tun möchte, ist, dass ich es in Bootstrap 5 in die Mitte der Seite Q Flex verschieben möchte. 8. Den hero mit Flex zentrieren: Bootstrap 5 hat eine Flex-Box, die direkt in das Framework integriert ist. Wenn ich zurück zu Bootstrap 5 und wenn ich Flex eintippe, ist es da. Der Fluss ermöglicht es uns also, unseren Designmuskel zu beugen. Das ist wirklich cool und ich liebe Flex immer mehr. Wenn ich es schaffe, kann ich sagen: Hey, ich bin ein Flexbox-Container. Das ist großartig. Und wenn ich die Flexbox verwende, möchte ich, wenn ich die Seite nach unten scrolle, suche ich, den Inhalt nicht nach links und nicht nach rechts zu rechtfertigen . Aber ich möchte es genau in die Mitte legen. Ich möchte Hello World direkt ins Zentrum bringen. Middles wollen es in die Mitte bewegen, aber auch vertikal zentrieren. Und der Grund, warum wir dies tun können, ist, dass wir eine Höhe oder in diesem Fall eine Mindesthöhe festlegen . Wenn ich es tun will, mache ich zwei Dinge. Ich verschiebe es in die Mitte. Und das leistungsstarke Werkzeug oder Flexes, ich kann die Gegenstände genau hier in der Mitte ausrichten. Dies ist alles in Bootstrap 5 beschrieben und Sie können wählen, was Sie verwenden möchten. Und wenn Sie es sich genau hier ansehen, beachten Sie, dass sie das Kleine, das Medium, das Große und das XL haben . Wenn Sie einen beliebigen Code in Bootstrap 5 schreiben, können Sie den SM zwischen den Begründung des Inhalts starten und zentrieren zwischen gleichmäßig und mittlerem, großem XL schreiben. Das bedeutet, dass Sie Haltepunkte setzen können, um dies zu tun. Sie möchten entweder ganz auf der ganzen Linie oder nur teilweise auf der ganzen Linie machen. Lass mich sie damit meinen. Nun, ich werde hier zurück zum Index und zu einer HelloWorld kommen. Bringen wir es zurück. Wir können sowohl unseren Code als auch Chrome sehen. Und in diesem Color Overlay werde ich d flex sagen, um es als Flexbox einzurichten. Und ich werde sagen, das Content-Center rechtfertigen. Was das tun wird, wird eine Reihe von Phi senden, wird den Inhalt auf alles zentrieren. Beginnend mit dem mobilen Design aktualisiere ich die Seite Hello World. Sagen wir also, ich möchte nicht, dass dies geschieht, außer nur an einem bestimmten Haltepunkt. Wenn wir zu Flex zurückkehren, die das Inhaltscenter rechtfertigen, beachten Sie, wie wir sagen können: Weißt du was, ich will es nicht. Wo wenn ich diese linke Seite wieder will, es mit dem Anfang an. Sagen wir also, ich sage, weißt du was, rechtfertigen wir uns hier unten an. Ich hole mir den Start der Rechtfertigung der Medien. Was also passieren wird, ist, wenn ich dies hinzufüge, wird das Rechtfertigkeits-Content-Center zu Designzwecken in der Mitte des Handys und dem kleinen Akteur stehen. Lasst uns groß machen. Also das Handy, das Kleine und das Medium werden alle zentriert und das große, wir gehen zurück zum Start-Schrägstrich links. Wenn ich mir das hier anschaue, merke, wie es auf der linken Seite ist, denn beim Großen oder Größeren ging es zurück zum linken Schrägstrich. Wenn ich die Größe meines Browsers ändere, werden wir einen großen erreichen, wir werden in Kürze auf das XML klicken. Und das große, ich vergesse immer, dass es ein Double XL in Bootstrap 5 gibt. Und jetzt, wenn ich hier unter ein großes fällt, wird das Medium dieses reaktionsschnelle mobile Design einbringen. Und es wird die Hallo Welt ins Zentrum bringen, weil wir gesagt haben, dass alles von mobilen APP zentriert ist, bis Sie die große erreichen und dann wieder nach links gehen. Wenn ich das also genau hier herausnehme, aktualisiere die Seite und stoße darauf, wird es auf der Seite zentriert, egal welcher Haltepunkt ist, weil es zuerst mobil ist. Jetzt, da wir das Rechtfertigkeits-Content-Center haben, wonach ich suche, wenn ich hier nach unten scrolle, ist ein Einzelposten. Und das gibt mir die Möglichkeit, dass ich Gegenstände auch an der Mitte ausrichten möchte. Was ich also tun werde, ist Elemente ausrichten Center wird vertikal in die Mitte gehen , die Seite aktualisieren und ablegen. Genau das möchte ich haben. Offensichtlich wird dies keine normale Browsergröße sein. Das wollte ich tun. Hello World in der Mitte der Seite. Dies ist jetzt perfekt zentriert, oben und unten, links und rechts. Dank Elemente ausrichten zentrieren und rechtfertigen Inhaltscenter. Und wieder mit Bootstrap 5 Baseline und Stretch, wenn ich hierher zurückgehe gibt es alle Haltepunkte in Start, End, Center, . Die fünf Optionen können Sie hier sehen. Und es gibt kleine, mittlere, große XL, n Double XL. Das ist die Macht, die sagt, dass ich es vielleicht nicht in der Mitte will. Sobald ich eine bestimmte Größe erreicht habe, möchte ich vielleicht die Baseline. Also weißt du was, sagen wir, groß wird Baseline bekommen. Ich kopiere es rein. Und jetzt trifft die Baseline, bis ich unter die Größe komme. Und jetzt geht es zurück in die Mitte, da das Align Items Center zuerst mobil ist. Für dieses Projekt richten Amine Elemente direkt in der Mitte über alle Größen aus. Also nehme ich es raus und klicke auf „Speichern“. Und jetzt, egal mit welcher Größe ich arbeite, es wird immer mitten in diesem Design sein und ziemlich gut aussehen. Lasst uns weitermachen. 9. X-Achse und A-Achsen: Für diesen nächsten Inhaltsbereich möchte ich einen Abschnitt in der Mitte dieser Seite erstellen, der nicht zu breit ist. Dies ist also eines der wenigen Dinge, die ich baue, das außerhalb des Geltungsbereichs von Bootstrap 5 liegt, aber ich benutze es oft. Und was es ist, ich nenne es den Single Call. Und der einzelne Anruf befindet sich im Container und dehnt sich nur auf eine maximale Breite aus. In meinem benutzerdefinierten Bereich. Was ich tun möchte, ist nach der Farbüberlagerung, füge ich einen einzigen Anruf hinzu und sage einfach einen einzigen Anruf. Was das tun wird, ist, dass ich im einzelnen Anruf sagen werde, mach es zur maximalen Breite. Und hier drin von 750 Pixeln. Der Grund, warum die 750-Pixel-Regel verwendet wird, ist, dass sie breit genug ist, um lesbar zu sein, aber nicht zu breit, was die Augenbelastung auf der Seite verursacht. Dieser Container ist fantastisch, aber er ist fast zu breit für eine einzelne Spalte. abgesehen möchte ich die Haltepunkte immer noch nutzen, wenn es ins Spiel kommt. Ich möchte also sicherstellen, dass es so gut wie möglich fließt. Was ich als nächstes tun möchte, ist, den einzelnen Anruf anzuwenden und dann auch den Container in das Design einzubringen. Was ich also tun werde, ist, dass ich in meiner Indexdatei in diesem Hauptabschnitt sagen werde, aber nach dem Header werde ich den einzelnen Aufruf der Div-Klasse sagen. Nun beachte, ich habe das Meer kapitalisiert und gerufen, um das Wort Call abzugrenzen. Nach einem einmaligen Anruf. Ich sage „M x auto“. Und lasst uns über den Abstand sprechen. Wenn wir uns das Top hier oben ansehen, benutzen wir das M, S Auto. Das ist für den Anfang oder die linke Seite. In einem englisch geschriebenen Design heißt das x auto beide Seiten, Rand X wie in der x-Achse von Start und Ende oder links und rechts. Das Auto, das im Wesentlichen in die Mitte der Seite legt. Wenn ich das dann schließe und auf Test trete, lassen Sie es uns einlassen. Und jetzt sitzt das Wort Test ungefähr in der Mitte der Seite auf dieser 750 Pixel Größe. Wenn wir auf unser Design eingehen, fügen wir einfach eine Hintergrundfarbe hinzu. Und wir bringen einfach gelb, grün ein. Das sollte wirklich interessant sein. Beachten Sie jetzt, dass dies weit ist, warum möchte ich lesen? Das ist alles, was ich tun wollte, ist mitten auf der Seite. Und wenn wir zurückkommen und das Emax Auto herausnehmen und sparen, wird das einfach auf der linken Seite sitzen. Das will ich nicht. Ich möchte das MX Auto in diesem Design und etwas anderes zurückbringen. Das liegt ganz in der Nähe dieses Designs, fast zu nah. Also möchte ich diesem Design auch etwas Abstand hinzufügen. Also haben wir das m x, x bereits für links und rechts benutzt . Aber jetzt möchte ich mich auf den oberen und den unteren Bereich konzentrieren. Wenn die X-Achse überquert, geht die Y-Achse auf und ab. Da möchte ich, dass es oben und unten gleichmäßig auf allen Seiten ist. Ich schätze nicht alle Seiten, sondern die beiden Seiten, oben und unten. Ich werde sagen m, y. Und ich kann sagen, dass MEIN durch 51 ein kleiner zusätzlicher Raum ist , der zu klein ist, bis ein bisschen weiter, drei noch etwas weiter, um ein bisschen weiter zu springen, N5, Springen am weitesten unten auf der Seite, Es ist unabhängig von seinem übergeordneten Element in Bezug auf den Abstand, es gibt einen unteren Rand. Wenn wir also den Inspect-Editor ausführen, beachten Sie, dass das div den oberen und unteren Rand genau dort hat. So will ich es haben, ist auf der Straße. Ich möchte den gleichmäßigen Abstand oben und unten dieses Designs. Was wir also bekommen, ist, dass die X-Achse automatisch oder gleich links und rechts ist. Und wir kriegen auch die MY 5. Jetzt ist hier das Ding. Das sieht auf dieser Seite gut aus. Aber wie wir im mobilen Design sehen, stößt dieser Worttest bis zum Rand der Seite Q, dem Container für den automatischen Abstand im Design. Wenn wir also den Container-Div-Klassencontainer hinzufügen, schließen wir ihn und haben das Wort Test dort abgelegt. Ich habe versprochen, dass die grüne Farbe in ein paar Minuten verschwinden wird. Also wenn ich das Wort Test da drin ablege und ich denke, da geht es. Jetzt schau, was passiert. Beachten Sie, dass der Rand des Designs ausgelöst wurde. Der Behälter enthält natürliche Marge und Polsterungen, die sich auf der ganzen Linie befinden. Überall wo ich das Wort Container hinstelle. Dadurch wurde das Wort Container benutzt, um das Wort test zu enthalten. Ziemlich großartig. Ich kann die Leistung des Containers nutzen. Es wird also nicht wirklich beeinflusst, bis er eine kleinere und kleinere Größe erreicht hat und die Größe erreicht. Beachten Sie, dass sich das Wort Test nicht in der Nähe des Seitenrandes befindet. Dieser Container ist in dieser grünen Box. Wenn wir also das Gelbgrün herausnehmen, sitzt das Wort Test daneben sitzt das Wort Test daneben und die Haltepunkte treten unter 750 Pixel ein. Ziemlich cool. Jetzt mach als Nächstes möchte ich den Text in das eigentliche Feld einfügen. 10. Text und Leader: Das Wort Test tut also nicht viel für mich. Ich möchte hier eigentlich etwas Text schreiben. Und da es sich eher um Innendekoration und Designfirma handelt, werde ich eine Art Titel innerhalb des Wortes Test machen. Da wir den H1 bereits benutzt haben, ist dies eher ein H2. Ich sollte es tun ist H2. Ich benutze den Satz, alle, lass dein Zimmer fantastisch aussehen. Und wenn ich es runterlasse und speichere, ist es da. Jetzt für den H2 möchte ich es in diesem Fall in der Mitte der Seite haben. Wenn ich wollte, dass jeder H2 zentriert wird, würde ich in die Gewohnheit gehen und H2 Center sagen. In diesem Fall sage ich H zum Unterricht, und wir sagen Text Center. Auch hier ist dies die Kraft des Tech-Zentrierungsteils, ist, dass ich die Fähigkeit habe, Tech Center zu sagen, oder ich könnte Text M sagen oder werde LG Center gehen. Und was passieren wird, ist, wenn wir gehen, Whoops. Ich wollte „Start“ sagen. Da sind wir los. Start ist gleich links. Es bringt es also zurück auf die linke Seite. Alles oben und das große und dann unter dem großen Rückschlag auf Handy zuerst oder Zentrierung. Wenn ich also wieder hierher komme, wenn ich zurück und zurück komme, geht es da hin. Jetzt geht der Text zurück in die Mitte im Medium oder kleiner. Und wir wissen, dass das Medium in Gang kommt, weil der mobile Teil ins Spiel kommt. Alles sieht fantastisch aus. Jetzt möchte ich es behalten Tech Center damit ich den Text entfernen LG start. In diesem Fall. Sobald ich gespeichert habe, befindet es sich wieder in der Mitte der Seite. Nach dem H2 füge ich einen Lead hinzu. Der Lead ist, wo Sie einen öffnenden Absatz in Ihrem Design haben können. Da ich keinen Text habe, bin ich ein Bring Lorem Ipsum in dieses Design. Also werde ich in diesem Absatz die p-Klassenführung sagen. Und ich habe eine Erweiterung in VS Code eingebaut. Oder wenn ich anfange Lorem zu tippen, kann ich sagen, senke sie und sage sie einfach Laura. 25, drücken Sie die Eingabetaste. Und es setzt 25 Worte ein. Wenn ich das speichere, ist es da. Da ist mein Lorem Ipsum-Text genau dort. Das Blei macht den Typ also größer und fügt standardmäßig ein dünneres Gewicht hinzu. Werfen wir einen Blick auf das im Vergleich zum Standard-Absatzentwurf. Und ich kann Lorem eintippen, es fallen lassen, speichern. Und beachte, wie der Lead ein wenig anders aussieht als der ehrenvolle Absatz innerhalb von Bootstrap. Für Designzwecke habe ich gerne drei, also werde ich einen weiteren Absatz eintragen. Und wir können nur die Unterschiede erkennen. Ich drücke die Return-Taste, nur um die drei Teile zu trennen. Und jetzt habe ich drei Textstücke. Beachten Sie auch, dass der Abstand über diesem H2 und unter diesem H2 genau gleich ist. Ich benutze gerne das Wort Blei, das sich innerhalb von Bootstrap 5 befindet, um nur wenig Gewicht zu ziehen, damit dein Auge geht, Hey, H2 zuerst, Leed Second und dann den normalen Absatz, dritter, vierter und so weiter und so weiter. 11. Die footer und footer: Also haben wir die Spitze des Designs gemacht Navigation und den Helden. Wir haben auch einen Text in unserem Hauptbereich hinzugefügt. Und der letzte Schritt besteht darin, dem Design ganz unten die Fußzeile hinzuzufügen. Also will ich nach dem Haupt gehen, ich füge Fußzeile hinzu. Ich sage „Footer“. Lass es rein. Schreiben wir einfach das Wort Test für jetzt , um sicherzustellen, dass es unten auf der Seite steht. Und da ist es. Was ich mit diesem Design machen wollte, um sicherzustellen, dass ich einen Abstand innerhalb dieser Fußzeile habe. Und ich möchte dem Design auch etwas Farbgebung hinzufügen. Also füge ich der Fußzeile eine Hintergrundfarbe hinzu. Innerhalb meiner Gewohnheit bin ich beigetreten, habe die Fußzeile nach all meinem Code und vor die Medienabfrage gestellt. Also sage ich Footer. Und hier drin, nicht Footer, p, nur Fußzeile. Und öffne und schließe geschweifte Klammern. Und ich sage Hintergrundfarbe. Und welche Farbe ich verwenden werde, entscheide ich mich, ist nur ein dunkelgrau. Also sage ich Hintergrundfarbe und sage Pfundzeichen-Schrägstrich Hashtag 333. Das gibt mir einen dunkelbraunen Schrägstrich, eigentlich dunkelgrau, keine braune Farbe. Sah nur 1 Sekunde lang etwas braun auf dem Bildschirm aus. Perfekt. Ich habe das Wort Test, es ist braun. Wir haben in der Vergangenheit einige Ränder in unserem Design hinzugefügt, aber ich möchte jetzt Polsterung für meinen Abstand hinzufügen. Wenn wir also zum Index zurückkehren, verwenden wir den Emax in diesem Design und auch oben. Wir verwenden die MS. M ist für Marge, S ist für Start und Auto. Was ich als nächstes wollte, ist, dass ich keine Marge verwenden möchte, ich möchte Polsterung verwenden. Mit diesem Design in meiner Fußzeile möchte ich also Klasse sagen. Hier gehen wir und sagen Padding y, aber oben und unten und geben es maximal fünf. Und wenn ich das speichere und aktualisiere, bekomme ich jetzt viel mehr Abstand in diesem Design. Was ich als Nächstes tun möchte, ist, dass ich das Wort Test in die Mitte des Bildschirms verschieben möchte. Und ich werde den Test ändern und unten auf meiner Seite Symbole für soziale Medien hinzufügen. Was ich also machen werde, ist, dass ich div Loops sagen werde. Anstatt das zu tun, werde ich einfach alles los. Ich sage Div-Klasse. Und da ich auf dieser Seite unten Symbole hinzufügen werde, ändere ich den Flex von einfachen Spalten, wie wir hier oben verwendet haben, zwei Zeilen unten für eine Reihe von Symbolen in Bootstrap 5 flex. Also werde ich sagen, div class ist gleich d flex, flex row. Und da ich möchte, dass es in der Mitte der Seite steht, sage ich Rechtfertigung Content Center. Und wenn ich das schließe, jedes einzelne Kind. Wenn ich also div sage und wir sagen test, und wenn ich das kopiere, werden diese jetzt zu Zeilen. Also wenn ich Test sage, test2 und test3. Was jetzt auch einfacher ist, lassen Sie uns die Schriftfarbe auch so gestalten, dass sie lesbar ist. wollte ich später hinzufügen, aber da wir sowieso hier sind, werden wir Farbe Weiß sagen. Da sind wir los. Also können test, test2 und test3 alle innerhalb der Flex-Reihe verlaufen. Lassen Sie uns auch nach dem Flusssymbol suchen. Also mache ich eine Google-Suche und sage keine Flex-Symbole. Wie wär's mit den Bootstrap-Icons? Wenn wir also nach den Bootstrap-Symbolen suchen, wird es als Icons kommen getbootstrap.com. Und das ist seine Umkehrung 1.4 gekommen. Es gibt mehr als 60 Wettersymbole. Großartig. Aber ich suche nach Social-Media-Symbolen und beginne zuerst mit dem Twitter-Symbol. Was ich also machen möchte, ist, dass ich diese Icons nach unten scrollen möchte und durch sie alle scrollen kann. Oder ich kann einfach anfangen zu tippen, um zu filtern. Und ich tippe Twitter und da ist es. Also das Twitter-Symbol, ich kann diese HTML-Datei kopieren und kopieren. Und was ich tun möchte, ist wieder zu Visual Studio Code zu kommen. Und im Index werde ich diese drei Divs herausnehmen und ich werde sie haben, lass uns die Entwickler die Zeilen haben. Ich füge das a-Tag als Zeile hinzu. Also eine HREF, hier fügen Sie Ihre Twitter-URL hinzu, wenn Sie eine haben. Oder in diesem Fall sage ich einfach Twitter.com. Und innerhalb dieses Tags sollte, sollte sich dort anstellen. Sein drin hier drin, ich werde diese SVG fallen lassen. Svg kommt auch mit einer Breite und Höhe. Und da wir wissen, dass es sich um ein quadratisches Symbol handelt, kann ich dies auf jede Größe ändern, die ich will. Für dieses Design. Ich sage 25 und 25, 25, 25, Save. Werfen wir einen Blick darauf. Hey, oh, naja, das liegt daran, dass die SVG die Farbe des Links berücksichtigt. Und standardmäßig ist die Linkfarbe in Bootstrap 5 blau und dunkelblau. Lassen Sie uns das in Weiß und dann ein cremefarbenes Weiß in diesem Brauch ändern, sage ich Footer. Und dann a, und ändern Sie dann die Link-Farbe in Farbe. Wir sagen zuerst einfach weiß, indem wir es speichern. Jetzt ist es weiß, aber es geht immer noch zu diesem Dunkelblau. Also will ich es tun, ist in der Fußzeile a, ich lasse es runter fallen und sage Footer einen Schwebeweg und ändere es in ein Farb-Pfund-Zeichen. Nicht das kommt normalerweise für mich ein. Nun, wie auch immer, mal sehen, ob ich irgendeine Farbe bekommen kann, um aufzutauchen. Alles klar. Aus dem Photoshop gehen wir es normalerweise, um mir die Farbe zu geben. Probieren wir das mal aus. Lass uns Photoshop auf einem anderen Bildschirm erscheinen. Lass mich eine Sekunde lang ein Weiß probieren. Versuchen wir es mit einem weißen Rauch. Da sind wir los. Mal sehen, ob das funktioniert. Gib mir einfach einen farbigen Visual Studio-Code. Lasst uns speichern, aktualisieren. Und ich liebe diesen weißen Rauch nicht. Also musste ich es in einem Photoshop machen oder einer Ihrer Lieblings-Redakteure ist, wenn ich Photoshop hier rüberbringe, benutze ich es nur, um eine Farbe zu wählen. In Photoshop oder welche Software Sie auch immer für unseren Farbwähler verwenden möchten, kann ich eine Art Farbe wählen, die weiß ist. Also bringe ich nie ein Grau. Und nur so bringt es eine Art Ton mit sich, dieser ist DF, DF und df. Wenn ich den Wechsel von weißem Rauch zu einem Abfall in dieser grauen Farbe minimiere. Jetzt sieht es ein bisschen besser aus. Wir haben eine wechselnde Farbe, damit Sie sehen können, wann Sie sie überrollen. Perfekt, wir haben das A und den Schweben. Ich möchte zurückkommen und es ein bisschen mehr mitbringen. Wir haben Twitter gemacht, damit ich Rollover machen kann, auf Twitter klicken und Twitter auftaucht. Und wenn ich jetzt zurückkomme, kann ich dann nach Instagram gehen oder wie auch immer ich angerufen habe, ich will. In diesem Fall bringe ich zwei Icons mit. Ich habe es zuerst auf Twitter mitgebracht. Jetzt bringe ich Instagram ein, Instagram weg. Auf der Suche nach Instagram, finde es, kopiere die SVG. Also, was ich tun werde, ist danach wieder runter zu kommen, ich sage eine HREF. Komm schon, HREF. Und wir sagen „https colon slash“ -Schrägstrich Instagram.com. Auch hier kannst du dein Instagram-Handle hinzufügen. Ich schließe das a-Tag, ich lasse es runter fallen, ich habe alle Pfade eingerückt und ignoriert. Worauf ich mich konzentriere, ist die Breite von 16 und 16. Ich bleibe gleich bei 25, 25, Save. Und jetzt bekomme ich zwei Icons und sie sind sehr nah beieinander. Ich möchte also noch etwas Polsterung hinzufügen. Jetzt kann ich eine von zwei Möglichkeiten benutzen. Ich kann Instagram auffüllen und von links drücken oder nach links drücken. Oder ich schiebe das Twitter-Symbol weg oder von rechts in Richtung Instagram. Also schaue ich mir Twitter an. Und oben bei Twitter suche ich das A, und ich füge gerne mehr Abstand hinzu. Im Twitter-Bereich sage ich also eine HREF. Und danach werde ich sagen, dass Klasse gleich Padding End ist, und ich sage vier. Es wird einen anklickbaren Bereich haben. Wenn Sie also nicht möchten, dass es anklickbar ist, können Sie es für Marge jederzeit in m ändern. Das EMI wird also gleich bleiben. Aber jetzt habe ich keinen anklickbaren Bereich, also liegt es an Ihnen, wenn Sie einen anklickbaren Platz für Polsterung oder das m für Marge und 4 haben möchten . Der Rand schiebt es also weg und dank des Flex bleibt er jetzt in der Mitte der Seite. Jetzt, da diese Seite fertig ist, werden wir weiter zur About-Seite weitergehen. 12. Die Vorkenntnisse: Ich verstecke Chrome. Und was ich tun möchte, ist, dass ich auf den Index HTML komme und es dupliziere und über Dot-HTML sage. Ich bringe das in mein Design ein und fange an, Stücke herauszuholen, die ich nicht brauche. Ich komme zurück nach Chrome, also vermassele das nicht. Und ja, sie werden auf den ersten Blick gleich aussehen. Also werde ich alles herausnehmen, außer der Navigation und John Smith Designs und der Fußzeile unten. In meinem Bereich werde ich den Index verbergen und den Kunden bei ADUs und der optimierten CSS-Datei auf dem Laufenden halten . Ich scrolle nach unten und suche nach dem Hauptbereich. Das ist auch der Grund, warum ich gerne das Wort main verwende, weil sie sagen können , was ich herausnehmen und was nicht herausgenommen werden soll. Ich werde alles andere herausnehmen, außer dem Haupt- und richtigen Test und Test. Da ist es. Sieht gut aus. Da wir jetzt auf der About-Seite sind, möchte ich, dass die Navigation aktiv bleibt. Und ich kann das tun, indem ich zur Navigation gehe und wo der Klassennav Link steht. Ich sage das Wort „Aktiv“. Was das tun wird, ist, dass es das Wort in eine dunkle Farbe verwandelt um das Wort über Summen sie auf der About-Seite abzugrenzen. Und während wir dabei sind, fügen wir auch das Wort über in unseren Titel unserer Seite hinzu. Wenn ich also meine Zeile 13 nach oben scrolle und nach dem Worttitel suche, dem Worttitel suche, sage ich das Wort über die vertikale Linie und dann wird hallo world dies ändern, sobald wir alle fertig sind. Aber im Moment halten wir es einfach. Und ich sage über HelloWorld. Cool. Wir haben unseren Titel und wir haben das Thema, aktiv zu sein und unsere Navigation. Jetzt ist es an der Zeit, etwas Inhalt einzubringen. Auf dieser Seite „Über“. 13. Über Seiteninhalte mit Schweben und Überflutung: Es ist jetzt an der Zeit, dieser About Page Inhalte hinzuzufügen. Und zusätzlich zu dem Text dazu über Personen, imaginären John Smith, Person, möchte ich ein Bild von John Smith einbringen. Ich hab hier ein Foto. Ich bringe herein, ich bringe das mit. Ich kopiere vom Frontbildschirm und bringe das John Smith Portrait rein. Beachten Sie, dass dieses Design ein quadratisches Design ist. Das wollte ich benutzen. Also bringe ich das Quadrat sowohl als mobiles Design als auch als Desktop, der für die Größenänderung entwickelt wurde. Und so hatte ich das Gefühl, dass das Quadrat für das Design am besten geeignet ist. Es liegt an dir, wie du das erreichen willst. Aber für mein Design verwenden wir das quadratische Symbol, damit das John Smith Portrait irgendwann verwendet wird. Was ich hier machen will, ist in diesem Hauptbereich, wo ist es? Ich werde diesen einzigen Anruf einbringen, Saul, sagen, dass die Div-Klasse gleichbedeutend mit einem einzigen Anruf ist. Und ein paar Dinge, die ich lesen möchte, das MX Auto einbringen und auch ein paar verschiedene Dinge mitbringen möchte. Ich möchte es auf der Seite runterbringen. Also sage ich MY für den Rand oben und unten. Ich sage zwei, weil wir diese Heldengrafik nicht mehr haben. Und ich hatte das Gefühl, als ich es für etwas Größeres entworfen habe, möchte ich MY m d sagen Für was ich damit meine, und wir werden es dir wieder zeigen. Wenn ich das Wort Test sage, beachte, wie das Wort Test auf dieser Seite steht . Das liegt daran, dass es bei einer Vier im Abstand sitzt. Als ich jedoch auf eine mobile Seite komme, mir klar, dass es etwas zu weit weg war, also wird es etwas höher auf dem mobilen Tablet-Schrägstrich klein und mittel oder klein steigen , entschuldigen Sie mich und sagen Sie T2. Deshalb habe ich zwei Vs für gesagt. Es fällt schließlich etwas tiefer ab. Und dann sind wir bereit zu gehen. Perfekt. Das nächste, was ich dann machen möchte, ist, dass ich einen div-Klasse gleich Container hinzufügen möchte, keinen Kontakt. Und stellen Sie sicher, dass das Div geschlossen wird. Und ich möchte noch ein Stück hinzufügen, weil ich diesem Bild einen Float hinzufügen werde. Und Floats müssen versteckt sein, damit ich nicht von der Seite schwebe. In diesem Fall hat Bootstrap 5 etwas namens Overflow versteckt. So kann ich meinen Überlauf auf versteckt ändern, damit sichergestellt wird, dass das Bild auf der Seite bleibt. Es geht nicht vorbei und fließt über das Div. Das Bild wird um den Text schweben und dann anhalten und nicht schweben, sobald wir zu einem mobilen Design kommen. In diesem Fall, in diesem Div-Klassen-Container-Überlauf versteckt, werde ich H1 sagen, sagen Sie über John Smith. Und hier drin sage ich H1. Ich füge einen Lead hinzu. Also p-Klasse führen und bringen Sie unser immer berühmtes Lorem Ipsum mit, indem Sie Lorem eingeben. Und wir sagen 25, er wird zu einem langen Intro. Da ist es. Und wenn ich das aufspare, geht es dort um John Smith. Und wenn wir die Seite hoch und runter gehen, können Sie feststellen, dass es etwas näher kommt und dann werden wir je nach Design weiter voneinander entfernt. Ziemlich cool. Nach diesem Bereich unter diesem P-Abschnitt ich unter diesem P-Abschnitt einen weiteren Absatz des Typs hinzu. Und wir fügen Lorem Ipsum hinzu. Und wir fügen einen weiteren Absatz des Typs hinzu, um anzugeben, wer gut haben wird, wissen Sie was, lassen Sie uns sicherstellen, dass er drei Absätze hat. Also speichern wir es. Und da ist es. Als Nächstes möchte ich ein Bild nach oben rechts bringen. Wenn der Text jedoch nicht so weit unten auf der Seite geht, wollte ich sicherstellen, dass das Bild nicht in die Fußzeile blutet , weil wir etwas namens Float verwenden werden, oder? Was ich also tun werde, ist nach der Führung, ich werde sagen, p open close. Und wenn wir nur selbst Bildquelle sagen, sagen wir Bilder und John Smith Portrait, und wir sagen Alt oder Trip von John Smith. Und wenn ich das schließe, schau was passiert, um Riesen zu erleichtern? Das ist großartig. Aber wenn du darüber nachdenkst, möchte ich nicht, dass es so groß ist, weil ich möchte, dass er klein genug ist, um auf diese rechte Seite zu passen. Also muss ich sicherstellen, dass dieses Bild auch nachfließt, was es tut, aber ich will ein kleineres, wenn es wirklich fließt. Also mache ich ein paar Dinge. Zunächst möchte ich, dass dieses Bild eine maximale Höhe von 300 mal 300 hat. Ich sage, dass Breite gleich 300 ist. Und eine Höhe von 300. Und es sieht ziemlich gut aus. Es gibt riesiges Chillen in dieser Größe genau hier. Was ich als nächstes tun möchte, ist, dass ich ihn in die Mitte positionieren möchte, wenn ich nicht schwebe. Was ich also tun werde, ist, dass ich das Textcenter der Klasse p Class sagen werde. Perfekt. Die ganze Idee ist also, dass er, wenn er nicht auf der rechten Seite hier drüben schwebt, an das Design gebunden ist. Dies ist mehr das, was ich tun möchte, wenn ich auf die mobile Seite gehe. Und da Bootstrap zuerst mobil ist, wollte ich deshalb so aussehen, als ob ich sie treffe, Mobile Framework sieht wirklich gut aus. Wir haben John Smith Entwürfe auf und ab für unsere Navigation über John Smith einen Lead. Und wir haben dieses kleine lächelnde Gesicht in ein Weizenfeld und das ganze Bild und die Sonne auch hinter uns. Also sieht er hier gut aus, aber ich will sie nicht im Zentrum haben. Ich möchte, dass der Text in einem nicht mobilen Design um ihn herum fließt. Also hier ist was wir tun werden. Wir werden diesem Bild ein paar verschiedene Dinge hinzufügen. Innerhalb dieses Bildes werde ich die Quelle nur zur Lesbarkeit herunterlegen. Ich lasse die Breite nach unten fallen, lasse die Höhe fallen und lasse die Alt fallen. Und das lassen wir auch fallen, nur damit wir in der Ausrichtung sind. Was ich als Nächstes machen möchte, ist, dass ich eine Klasse hinzufügen möchte. Also füge ich eine Klasse hinzu und sage float, MD end. Aber ich sorge auch dafür, dass es nicht schwebt, wenn ich klein oder kleiner treffe. Also sage ich nicht schweben und dann MD-Ende schweben. Was also passieren wird, ist, dass das Ende wie das rechte gegen links ist. Nullen, die wir vorher eingegeben haben, stehen also für n Slash richtig. Wenn ich das also speichere, passiert jetzt, wie der Text links von diesem Bild sitzt. Und wenn wir den Überlauf nicht versteckt hatten, tritt hier das Problem auf. Obwohl. Er schwimmt einfach und dann taucht diese Fußzeile in Ihrem Design auf, wenn Sie Ihren About-Sektion schreiben, haben Sie dieses Problem möglicherweise nicht. Sie haben vielleicht genug Text, aber ich habe das für den Fall festgelegt, dass ich ein Problem habe. Bootstrap 5 bietet einen Überlauf, der standardmäßig in seinem Design versteckt ist. Auf diese Weise fängt es den Boden ein. Und das M Y2 oder MY für, fängt in unserem Design die Ober- und Unterseite erfolgreich ein. Einfach so haben wir unsere About-Seite fertig und es sieht ziemlich gut aus. Und wir können testen, um sicherzustellen, dass es funktioniert, indem wir die Seite aktualisieren. Und dann kann ich diesen Knopf drücken. Und er sitzt immer noch in der Mitte des Designs, ohne sich Sorgen zu machen, dass es nach rechts schwebt, weil wir es in einer bestimmten Größe nicht schweben ließen. Es gibt also keinen für den Schwimmer kleiner oder größer. Deshalb habe ich den SSM da reingelegt, um es zu fangen. Und da der Standardwert nicht schwebt, könnte ich sagen, float none und es würde immer noch funktionieren. Aber nur weil für mich der Standard- und das Handy schon keine sind. Also habe ich DSM geschrieben, um sicherzustellen, dass es bei einer bestimmten Größe fängt. Standardmäßig unter dem MD wird es zwischengespeichert, um zu überwachen, was ich nur SM sagen möchte, weil ich weiß, dass es in diesem Augenblick von mittel nach klein geht . 14. Das Raster: Großartig. Wir haben die About-Seite beendet. Als nächstes möchte ich in den Portfoliobereich wechseln. Ich werde diese beiden HelloWorld gerade erst schließen. Ich werde mir ein neues Projekt einfallen lassen. Ich werde das Über duplizieren. Also gehen wir von etwa Copy Two Portfolio aus. Und wenn ich Portfolio richtig tippen kann, bringe es auf meinen Code zurück, ich werde alle zusätzlichen Inhalte loswerden, die ich für meine About-Seite hatte. Wo es also main steht, werde ich das div zu div loswerden und einfach das Wort Test sagen, speichern. Und lasst uns zurückkommen und Portfolio hineinziehen. Perfekt. Jetzt habe ich Portfolio, also werde ich das Wort ein Top aus etwa zwei Portfolios ändern. Und hier oben komme ich an die Spitze, ich ändere das Wort über zwei Portfolios. Nun, für dieses Projekt, was ich in diesem Abschnitt machen will, muss ich auch das Aktive im Portfolio auch aus dem About erstellen. Hier drin scrolle ich nach unten, nehme das Wort aktiv aus dem Wort heraus und lege das Wort aktiv in das Portfolio. Ich aktualisiere die Seite, wir befinden uns auf der Portfolio-Seite und auf der Portfolio-Seite. Wenn wir also zurückblicken, wenn wir auf unsere Homepage zurückkehren, hatten wir wirklich ein Einspalten-Design auf dieser Seite. Und wir hatten ein einspaltiges Design auf der About-Seite im Portfolio. Ich möchte das nicht dreispaltig gestalten, wenn es um den Desktop geht. Ich möchte ein zweispaltiges Design, wenn es um das Tablet-Design geht. Und ich möchte natürlich 100% oder eine volle Spaltenbreite, wenn es um das Handy geht. Die Macht von Bootstrap, das wohl eines der mächtigsten Werkzeuge in seinem Arsenal ist, ist das Netz. Wenn wir zu Instagram gehen, gehen wir zu getbootstrap. Und hier drin gehe ich los, um loszulegen. Und was ich suche, ist das Raster, denn dies ist das leistungsstärkste Tool, das wir in Bootstrap verwenden können. Und das Netz läuft so. Das Raster arbeitet mit einer Reihe und einer Reihe von Spalten. Wenn wir also dreimal in Reihe und Col tippen, erhalten wir ein dreispaltiges Raster. Wenn ich also hier in meinen Hauptbereich komme, gebe ich div class equals row ein. Und es hätte das nahe div fangen sollen. Da geht es. Und danach gebe ich div class ein. Und wir sagen „Anruf“, so wie es hier war. Wenn ich also anrufe, sage ich Spalte 1 und ich dupliziere dies. Zwei, Spalte zwei. Und dann Spalte drei. Wenn ich das speichere und zurück zum Portfolio hallo world komme, habe ich Spalte 1, Spalte 2, Spalte 3. Eine Sache, die ich auch hinzufügen muss, ist, dass ich auch einen Container hinzufügen muss , weil dadurch alle unsere Haltepunkte hinzugefügt werden. Momentan ohne Container bewegt es sich einfach in eine freie Form-Richtung. In diesem Bereich schneide ich die Reihe ab, oder? Whoa, so weit nicht. Komm zurück. Da sind wir los. Und ich füge diesem Design einen Container hinzu. Also sage ich, dass div class gleich Container ist und in meinen Zeilen fallen lässt. Was ich haben möchte, ist perfekt, das passt und diese Allianz Spalte 1, 2, 3. Wenn wir jedoch nur die Spalten eingeben, ist das Problem, dass es nicht innerhalb der Haltepunkte des Containers funktioniert. Beachten Sie noch einmal, wir haben unser Dropdown-Menü für unser mobiles Menü. Wenn Sie gerade mit der Eingabe von Spalten begonnen haben, fügen Sie standardmäßig Spalten hinzu, bis Ihnen der Speicherplatz ausgeht. In Bezug darauf, wie viele Spalten Sie auf der Seite platzieren können. Das Raster arbeitet mit einem 12-Säulen-System. Für mich hat das also keine Haltepunkte, um zu sagen, wohin es gehen will. In Bezug auf ein Raster schreibe ich nur um etwas zu zeigen. Ich sage Col 12. Rufen Sie 12 an, Ende Col 12. Sieh dir an, was passiert, wenn ich neben den Anrufen 12, 12 und 12 tippe . Es fällt auf eine senkrechte Linie. Das liegt daran, dass wir 12 Spalten auf dieser Seite haben. Ich sage für diese erste Spalte, fülle 12 dieser 12 Spalten aus. 12 geteilt durch 12 entspricht 100%. Lass uns was anderes versuchen. Lassen Sie uns einen neuen Haltepunkt hinzufügen, denn gerade in Bootstrap 5 ist dies unsere mobile Größe. Wenn es also auf das Mobile-Framework trifft, werden es immer 12 von 12 Anrufen oder 100% sein. Nehmen wir an, wir haben die mittlere Größe erreicht, die wir wollten, Kosinus 50 Prozent, 50 Prozent. Was ich tun werde, ist, dass ich anrufen werde. Dash AMD und 50 Prozent werden 6 oder 6 dividiert durch 12 gleich 50 Prozent sein. Wenn ich also „Col MD Six“ sage, Col MD sechs, und Col MD sechs ohne doppelten Abstand. Lass mich das aufheben. Lass mich wieder mit dem mobilen Menü anfangen. Lassen Sie mich diese Seite aktualisieren und schauen Sie mir jetzt an, was passiert. Wenn ich das Kleine treffe, treffe ich jetzt das Medium. Beachten Sie, wie es 666 ist. Spalte eins, Spalte zwei, Spalte drei, fällt unten nach unten, da sie über die 12 Spalten hinausgeht. Das ist vollkommen in Ordnung. Und wenn ich weiter auseinander gehe, bleibt es in einer Kapazität von 50 Prozent. Nun, wenn ich groß XL und Double XL gehe, möchte ich ein dreisäuliges Design. Also, was ich tun werde, ist, dass ich LG anrufen werde. Und wenn ich drei Spalten will, ist 12 geteilt durch 3 4. Also werde ich sagen, ups, geh auch zurück nach oben. Ich kopiere das hier. Und so habe ich Handy bei 12, mittel, bei sechs und groß und höher bei vier. Vergessen wir nicht den letzten. Da sind wir los. Jetzt schau was passiert. Jetzt habe ich Spalte eins, Spalte zwei, Spalte drei in vier Spalten. Ich bin jedoch heruntergefallen und komme auf das Medium. Jetzt habe ich 50 Prozent erreicht und jetzt treffe ich 100% oder ich klicke auf ein mobiles Menü. Das Raster hat viele leistungsstarke Tools, aber 12, die ich fast überhaupt nicht benutze, nenne ich es die DOM-Säulen, in denen sie nur alleine dort sitzen. Es erstellt drei gleiche Spalten, aber es ist kein Haltepunkt verbunden. Also kann ich eine ganze Kombination verschiedener Tools verwenden. Aber ich benutze die Kraft des Überschusses ist weg. Aber ich verwende SM, MMD, LG XL und Double XL, um im Wesentlichen die Haltepunkte meiner Kolumne festzulegen. Und so benutze ich den Col Dash, den Call SM. Ich benutze den col md oder wir haben Spalten-Dash-Anzahl von Spalten. Und dann benutze ich den Col Dash LG, um über diese Zahl zu sagen, setze sie alle in diesem Design ein. Und das ist Ihre Wahl, wenn es um ein Raster geht, Sie können jede Kombination verwenden. Der Grund, warum ich mag, wenn sie 12 als meine 12 Spalten verwenden , ist, dass du diese durch 2, drei oder sechs teilen kannst. Und natürlich 12, was Ihnen eine große Flexibilität gibt. Jetzt müssen Sie nicht nur diese Zahlen verwenden wenn Sie ein wenig andere Designs erstellen möchten. Nehmen wir an, wir wollen, dass die mittlere Spalte wirklich, sehr groß und die anderen beiden wirklich, sehr klein sind. Solange ich 12 bin, bin ich in Form. Nehmen wir an, wir wollen die Mitte 110 schaffen. Und dann schaffen wir die Top 11. Und dieser 1110 plus eins plus eins ist gleich 12. Wenn ich das speichere und ich zurückkomme, wenn ich zurück zu diesem mittleren Design gehe. Jetzt werden wir sehen, und der Text ist so klein. Bringen wir das zurück. Es ist so eine kleine Spalte, dass wir die erste Spalte nicht lesen können. Sagen wir einfach zwei. Wir machen acht. Und dann noch zwei. Da sind wir los. Beachten Sie, wie viel kleiner die erste Spalte ist. Spalte zwei ist so viel breiter. Und Spalte 3 ist wieder so klein wie Spalte eins. Solange sich meine Zahlen auf 12 summieren. Ich kann auf dieses Design eingehen. Natürlich will ich sie alle gleich für mein Design haben. Also gehe ich zurück zu 666, aber das ist die Macht des Bootstrap-Grids. Der Grund, warum ich ein Raster verwende, ist, dass ich es reparieren möchte. Der Flex war mehr dazu, Dinge zu positionieren, die bestimmte Positionen innerhalb eines Raums haben. Und das Raster wurde entwickelt, um Dinge einheitlich zu organisieren oder eine Seitenleiste für den Hauptinhalt zu erstellen. Ich habe wirklich ganz am Anfang mit einem Raster für die meisten meiner Projekte angefangen. Und dieses Projekt hier ist keine Ausnahme. Jetzt haben wir unser Raster an Ort und Stelle. Spalte eins, Spalte zwei, Spalte drei, Lassen Sie uns ein paar Karten einbringen und diesem Portfolio Inhalte hinzufügen. 15. Bootstrap 5-Karten: Was ich als Nächstes machen möchte, ist, dass ich ein paar Karten mitbringen möchte. Und wie die Karten aussehen ist, wenn wir zum Inhalt oder im Komponentenbereich kommen , suche ich nach der Wortkarte. Und alles, was ein Warenkorb ist, ist, dass er im Grunde einen flexiblen und erweiterbaren Content-Container mit mehreren Varianten und Optionen bietet . Wer das ist eine wirklich, wirklich vage Definition. Wie eine Karte aussieht, ist dieses Bild oben, Kartentitel etwas Text und ein Button. Lasst uns weitermachen und das bauen. Und das Beste an Karten ist, dass sie den Raum ihres Elternteils ausfüllen. Das bedeutet, dass die Karten basierend auf der Größe angepasst werden. Das Raster. Das Beispiel in getboostrap ist gut, aber sie setzen einen Inline-Stil auf eine Breite von 18 RAM. Und das ist in Ordnung, aber ich möchte etwas anderes machen. Ich nehme die Karten und gehe, okay, lasst uns bauen, es füllt den Platz des Elternteils. Wie schreiben wir die Karte? Wenn wir also zu Spalte 1 kommen, nehme ich die erste Spalte heraus. Und was ich tun werde, ist, dass ich sagen werde div class equals card. Öffne und schließe den Einkaufswagen. Lassen Sie mich auch Hello World erstellen, indem ich mir die Karte zweimal in der Karte anschaue. Und das erste Stück der Karte ist, dass ich ein Bild mitbringen möchte. Also werde ich das tun, dass ich in diesen Ordner komme. Ich habe hier bereits einen vorhandenen Bilderordner. Ich hole mir einen kleineren Speisesaal und ziehe ihn in meinen Bilderordner. Ich nehme das Büro auch kleiner und ziehe es in meinen Bilderordner. Und auch eine Sitzecke, kleineres Bild. Lasst uns das ziehen. Also habe ich diese drei Bilder, weil die Karten auf den Bildern zuerst gehen. Ich muss das Bild ganz am Anfang einbringen. Was ich tun werde, ist, dass ich IMG sagen werde, SRC. Und wir bringen Bilder ein und wir schnappen uns die Speisesäle kleineren Punkt JPG. Vergiss nicht, ihm ein Alt-Tags zu geben. Wir sagen Alt und wir sagen Speisesaal. Und danach muss ich eine Klasse hinzufügen, weil ich möchte, dass das Auto übereinstimmt oder ich möchte, dass das Bild der Karte entspricht. In diesem Fall sage ich, Klasse gleich Karte, IMG top. Und wenn wir unsere Karte schließen, ist auch VS-Codes hilfreich, als ob etwas nicht stimmt. Du hast dieses leuchtend rote Div hier. Ich schließe die Karte. Und da ist das Bild. Beachten Sie, wie sich die Karte um diese abgerundeten Ecken krümmt. Und da wir keinen anderen Inhalt haben, wird die Krümmung auch ganz unten liegen. Aber ich möchte etwas Inhalt hinzufügen oder ich möchte einige Informationen in den Kartentext einfügen. Nach dem Kartenoberteil werde ich also die Div-Klasse gleich dem Kartenkörper entsprechen, um den Körperteil des Wagens zu etablieren. Jetzt empfiehlt Bootstrap den h5, also bleibe ich beim h5. H5-Klasse ist gleich Kartentitel. Und hier drin sage ich Speisesaal. Beachten Sie, dass Sie jeden hg18 oder einen Absatz verwenden können, wenn Sie möchten. Mir geht's einfach gut. Die Regeln, die Bootstrap empfiehlt, den H5 im Kartenbereich zu verwenden. Danach werde ich einen P-Klasse hinzufügen, der gleich Kartentext ist. Und unser alter Fan, Mr. Lorem Ipsum, also sagen wir Lorem 20 und bringen einen 20-Wort-Absatz mit. Und wenn ich das speichere, bekomme ich jetzt den Speisesaal mit dem Lorem Ipsum Text. Was ich nun durchhalten möchte, ist, dass ich einen Aufruf zum Handeln oder einen Ort haben muss, an dem die Person auf einen Button klicken kann, um mehr von diesem Speisesaal zu sehen. Und wenn wir das machen, benutze ich den Bootstrap-Button. 16. Bootstrap: Ich möchte anhalten und einen Blick auf den Bootstrap werfen, aber ich gehe zurück zum Getbootstrap-Bereich. Und wenn wir in getbootstrap zum Komponentenbereich kommen, gehe ich zu den Buttons. Ich möchte Ihnen alle Tastenkombinationen zeigen, die Sie verwenden können. Und das, das ich für dieses Projekt verwenden möchte. Die Knöpfe sind also großartig, weil sie eine einheitliche Art schaffen, Aufmerksamkeit zu erregen. Es ist bereits abgerundete Ecken und es hat eine Reihe von Farben. Standardmäßig müssen Sie also sowohl das BTN hinzufügen, um die Schaltfläche zu identifizieren, als auch die Auswahl der Farben. Danach. Die Farben sind innerhalb von getbootstrap einheitlich. Primär ist blau, sekundär ist grau, Erfolge grün. Die Gefahr ist natürlich rot, die Warnung ist gelb. Info ist diese Art von türkisfarbener Farbe. Und du wirst hell, dunkel und natürlich nichts als eine Verbindung, wenn du das haben willst. Ich benutze den Link fast nie, weil ein Link wirklich nur Link ist. Ich verwende wirklich drei davon, hauptsächlich die primäre für Blau, da Blau anzeigt, dass es sich um eine Linkfarbe handelt, wenn es um das Web geht. Und wenn ich dann nicht primär verwende, verwende ich generell hell oder dunkel, um mein Design auszufüllen. Da ich mehr von diesem Schwarz-Weiß-Innendekorationsdesign in diesem Projekt habe, werde ich mich mit Licht und Dunkelheit beschäftigen. Aber hier ist der coole Teil. Auf mich. Ich mag die Dunkelheit, aber ich hatte das Gefühl, dass der Button auf dieser Seite einfach zu stark sein würde. Wenn ich nach unten scrolle, bekommst du auch nicht nur deine normalen Knöpfe, sondern du wirst verknüpft, sondern ein wichtiges Ja, das ist für ein Formular. Aber du bekommst auch die Gliederungsschaltflächen. Ich liebe diesen, weil dieser mächtig ist nicht zu mächtig ist. Was ich mit einem mächtigen meine, wie Sie diese Knöpfe sehen können, aber diese sind fast so stark mit voller Farbe. Ich möchte also, dass der Benutzer dann weiß, wo er klicken muss. 17. Guten, Ruten,: Um die volle Wirkung der Arbeiten der Dachrinnen zu sehen, werden wir zwei weitere Informationsspalten einbringen. Was ich tun werde, ist, dass ich diese Karte von Karte zu Karte kopiere. Ich muss die Spalten nicht kopieren, weil sie bereits da sind. Und ich lasse es in Spalte drei fallen. Habe die Hauptstadt nicht bekommen C. Also jetzt was ich habe oder Esszimmer, Esszimmer und Esszimmer. Lassen Sie uns das ändern, um auch das Büro einzubeziehen. Also werde ich das mittlere in keine kleineren Speiseräume umstellen, sondern das Büro kleiner. Und alle sagen Büro. Jetzt, wenn ich das Büro und den Kartenkörper bekomme, werde ich ins Büro wechseln. Und es hat sich geändert. Und ich wechsle den letzten in die Sitzecke. Also kopiere ich diese URL oder besser gesagt den Dateinamen. Und ich wechsle kleine Sitzecken in die Sitzecke und nehme das Wort Raum heraus. Und natürlich dupliziere ich die Sitzecke zur Sitzecke für den H5. Jetzt, wenn ich habe, sind drei Spalten. Beachten Sie also die Dachrinnen im Design. Und das ist auch wichtig, denn wenn ich das auf Handy umbringe, aber auch bemerkt, wie voll dieser Platz zwischen den verschiedenen Karten und dem entsprechenden Raster ist . Also so werden wir das machen. Wenn wir wieder in die Reihe kommen, suche ich nach div class row. Ich sage zuerst, ich will etwas Margin Top. Ich möchte also etwas mehr Platz zwischen diesem Bereich hier oben. Also werde ich Zeile sagen, oh, weißt du, und ich habe auch vergessen, dass ich unser H1 vergessen habe. Schießen. Ich war so begeistert von dem Portfolio. Ich habe total vergessen, den Titel dieser Seite einzufügen, sagen wir mal einen. Und mein Portfolio. Das war es für mich. Das war ein wenig überfüllt, als ich das H1 hatte. Das ist es, was ich tun wollte, ist leer für Marge Top One. Da sind wir los. Nur ein bisschen mehr Platz ist los. Nach der Reihe mit Rand oben ich einen Buchstaben g hinzu und sage m, D3. Also hier drin sage ich G für Rinne in der mittleren Größe, ich möchte, dass es eine Drei hat. Wenn es um Abstände geht. Nur ein bisschen mehr Platz hier drin. Aber beachte jetzt genau hier, dass der Abstand gleichmäßig und sogar über alle vier Seiten hinweg ist. Wenn ich jetzt auf das Handy gehe, brauche ich nicht so viel Platz, dass momentan natürlich kein Platz vorhanden ist, weil er nur das Medium und Größer trifft. Wenn ich also G3 sagen würde, würde das mobil hochgehen. Und für mich gibt es Platz. Aber wenn es um ein mobiles Design geht, überlege ich immer, wie ich Dinge komprimieren oder so nah zusammenbringen kann. Und für mich möchte ich M D3 behalten, aber ich möchte sagen: Gee, T2. Und ich bringe die g2 auf die andere Seite. Ich gehe lieber zuerst mobil und dann MMD, LG XL, Double XL, wenn ich rübergehe und nach oben gehe, es liegt an dir. spielt keine Rolle, auf welche Weise Sie sie platzieren, denn es funktioniert egal was passiert. Aber ich möchte, dass Handy zwei ist und dann klein zu B2 und dann md drei ist. Wenn ich diese Seite aktualisiere, bringt sie sie einfach etwas näher zusammen. Ich denke darüber nach, wie ich Dinge so nah wie möglich auf der mobilen Seite komprimieren oder zusammenstellen kann. Wenn ich den Kleinen treffe, wird es auch bleiben. Aber wenn ich das Medium treffe, wird es auf drei fallen, um etwas mehr Rinne in diesem Design zu erhalten. Jetzt ist der untere Teil natürlich keine Dachrinnen. Es ist der mittlere Bereich ist die Gosse. Also muss ich etwas mehr Platz in meinem Design hinzufügen. Was ich also tun werde, ist im Container, ich werde die Marge festlegen. Warum für die Ober- und Unterseite zu zwei. Und wenn ich es auch will, werde ich Polsterung sagen. Warum? Ich möchte eine kleine zusätzliche Polsterung, wenn es um Medium und Größer geht. Also werde ich sagen, Medium für hinzuzufügen. Und das gibt mir etwas mehr Raum zum Atmen, wenn es um Portfolio in diesem Design geht. Und es bringt hier ein bisschen runter. Mein Portfolio liegt also ein wenig vom Titel entfernt. Und jetzt bewegt sich alles und arbeitet erfolgreich. Für dein Design. Möglicherweise möchten Sie die Dachrinnen vergrößern oder verringern. Sie können natürlich von eins bis fünf gehen und es komplett herausnehmen. Wenn ich also sage, ich will keine Dachrinnen, kann ich 0 sagen und sie werden direkt zusammen abstürzen. Das ist vollkommen in Ordnung. Wenn Sie möchten, dass Bilder direkt nebeneinander liegen, verwenden Sie 0. Wenn du willst, dass sie weiter voneinander entfernt sind, sag fünf. Und jetzt trennen sie sich. Für mich war die Nummer drei genau in der Mitte, wo es mir genug Platz in K mir gab, genug Platz zwischen ihnen. Wo ist die Nummer Sechs? Da ist es. Und auf dieser Reise reagiert alles. Immer wenn ich MDL, GSM XL und Double XL verwende , reagiert alles. Und ich spiele zuerst mit Handy, zuerst mobil und gehe zwei Medien hoch, in diesem Fall zuerst mobil, mittel, groß. Dies ist die Kraft der Dachrinnen und das reaktionsschnelle Design von Bootstrap. Im Allgemeinen. 18. Die Kontaktseite einrichten: Wir haben viel erreicht. Wir haben unsere Homepage, wir haben unsere Seite fertig, wir haben eine Portfolio-Seite eingerichtet. Und wenn Sie noch weiter gehen möchten, können Sie gerne diese Weitere Informationen erstellen. Die letzte Seite, an der wir arbeiten möchten, ist die Kontaktseite. Darauf klicke ich noch nicht, weil es abstürzen wird. Lassen Sie uns also hier rüber gehen und lassen Sie uns unsere Portfolio-Seite duplizieren. Und wir werden Kontakt sagen. Und wir bringen die Kontaktseite unten nach unten. Und wir ändern unser Navigationsformular-Portfolio aktiv. Um aktiv zu kontaktieren. Ich werde alles andere herausnehmen, was ich nicht brauche, einschließlich dieses Div unten. Also fange ich mit dem div an und nehme das zweite leider div heraus. Da sind wir los. Ich behalte den Container in meinem Portfolio sollte sagen, kontaktiere mich. Also sage ich „Kontakt“. Kontaktiere mich. Jetzt kann ich auf Kontakt klicken und jetzt funktioniert es. Das sieht gut aus. Und wenn dein Design zu weit unten ist, gehe ich vielleicht gerade zum m Y2 zurück. Da geht es, bringt ein bisschen weiter nach oben. Wenn du für dich so bist, weißt du was, das sieht etwas zu weit unten aus, dann bring es wieder hoch. , habe ich mich für mein Design Da die Portfolios etwas beschäftigter sind, habe ich mich für mein Design entschieden, eines zu Fall zu bringen. Und für dieses Design ist es also nur ein Kontakt. Ich bringe es wieder hoch. Jetzt sind wir bereit, an der Kontaktseite zu arbeiten. Oh, eine Sache noch. Das Portfolio hat das fast verpasst. Ein letzter Abschnitt. Fast wollte fast zu schnell den Vorsitz führen, sagen wir mal, kontaktiere mich. Und jetzt sagt unser Titel, kontaktiere mich. Kontaktieren Sie mich und wir haben das Aktive in unserem Design an Ort und Stelle. Lassen Sie uns nun ein Zwei-Säulen-Raster erstellen. Wir fügen einige Kontaktfunktionen hinzu und erstellen ein Formular auf dieser Kontaktseite. 19. Kontaktinformationen hinzufügen: Danach muss ich eine Reihe erstellen und ein paar Dachrinnen hinzufügen. Also unten kommen wir wieder runter und suchen nach unserem Kontakt mit mir. Ich richte eine Reihe ein. Also werde ich sagen, dass div class gleich row ist und ihm eine G5 auf a geben, da in diesem Design viel Platz vorhanden ist. Und nur damit wir ein Angemessenes haben, sage ich 66 und ich werde das Medium benutzen, um dieses zu identifizieren. Also werde ich sagen, div class col md sechs. Und ich sage Spalte 1. Und ich dupliziere das für Spalte zwei. Und wir sagen Spalte zum Speichern der Aktualisierung Spalte eins, Spalte zwei. Großartig. Diese linke Spalte oder der Start in Bootstrap 5 ist, dass wir die linke und rechte Seite loswerden und jetzt kommen wir mehr in Start und Ende. Also in dieser Kolumne eins hier drüben werde ich Absatz sagen. Oh, wie macht man das? Das ist interessant. Paragraph und bring ihnen ein Lorem Ipsum, sagen wir Unterarm von 25, ein bisschen wie kontaktiere mich. Sparen Sie. Dort gibt es ein paar Informationen über die Person und wie man sie kontaktiert. Und dann füge ich sowohl eine Telefonnummer als auch eine E-Mail hinzu. Also sage ich, dass das Telefon eine Vorwahl sein wird. Ich benutze meine San Francisco-Nummer für 15 bis 55. 55. 55. Perfekt. Da sind wir los. Und dann füge ich unten eine E-Mail-Adresse hinzu. Ich sage, dass du willkommen bist. Mailen Sie mir. Und wir werden sagen, John Smith hat John Smith Entwürfe. Bitte senden Sie dies nicht per E-Mail, da theoretisch jemand diese E-Mail-Adresse haben könnte. also einfach sicher, dass es sich nur um eine Dummy-E-Mail handelt. Wenn ich es also standardmäßig speichere, erscheint es, aber ich möchte diese E-Mail verknüpfen. Also schneide ich das für eine Sekunde ab. Ich lasse eine HREF gleich fallen. Und wenn Sie ganz neu im Schreiben von E-Mails sind, müssen wir sagen, männlich 2, Doppelpunkt, geben Sie die E-Mail ein und legen Sie sie wieder in das a-Tag. Und was passiert ist, dass es jetzt zu einem Link wird, auf den ich klicken kann, um John Smith eine E-Mail zu senden. John Smith entwirft. Völlig cool, sieh aus und gut. Jetzt ist es an der Zeit, das Formular auf der rechten Seite hinzuzufügen. 20. Das Formular einrichten: Alles klar. Also haben wir die Informationen für das Telefon und die E-Mail. Und auf der nächsten Seite hier rechts füge ich diesem Design ein Formular hinzu. In Spalte 2 nehme ich es heraus und sage Formular. Nun, das ist später noch mehr Details, aber im Moment bleiben wir beim grundlegenden Formulardesign. Alle gebildeten beginnen und enden mit der offenen Form und der geschlossenen Form. Und dieses Design, ich werde zwei Spalten für den FirstName, LastName, erstellen Sie eine Spalte für die E-Mail und dann nur einen Textbereich für einige Kommentare. Also nichts zu verrückt an dieser Form. Also werde ich zuerst Zeilen und Spalten erstellen, damit dies funktioniert. Also sage ich div class row. Und denken Sie daran, dass dies ein 100 Prozent ist, weil es sich um ein brandneues Raster handelt. Innerhalb eines Rasters die Eltern 50%, aber im Inneren sind wir immer noch bei 100 Prozent. Also werde ich in diesem Fall div class row sagen. Und hier drin füge ich eine sechsspaltige Grid-Div-Klasse hinzu. Und es heißt, wir bleiben beim Mittelformat. Ich sage Col, MD Sechs. Und jetzt sage ich Spalte 1, nur um sicherzustellen, dass es funktioniert. Und ich dupliziere das. Und ich habe Spalte eins Schleifen und Spalte 2. Da sind wir los. Also habe ich ein zweispaltiges Design für mein Formular. In der ersten Spalte werde ich also Label sagen. Ich vergesse immer, dass ich das mache. Die Klamotten kommen nicht mit. Da sind wir los. Dieses Label wird also 4 Vorname sein. Und Sie werden sehen, warum dies wichtig ist, um das Label mit dem Eingabefeld und dem zweiten zu verbinden . Und dann wird die Klasse sein, das ist von Bootstrap, Formularlabel. Und im Label sage ich den Vornamen. Danach. Ich möchte dann einen Input mitbringen. Also muss ich Eingabeinformationen in dieses Formular einfügen. Der Typ wird nur Text sein. Der Name, den wir sagen werden, ist Vorname. Und die Klasse, die wir sagen werden, ist Form, Dash-Steuerung. Und ein Sprengsatz wird mit dem Wort vier übereinstimmen. Also sage ich, dass ID gleich Vorname ist. Also verwende ich Capital N für das zweite Wort, um auch die ID zu identifizieren. Denken Sie daran, dass Sie nicht zweimal dieselbe ID auf einer Seite haben können. Also sind wir gut dort. Und jetzt, wenn ich das speichere, bekomme ich FirstName, cool. Und ich kann meinen Namen direkt dort eintippen. Die zweite Spalte, die ich sagen werde, ist LastName. Was ich also tun werde, ist denselben Stil zu duplizieren und ihn hineinzuziehen oder zu kopieren und einzufügen und Nachnamen, Nachname zum Nachnamen, den Namen zu sagen . Ich zeige dir ein bisschen, warum wir das benutzen werden. Wir sagen LastName und wir sagen Nachname. Was ich jetzt bekomme, ist FirstName, LastName. Da E-Mail-Adressen länger sind als normalerweise die Vor- und Nachnamen von Personen. Ich schreibe die E-Mail über das gesamte Feld. Da wir also 66 nicht verwenden müssen, müssen wir 12 verwenden oder 12 anrufen. Also nach diesem Abschnitt von diesem Div zu diesem Div werde ich div-Klasse sagen und wir sagen Col 12. Egal mit welchem Haltepunkt gearbeitet wird, es wird immer 100 Prozent dieses Teils der Spalte sein. Und testen Sie es einfach aus. Ich sage das Wort Test, lass es fallen und beobachte jetzt, was passiert. Beachten Sie also, dass sich alles bewegt. Wenn das in Ihrem Design zu nah ist, sollten Sie Small Go 12 sagen. Also möchte ich in diesem Fall vielleicht sagen, rufen Sie SM 12 an oder sagen Sie einfach Col 12 in diesem Fall. Und jetzt, was passieren wird, ist, uchs, ich muss sagen, rufen Sie SM 12 an. Und das lassen wir fallen. Und das lassen wir fallen. Nun, das ist mittel. Weißt du was, vielleicht sollten wir groß werden. Ich würde es zurücknehmen. Sieh es dir an. Möglicherweise müssen wir in diesem Fall ein großes Design machen. Also weißt du was? Sagen wir eigentlich nicht M d2, ich denke, wir sollten groß 12 sagen, weil dieser auf dem Medium ein wenig überfüllt wird . Also nehme ich es zurück. Lass uns das machen. Ich dachte, ich hätte das vorkonstruiert und dann einen zweiten Blick darauf meine Meinung ändern. Also sage ich es. Lg wird auf sechs gehen und LG wird auf sechs gehen. Und was jetzt passiert, ist, dass das in diesem Fall viel besser aussieht. Natürlich ist es ein wenig voll mit diesem Nachnamen und dem FirstName, denn wie wir zuvor gesehen haben, müssen wir, wenn es um den Portfolio-Bereich ging, wenn es um den Portfolio-Bereich ging, einige Schneider hinzufügen. Im Formularentwurf füge ich also eine Zeile hinzu. Im Zeilenabschnitt sage ich Rho g Strich drei. Und das gibt jetzt etwas Platz in diesem Design. Ich kann diesen einen Schritt weiter gehen, weil ich das Formular für sich selbst und die Div-Klasse habe. Was ist, wenn wir diese beiden einfach miteinander kombinieren? Ich nehme dieses Div raus. Ich bringe den Kurs auf das Formular. Die Form selbst wird also zu einer Reihe. Und ich sage immer weniger Code, desto besser. Also komme ich runter und gleich über das Formular hinaus. Ich verschiebe dann die Divs nur einen Befehl zurück linke Klammer innerhalb des VS Studio-Codes hilft mir dabei. Ein bisschen aufräumen. Auf IL-3. Wenn ich aktualisiere, sieht es immer noch genauso aus. Und wieder arbeite ich auch mit einem Raster, in dem ich möglicherweise Dinge bewegen muss. Md hat gearbeitet, als ich das zum ersten Mal gemacht habe. Und dann auf den zweiten Blick denke ich das größte besser. Es muss also etwas weiter gehen, um den Raum auszufüllen. Jetzt sind wir wieder auf Kurs. Jetzt ist die E-Mail ein wenig anders als FirstName und LastName. Wo wir also Col 12 hatten, wird dies das gesamte Design durchgehen. Ich nehme das Wort Test heraus und verwende das Etikett für. Und ich kann in diesem Fall E-Mail sagen, Kurs wird Formular sein. Beschriftung. Da sind wir los. Und wir sagen E-Mail. Das stimmt. E-Mail-Adresse in diesem Fall. Und wir schließen mit dem Label. Danach. Wir fügen die Eingabe hinzu. Und die Eingabe wird nicht Typ Text sein, sondern E-Mail eingeben. Also sagen wir, tippe E-Mail, Name. Wir sagen E-Mail. Und dann sagen wir, dass Klasse gleich Form ist. Die Steuerung fängt das ein. Und die ID muss mit Wu übereinstimmen, was ich auf die Return-Taste gedrückt habe. Die ID muss mit dem Wort vier übereinstimmen. Die ID ist also die E-Mail und wir schließen sie dem Front-Benutzer. Sie denken einfach, dass die E-Mail genauso aussieht. Das Tolle an Bootstrap 5 ist auch, dass es die Fokus-Pseudo-Klasse nutzt. Was ist die Fokus-Pseudoklasse? Wenn ich darauf klicke, dreht sich dieses blaue Farbverlaufsglühen um den FirstName, LastName. Dies hilft dem Benutzer zu identifizieren, welches Feld in diesem nur einem zusätzlichen Stück, das ich an Bootstrap mag , da es wirklich hilft, dem Bereich, in dem ich arbeite, ein wenig Benutzererfahrung zu bieten. Perfekt, sieht gut aus. Als nächstes werden wir es tun, dass ich nach unten gehe, ich möchte einen Textbereich nach der E-Mail-Adresse erstellen. Ich bin sicher, es ist alles gerettet. Was es ist. Das wird also nach dem Anruf 12 sein. Ich möchte es wieder in voller Breite machen. Also sage ich div, Klasse Col 12. Eröffnung schließen. Und wir sagen Label für Kommentare. In der Klasse ist ein Formular. Beschriftung. Das Label. Und wir sagen Kommentare. Und dieser wird kein Input sein. Es wird ein sogenannter Textbereich sein. Also werde ich sagen, dass ich Textbereich, Klasse, Formularsteuerung sagen. Und danach geben wir ihm einen Namen und es wird Ihnen später zeigen, warum der Name in diesem Fall tatsächlich wichtig ist , Name, Kommentare. Id ist gleich wie das Wort vier. Also sagen wir Kommentare. Und Reihen. Wir werden sagen, es ist drei. Hier ist etwas Wichtiges. Lass das nicht fallen, nachdem es geschlossen wurde. Sie kein Leerzeichen zwischen dem Textbereich und ein Leerzeichen hier drin wird hier drin sein. Wenn ich das also speichere, meine ich mit diesem Leerzeichen, dass ich diesen kleinen Cursor will. Was auch daran schön ist, ist die schöne Polsterung zu bemerken, die wir hier reinbekommen. Und ich weiß nicht warum es mir das Formular zeigt. Also werde ich tun, dass ich das tun werde, nur um meine E-Mail zu löschen. Da sind wir los. Das heißt, ich repariere einen späteren Zeitpunkt. auch immer, in diesem Kommentarbereich gefällt mir das wirklich, dass es wirklich diese wirklich schöne Polsterung in meinem gemeinsamen Abschnitt erstellt. Aber wenn ich diesen Textbereich so ablegen würde, passiert was passiert, dass es tatsächlich all diesen zusätzlichen Platz gibt. Das ist ein Teil des Kommentarabschnitts, weil ich das gelöscht habe. Es behandelt es also als zusätzlichen Platz in meinem Design. Auch wenn ich hier drei Räume schaffen würde. Es gibt drei Leerzeichen hier. Stellen Sie sicher, dass sich der geschlossene Textbereich direkt neben dem geöffneten Textbereich befindet. Dies ist ein I C und viele Designs, Leute wissen nicht, dass dieser zusätzliche Speicherplatz einfach fährt. Die sind verrückt aufgeregt. Sie haben diesen zusätzlichen Speicherplatz und müssen ihn im Wesentlichen löschen, UM damit zu arbeiten. Perfekt. Sagen wir diese Seite nicht. Lassen Sie uns diese Seite speichern, aktualisieren und jetzt sind wir wieder im richtigen Textbereich. Und damit ein Formular wirklich funktioniert, müssen wir natürlich eine Schaltfläche erstellen, um die Informationen einzureichen. Also werde ich es tun, ich sage div class und wir sagen Col 12, um es zu einer Spalte zu machen. Und ich werde sagen, in diesem Fall ist der Button-Typ eine Submit Button-Klasse, wir werden sagen, dass es sich um btn handelt. Und dann btn-primär. Ich benutze das typische Blau. Und wir sagen „einreichen“. Was ich jetzt habe, ist ein Formular. Aber theoretisch könnte ich, wenn ich einen Gipfel hätte, das Formular einreichen. Nun, lasst uns als Bonus für diesen Kurs ein Arbeitsformular erstellen, das Sie verwenden können. 21. Netlify und die drag: Damit dieses Projekt wirklich funktioniert, müssen wir es online stellen, bis jetzt haben wir Zeit nur auf dem Desktop verbracht. Also werde ich tun, dass ich vorbeikomme und Netlify hochziehe. Los geht's. Netlify, das ist es. Netlify lässt moderne Web-Apps schneller versenden, E-Commerce-Unternehmen, all das gute Zeug. Aber was es auch tut, ermöglicht es mir, Websites direkt ins Internet zu ziehen. Ich melde mich ein. Und wenn Sie Netlify noch nicht benutzt haben, gehen Sie zur Anmeldung. Und in meinem Login unter diesen Wortseiten meine es nicht wirklich hier drin, also habe ich viele andere Websites. Ich klicke auf Websites. Ganz unten. Ihre wird wahrscheinlich leer sein im Vergleich zu allen meinen Seiten. Ich möchte eine neue Site bereitstellen, ohne eine Verbindung herzustellen, um sicher zu sein, ich möchte nur meinen Site-Ausgabeordner hier ziehen und ablegen. Wenn ich diesen Ordner nehme und meinen neuen Projektordner schnappte, merke ich, wenn ich ihn direkt hierher ziehe, wie es zu diesem Weiß im Vergleich zur Umrisse wird. Wenn ich es direkt hineinziehe, wird es mir eine ganz neue Website erstellen. Wie verdammt genial ist das? In etwa 30 Sekunden habe ich meine Website gerade mit einer zufälligen Wortfolge gestartet. Wenn ich also Domaineinstellungen sage, komme ich zu Site-Namen bearbeiten. Und ich nenne das gerade John Smith, Temp. Was ich bekomme, ist eine URL, die funktioniert. Und ich bekomme die About Seite, ich bekomme die Portfolio-Seite, ich bekomme die Kontaktseite. Das stinkend genial. Aber was ich wirklich bekomme, wofür ich Netlify wirklich geliebt habe, ist, wenn ich zurück zu Netlify gehe, haben sie einen Abschnitt gebildet. Und Sie können tatsächlich ein Formular mit Netlify erstellen und Informationen automatisch über ihr System übermitteln. Lassen Sie uns fortfahren und die Informationen eintragen, damit die Netlify-Formulare in diesem Projekt funktionieren können. 22. Formulare vernetzen: Also werde ich diesen Flur jetzt umziehen. Und was ich tun möchte, ist zu meinem Code zurückzukehren und hier einige zusätzliche Informationen zum Formular hinzuzufügen. Wenn ich also wieder hochkomme, suche ich nach dem Formular. Da ist es. Und erstere fange ich an. Der Kurs ist vollkommen in Ordnung. Aber was ich hinzufügen möchte, ist ein Name. Und dieser Name ist das Kontaktformular oder einfach nur Kontakt. Jetzt gibt es zwei Methoden, die ich einrichten muss. Die bekommen entweder oder einen Beitrag. Und GET ist, wenn Sie Informationen aus einem Formular wie Google erhalten. Ein Beitrag ist, wenn ich Informationen in ein Formular wie ein Kontaktformular posten möchte. In diesem Fall sage ich Post. Ich muss ein paar zusätzliche Dinge hinzufügen. Und für die Lesbarkeit verliere ich etwas Platz. Ich werde das einfach fallen lassen und es fallen lassen nur damit wir etwas mehr Lesbarkeit haben. Methode post. Und das Formular wird geöffnet und geschlossen. Nach dem Methodenpost möchte ich Daten Netlify sagen, treu Netlify, Hey, das ist ein Formular. Sieh mich an. Nach diesem Abschnitt. Ich möchte Action sagen und das Ding wirklich cool. Aufgrund der Aktion wollte ich tatsächlich sagen, wenn Sie das Formular absenden, geben Sie dem Benutzer eine Antwort zurück. Also sage ich „Action“. Ich sage in diesem Fall Slash Kontakt, Dash, Erfolg. Wir haben diese Seite noch nicht eingerichtet, aber wir werden es tun, bevor Sie dies zu weit laufen. Wir sagen also kontakterfolg. Aber HTML, dies soll dem Benutzer mitteilen, wenn ich diese Informationen einreiche, dass es funktionieren wird. Der Grund, warum ich auch die Wörter Name, FirstName, LastName, E-Mail und Kommentare hatte LastName, E-Mail , ist, dass dies in Netlify ist Formularabschnitt angezeigt wird. Wenn ich das speichere, komme ich zurück auf mein Safari-Konto. Und lass mich das hier zurückziehen. Was ich tun möchte, ist zurück zu kommen, um es zu zitieren, zu überblicken und per Drag & Drop zu lesen. Ich komme zurück zu Produktionsbereitstellungen, sagen wir, Reduktionsbereitstellungen. Und in diesem Fall müssen Sie Ihre Website aktualisieren. Ja, das tue ich. Und ich habe überhaupt gespart. Und wieder kann ich die Veränderung hier nicht wirklich sehen weil es eher das Innenleben der Form ist. Also komme ich zurück zu Project New, öffne meine Version von Safari nach oben und ziehe das Projekt neu. Hier oben. Es wird hochgeladen, das Projekt sollte nicht zu lang sein. Und ich habe nicht bemerkt, dass sich das Hochladen nicht immer ändert, also muss ich die Seite normalerweise aktualisieren und dann ist alles bereit, genau dorthin zu gehen. Versuchen wir es mal. Oh, eine Sache muss ich noch tun. Ich sagte, ich würde mir eine Erfolgsseite machen. Ich hab's nicht getan. Also muss ich sicherstellen, dass ich einen Kontakterfolg schaffe. Also werde ich die Kontaktseite duplizieren und Duplicate oder Command D auf dem Mac sagen, D auf dem PC steuern und Kontakt Erfolg sagen. Und alles was ich tun werde, ist, dass ich das Formular herausnehme und einfach Danke für die Informationen sage. Also suche ich nach dem Formular, kommentiere nach unten und habe ein Formular erstellt. Und ich sage einfach in einem einfachen Absatz-Tag, danke für Ihre Einreichung. Und wir können es nicht sehen, bis wir das Formular tatsächlich ausgeführt haben. Also lasst uns das aufheben. Es hat gerettet. Perfekt. Jetzt sehen wir gut aus. Lassen Sie mich das noch einmal hochladen. Es hat die Waffe übersprungen, also wird es uns eine Fehlermeldung geben. Ich ziehe das per Drag & Drop ab. Und wieder verwendet es das ändert sich nicht standardmäßig, also muss ich die Seite aktualisieren und jetzt ist sie veröffentlicht. Und jetzt sollten wir in unserem Formularabschnitt sehen , wie wir ein Formular haben. Wir haben ein aktives Formular namens „Kontakt“. Und es gibt noch keine Einreichungen in diesem Kontaktformular. Ich sagte doch, nun, wenn ich meine Website betreibe Wenn ich also das John Smith Design und Kontakt führe, setze ich meinen Namen ein und es wird einfach etwas auf something.com auswählen. Hey, mal sehen, ob dieses Formular funktioniert. Und richtig sollte es Apostroph sein. Ich werde die Informationen übermitteln. Und danke für deine Einreichung. Cool. Bisher sieht es so aus, als würde es funktionieren. Wenn ich also zurück zu Netlify komme und zu Formularen gehe, hey, Kontakt fehlte die Einreichung um 1038 Uhr. Und Hayden, Hey, lass uns sehen, ob das funktioniert. Beachten Sie, dass der Vorname mit dem Namen, dem Vornamen übereinstimmt. Beachten Sie, dass der Nachname mit dem Nachnamen, der E-Mail-Adresse und den Kommentaren übereinstimmt . Das ist ziemlich rade. Wenn Sie noch einen Schritt weiter gehen möchten, können Sie auch in Ihrer Website-Übersicht tun Wenn ich zu den Site-Einstellungen gehe, wird dies zunächst etwas verwirrend, da es hier oben eine Formularschaltfläche gibt und es ein Forms gibt Button unten links unten. Wenn Sie jedoch Ihr Formular per E-Mail senden möchten, können Sie Formularbenachrichtigungen so einrichten, dass sie zu einem bestimmten Web-Hook, einer E-Mail-Benachrichtigung oder einer Slack-Integration gelangen. In diesem Fall möchte ich eine E-Mail-Benachrichtigung sagen. Und ich kann sagen: Hey, ich kann per E-Mail benachrichtigt werden, wenn jemand dieses Formular benutzt, wie verdammt cool ist das? Wie Netlify rockt. Aber ich kann es noch einen Schritt weiter gehen. Denn wenn ich zu diesem Formularentwurf zurückkehre und wenn ich in den Kontakt gehe, gibt es auch eine Möglichkeit, Spam zu verhindern. So werden alle Formularmissionen mit einem Kismet nach Spam gefiltert. Aber ich kann auch ein Honeypot-Feld hinzufügen, um zusätzlichen Spam in meinem Design zu fangen. Und dies ist wahrscheinlich das mächtigste Werkzeug von Netlify-Formularen, das unentdeckt bleibt. Lassen Sie uns aus meinem Design ein zusätzliches Honeypot-Feld erstellen , dass es dem Spam in Netlify hilft. 23. Den honeypot hinzufügen: Kommen wir zurück zu unserem Formular. Und was ich suche, ist 0 auf der Kontakterfolgsseite, das wird nicht passieren. Da sind wir los. Für unsere Kontaktseite möchte ich ein weiteres Stück unter der Aktion hinzufügen. Ich werde Daten sagen, Netlify einen Honeypot, um sicherzustellen, dass es hier ein neues Feld gibt. Ich werde sagen, dass ich von hier gekauftes Dash-Feld habe. Ich werde in diesem Design ein brandneues Feld hinzufügen. Unter diesen Daten, Netlify einen Honeypot, aber oberhalb der Div-Klasse 12 werde ich eine Eingabe erstellen und sagen, dass der Typ ausgeblendet wird. Dies ist ein neuer Feldtyp, der nicht angezeigt wird, sondern nur, wenn die beiden versuchen, alle Eingaben zu durchlaufen, dann können sie ihn über die Codeseite sehen. Und der Name wird gekauft, das im Wesentlichen sagt, wenn jemand, er füllt dieses versteckte Feld aus, das eine normale Person nie sehen würde, identifiziert dies dann als Spam. Und normalerweise mache ich auch eine Notiz und sage für die Bots, nur für den Fall, dass ich zurückkomme und herausfinde, warum ich das gemacht habe. Warum hast du eine Notiz gemacht, die für die Bots und dann für die beiden sagt, nur damit ich eine Identifizierung als verstecktes Feld haben kann. Wenn ich das speichere, sollten Sie dies nicht auf Ihrer Kontaktseite sehen können. Sieht bisher gut aus. Lassen Sie uns dieses Projekt hochladen und sehen, ob Netlify dieses Feld auch identifiziert. Ich bringe dorthin zurück, es ist. Meine Formulare und Site-Übersicht, Produktion wird bereitgestellt. Ich geh zurück zu den Eltern. Und wenn ich die Seite nach unten scrolle, lass mich das Projekt neu in diesen neuen Upload einbringen. Und wieder ändert es sich nicht von Upload zu Publizieren. Was ich also tun muss, ist die Seite zu aktualisieren und sie wird veröffentlicht. Was ich jetzt in meinem Formularbereich sehen sollte, wenn ich in Kontakt komme, perfekte zusätzliche Spam-Prävention, die über ein Honeypot-Feld aktiviert wird. Es fügt also bereits eine zusätzliche Schicht der Spamprävention in Netlify hinzu. 24. Ein wenig zusätzliche Bereinigung: Wenn wir uns also unsere Seite ansehen, werde ich Safari einfach wieder verstecken, dass alles ziemlich gut ist. Aber das einzige, was mich ein wenig ärgerlich macht, was ich in meinem Design gesehen habe, ist, dass John Smith Designs nur ein bisschen in Bezug auf mich eingerückt sind, um mich zu kontaktieren, auf der ersten Seite oder auf der About-Seite nicht wirklich bemerkbar ist, aber wir werden es tun gelangen Sie zum Portfolio und zum Kontakt. Es ist bemerkbar. Also werde ich tun, wenn ich etwas extra aufräumen wollte. Und so öffne ich alle meine Dateien und gehe zu Project New. Und über den Kontakterfolg, Kontaktindex und Portfolio. Ich möchte nur die Polsterung auf der linken und rechten Seite meines Designs herausnehmen. Also suche ich nach ist im Container für die Nav-Bar. Was ich machen möchte, ist, dass ich Px 0 sagen werde. Und ich bin auf der About-Seite. Sieh dir das noch einmal an. Wenn ich also das ungefähr speichere, nimm einfach den Platz auf der linken und rechten Seite heraus. Ich dupliziere das auf allen Seiten. Also komme ich zurück, um den Erfolg zu kontaktieren. Ganz oben. Füge den px 0 hinzu. Bei meinem Kontakt. Was ich suche, ist Container und PXE im Index. Komm wieder nach oben. Sie nicht schwindelig oder fast da. Px und Portfolio auch ganz oben. Wir suchen nach dem Container und P 0. Wenn ich jetzt Seite für Seite durchgehe, ist alles auf diese Weise ausgerichtet. Außerdem habe ich Hello World behalten und sie sollten John Smith Designs sagen. Was ich also tun werde, ist, dass ich helloworld zu John Smith Designs umwandle. Im Webdesign ist es wichtig, den tatsächlichen Namen, das Portfolio oder den Namen der Seite an erster Stelle und den Gesamttitel an zweiter Stelle zu setzen. Also muss ich das noch einmal duplizieren. Aber da wir gleich neben uns sind, hat 0 Index immer noch Hello World. Das habe ich nicht repariert. Oh nein. Also schnappen wir uns das Ganze. Lasst uns das Design in den Index aufnehmen. Und wir werden sagen, ist alles Design und lässt Ihr Haus fantastisch aussehen. Nur damit wir ganz oben etwas hinzufügen. Oder wir könnten in diesem Fall auch die Innenarchitektur sagen . Innenarchitektur und Dekoration. Perfekt. Und wir können die Helloworld auch in Ordnung verwandeln, die auf meiner Indexseite zu Innenarchitektur und Dekoration passt. Lass uns hier runter kommen. Ketten Sie auf niedrige Welt. Nur damit es etwas stärker aussieht. Da gehen wir ganz unten. Um also während dieser gesamten Titel weiterzumachen, eine kleine letzte Bereinigung durchgeführt werden. Ich nehme die John Smith Designs und gehe einfach direkt zum Kontakt. Ändern Sie diesen Kontakterfolg. Wir können sagen, anstatt mich zu kontaktieren, können wir sagen, dass die Einreichung erfolgreich war. Und die About-Seite wird die HelloWorld übernehmen. Und John Smith entwirft. Lassen Sie uns das noch einmal hochladen und schauen Sie uns an und stellen Sie sicher, dass alles erfolgreich funktioniert. Unter Formulare, Standortübersicht, wird die Produktion bereitgestellt. Blättern Sie die Seite nach unten und projizieren Sie neu. Lass es rein. Warten Sie wieder etwa 510 Sekunden auf mein InDesign, es ist nur keine so große Datei. 3,4 Megabyte, aktualisieren Sie die Seite und sie wird veröffentlicht. Wenn ich auf diesen Link klicke oder in diesem Fall, aktualisiere ich die Seite. Was ich jetzt bekomme, ist die Polsterung, Interior Design und Dekoration, John Smith entwirft. Und darüber, dass wir nicht ziemlich gut nachgesehen haben. Es sollte fließen. Sieh gut aus. Sieht echt gut aus. Ich glaube. Kommen Sie zurück zu unserem Portfolio. Wir haben unsere drei Spalten zu zwei Spalten, 21 Säulen Design sieht ziemlich stark aus. Und wir haben eine Kontaktseite. Ich kann John Smith sagen, was bei John Smith Designs. Dies ist nur ein Test, wenn ich die Informationen schätze. Whoa, da sind wir los. Danke für Ihre Einreichung. Und siehe da, wenn ich wieder zu Formularen komme, geschah die letzte Einreichung um 1050 ich bin. Und John, das ist nur ein Test und es funktioniert. Wir haben alles funktioniert und es wurde mit Bootstrap 5 eingerichtet und entworfen. 25. Ein klebriger Fußfedern: Als ich mir diese gesamte Website angeschaut habe, sah sie ziemlich gut aus, bis auf ein kleines Detail im Abschnitt About. Wir merken es nicht, weil wir auf und ab scrollen. Wenn wir jedoch auf die Kontaktseite klicken, beachten Sie, dass die Fußzeile nach oben geht und fast den oberen Rand des Formulars berührt. Was ich tun möchte, ist, dass die Fußzeile ganz unten stecken bleibt, um eine klebrige Fußzeile zu erstellen. Das können wir mit Flex machen. Wir müssen in unser CSS einsteigen, um das zu erreichen. In meinem benutzerdefinierten CSS ganz oben ist, dass wir das gleich danach setzen werden. Wir werden tatsächlich vor dem Header gesagt denken vorher und nachher, dass ich ein paar Dinge hinzufügen muss. Ich sage HTML Komma Body. Und danach möchte ich sagen, dass die Höhe 100% entspricht. Wir müssen diese Informationen widmen, um zu sagen, lassen Sie uns diese Höhe zu 100 Prozent machen, was sie bereits in den Flex bringen soll. Wenn ich es tun werde, sage ich Körperanzeige und dann biege mich, um den Körper zu fließen. Ich möchte die Kinder des Körpers oder der Divs, des Netzes und der Fußzeilen in Säulen verwandeln. Also sage ich „Flex Direction“. Und wir werden Kolumne sagen. Danach kann ich den Haupt dann in Fluss verwandeln. Also werde ich Main Flex 1, 0 sagen und dann automatisch das zu 100 Prozent machen, so viel es kann die Fußzeile nach unten drücken. Jetzt ist der Trick nach dem Main, ich sage Footer. Und dann drehen Sie die Fußzeile auf Flex, schrumpfen Sie auf 0. Und was das tun wird, ist, dass dieser mittlere Teil aktiviert wird, wenn wir glauben, dass wir drei Spalten haben, die Kopf- und Fußzeile, wird dies auf volle Breite abzüglich der Fußzeile unten erweitert. Ich aktualisiere die Seite. Oh, ich bin eigentlich auf dem eigentlichen Domainnamen. Gehen wir zurück zu Project New. Und wir werden die Indexdatei und die Kontaktseite aufrufen. Was Sie sehen, ist, dass diese untere Fußzeile ganz unten klebt. Und schließlich müssen wir Netlify öffnen. Da sind wir los. Und ich gehe zurück auf meine Seite. Überblick. Die Produktion wird noch einmal bereitgestellt und hochgeladen, um sicherzustellen, dass es funktioniert. Lass mich das Drag & Drop suchen und warten, bis es hochgeladen wird. Gib es ungefähr fünf Sekunden. Ich aktualisiere die Seite und es heißt veröffentlicht. Wenn ich nun auf die Kontaktseite zurückkehre, die sich auf der John Smith Temp Netlify befindet, aktualisiere die Seite. Jetzt klebt die Fußzeile unten. Wenn Sie eine kleine Kontaktseite haben, empfehle ich dies zu tun. So halten Sie den Platz für die klebrige Fußzeile ganz unten. 26. Zum Abschluss: Vielen Dank, dass Sie sich die Zeit genommen haben, diesen Kurs auf Bootstrap 5 anzusehen, ich wollte wirklich ein konkretes Projekt machen. Wir könnten einen Großteil der Tools in Bootstrap 5 verwenden. Für alle weiteren Informationen über Bootstrap können Sie gerne wieder in die Dokumente gehen und sie alle finden. Und Firmin, der den Fortgeschrittenenkurs gekauft hat, können Sie diese zusätzlichen Tools als Quellcode verwenden , um sich auch auf Ihre Arbeit zu verlassen und zu überprüfen. Wie immer bin ich bei UPS getroffen und denke viel darüber nach, den Bootstrap-Bootcamp-Kurs zu kaufen.