So erstellen Sie eine einfache Website mit Bootstrap 4 | Robin Haney | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

So erstellen Sie eine einfache Website mit Bootstrap 4

teacher avatar Robin Haney, Web Developer and Online Instructor

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

6 Einheiten (31 Min.)
    • 1. Einleitung zum Kurs

      0:40
    • 2. So richten und installieren von Bootstrap 4

      5:47
    • 3. Arbeiten mit der Bootstrap 4 Jumbotron

      7:34
    • 4. So fügen Sie Buttons und Formulare hinzu

      7:18
    • 5. Copyright-Informationen auf unserer Website

      2:08
    • 6. Endliche Berührungen auf unserer Website

      7:12
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

417

Teilnehmer:innen

--

Projekte

Über diesen Kurs

In diesem kurzen Mini-Kurs lernst du, wie du eine einfache einseitige Vorlage mit dem Frontend-Framework Bootstrap 4 erstellen kannst. Dieser Kurs lehrst dir, wie du Bootstrap 4 richtig installieren und konfigurieren kannst, sowie dir die üblichen Elemente, Komponenten und Klassen vorstellen kannst, die du zum Erstellen deiner Website verwenden kannst.

Dieser Kurs sollte dich etwa 15-20 Minuten dauern, um deine Website zu durchlaufen und zu erstellen. Sobald du mit Bootstrap 4 eingerichtet bist, kannst du in nur 5 Minuten eine ähnliche Webseite erstellen!

Ich freue mich darauf, dich in der coruse! zu sehen!


Aufrichtig

Robin Haney

Triff deine:n Kursleiter:in

Teacher Profile Image

Robin Haney

Web Developer and Online Instructor

Kursleiter:in

Hello,

My name is Robin Haney and I am an instructor here at Skillshare. I primarily teach web developing and programming tutorials. 

You can check out my blog here - www.robinhaney.com 

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einleitung zum Kurs: Hi. Mein Name ist Robin. Und in diesem kurzen Kurs werde ich Ihnen zeigen, wie Sie eine sehr einfache Website mit dem Bootstrap für Web-Entwicklung Front-End-Framework entwerfen . Während dieses Kurses lernen Sie, wie Sie das Bootstrap four Framework installieren und mit ihm arbeiten. Dies ist die endgültige Version der Website, die wir erstellen werden und Sie werden feststellen, dass Sie diese Website sehr schnell erstellen können. Das dauert nicht länger als 15 bis 20 Minuten, um zu bauen. Und das geht davon aus, dass Sie kein Wissen und Bootstrap vier haben. Also, wenn Sie völlig neu sind oder Sie brauchen nur eine Auffrischung auf bootstrapped für in diesem Kurs ist perfekt für Sie. Alles klar, fangen wir an. Lassen Sie uns eine Website mit Bootstrap für erstellen 2. So richten und installieren von Bootstrap 4: jetzt, bevor wir tatsächlich anfangen können, unsere Website zu bauen, ist das allererste, was wir tun müssen, zu installieren boost up vier, so dass wir es verwenden können, um unsere Website jetzt Bush F zu bauen oder hat dies sehr einfach für uns gemacht, dies zu tun. Lassen Sie uns zu den Boot-Schritten für die Dokumentation gehen und schauen Sie sich die verschiedenen Möglichkeiten an, für die wir bootstrapped für unsere Website installieren können. Um mit Bootstrap zu beginnen, besuchen Sie zunächst die Bootstrap for Documentation Website, damit wir die Documentation-Website finden können, indem Sie entweder Bootstrapped 4 in Google eingeben und auf dieser erste Link, der auftaucht. Oder Sie können die URL oben hier kopieren und eingeben, und Sie gelangen zum Bootstrap für die Dokumentation. Stellen Sie sicher, dass Sie auf dem Bootstrap für die Dokumentation und nicht die Bootstrap wenige Dokumentation sind, da es einen Unterschied gibt. Der einfachste Weg, um mit Gustav zu beginnen, ist das Bootstrap cdn installiert und wir können dies tun , indem wir diese Links in unser Dokument einfügen. Also lasst uns unsere Website starten. Ich habe eine neue voll hier auf meinem Desktop erstellt, die ein Geschäft oder eine Website-Dateien in waren. Beginnen wir mit der Schaffung unseres A-Teams. L Dokument. Öffne hier einfach eine keine PAT-Datei und speichere sie als Indexpunkt-HTML-Datei. Da gehen wir hin. Wir können unsere alte Notizblock Datei löschen. Ich werde auch einen Ordner hinzufügen, in dem unser CSS gespeichert wird. Wir werden am Ende dieses Kurses ein wenig benutzerdefiniertes CSS verwenden, um unsere Webseite aufzupeppen . Also hier haben wir unsere Indexdatei geöffnet in. Unser Editor, den wir hier machen werden, ist, dass wir Bootstrap installieren. Der einfachste Weg, um direkt in den Boost Up für seine zu bekommen Gehen Sie zurück zur Dokumentation und lassen Sie uns auf diese Starter-Vorlage klicken. Diese Sternvorlage wird alles haben, was wir tun müssen, um mit der Gestaltung von Websites zu beginnen . Mit Bootstrap. Es wird das Bootstrap-CDN, alle JavaScript- und J-Abfrage und alle CSS-Stile haben , die Bootstrap benötigt, um zu funktionieren. Wir haben auch eine grundlegende HTML-Vorlage, so dass das auch ziemlich cool ist. Lassen Sie uns alle in unser Clip-Wort kopieren und gehen Sie zu einer neuen Indexdatei hier und fügen Sie in unsere gestartete Vorlage. So sollte Ihre Webseite aussehen, wenn Sie fertig sind. Lassen Sie uns die Datei speichern und öffnen Sie sie und überprüfen Sie einfach, um sicherzustellen, dass alles korrekt funktioniert . Denken Sie daran, wenn Sie das Bootstrap-CDN verwenden, um sich anzuschließen müssen Sie tatsächlich mit dem Internet verbunden sein. Und hier können wir sehen, dass der Boot-Stop-Stil tatsächlich angewendet wird, und Boost-up funktioniert. Cool. Das war einfach, nicht wahr? bevor wir hier fertig sind, Aberbevor wir hier fertig sind, gibt es noch eine Sache, die ich dich wollte. Ich möchte tatsächlich eine Komponente aus Bootstrap nehmen und einfach Code einfügen. Und nur noch einmal, um sicherzustellen, dass alles mit unserer Bootstrap-Installation korrekt funktioniert , werde ich auf Komponenten klicken, die ich hier einen Knopf greifen werde. Und das ist unsere eine andere Schaltfläche Stile, die wir haben. Ich werde nur dieses Code-Snippet kopieren, das in jeden HTML hier geht, und ich werde ein wenig Platz hier unten machen, genau wie beim Löschen. Wirklich? Normalerweise nach dem Einfügen hier Sierra Datei und wenn alles richtig funktioniert, sollten wir eine Reihe von Schaltflächen auf unserer Webseite sehen. Sie sind vor genial. Wir können sehen, dass alles richtig funktioniert. Hier ist unsere Liste der verschiedenen Schaltflächen. Also unser Bootstrap ist alles angeschlossen und wir sind gut zu gehen und wir sind bereit, unsere einfache Seite der Website zu entwerfen . Gehen wir zurück und löschen Sie das einfach wirklich schnell, da wir es nicht mehr brauchen. Eine letzte Sache, die ich tun werde, bevor Sie fertig sind Diese Lektion ist, dass wir unser eigenes benutzerdefiniertes CSS hier anschließen müssen . Also werde ich den Code kopieren und einfügen, den wir brauchen, um unser CSS zu importieren, und stellen Sie sicher, dass Sie stattdessen Ihre CSS-Rate von Ihrem Bootstraps CSS ablegen. Unser benutzerdefiniertes CSS, das wir am Ende dieses Kurses erstellen, wird die Bootstrap-Stile außer Kraft setzen. Also hier haben wir jemals einen Link und wir sind auf unsere CSS Stylesheet verlinkt. Und in der Zeit, wenn wir den Pfad zu unserem Dateiordner haben , der CSS ist, und dann haben wir unsere zusätzliche Datei, die wir benutzerdefinierte Punkt CSS nennen werden. Also, wenn das alles gut ist zu gehen, müssen wir tatsächlich machen, sind daran gewöhnt, CSS-Datei. So gibt es uns eine schnelle speichern gehen zurück in unsere volle, dass wir unsere Website haben. Wieder einmal werden wir eine neue Datei ohne Pad erstellen. Und anstatt es HTML zu geben, werden wir ihm die Punkt-CSS-Erweiterung geben, die es nicht tun könnte. Diese Oh, keine Haustier-Akte. Und lassen Sie uns unser benutzerdefiniertes CSS hier öffnen. Und ich werde eine einfache Stiländerung an unserem einzelnen Element vornehmen. Überprüfen Sie einfach und stellen Sie sicher, dass unser benutzerdefiniertes CSS verlinkt ist und alles wieder korrekt funktioniert . Also lasst uns etwas tun, wie ändern Sie die Farbe zu lila. Stellen Sie sicher, dass Sie sowohl Ihren Index Dot HTML Foul als auch Ihre CSS-Datei speichern. Und wenn wir unsere Was Seite öffnen, können wir sehen, dass unser Text jetzt lila ist. Das bedeutet also, dass unser benutzerdefiniertes CSS mit r H d html ein Dokument verknüpft ist und alles perfekt funktioniert. 3. Arbeiten mit der Bootstrap 4 Jumbotron: Jetzt, da wir Bootstraps eingerichtet haben und korrekt auf Ihrer Website arbeiten, können wir beginnen, die verschiedenen Komponenten in verschiedenen Funktionen zu betrachten, die brooch four uns bieten kann , so dass wir einfach unsere Website erstellen können. In Ordnung, also ist es Zeit, die Komponenten unserer Website zu bauen. Nun, Website wird sich nicht zu viel entwickeln. Und wir können tatsächlich eine der People-Komponenten in Bootstrap verwenden, um einen guten Teil davon starten und unseren Stolzsten in Gang zu bringen. Die eigentliche Komponente, die wir verwenden werden, geht zum Komponentenabschnitt hier, und wir werden auf das Jumbotron-Element klicken. Und das Jumbotron-Element ist einfach eine nette kleine Box hier. Diese Art von legt einen Schwerpunkt auf ein Stück Inhalt oder etwas, das Sie eine Menge Fokus hinzufügen möchten , auch, auf einer Website und kommen bald. Webseite. Das wird perfekt sein für das, was wir brauchen. Es gibt also einen Code-Snippet von unserem Jumbotron hier, und es gibt auch einen flüssigen Jumbotron, der einer Art von Übernahme der ganzen Seite folgen wird. Aber wir wollen nur das hier. Also, wo es dieses Code-Snippet hier kopieren wird, gehen Sie in unsere HTML-Datei und wir werden es kleben, Lesen Sie im Körperbereich unserer Website. Wir können dies auch hier löschen, da der Jumbotron bereits ein H darin platziert hat. In Ordnung, wählen wir unsere Platte hier aus. Und lassen Sie uns Tab ein paar Mal drücken, nur um es ein wenig Einzug zu geben. Ich werde auch voran gehen und ein wenig Raum hier zwischen unserem Körper hinzufügen. Nur damit wir etwas Atemraum haben und wo Sie leicht sehen können, was wir mit Ihrem und Leser-Code arbeiten . Alles klar, das sieht ziemlich gut aus. Also lassen Sie uns die Datei sparen und sehen, wie es auf ihrer Webseite aussieht. In Ordnung, wir können sehen, wie Ihre Jumbotron-Einheit hier angezeigt wird. Es sieht vorerst in Ordnung aus, aber es gibt einige wenige Änderungen, die wir vornehmen müssen. zunächst Lassen Sie unszunächstunsere Textfarbe ändern. Ähm, wir wollen nicht lila sein. Wir wollten eigentlich schwarz sein, zumindest vorerst. Wir können es später immer ändern. Und ich werde nur diesen h einen Code hier essen und das sollte beheben. Da gehen wir. Das sieht viel besser aus. Jetzt. Eine Sache, die ich will ist, dass ich eine Mittellinie will. Der gesamte Text auf Jumbotron Einheit in der Mitte der Seite. Wenn Sie zurück zur Dokumentation gehen, können Sie auf Dienstprogramme klicken und wir können hier sehen. Es gibt eine Klasse, die wir verwenden können, um den Text eines Containers oder Elements oder irgendetwas in Bootstrap auszurichten . Und eins hier ist, Sie wollen diese Mittellinie, die wir hier in der zweiten Zeile sehen können, haben wir den Text in der Mitte, die links ausgerichtet Mitte und dann rechts ist. Wir wollen derjenige, der zentrierten Text auf allen Vieux-Port-Größen sagt. Und das wird eigentlich der zweite Absatz und unser Code-Snippet sein. Also, wenn wir hier zum Code-Snippet gehen, der zweite, der sein wird, den Text überschreiben, und wir wollen diesen Text Xs Zentrum. Dies wird also den Text auf allen Vieux-Ports ausrichten. Das bedeutet also mobile Geräte, Tablets oder Desktop-Geräte. Nun, wir können diese Klasse nehmen und sie einfach hier kleben und sie unserer DIV-Klasse für einen Jumbotron hinzufügen, und was sie tun sollten, ist, den Text auf unserem doppelten Versuch auszurichten. Und da gehen wir. Wir können sehen, dass Detektiv jetzt leicht auf unser Element ausgerichtet ist. Das war also ziemlich schnell, oder? Schön und einfach. Und wenn wir die Größe der Seite ändern, können wir hier sehen, dass sie völlig mobil ist, reaktionsschnell, und alles passt gut und einfach. Das nächste, was wir für eine Website tun können, ist ein wenig Abstand zwischen einigen unserer Elemente hinzuzufügen . Wenn Sie zurück zu der Dokumentation gehen, die Sie hier in den Dienstprogrammabschnitten sehen können, gibt es einen kleinen Autotext auf Abstand, und wir können etwas Rand oder Klopfen Zehe hinzufügen. Sind Elemente, die einen kurzen Code verwenden, und das ist der, den ich hier folgen werde, was wir sehen können. Es ist Punkt m t Null. Das steht also für Marge oben auf Null. Wir können auch hier sehen, das ist eins für den Rand links, und es gibt diejenigen zum Klopfen. Kämpfen nach rechts, und es gibt verschiedene Jungfrauen, um die verschiedenen Arten miteinander zu kombinieren, oder wenn Sie links und rechts oder oben und unten gleichzeitig tun wollen. Aber wir werden es einfach halten und ein wenig Platz zwischen unseren Elementen hinzufügen, mit dem Rand und klopfen kurze Codes. Also gehen wir zurück in unser HTML und was wir hier tun können, ist, lassen Sie uns einen Rand oben von lassen Sie uns mit etwas wie zwei oder drei gehen. Versuchen wir es mit drei. Und wofür diese drei hier steht, ist, dass dies Reiche sein wird. Das wird unsere Jumbotron-Einheit um einen Rand von drei Widdern erweitern. Wenn wir also die Seite gespeichert haben, können wir sehen, dass Jumbotron jetzt ein bisschen nach unten in die Mitte der Seite geschoben wird und dass es ziemlich gut aussieht. Wir wollten irgendwie irgendwo in der Mitte sitzen. Das sollte ziemlich gut für uns sein. Und wir können diese Klassen zu jedem Omen und unserer Seite zu schnell hinzufügen. Fügen Sie einige Abstände hinzu, ohne tatsächlich mit unserem CSS zu arbeiten. Nun, das nächste, was wir tun werden, ist, einen Container zu unserer Website hinzuzufügen, insbesondere unsere Website, wir brauchen nicht wirklich einen Container, weil es nur eine kleine Website ist und wir nicht sehr viel auf die Seite setzen . Aber ich werde einen Container hinzufügen, nur um dir zu zeigen, wie er aussieht und wie wir das mit Bootstrap machen können . Dies sind also die beiden Klassen Arten von Containern, die wir haben können. Dies ist auf der Dokumentation. Ich werde den ersten Container hier kopieren. Wir werden unseren Container nicht flüssig machen, also werde ich diese erste Div-Klasse hier kopieren, und ich werde sie kleben. Wahrscheinlich FP direkt unter ihrem Körper. Nehmen Sie hier. So übernimmt es die gesamte Website. Weißt du, füge auch das Schließen Div hinzu. Am Ende unserer Inhalte, geben Sie uns ein schnelles Speichern. All dieser Inhalt wird also in einem Container verschachtelt sein. Und sobald ich es gespeichert habe und wir die Website ansehen, siehst du irgendwie, was ich damit meine. So aktualisieren wir die Seite, die wir hier sehen können, dass Jumbotron jetzt in einem Container verschachtelt ist , der die Außenseite unserer Website umgibt. Und wenn wir die Größe wieder ändern, können wir sehen, dass die Größe des Containers mit dem Browser geändert wird. Wenn Sie also jemals einen Container zu Ihrer Website hinzufügen wollten , den Sie beim Entwerfen komplizierterer Websites sollten, können Sie diese Klasse schnell in einem Container in Bootstrap verwenden. In unserem Fall, Wir brauchen es nicht wirklich so viel, aber es ist immer noch schön Zehe haben, weil Tenniszentren oder Inhalte und macht es wirklich aussehen, wirklich schön. Das nächste, was wir tun werden, ist, dass wir einen Teil des Textes auf ihrer Seite hier ändern werden. Lassen Sie uns diese Hello Welt ändern und einen Titel für unsere Website kleben. Danach wird diese Anzeigeklasse hier die Größe ihres h eins bestimmen. Je niedriger die Zahl, desto größer wird die Anzeige drei ist in der Mitte. Und wenn ich zum Beispielzu einem Eins ändere zum Beispiel , wird das unseren Text viel größer machen und auf Jumbotron-Element, wenn ich ihn auf eine höhere Zahl anheben, wird es ihn kleiner machen. Also aktualisiere ich die Seite. Wir können sehen, dass der Text viel größer ist und mehr Wert darauf hat. Und das ist großartig für unsere Website hier, weil wir wollen, dass es Titel wirklich groß ist und den Besucher es wirklich bemerken. Und es sieht auch wirklich schön aus. So haben wir die Grundlagen ihres Jumbotron-Elements konfiguriert und auf einer Website eingerichtet. Jetzt können wir daran arbeiten, ein Anmeldeformular und ein paar Buttons auf unserer Website hinzuzufügen und danach werden wir fertig Styling unserer Website, um alles schön und schön zu machen. 4. So fügen Sie Buttons und Formulare hinzu: so bevor wir mit cremig beginnen können, sind Anmeldeformular und unsere Buttons für eine Website. Es gibt einen kleinen Fehler, den ich gemacht habe und sind jedes unserer Dokumente hier. Ich habe die Bootstrap-Bro's gesetzt, aber es soll eigentlich Brutes sagen. Bootstrap-Konferenz. Ich weiß nicht, warum ich reich geschnallte Rose dort steckte, wenn ich das mit etwas anderem verwechselt habe . Aber wir werden auf der Konferenz für jetzt auf ah gewechselt, um unsere endgültige Version unserer Website zu entsprechen . Und als nächstes müssen wir einen Teil des Textes wechseln, den wir ihr angezeigt haben. Ich werde vorerst diese Leitklasse für diesen Absatz loswerden. Und ich werde den ganzen Text hier essen und hier unseren eigenen Text einfügen, den wir für unsere Website wollen . Ich werde etwas in die Richtung halten, dass wir gerade unsere Website aufbauen oder so etwas. Alles klar, das sieht ziemlich gut aus. Als nächstes ändern wir den Absatztext im nächsten Absatz wieder, wir werden etwas hinzufügen, um unseren Besucher zu sagen, unsere E-Mail-Liste zu abonnieren, und dann können sie identifiziert werden, wenn unsere Website live im Internet ist. Richtig? Das sieht also ziemlich gut aus. Nicht so schlimm. Und was könnten wir hier sonst noch tun? Ich denke, das ist ziemlich gut. Ich denke, es ist keine Zeit, unsere Buttons auf unserer Website für unsere Sandform hinzuzufügen. Also werden wir das tun, indem wir zurück zur Bootstrap-Dokumentation gehen, und wir werden auf eine Schaltfläche hinzufügen hier klicken, weil wir dieses zweite Schaltflächenformular hier verwenden werden. Und das erste, was wir den Knopf zuerst haben. Und darin, das Feld, das sie eingeben können. Und das kann ich nicht mögen. 2. 1 Wort sagt den Knopf danach und sie sind irgendwie miteinander verbunden. Ich denke, das sieht ziemlich scharf aus. Also werde ich das Snippet hier schnappen, und ich glaube, es ist der 2. Also lasst uns den Anfang des Tiv finden, der es kopiert. Und es sieht so aus, als gäbe es 123 Debs danach, also sollte das ganze Stück Code genau dort sein. Ja, ja. Es sieht richtig aus. Lassen Sie uns eine Kopie geben. Öffnen Sie unsere HTML-Datei und wir fügen sie direkt nach unserem Absatz hier ein. Und das sollte gut aussehen. Geben Sie ihm einen schnellen kleinen Selektor und eingerückt ein wenig. Okay, lassen Sie uns diese Datei speichern und sehen, wie sie auf unserem Bildschirm aussieht. Ok? Wir können sehen, dass ihre Form nicht ganz richtig ausgerichtet ist, weil unsere, aber jetzt hatten wir früher in der Jumbotron ist tatsächlich schiebt es über. Also müssen wir hier nach unten gehen und den Button löschen, den wir hier ganz unten auf ihrer HTML-Seite hatten . Ja, das hier müssen wir loswerden. Also löschen wir das. Löschen Sie einfach den Absatz tas Nun, das brauchen wir nicht mehr. Und wenn wir es speichern und du wieder was bist, sollte es viel besser aussehen, als es vor Ariel getan hat. So wird unser Formular jetzt mit nach unserem kleinen Stück Textur angezeigt, das sagt, dass die Benutzer beschreiben. Und das nächste, was wir tun müssen, ist, dieses Formular auf unsere Art in der Mitte unserer Seite zu zentrieren, wie wir es mit unserem Text getan haben. Wir können das tun, indem wir diese Spalte ausgleichen, die unsere Suche nach MSM Also noch einmal, lassen Sie uns wieder auf die Bootstrap-Dokumentation gehen und wir gehen zu Ich glaube, es ist im Layout und Raster könnte im Grid-Abschnitt sein. Wir wollen sehen, ob wir einen Abschnitt zum Versetzen von Spalten finden können. Versatz. Beruhigendes Müsli. Das zeigt uns also, wo wir diese verschiedenen Klassen auch hinzufügen können. Unsere Spalten und machen sie an verschiedenen Stellen in einer Webseite erscheinen. Und diese hier unten ist diejenige, die Sie wollen, denn das wird die Ruhe setzen, um im mittleren Bereich der Seite auf ihrer Desktop-Ansicht zu erscheinen . Dies ist also die Klasse, die wir hinzufügen möchten. Also werden wir die Klasse hier kopieren und einfügen. Hier ist ein Code-Snippet. Wir brauchen nur den Klassennamen, , in unserem Fall, also können wir das hier kopieren. Und wenn wir es zu ihrer Form hinzufügen, wird es in der Mitte. Richten Sie unseren Schaltflächentyp hier aus, um in der Mitte unserer Webseite auf Desktop-Ansichten zu sein, und wir können das tatsächlich loswerden. Rufen Sie weiter große sechs an, und mal sehen, wie das verwendet wird, wir könnten anpassen oder Spalten ein wenig, je nachdem, wie es in unserem Webbrowser aussehen wird. Moment behalten wir es nur bei sechs, um zu sehen, wie es aussieht, weißt du, kompensiert es um drei. Ok, da gehen wir. Wir können unsere Augen für Miss Center nicht in der Mitte ihrer Seite sehen. Ziemlich cool. Lassen Sie uns die mobile Ansicht über Website anpassen, nur um sicherzustellen, dass es in der Mitte bleibt. Wir können hier sehen, dass es nicht ganz in der Mitte ist. Dies liegt wahrscheinlich daran, dass wir eine Spaltenklasse hinzufügen müssen, aber es sieht größtenteils ziemlich gut aus, also müssen wir das wirklich schnell anpassen. Und lasst uns versuchen, diese Spalte groß zu vier zu ändern. Versuchen Sie auch, unseren Offset zu ändern. Dies ist etwas, das Sie vielleicht irgendwie mit durcheinander bringen müssen, wie Sie Ihre ändern lassen Sie uns versuchen, Schalter, Sie wissen, Spalte groß zu vier und sind groß auf vier versetzt. Und da gehen wir. Wir können sehen, dass es jetzt auf ihrem Bildschirm zusammengefasst ist, und wenn wir uns ändern, um euch alle zu bewegen, passt es sich an die Mitte eines Bildschirms an, so dass es ziemlich gut aussieht. Ich bin glücklich damit, und es sieht ziemlich gut aus, bevor wir das abschließen. Hören Sie hier zu. Wir müssen einige Abstände zwischen einigen unserer Absatzvorzeichen auf ihrer Seite hinzufügen. Also lasst uns wieder hier rauf gehen und wir haben etwas, um seinen Text hier zu ändern. Ich ändere es in deine E-Mail im E-Mail-Feld und im Gehe Button. Lassen Sie uns das ändern, um zu abonnieren. Oder eigentlich, es wird benachrichtigt. Das hört sich ein bisschen besser an. Und wie für die räumliche nie Moment, Lassen Sie uns zu unserem jeden hier an der Spitze unserer Webseite gehen. Und lassen Sie uns einen Rand hinzufügen, um den Inhalt darunter zu schieben. Senken Sie es einfach nach unten, um Lobato Atemraum zwischen dem H und dem Absatz hier hinzuzufügen. Es gibt also ein paar Möglichkeiten, wie wir das tun können, aber ich gehe einfach zu unserem H und ich werde eine Marge hinzufügen. Also lasst uns Marge gehen, für den Boden sein und gehen wir zu. Und mal sehen, wie das für jetzt aussieht und auch ein aufstrebendes Top von drei, nur um ein wenig Abstand zwischen oben auf der Seite hinzuzufügen. Mal sehen, wie das dort aussieht. Du bewegst das einfach ein wenig nach unten und fügt ein wenig Abstand zwischen ihr hinzu, jeder in ihrem Absatz, und das sieht vorerst ziemlich gut aus. 5. Copyright-Informationen auf unserer Website: Also, was fängt es an, hier etwas Gestalt anzunehmen. Wir können sehen, dass wir fast fertig sind. Wir müssen hier nur ein paar Dinge tun. Das, was wir in dieser Lektion tun werden, ist tatsächlich fügen Sie unsere Websites Copyright Informationen direkt unter unserem Formular und dem dem Ultron Element hier. Also werde ich hier einen Absatz hinzufügen, und ich werde nur unsere Copyright-Informationen einhalten. Und in unserem Fall, lassen Sie uns so tun, als würden wir zurück auf die Website dieses Unternehmens verlinken, für die sie wollen, dass wir ihre Website entwerfen . Also lasst uns das hier reinkleben, nachdem wir eingegeben haben. Bist du alle hier? Wir werden gleich danach einen Ankertext hinzufügen und etwas in die Linie des Bootstrap setzen . Breaux ist eigentlich eigentlich, ich meine, Pros wissen sollen. Ich denke immer, es sind Profis, aber es ist die Bootstrap-Prosa, die es diese Website entwirft. Sie kleben dies in den Copyright-Informationen hier, und das sollte ein anklickbarer Link sein. Und lasst uns, äh, versuchen, das zu öffnen. Mal sehen, wie das auf ihrer Webseite aussieht. Okay, damit wir hier sehen können. Es ist genau hier, und wir brauchen ein wenig mehr Platz hier, also werde ich hier tatsächlich am Rand liegen. Es gibt zwei Dinge, die wir tun könnten. Wir könnten den Absatz außerhalb des allgemeinen Trends halten, wenn oder wir könnten einfach eine Marge hier hinzufügen und ich werde nur eine Marge hinzufügen, da Anarchist auf unserer Website, es macht keinen großen Unterschied. Also werde ich am Rand oben gehen und versuchen wir etwas in der Linie von drei Räumen, so dass das genug sein sollte, um genug Platz hinzuzufügen, damit Sie sehen können, dass es tatsächlich den Absatz hier nach unten außerhalb des Jumbotron schiebt . Aber das wird in unserem Website-Fall keine Rolle spielen, also sieht es hier ziemlich gut aus, und das ist ziemlich viel es für unsere Copyright-Informationen. Wir können jetzt anfangen, unsere Website noch weiter zu gestalten, und ich überprüfe nur die Mobile Virgin hier und alles sieht hier auch ziemlich gut aus. 6. Endliche Berührungen auf unserer Website: In Ordnung, also sind wir fast fertig mit unserer Bootstrap-Website hier. Wir haben nur ein paar letzten Schliff zu machen, und dann wird unsere Website vollständig sein. Das erste, was wir tun müssen, ist, dass wir einen neuen Ordner erstellen und es Bilder nennen, und ich werde mein Bild hier schnappen und wir werfen in den Ordner. Und wenn ihr das Bild braucht, könnt ihr es hier im Download-Bereich von Donald zu Beginn des Kurses herunterladen. Ich werde die fertige Version mit der Bilddatei haben. Also werde ich es hier kopieren, und ich werde es in unsere Bildermappe stecken. Sie müssen sich daran erinnern, dass Name, Hintergrund für Bild und weiter oben, lassen Sie uns in unsere HTML gehen und öffnen Sie unsere benutzerdefinierte Punkt-CSS-Datei, die wir zuvor erstellt. Wir werden jetzt einige benutzerdefinierte CSS-Stile implizieren, die unsere Bootstraps-Styles oder irgendetwas außer Kraft setzen werden. Wir möchten extra zu unserer Website hinzufügen. Wir bleiben auch hier drin. Das erste, was wir tun werden, ist, dass wir den Hintergrund oder eine Website ändern, um dem Bild zu entsprechen , das ich gerade in ihrem Bild-Ordner platziert habe. Das erste, was wir tun müssen, ist, dass wir das Körperelement ihrer Seite anvisieren, und das Körperelement ist im Grunde nimmt unsere gesamte Webseite auf. Und lassen Sie uns den Hintergrund zu diesem Bild ändern, das wir zuvor hatten. Also begannen wir uns mit der Hintergrund-CSS-Eigenschaft. Ich werde bleiben. Sie sind alle hier, und ich werde den Dateipfad zu unserem Bild deklarieren. Also haben wir Bilder und dann Hintergrund. Das JPEG ist unser Dateiname, der wir für unseren Hintergrund verwenden möchten. So wird das Bild, das wir früher platziert haben, und es als Hintergrund für eine Website verwenden . Ich muss auch sicherstellen, dass ich diesen Ford Schrägstrich hier vor Bildern hinzufüge. Andernfalls wird es nicht richtig funktionieren. Also lasst uns dieses Foul gerettet geben und mal sehen, ob es funktioniert. Boom, da geht's. Wir können sehen, dass ihre Bilder jetzt den Hintergrund für einen Körper. Aber das Problem ist, dass ein Jumbotron auch seinen eigenen Hintergrund hat. Zuerst werde ich auch Hintergrundabdeckung hier in unserem Körperelement setzen, und das wird unser Bild ausstrecken und sicherstellen, dass es besser zum Hintergrund passt , also setzen wir Hintergrundabdeckung ein. Unser Bild wird sich hier ein wenig ändern, wenn Sie die Seite aktualisieren, das sieht ein bisschen besser aus. Aber wir müssen diesen Hintergrund für unser Jumbotron-Element immer noch loswerden. Und wir können Sie das wirklich leicht, indem wir eine Klasse für unsere Jumbotron in unserem CSS erstellen und wir können ihm den Hintergrundwert von Nuss geben . Also, eigentlich, lassen Sie uns das ein Jumbotron sagen, denn das ist eigentlich der Name John Beltrans Jumbotron. Und noch einmal werden wir den Hintergrund gehen und dann wählen wir keinen aus. Und das wird den Hintergrund vollständig loswerden und Maker-Element transparent. Und wir haben Ihre Seite aktualisiert. Da gehen wir. Wir können hier sehen, dass unser ganzer Bilderhintergrund die ganze Seite einnimmt und unser Hintergrund-Pro Jumbotron jetzt verschwunden ist. Aber unser Text ist hier nicht sehr lesbar, also müssen wir die Farbe ändern. Und ich glaube, die Farbe, die wir auch ändern werden, ist weiß. So können wir einfach Dot Jumbotron Ziel das Absatzelement innerhalb des Jumbotron und mit der CSS-Farbeigenschaft würden wir einfach bleiben und weiß, um den Text zu ändern, alles zu warten. Ich werde auch den Jumbotron H anvisieren und wir werden die Farbe auch weiß machen . Also lassen Sie uns das aufsparen. Sie zuerst unsere Seite. Sie sehen, dass unser Text jetzt ganz weiß auf unserer Seite ist und viel besser aussieht. Sie können es jetzt tatsächlich lesen, so dass es ziemlich gut aussieht, um ein wenig mehr Stil auf unserer Website hinzuzufügen . Lassen Sie uns dies benachrichtigt werden. Schaltfläche die Farbe Blau kann nicht mit unserem Text am unteren Rand in unserem Copyright übereinstimmen. Und sie gehen ziemlich schön mit dem violetten Hintergrund, den wir haben. Also werden wir uns begnügen. Wir werden hier den Schaltflächen-Text finden, und gehen wir mit diesem primären Knopf hier. Also wieder, wenn wir uns das Code-Snippet ansehen, können wir sehen, dass diese Klasse die Klasse von BT n dash primär ist. Das ändert Ihren Knopf in Blau. Also es ist kopieren Sie diese Klasse hier, gehen Sie zurück zu ihrem HTML und wo ist unser Aber in der Nähe würden wir diese Schaltfläche sekundäre Klasse loswerden und gehen Taste primär. Geben Sie ihm einen schnellen Safe und das sollte unsere Taste zu blau ändern. Ehrfürchtig. Das sieht viel besser aus in der endgültigen Version unserer Webseite sind wieder auf war eigentlich viel dunkler. Ich werde Ihnen einen CS CSS-Code zeigen, den wir verwenden können, um den Grady int unseres Hintergrunds entweder heller oder dunkler zu ändern . Und das ist ein wirklich ordentliches Kommando. Sie können einige ziemlich coole Sachen damit verwenden und wirklich verbessern, wie die Bilder auf Ihrer Website aussehen . Also gehen wir zurück in unser CSS und mit unserer Hintergrundfarbe Eigenschaft hier für unseren Körper, werden wir die schlankere Grady int-Eigenschaft hinzufügen und ich werde das einfach austippen. Und danach werden wir erklären, wie dieser eigentliche Code funktioniert und funktioniert. Also zuerst haben wir lineare Zutat und dann haben wir rgb A, die im Grunde das transparente e des Hintergrunds ist . Wir werden den nächsten Teil hier für oben und unten und links und rechts hinzufügen. Und Sie bemerken, dass ich ihnen einen Nullwert gegeben habe, außer dem letzten. Ich gab es 10.7. Diese 0,7 ist, die tatsächlich die Dunkelheit zu ändern, die zu einem dunkleren oder helleren Farbton kommt , je nachdem, welchen Wert wählen. Also, wenn wir dies eine schnelle speichern und lassen Sie uns einfach sehen und sehen, was sich das geändert hat. Auf unserer Website können wir sehen, dass die Rückseite hier tatsächlich ziemlich dunkel war. Es ist sehr, sehr dunkel. Es ist ein cooler Effekt, aber es ist fast ein wenig zu dunkel. Also, was wir tun können, um es entweder dunkler zu machen, wenn Sie möchten, oder wenn Sie es heller machen wollen, können wir zurück zu dieser Eigenschaft. Wir können die Zahl einfach ändern, wenn wir sie auf sechs anstelle von 60,7 ändern. Aber das wird tun, wird es etwas heller machen, nur ein bisschen heller. Und das sieht eigentlich viel besser aus. So wie das aussieht. Sieht ziemlich cool aus. Und Sie können es anpassen, wie Sie wollen. Sie können die Werte ändern, um zu sehen, wie es sich auswirkt, aber ich denke, das sieht ziemlich gut für unsere Website aus. In unserem Fall, eine Sache, die wir hier reparieren müssen, ist Adul über den Abstand zwischen unserem Knopf. Ich füge unserer Eingabegruppe hier einen Rand oben in einem Raum hinzu. Dies wird ein wenig mehr Platz zwischen unserem Button und Absatz dort, das sieht ziemlich gut aus Also da gehen wir. Ich denke, unsere Website ist ziemlich vollständig. Fühlen Sie sich frei, verschiedene benutzerdefinierte Änderungen zu machen, die Sie mögen. Aber lassen Sie uns eine schnelle Ansicht machen und alles überprüfen, um sicherzustellen, dass es alles gut aussieht. Wir können hier sehen, dass unsere Website voll funktionsfähig ist und Desktop-Ansicht sowie eine mobile Ansicht.