So erstellen Sie a für die Website | Laurence Svekis | Skillshare

Playback-Geschwindigkeit


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

So erstellen Sie a für die Website

teacher avatar Laurence Svekis, Best Selling Course 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

23 Einheiten (2 Std. 5 Min.)
    • 1. PromoVideo

      1:28
    • 2. 1 HTML CSS-Kurs Einführung

      3:02
    • 3. 2 Kursressourcen zum Erstellen einer Website von Grund auf neu

      7:33
    • 4. 4 Website-Planung

      5:04
    • 5. 5 HTML-Seite erstellen Struktur

      10:40
    • 6. 6 Hinzufügen von Bootstrap zu einer Website

      5:09
    • 7. 7 Adding hinzufügen

      2:20
    • 8. 9 Hinzufügen von Default

      6:30
    • 9. 10 Update Logo Slogan Abschnitt

      5:57
    • 10. 11 Erstellen einer Navbar mit aktivem Element

      7:07
    • 11. 12 Index Willkommensnachricht

      9:29
    • 12. 14 Erstellen eines zwei Spalteninhalts

      3:49
    • 13. 15 Footer erstellen

      2:27
    • 14. 16 Setzen Sie es auf

      3:34
    • 15. 17 Erstellen von Schriftarten

      4:27
    • 16. 18 Update navbar reagieren

      4:05
    • 17. 19 JavaScript zum Ausstecken und Anzeigen von Elementen

      5:48
    • 18. 21 Erstelle eine weitere reaktionsschnelle Navbar

      11:59
    • 19. 23 So fügen Sie Bootstrap JavaScript Bibliothek hinzu

      3:19
    • 20. 24 Bootstrap Menü NavBar

      8:45
    • 21. 25 Bootstrap Menü Navbar

      5:56
    • 22. 27 Seiten auf der Website erstellen

      4:33
    • 23. 28 Online-Code-Editor

      2:03
  • --
  • 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.

944

Teilnehmer:innen

--

Projekt

Über diesen Kurs

Komplette Anleitung zum Erlernen einer HTML-CSS-Website die vollständig reaktionsfähig und bereit für mobile Geräte ist

Lerne dir die Erstellung einer modernen vollständig responsive Website von Grund auf neu auf!

Schritt für Schritt Training inklusive allem, was du brauchst, um eine Website von Grund auf neu zu erstellen. Am Ende dieses Kurses hast du die Ressourcen und das Verständnis für die Erstellung von Websites mit CSS in HTML

Moderne Websites sind für jedes Gerät bereit, einschließlich Mobiltelefone, Tablets und Desktops. Dieser Kurs zeigt dir, wie du moderne und reaktionsschnelle Websites erstellen kannst.

Dieser Kurs bietet alles, was du zum Starten brauchst

  • inklusive Quellcode
  • top
  • Schritt für Schritt Schulung
  • volle HD-Videos
  • Drahtrahmen und Webdesign Planung
  • volles Portfolio-Projekt von Anfang bis Ende
  • wie du Bootstrap für eine rasche Webentwicklung hinzufügen

Erfahren Sie, wie du Webseitenstruktur mit HTML erstellen und das Styling hinzufügst. Verwende CSS, um deine Website zum Leben zu bringen. Dann mache es ansprechend!

Ich stehe hier, um dir zu helfen, wie du Websites erstellen und bereit bist, alle Fragen zu beantworten, die du vielleicht hast. Entdecke die Freiheit des Erstellen und Stylings von Websites von Grund auf aus. Bist du bereit, fangen wir an, zu lernen, wie du eine Website von Grund auf erstellen kannst.

Triff deine:n Kursleiter:in

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Kursleiter:in

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... 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. PromoVideo: erfahren Sie, wie Sie eine moderne, voll reaktionsfähige Website von Grund auf neu erstellen können. Mein Name ist Lawrence, und ich bin hier, um Ihnen zu helfen, Websites von Grund auf neu zu erstellen. Ich bin seit über 16 Jahren Webentwickler und freue mich sehr, die Möglichkeit zu haben, diesen Kurs im Rahmen dieses Kurses zu präsentieren. Wir werden eine Website aufbauen, Schritt für Schritt, Schritt für Schritt, und ich werde Ihnen zeigen, wie Sie HTML verwenden, Ihre HTML-Struktur vorbereiten und dann Styling hinzufügen, um Ihre Website ans Licht zu bringen. Und dann werden wir auch zusätzliches Styling hinzufügen, um Ihre Website-Antworten zu machen. Dies ist eine Schritt-für-Schritt-Schulung. Alles ist enthalten, dass Sie wissen müssen, um eine Website von Grund auf neu zu erstellen,in , diesem Kurs haben Sie die Ressourcen und das Verständnis, um Ihre eigenen Websites mit HTML und CSS zu erstellen . Moderne Websites sind bereit für Geräte jeder Größe, einschließlich Mobiltelefone, Tablets und Desktops. Dieser Kurs zeigt Ihnen, wie Sie Websites erstellen, die modern und reaktionsschnell sind. In diesem Kurs haben wir Quellcode aufgenommen. Talk-Ressource ist Schritt für Schritt Training voll HD-Videos, wie man einen Drahtrahmen und Web-Design-Planung einrichten. Wie man dieses Portfolio-Projekt von Anfang bis Ende aufbaut. Auto Bootstrap, schnelle Web-Entwicklung in einer ganzen Menge mehr. Entdecken Sie die Freiheit, Styling-Websites von Grund auf neu zu erstellen. Bist du bereit? Lassen Sie uns anfangen zu lernen, wie man eine Website von Grund auf neu macht. 2. 1 HTML CSS-Kurs Einführung: Hallo und willkommen zu unserem Einführungskurs, wie man eine Website von Grund auf neu erstellt. Mein Name ist Lawrence, und ich werde dein Lehrer für diesen Kurs sein. Und ich bin so aufgeregt, die Möglichkeit zu haben, Ihnen diesen Kurs vorzustellen. Ich komme zu Ihnen mit über 16 Jahren Erfahrung in der Webentwicklung und einer meiner Lieblingsaufgaben ist es, Websites zu bauen. Ich genieße wirklich den Aspekt, HTML-Code zu erstellen und dann CSS Styling hinzuzufügen und dann, natürlich, JavaScript toe Fügen Sie diese zusätzliche Funktionalität zu Ihren beiden Websites hinzu. In diesem Kurs werde ich Ihnen vorstellen, wie man mit einem Grunddesign beginnt. Dies ist also unser grundlegendes Design unserer Website, wo wir mehrere Bereiche unserer Website haben. Wir haben einen Desktop, Sie und eine mobile Ansicht und wie wir wollen, dass diese Abschnitte abschleppen, abhängig von der Bildschirmgröße . Das ist also, was wir anfangen werden, und dann werden wir unsere HTML-Struktur erstellen. Die HTML-Struktur wird also vorbereitet und bereit sein, CSS zu handhaben. Und wie Sie hier in diesem Screenshot sehen können, haben wir einige der Struktur, die hier verfügbar ist, wo wir sie in verschiedene Abschnitte aufteilen . Und dann wurden diese Abschnitte Teoh verwenden, Styling anwenden und tatsächlich verschieben, abhängig von der Bildschirmseite. Also alle diese verschiedenen Bereiche Luft gehen in den HTML-Code abgeschnitten werden, und wir werden Styling anwenden, um es wirklich zum Leben erwecken. Und wie Sie sehen können, ist dies ein Beispiel für eine der Websites, die wir im Laufe des Kurses aufbauen werden. Sie können sehen, wann immer wir die Größe neu sind, wir sehen, dass die Größe des Navigationsmenüs so ist es eine voll reaktionsfähige, bereit zu gehen Website und wir können sehen, dass, wenn wir klicken, wir brandneue Seiten bekommen. Die Vorlage ändert sich also. Wir haben eine andere Vorlage für unsere Injektionsseite oder Einführungsseite, wie wir für über und Produkte und Kontakt tun. So sehen wir auch, dass das Menü wieder Dimensionierung ist und wir werden Ihnen verschiedene Möglichkeiten zeigen, um diese responsiven Navigationsmenüs zu implementieren, weil sie immer so wichtig für Web-Besucher , die auf Ihre Website kommen, so dass sie alle in der Lage sein, zu interagieren richtig mit Ihrer Website. Also tatsächlich, Sie verschiedene Möglichkeiten, um diese Navigationsmenüs einzurichten. Es gibt einige, die nur Styling sind und dann andere, auf die wir ein wenig Javascript anwenden , um diese Funktionalität der Menüs hinzuzufügen. Der gesamte Quellcode und die Ressourcen, die ich in diesem Kurs verwenden werde, sind ebenfalls enthalten, damit auchSie auch zusammen mit den Kursstunden arbeiten und üben können und Ihre eigene Website Aktualisieren Ihrer HTML- und CSS-Fähigkeiten, während Sie durch den Kurs fortschreiten. Also, wenn Sie bereit sind, beginnen wir, eine Website von Grund auf neu zu erstellen. 3. 2 Kursressourcen zum Erstellen einer Website von Grund auf neu: Willkommen zu unserem Kurs zum Aufbau einer Website von Grund auf neu. Also einige der Ressourcen, die ich während des Kurses verwenden werde, die ich jetzt auf meinem Bildschirm offen habe. Also hier drüben auf der linken Seite, das sind Klammern, Dies ist Klammern Editor. Es ist von Adobe und dann auf der rechten Seite, ich habe meine Lebensvorschau zur Verfügung, und das wirkliche alles über Klammern ist, dass es mit dieser Lebensvorschau kommt. Und wie Sie sehen können, wenn ich hier auf der linken Seite etwas tippe, erscheint es in der Lebensvorschau auf der rechten Seite. Das scheint also ziemlich schwierig zu sein, hin und her zu gehen, und ich kann tatsächlich sehen, was passiert, wenn ich Code in Echtzeit hinzugefügt habe. Und wenn Sie nach einem Editor suchen, wenn Sie bereits einen Editor haben, können Sie diesen verwenden. Aber wenn Sie nach einem brandneuen Editor suchen, um Klammern von Adobe auszuprobieren, ist es verfügbar. Es ist kostenlos, Open-Source-Text-Editor funktioniert über mehrere Plattformen herunterladen, und es gibt einige wirklich gute Informationen hier an der Klammer Stop I eine Website. Es gibt auch viele wirklich schöne beliebte Erweiterungen und ich werde es auch in diesem Kurs verwenden . Einige der anderen Ressourcen, die ich im Kurs verwende, sind die Polizei halten es, was Ihnen die Möglichkeit gibt, Platzhalterbilder innerhalb Ihrer Website zu bitte. Und das ist großartig, wenn Sie Websites entwerfen, weil dies Ihnen die Möglichkeit gibt wirklich Inhalte hinzuzufügen und es aussehen wie eine normale Website würde mit allen Inhalten an Ort und Stelle. Es gibt auch Blind Text Generator dot com und das ist die gleiche Sache, wo wir in einigen zusätzlichen Text dort Platzhaltertext hinzufügen werden und es uns ermöglicht, Laura um ip suit Text S O zu generieren . Dies ist nur ein Dummy Text, den wir können in unserem Build nutzen, wenn wir unsere Website und eine andere Ressource etwas aufbauen, die Sie innerhalb dieses Kurses verwenden können. Das ist also glitchy glitchy dot com, und das ist, wo ich den Drahtrahmen für die Website erstellen werde, die ich innerhalb des Kurses bauen werde, so dass Sie jede Bearbeitungssoftware s verwenden können Oh, das ist nur gibt mir die Fähigkeit wirklich leicht Art von Skizze von dem, was ich will. Die Website Toe sehen aus und dann in der Lage sein, es in einem J-Pegs zu präsentieren und dann können wir darauf zurückverweisen , wie wir die Website aufbauen. Und das ist immer eine gute Idee, wenn Sie Ihre Website aufbauen, nur um etwas zu skizzieren , und Sie bekommen eine grobe Vorstellung davon, wie Sie Ihre Website Zeh aussehen wollen und dann bauen Sie auf, dass. Also werde ich das für Drahtframing verwenden und Sie könnten eine Reihe von anderen Ressourcen und einschließlich Adobe Photo Shop verwenden. Und es gibt auch einige Drahtrahmen Drahtrahmen Anwendungen. Das sind wirklich nützlich, und Sie können es wirklich schnell bauen. Aber ich werde einfach einen sehr boxigen Typ aufbauen. Ich würde Linie der Website, die ich baue und eso die cliffy dot com wird ausreichen für die Bedürfnisse dieses Kurses s eine andere Sache, die ich benutze. Ich verwende einen Browser-Chrome-Browser. Und das wirklich schöne an Chrome ist, dass wir Zugang zu Dev Tools bekommen. Eso Das ist der Konsul, der sich gerade geöffnet hat. Ich bin auf einer Windows-Maschine, so dass ich die Entwickler-Tools mit Control Shift öffnen kann ich oder ich kann in das Menü gehen hier klickt öffnen Sie die Entwickler-Tools. Und was die Entwickler-Tools tun, ist, dass sie Ihnen die Möglichkeit geben, einen kurzen Blick auf Ihren HTML-Code zu werfen. Sie können auch Ihr CSS sehen. Wir haben das Box-Modell hier drüben. Eso kann ich ein Element auswählen und ich kann einige grundlegende Informationen aus dem CSS sehen. Ich kann sehen, wo die Margen liegen, und ich kann eine bessere Vorstellung davon bekommen, was ich anpassen muss, wenn ich einige Anpassungen vornehmen muss . Ein weiteres wirklich nützliches Werkzeug ist Chrome, weil es wirklich viele Fähigkeiten hat. Und auch, wenn Sie Javascript-Code entwickeln, haben Sie den Konsul hier, so dass Sie hin und her ihre Quellen, Netzwerk-Timeline-Profile und eine Reihe anderer Sachen hier als gut kommunizieren können , wirklich nützlich. Wir haben auch Zugriff auf die dom, so dass wir alle diese dummen Dawn Eigenschaften hier verfügbaren Rate im Browser sehen können . Also werden wir definitiv dieses und auch ein anderes Werkzeug verwenden, das ich verwenden werde . Aber es ist nicht wirklich notwendig für Sie, wenn Sie die Europa-Website in Betrieb bringen wollen und das wird Sam und Zampa im Wesentlichen lassen mich auf Apache Server auf meinem lokalen Rechner laufen , so dass ich zum lokalen Host gehen kann, wenn ich gestartet habe, und ich könnte tatsächlich PHP-Code ausführen . Aber der Kurs wird auf HTML und CSS basieren, die nur einen Browser zum Ausführen benötigen. Aber ich mag Teoh, führe den lokalen Host, so dass ich tatsächlich simulieren kann, wie die Website auf der Domain eso präsentiert wird . Dies ist auch eine Option, um das läuft. Wenn Sie etwas entwickeln möchten, vor allem, wenn Sie einige PHP-Funktionen und Datenbank-Funktionen zu Ihrer Website hinzufügen und diese acht ausprobieren möchten , dann ist Zampa definitiv eine ihrer besten Ressourcen, um schnell einsatzbereit zu sein. Eso und dies ist über Windows, Linux und OS X und die Website Apache Friends Dot Org's verfügbar und Sie können einige weitere Informationen über Zampa relativ einfach einzurichten herausfinden . Sie können einfach klicken, um einzurichten und dann können Sie in den Konfigurationsdateien einrichten, wo die Quelle Ihrer Website, wo Ihre Quelldateien sind, um Ihre Website auszuführen, oder Sie könnten es einfach in ihren Standardordner herunterladen. Das wird auf deinem Rechner eingerichtet, wenn du Sam so wieder aufgebaut hast, nicht unbedingt notwendig. Aber es ist eine gute Ressource in einem guten Werkzeug Zehe haben, wenn Sie Ihre Entwicklung tun. Also werden wir auch mit einer grundlegenden HTML-5-Vorlage beginnen. Also haben wir hier einen Grundriss, alles bereit zu gehen. Also haben wir unseren HTML-Code, unseren Kopf und Körper, und wir verlinken auf eine Style dot CSS-Datei, die gerade hier drüben ist, dass ich beide öffnen beide Dateien jetzt, und wir werden sie verwendet werden, um zu entwickeln die Website. Also all das bereit zu gehen Und in der nächsten Lektion werden wir anfangen, Code hinzuzufügen und unsere Website von Grund auf neu zu erstellen. Und natürlich werden die Websites voll reagieren. Wir werden auch einige Boots Drop verwenden, um unser Menü reaktionsfähiger zu machen . Bootstrap bietet eine einfache Möglichkeit, reaktionsschnelle Menüs zu erstellen. Und wenn Sie nicht mit Bootstrap Boots vertraut sind, Drop ist verfügbar und erhalten Bootstrap dot com. Und was Bootstrap ist, ist das, ah, Framework, mit dem Sie schnell Web-Inhalte entwickeln können. Eso überwiegend. Es ist im Wesentlichen eine CSS-Datei, mit der Sie vollständig responsive Websites erstellen können, indem Sie einfach Klassen in Ihrem HTML hinzufügen. Und dann gibt es auch einige JavaScript-Komponenten und diese Luft in J-Abfrage basiert. Und das sind auch wirklich nützliche regelmäßige Dinge, die in einer Website hinzugefügt werden, und es ist bereits vorkonfiguriert, so dass alles, was Sie tun müssen, ist darauf zuzugreifen, über Sie in J-Abfrage zugreifen müssen und die Boots löschen JavaScript-Datei, und dann haben Sie vollen Zugriff auf all diese Funktionen, und alles, was Sie tun müssen, ist es in Ihrem HTML zu platzieren. Aber wir werden nur überwiegend in Stiefeln suchen. Drop Nutzung des responsiven Menüs, weil Bootstrap hier eine wirklich nette Komponente für reaktionsschnelle Menüs bietet , und wir werden damit auch in diesem Kurs verwenden. Also fangen wir an, unsere Website zu programmieren und zu erstellen 4. 4 Website-Planung: bevor wir mit der Programmierung unserer Website beginnen. Lassen Sie uns gehen über und Draht freien Graben, unsere Website und schnell direkt nach oben. Machen Sie eine kurze Zeichnung, wie wir unsere Website aussehen wollen und wie wir unsere Inhalte auf unserer Website präsentieren möchten. Im Wesentlichen werden wir mehrere Content-Container-Bereiche erstellen und dann innerhalb dieser Bereiche können wir die verschiedenen Teile des Inhalts hinzufügen. Also, zuerst erstellen wir einen Kopfteil. Dies ist also, wo alle unsere Header-Inhalte gehen, die wir innerhalb der Website verwenden werden. Als nächstes wir eine Navigationsleiste erstellen und diese Navigationsleiste wird sich tatsächlich bewegen werden wir eine Navigationsleiste erstellen und diese Navigationsleiste wird sich tatsächlich bewegen, so dass wir es in unserem Kopfbereich platzieren können und das innerhalb von s enthalten können, so dass wir es verwenden können, damit wir nicht erstellen können ein, hält Kopf Abschnitt hier, und fügen Sie dann in ein paar Stücke hier. Vielleicht könnten wir hier ein Logo haben. Und dann hier oben hätten wir unsere Navigationstasten, damit wir so etwas wie dieses Leck tun können Art of Sehen Sie dies typischerweise innerhalb von Websites, wo wir einen Umriss hier haben und wir haben sind jetzt da oben und unsere lokalen. Als nächstes müssen wir einen Bereich haben, in dem wir einige zusätzliche Inhalte hinzufügen möchten, die wir von unserer Website anzeigen möchten. Also wollen wir unsere Website im Wesentlichen eine zweispaltige Website machen und wir wollen, dass die anfängliche Index-Seite toe vielleicht ein wirklich großes Eröffnungsbild hier haben, um wirklich diejenigen die Aufmerksamkeit der Benutzer, die im Schlepptau kommen, auf unsere Website zugreifen und dann werden wir als nächstes einen Containerbereich erstellen, und dieser Containerbereich wird einen normalen Containerbereich und eine Seitenleiste haben, also als ein Stück dort als einen Abschnitt zu halten und dann einen Inhalt dort und einen anderen Inhaltsbereich für eine Sidebar für mich zu erstellen , die den ganzen Abschnitt dort aufnehmen könnte. Also schaffen wir so etwas, wo wir einen Container dort haben, und wir haben hier eine Sidebar , und ich werde das einfach nach unten verschieben, damit es im Einklang mit dem anderen steht und ihm ein bisschen geben , ihren Abstand von der Seite zu vergießen. Und dann, schließlich, was braucht jede Website? Also haben wir einen Header. Wir haben unseren Inhaltsbereich, und schließlich brauchen wir einen Fußzeilenabschnitt. So wird dies als unsere Fußzeile Bereich dort handeln und wir können in all unseren Fuß oder Inhalt innerhalb ihrer im Wesentlichen hinzufügen , das ist, was wir wollen. Unsere Website, Grundlegendes Website-Layout toe sehen aus, als hätten wir 1234 Hauptcontainer Bereiche und dann auf den regulären Seiten, wir werden nur die Kopfzeile haben, die den Inhaltsbereich und die Fußzeile enthielt. Also werden wir diesen Intro-Teil nicht hier behalten, den wir in der Mitte betrachten, und weil wir eine Marke wollen, wollen wir diese Website mobil machen. Wir müssen auch eine mobile Version erstellen. Dies wird also für die kleineren Bildschirme sein. Wir werden die Kopfinformationen komprimieren. Also werden wir die Navigation zu einem dieser anklickbaren Menüs mit drei Zeilen verschieben. Erstellen Sie also eins von denen und das wird durch Bootstrap gemacht werden. Hier drüben können wir unsere Inhalte behalten, vielleicht unsere lokalen und so weiter. Wir werden diese vier Containerbereiche haben, also haben wir unser Hauptbild dort nur auf der Indexseite. Dies ist also nur für die Indexseite, und wir werden es nicht auf allen unseren Seiten behalten. Und dann gehen wir als nächstes, geben wir diese voll mit quer. Also haben wir unseren Hauptinhaltsbereich in unserer Sidebar. Also werden sie übereinander stapeln. Im Wesentlichen werden sie immer noch in diesem einen Hauptcontainer sein, aber dann wird es zwei Container in ihren geben, die den Vollbildmodus mit aufnehmen werden . Also werde ich eine schnelle Anpassung daran vornehmen. Also ist es aufgestellt und dann haben wir noch einen da drin. Und im Wesentlichen was? Im Grunde sieht das so aus, als würde das alle zusammen liegen und dann schließlich die Fußzeile stapeln und dann schließlich . Also im Wesentlichen wird unser mobiler Bildschirm eine verdichtete Version dessen sein, was gemein ist Todesstopp wird aussehen, also werden wir den gleichen Bereich hier oben und dann Containerbereich haben . Also werden wir alle diese verschiedenen Inhaltsbereiche auch haben. Also hier oben haben wir unseren Kopfbereich hier wird der gleiche sein wie dieser. Dieser hier wird die Szene sein, und dieser wird die gleiche sein. Und dann die Fußzeile am unteren Rand. Also vier Hauptabschnitte und diese werden eins über andere stapeln, also wird es tatsächlich wie fünf aussehen, aber wir werden es den Inhalt innerhalb dieser vier mittleren Inhaltsbereiche behalten, also fangen wir an zu codieren. 5. 5 HTML-Seite erstellen Struktur: Schauen wir uns unseren grundlegenden Überblick über die Website an, die wir in diesem Kurs erstellen möchten . Wir haben also eine regelmäßige Ansicht hier auf der linken Seite und unsere mobile Ansicht auf der rechten Seite wird den Editor nicht öffnen und wir beginnen, unsere HTML-Struktur zu erstellen, um diese Website zu erstellen. Und ich habe meine kurze Vorschau hier auf der rechten Seite. Also, anfangs werden Sie wahrscheinlich nicht viel daraus kommen sehen. HTML ist, dass wir im Wesentlichen diese Struktur mit den Elementen bauen, die mit einem Header beginnen sollten . Das wird also unser Haupt-Header-Bereich sein, und wir werden ihm eine neun i d Kopfzeile geben. Dies ist nur für den Fall, dass wir uns entscheiden, Header wieder s zu verwenden, so dass wir es innerhalb unseres HTM innerhalb unseres CSS identifizieren können und dann innerhalb dieses Headers möchte ich Abschnitte trennen. Der erste Abschnitt wird der Logo-Bereich sein, also wird das nur ein normales div sein, und ich werde ihm ein I d geben. Logo und wir haben das einfach geschlossen und vielleicht können wir Firmennamen oder so etwas setzen . Sie sollen nur die Polizei halten und dann möchte ich als Nächstes die Navigationsleiste einrichten. Also wird das jetzt unser gemeiner sein und ihm ein I d von nab weit geben. Und diese Luft nur Möglichkeiten, wie ich es in meinem CSS identifizieren kann. Deshalb gebe ich ihnen dort Ideen. Wir können sie nach Bedarf benötigen oder auch nicht, aber ich mag es, dass ich es in meiner Mittelstruktur meiner Website haben kann, um die verschiedenen Elemente, die verfügbar sind, leicht identifizieren zu können. Also innerhalb der Knave-Leiste, in der Regel, wenn wir Navigationsmenüs entwerfen, tun wir sie wie auf geordnete Listen. Und das stellt die Liste von Navigationselementen wirklich ordentlich als Listenelemente dar, damit ich meine 1. 1 hier erstellen kann . Und das wird eine Kirche ref sein, und ich wollte es jetzt als leere h ref verlassen. Oder vielleicht kann ich einen Index Punkt html platzieren, so dass wir das an Ort und Stelle haben, schließen Sie das ab und tippen Sie einfach zu Hause, und ich werde diesen eso in der Regel für Websites kopieren und einfügen, wir werden vielleicht vier verschiedene Elemente hier im Menü haben. Also die nächste, die wir einen über mich Abschnitt machen könnten, Also nennen Sie es einfach ein Boot und wird eine über Punkt HTML-Seite erstellen, nachdem wir die Vorlage fertig und tun unser Styling. Das will eine Anzeige auf diesen zusätzlichen Seiten, und der Grund dafür ist, dass ich es tun muss, muss ich planen, wie ich das CSS zuerst anfüge . Und deshalb werde ich diese HTML-Struktur und die anderen Seiten am Ende kopieren und einfügen , nachdem ich mein Styling gemacht habe. Also könnte dieser für Produkte sein, und ich werde einfach diese Seite Produkte html und dann nennen. Schließlich muss jede Webseite ein Kontaktformular haben, also müssen wir eine Möglichkeit haben, Teoh den Website-Besitzer zu bekommen. Sie wollen eine Bestellung oder so etwas aufgeben, so dass wir eine Möglichkeit haben, dass dieser Besitzer der Website kontaktiert werden kann. So sieht unsere Website gerade aus. Es sieht nicht wirklich aus wie eine Website, aber wir werden das aufbauen, und wenn wir dieses Styling anwenden, wird es wirklich magisch alle zusammenkommen. Also das nächste, was in unserem Plan liegt, wenn wir uns unsere Pläne ansehen. Also haben wir die beiden Abschnitte hier, die wir gerade erstellt haben. Wir haben diesen lokalen Bereich geschaffen. Wir haben die Knave-Leiste, den Navigationsbereich, erstellt. Also, das ist es für den Kopfbereich unserer Website. Und der nächste ist dieser Intro Willkommensnachrichtentyp Abschnitt, Containerbereich und das werden wir es nur als div tun. Wir könnten es auch als Abschnitt machen, also können wir es vielleicht als Abschnitt oder als div tun. Und denken Sie daran, das wird nur dann vorhanden sein, wenn auf der Intro-Seite. Also werde ich ihm ein I d geben und ich werde es willkommen nennen, damit wir es leicht identifizieren und willkommen auf meiner Website und wir werden das nicht auf den anderen Seiten anzeigen. Es wird einfach wieder auf der Indexseite sein. Eso als Nächstes. Wir haben einen Blick auf einen Containerbereich, so dass wir dies als einen Abschnitt tun können, wenn wir wollen, oder wir können es als div tun . Und wenn Sie nicht mit HTML fünf vertraut sind, was mit HTML fünf passiert ist. Anfangs, als wir Websites aufbauen, würden wir sie nennen, wir würden sie alle als Dibs erstellen und sie bei diesen Ideen wie Header geben nav bar und sie würden alle Dibs sein. Und im Wesentlichen nehmen sie diesen vollständigen Block des verfügbaren Codes auf. Aber was passiert ist, als HTML fünf kam, ist, dass sie beschlossen, alles zusammenzubringen und es in einem Containerbereich zu haben. Also habe ich es als Semantik anstelle von Dibs genannt. Es würde also nur mehr Sinn ergeben. Wenn Sie sich den Code eso anstelle von Dibs ansehen, ändern wir sie Zehenkopfzeilen, und schließlich und schließlichfunktionieren sie gerade jetzt genauso wie bei Dibs. So sind sie austauschbar. Aber Best Practices in der Regel mit dem HTML fünf semantischen Elemente zu gehen. Also wird dieser Abschnitt sein, und ich werde ihm eine Klasse von Containern geben und das abschließen. Und dann innerhalb dieses Containers muss ich Abschnitte trennen. Also werde ich Hauptabschnitt für den Inhalt haben, also Abschnitt und ich werde diesem eine Klasse von Inhalten geben. Nennen Sie es main oder so etwas, und dann neben ihm habe ich eine Seite und eine Seite ist das Element, das wir verwenden oder die Zeit, die wir für das Seitenmenü verwenden. Das wäre also nur neben dem Menü oder der Seitenleiste. Und vielleicht könnten wir diesem eine Klasse auch Seite geben. Geben Sie ihm einfach eine Klasse von Seitenmenü eso, die sich um den nächsten Abschnitt kümmert. Und schließlich, was wir tun müssen, ist eine Fußzeile zu erstellen. Das ist eine der Dinge, wenn Sie Klammern haben, die das Selbstschließen der Tags etwas schneller schreiben . Aber manchmal, wenn Sie das Schließen dieses Tags zu schnell drücken, dann erstellt es eine, die Sie nicht erstellen möchten. Also ist das, was gerade dort passiert ist. Also muss ich diese auf i d von Footer geben und dann hier werden wir Firmenkopierrate 2016 oder so etwas wie Gedanken setzen , und wir können das Copyright-Symbol machen. Also bin ich reingekommen. Also, jetzt lasst uns schnell gehen. Sehen Sie sich an und sehen Sie, wie das aussieht. Also, wenn ich den Bildschirm hier aktualisiere, so ist das eines der Dinge hier mit Klammern als auch, dass ich es hinzufüge. Und da ich ein Update hinzufüge, es nur das nächste Stück aktualisiere, wird der Inhalt nicht wirklich aktualisiert. Deshalb landete ich mit einer ganzen Reihe von diesen wiederholten Stücken A coat. Vielleicht muss ich hier einige zusätzliche Inhalte hinzufügen, damit ich weiß, dass dies der Inhalt des Seitenmenüs der Seite ist . Ich habe Navigation. Also habe ich einige Platzhalterinformationen für jedes Stück für jedes Element. Für jedes meiner Hauptelemente in meiner Website eso sind wir bereit, mit dem nächsten Schritt zu gehen und beginnen wirklich, diese Website auszubauen und sie zu präsentieren und machen tatsächlich sah eher wie eine Website aus. Und auch hier gibt es ein paar Dinge, die Sie vielleicht bemerkt haben, dass die Mauer diese heraus baut , also begann mit Ideen. Ich habe Ideen hier und ich habe Unterricht. Wenn Sie also mit CSS vertraut sind, wissen Sie, dass ich ds für einzigartige Elemente und Klassen für wiederverwendbare Elemente und eine der Klassen hier s O sind, wenn wir Bootstrap verwenden, hat es bereits einige vorgefertigte Klassen darin. Also habe ich hier unten Klassen verwendet und ich benutze diesen einen Container und das ist eigentlich eine Bootstrap-Klasse, Bootstrap-Klasse, also ist es bereits eine vordefinierte Klasse und Boots Drop. Also öffne Stiefel fallen hier unter Container. Wir sehen, dass wir bereits einen Klassencontainer haben. Und im Wesentlichen ist dies, was es uns ermöglicht, eine ansprechende fixierte mit Container auf zu erstellen. Dann drinnen. Hier ist, wo es einige Zeilen und Spalten erstellen könnte. Und das wird nützlich sein, wenn ich einige meiner Bootstrap-Inhalte in diesem mittleren Inhaltsbereich verwenden möchte. Und deshalb habe ich ihm eine Klasse von Containern gegeben und natürlich können Klassen, die wir so oft wiederverwenden können, wie wir wollen. Und das ist das Gleiche hier für den Inhalt. Denn wenn ich mehrere Abschnitte haben möchte, möchte ich vielleicht unterschiedliche Content-Styling haben, und ich möchte dieses Styling in verschiedenen Teilen der Website s wieder verwenden. -Menü. Ich habe eine Klasse verwendet, also diese, die ich weiß, dass ich nirgendwo anders auf der Website wiederverwenden möchte, und deshalb habe ich sie als Ideen stecken, weil ich sie vordefiniert habe und ich gesendet werde. Ich richte sie nur als Ideen ein, also werden sie nur in einem Element auf der Seite sein, aber ich benutze diese Klassen möglicherweise mehrmals, und deshalb gibt es den Unterschied. Und dann, weil ich Bootstrap hinzufügen werde,verwende ich natürlich weil ich Bootstrap hinzufügen werde, einige der vordefinierten Bootstrap-Klassen. In der nächsten Lektion werden wir Bootstrap hinzufügen und einige zusätzliche Verbesserungen zu diesem Website-Inhalt hinzufügen , um es ein wenig mehr zu präsentieren, besser machen es aussehen wie eine tatsächliche Webseite. Also werden wir einige Platzhalter-Inhalte dort spielen. Das kommt alles in den nächsten Lektionen. 6. 6 Hinzufügen von Bootstrap zu einer Website: in der letzten Lektion, die ich erwähnt habe, dass ich hier in einer Klasse hinzugefügt habe, und dies ist eine Boot-Drop-Klasse. Also lassen Sie uns voran und fügen Stiefel hinzu. Schlagen Sie in unsere Website und das Gute an Boots Drop ist, dass es uns ermöglicht, unsere Websites schneller zu erstellen . So kümmert es sich um einen Großteil der Aufhebung, die wir normalerweise innerhalb unseres Website-Designprozesses zu tun haben . Und es ist einfach einfach, dass es uns ermöglicht, unsere Websites schneller und schneller zu entwickeln und was wir in Bootstraps verwenden werden. Also werden wir seine CSS-Datei verwenden. Und im Wesentlichen ist Bootstrap ein Siris von CSS und JavaScript-Datei, und wir haben unsere Option hier. Toe Link auf die zähe End CD beendet unsere Web, Web zugängliche Dateien, die geteilt werden sollen und diese Bibliotheken wirklich schnell in Ihre Web-Projekte zu bringen . Sie können es auch herunterladen und mit Ihrer Website lokal verknüpfen, auch die Dateien mit dem Rest Ihrer Web-Dateien hochladen, so gibt es ein paar Optionen, wenn Sie Boots Drop einrichten möchten. Aber normalerweise ist der schnellste Weg, nur den Link zu greifen, und es gibt einige Vorteile, die tatsächlich in der CDN-Version zu erhalten, denn wenn andere Websites es auch verwenden, wenn es in Ihrem Browser zwischengespeichert wird, haben Sie eine schnellere Ladezeit, und es verwendet bereits diese Men ified Version. Dies sind also die Vorteile der Verwendung eines CDN und dann natürlich, natürlich, dass Sie nicht die Mühe des Herunterladens durchmachen müssen und es über denselben Dateiordner bringen müssen. Also ein bisschen schneller, aber und dann bis auf den Tag sind die Effekte die gleichen Dinge. Und wenn Sie Ihre Bootstrap-CSS-Datei hinzufügen, beachten Sie, dass ich sie über meiner regulären CSS-Datei platziert habe. Und das gibt mir die Möglichkeit, dass, wenn ich tatsächlich einige meiner CSS anpassen und einige der Stiefel überschreiben möchte , CSS fallen lassen. Ich könnte das mit in meiner CSS-Datei tun. Es gibt viele Male, wenn Sie es davor platzieren und versehentlich vielleicht etwas von dem Bootstrap-CSS gut verwenden , das wird Ihr CSS überschreiben, und es könnte Sie Ihren Kopf kratzen lassen. Best Practice ist also immer, die Bibliotheken, die Sie verwenden möchten, zuerst zu platzieren und dann Ihre Anpassungs-CSS-Datei danach, also jetzt, da ich das an Ort und Stelle habe, wird dies mir erlauben, diese Website schneller zu erstellen. Und das Gute an Bootstrap ist, dass alles mobil und reaktionsschnell ist. S ein mobil, bereit und voll reaktionsschnell. Es hat eine Menge wirklich benötigter Komponenten. Jetzt, da ich es gespeichert habe und wenn ich es gut aktualisiere, sehen wir nicht wirklich viel Unterschied hier innerhalb der Website, weil ich glaube, dass der Container wirklich viel CSS-Styling enthält. Es ist Oh, deshalb ist es nicht viel darin, aber es geht mehr darum, die Struktur Ihrer Website aufzubauen und sie für den Rest der Bootstrap-Bibliothek vorzubereiten und die Stiefel fallen CSS zu implementieren und in Ihre -Webseite. Und wir werden das nutzen, wenn wir über Produkte hören, bei denen wir einfach das Bootstrap-Grid-System toe verwenden können . Legen Sie eine Liste von Produkten innerhalb unserer Website wirklich leicht, Also, das ist einer der Vorteile sowie der Verwendung des Boots Drop System. Im Grunde, was es getan wird, ist es leicht eingerückt. Es ist ein wenig Polsterung dort geschaffen, und wenn wir hier raus gehen, können wir sehen, dass es keinen großen Unterschied gibt. Aber wir können sehen, dass dieser Inhalt jetzt eingebracht wurde. Also, wenn ich das tue, geh weiter. Wenn ich es inspizieren, können wir sehen, dass wir ein Maximum haben mit dem Inhalt zentriert ist, die Containerinformationen zentriert sind. So bereitet das unsere Website so vor, dass sie Bootstrap ist, bereit. Und da wir jetzt diesen Container hinzugefügt haben, der Rest unserer Inhalte immer noch ausgerichtet. Also, was wir jetzt tun wollen, wird in den Container in die anderen Abschnitte unserer Website hinzugefügt , so dass sie auf die gleiche Weise ausgerichtet sind wie diese. Dies ist, wo wir in diesen Container bringen und wir können es in unseren Header-Abschnitt hinzufügen und wir können es in unsere Willkommens-Nachricht hinzufügen und wir können es in unsere Fußzeile hinzufügen. Werfen wir nun einen Blick auf unsere Website und jetzt sollte sie zentriert sein. Der gesamte Inhalt sollte zentriert und richtig sein, das Futter noch einmal. Also sind wir bereit, den Rest unserer Website aufzubauen. Wir haben alle ihre Bootstrap-Komponenten auf dem Laufenden und Einrichten. Und nur eine andere Anmerkung, dass, wenn wir jemals den Container entfernen wollen, vielleicht wer wollte, dass ihre Fußzeile den ganzen Weg über schwächen wirklich leicht tun, indem diese Klasse entfernen und dann können wir unsere eigene Klasse erstellen und unsere Website entsprechend aktualisieren . Also vielleicht werde ich es da oben lassen, weil wir vielleicht wollen, dass unsere Fußzeile immer 100% am Ende unserer Seite ist und wir vielleicht das Gleiche für eine Kopfzeile wollen. Eso Wir könnten auch einen flüssigen Behälter machen, so dass es ein paar verschiedene Optionen hier, wenn es um Bootstrap und Building auf unserer Website kommt . 7. 7 Adding hinzufügen: in dieser Lektion. Ich möchte einige Dummy-Inhalte aktualisieren und hinzufügen, um unsere Website tatsächlich zu machen, und wir sind vorzeigbar und sehen eher wie eine Website aus. Also lasst uns zuerst zum Dummy Text-Generator oder Blind Text Generator gehen. Und das ist eine gute Möglichkeit, in einige Dummy-Textständer hinzuzufügen. Ich werde vielleicht drei Absätze machen. Ich werde die Absatz-Tags einschließen und sie in die Zwischenablage kopieren. Öffne mein Projekt, und dann füge ich das hinzu. Eigentlich, bevor ich das hinzufüge, werde ich meine H zwei Tags aktualisieren und hinzufügen. Also, wenn ich es nach diesem Abschnitt hinzufüge, ist dies der Inhalt, den ich als hde zwei hervorheben möchte und dann werden der Rest einfach diese Dummy-Absatz zwei Stücke von Inhalt sein. Und auch möchte ich einige Inhalte in diese Sidebar Toe hinzufügen. Eigentlich soll es so aussehen, als hätten wir etwas drinnen. Also denken wir, vielleicht könnten wir in einigen Standardeinstellungen hinzufügen, Bilder hinzufügen und an denen in Also ist es unseren Platz öffnen, Text halten und einige Bilder auf diese Weise hinzufügen. Und hier haben wir eine Standardgröße von 3 50 mal 1 50, also werde ich das einfach nehmen und ich werde es in mein Nebenmenü fallen lassen. Also werden wir in irgendeinem Absatz hinzufügen und das auf 50 aktualisieren und es einfach nennen. Nennen Sie es fügt hinzu oder so etwas und machen Sie einfach eine 2. 1 Also das wird uns die Fähigkeit Teoh haben Platzhalter für ein paar Bilder innerhalb unserer Website, und ich werde in einem Zeilenumbruch hinzufügen. Nur das war nicht auf der gleichen Linie. Jetzt, wenn ich es aktualisiere, habe ich im Wesentlichen eine Website mit einigen Inhalten hier drin. Also habe ich meine Kopfinformationen, meine Navigationsleiste, die wir mit CSS aktualisieren werden, die tatsächlich als Navigationsleiste präsentiert wird, und dann unseren Inhaltsbereich und unser Seitenmenü. Und dann, natürlich, unser Flair. Also die nächste Reihe von Lektionen, die wir beginnen, in unserem CSS hinzuzufügen und fing an, dies wirklich wie die Website aussehen, wie wir aussehen, dass wir ursprünglich in unserem Draht Rahmen hier unserer Website entworfen wurden . Also, das kommt alles in der nächsten Reihe von Lektionen 8. 9 Hinzufügen von Default: in dieser Lektion werden wir CSS anwenden, um unsere Website mehr so zu präsentieren, wie unser ursprüngliches Design aussah. Also werde ich voran gehen und schnell zurücktreten, um sich das anzusehen. Und jetzt werden wir unseren Editor öffnen und ich werde diesen HTML-Teil verkleinern und das CSS größer erstellen . Und ich werde auch die Themen hier aktualisieren, um diese Größe zu aktualisieren, um sie etwas kleiner zu machen damit wir eine bessere Gesamtübersicht über unseren Quellmantel erhalten können, den wir verwenden werden, um diese Website zu erstellen, weil wir die verschiedenen Elemente Abschnitte, die wir für unsere Website erstellt haben. Also das erste, was wir tun, normalerweise mit CSS beginne ich gerne mit den größten Tags zuerst, und die erste 1, die wir treffen, ist der Körpertyp. Dies ist also, wo all unsere Inhalte gehalten werden, und das ist unser Hauptbereich. Also werde ich nur etwas hier in CSS für Körper einrichten. Und das ist, wo, wenn wir eine bestimmte Hintergrundfarbe hätten, könnten wir hinzufügen, dass in so fünf eine Hintergrundfarbe und ich werde eine Grauskala Leo jetzt verwenden , weil ich mein Farbschema noch nicht ausgewählt habe. Hier werde ich Graustufen verwenden. Und wir sehen, dass dies alles in großem Maßstab vorgestellt wird eso jetzt hinunter zu unseren wichtigsten Containerbereichen, so dass wir tatsächlich einige dieser Styling für Container als auch aktualisieren können. Dies ist also für den Klassencontainer. Und es gibt bereits ein Standard-Styling in Bootstrap dafür. Und ich öffne Bootstrap wirklich schnell. Das ist also ein Bootstrap-CSS-Dateien. Es ist nicht die Männer ified Version. Also hier ist eigentlich, wo man tatsächlich sehen kann, die eigentliche Kälte angelegt. Die Männer ified Version ist damit Whitespace. Es ist ein wenig schwieriger zu sehen, also sehen wir, dass der Container verschiedene Größen hat, je nachdem, dass er diese Presets Größen und Bootstrap hat, das hat unsere Polsterung. Ihre Marge links moderate Marge, rechts automatisch. Und das ist es, was es zentriert. Und dann haben wir diese 15 Plektren Polsterung. Also haben wir ursprünglich bemerkt, als wir in Container innerhalb dieser Elemente hinzugefügt haben, sahen wir, dass wir dies in Dellen dieses Inhalts bekommen und wir sahen, dass auch zentriert war. Und das kommt alles von Bootstraps. Es ist gleich hier drüben. Und andere Sache hier über Bootstrap ist, dass wir die verschiedenen Größen haben. Also haben wir für Männer mit Größen, diese Stiefel Drop ist mobil. Das erste Denken ist. Dort werden sie in den Männerverstand verwendet. Aber wir werden wahrscheinlich die Maximalwits innerhalb unserer Website verwenden, weil tatsächlich von der Desktop-Version nach unten entworfen wurden . Das sind also die zwei verschiedenen Arten zu entwerfen. Man könnte relativ die gleiche Idee bekommen. Ich habe nur mit den Männern, bei denen du darlegst, wie der Container aussehen wird, abhängig von der Größe des Bildschirms. Also, wenn es größer ist, wenn es die 76 Zähne passiert ist und das ist die Größe, wenn es mit einer Minute von 1200 ist, dann ist dies die maximale Größe, die die Behälter aussitzen eso etwas größer als 1200 wird es einen Behälter mit 11 70 haben und das Gleiche gilt für diese Bruchpunkte. Dies ist, so dass wir eine bessere Vorstellung von den Inhalten bekommen, die in Bootstrap verfügbar sind, und ich könnte tatsächlich voran gehen, und ich werde diese Bootstrap-Datei schließen und zu unserem regulären A regulären CSS zurückkehren, weil ich Ihnen nur schnell zeigen möchte, was in Bootstrap enthalten ist, und wir müssen nichts davon wirklich überschreiben. Ich setze die Hintergrundfarbe ein, und ich werde nur Weiß verwenden. Also jetzt, wenn ich es aktualisiere, haben wir unsere Hauptcontainerbereiche und wir sehen, dass wir ah haben, warte Hintergrund auch für den Text. Eine andere Sache, die ich normalerweise gerne mache, um diese Standardwerte zu setzen. Also im Körper setze ich auch gerne meine Hyperlinks und ich habe keine Hyperlinks. Also sollte ich einige in Esso Hyperlinks oder eines dieser Dinge hinzufügen. Es ist wirklich schön, diese in Ihrem CSS zu setzen, da dies Ihnen wirklich ein anderes Aussehen und Gefühl verleiht. Also werde ich ein paar mehr erschaffen, und ich werde sagen, wie wir sie hervorheben können. Also standardmäßig, weil wir Stiefel fallen, haben wir bereits ein bisschen Styling hier, wo wir nicht haben unsere Dekoration. Es taucht nur dann auf, wenn wir darüber schweben. Also das kommt alles von hier aus Bootstrap, wenn ich das entferne, sehen wir, dass wir diese Unterstreichungen bekommen. Und ich füge dies normalerweise gerne in einem Double hinzu, um doppelt sicher zu sein, dass wir keine Textdekoration haben und wir unsere Farben so einstellen können, dass wir diese Standardblau mit dem zugrunde liegenden Text nicht haben . Ich mag Textdekoration Keine zu tun. Und das wird auch von Bootstrap mitgebracht. Und das ist, wo wir eine schöne Farbe setzen können, die wir eso nutzen wollen. Vielleicht werde ich dort dunkelblau aufteilen, und ich bringe diesen Bootstrap wieder rein. So ist es auch. Es ist schon da drin. Es hat bereits eine voreingestellte Färbung, dass. Aber ich wollte nur verdoppeln, um sicherzustellen, dass, wenn wir jemals nicht mit Stiefeln fallen, , dass wir diese bereits setzen. Es ist also immer eine gute Übung, in die man einsteigen kann. Also, obwohl Stiefel fallen hat es Das ist immer eine gute Idee, dass wir es auch gesagt haben. Und es hat auch den Hover dort. Zwei sahen, was auch immer darüber schwebte. Es ändert sich die Farbe. Sameh, sei ein nur werde eine zufällige Art bläulicher Farbe wählen Also, wenn ich mich erfrischen, ist es also jetzt habe ich das Gleiche, was Boots Drop getan hat. Aber ich habe gerade hier oben hinzugefügt, können wir auch den Hintergrund des Containers eingestellt haben und jetzt können wir anfangen, den Rest unserer Inhalte s aufzubauen. Wir werden mit der Navigationsleiste zuerst beginnen, weil dies hier oben ist. Sie beginnen also innerhalb des Kopfteils. Ich werde alle unsere Updates für den Kopfbereich machen, das Logo aktualisieren und dann am jetzt weit arbeiten. Also, das kommt alles. Nächste Reihe von Lektionen. 9. 10 Update Logo Slogan Abschnitt: , um uns mit unserem Design-Layout zu helfen. Ich füge hier einen Stil hinzu. Dies wird also nur ein schneller Randstil sein, so dass wir tatsächlich sehen können, wo alle unsere Hauptinhalte und unsere Container sitzen. Eso, weil ich an diesem hier arbeiten werde. Ich füge es da drin hinzu. Ich kann es da drinnen hinzufügen. Ich kann es dort hinzufügen und so weiter. Das bricht also unsere Inhalte auf und ermöglicht es uns, sie etwas besser zu sehen. Und ich werde es auch in Teoh jede dieser Ideen hinzufügen, mit denen wir arbeiten werden . Es ist also ein Ein-Pick-Rahmen, den wir hinzugefügt haben. Und das gibt uns eine bessere Vorstellung davon, wie dieser Inhalt angezeigt wird. Eine Gesetzlose Ausgabe Eso wollen wir es. Idealerweise wollen wir eine Pause auseinander. Das wird nicht in zwei Spalten zerlegen. Eso Wir werden es einfach auf eine normale Art und Weise tun, wo wir wählen werden, also machen wir Wahlen. Wir werden Header mit diesem Header I d machen und lokal darin auswählen oder wir könnten einfach lokal auswählen und anschwellen. Vielleicht behalten wir es einfach bei, weil wir dort Ideen verwendet haben. Also haben wir die Möglichkeit, Bar zu haben und wir hätten dies genauso einfach tun können wie Header des Elternteils und dann das Div und der Knave. So oder so, wir könnten dasselbe tun, das gleiche Ergebnis hier erreichen. Also lassen Sie uns dieses nach links schweben und ich werde es mit so dem lokalen Blick auf ungefähr den Verstand geben , den wir dafür brauchen. Also vielleicht können wir so etwas wie eine 40% mit machen, und dann wird dieser hier über schweben. Wir können es nach rechts schweben oder wir könnten es nach links schweben, also spielt es keine Rolle, denn wir werden die volle verfügbare 100% aufnehmen. Also werden wir es einfach auf der linken Seite schweben lassen. Und so gehen wir hin. Also jetzt haben wir unsere Navigationsleiste hier. Wenn wir aktualisieren, ist es so haben wir unsere Navigationsleiste ist bereit zu gehen. Wir haben ein Firmenlogo, also jeder nimmt seinen korrekten Prozentsatz auf und wenn wir es dann wirklich so verkleinern, werden wir das Menü zusammenbrechen und ein Dropdown-Menü erstellen. Also gehen wir zurück ins Logo hier und wir werden einen Teil des Textes dort aktualisieren, der verfügbar ist . Eso wollen wir vielleicht den Text ausrichten und wir ziehen diesen Text auf die linke Seite und vielleicht auch entfernen. Oder wir können eine Marge hinzufügen, wenn wir wollen. Wenn wir also nicht wollen, dass es direkt auf der linken Seite sitzt, können wir dort ein wenig einen Rand von 10 Picks hinzufügen. Aber dann müssten wir das mit anpassen. Also lasst uns vorerst. Wir werden die Marge auf Null halten, nur um sicherzustellen, dass wir sie richtig schweben. Also Marge Null und mit Null müssen wir keine Picks angeben. Wir können es einfach so machen. Wir können auch unsere Fehlerfarbe aktualisieren, also lassen Sie uns das auch aktualisieren. Also die Farbe und war dabei, schwarz zu machen. Oder vielleicht können Sie in ein wenig Farbe hinzufügen. Ich weiß, ich sagte,, wird Maßstab zustimmen, aber lassen Sie uns in ein wenig Farbe dort als auch hinzufügen, und wir können auch die Schriftgröße anpassen und kämpfte Familie, natürlich. Also vielleicht machen wir es so 1.5 PM, so macht es ein bisschen besser, ein bisschen größer dort, um abzuheben. Also dort haben wir unseren Firmennamen und wir können auch in einer weiteren Zeile hinzufügen um es klein zu machen. Also, wenn wir es so machen wollten, könnten wir vielleicht einen ganzen anderen Container dort drüben auf der linken Seite haben und einen kleinen Slogan oder so etwas unter eso hinzufügen . Dies ist etwas, das wir auch hinzufügen können. Eso Essen. Lasst uns das einfach da drin haben. Also werde ich hier ein anderes Def erstellen, und ich denke nur, dass der beste Weg, es zu tun, so wäre. Und wir könnten einfach klein machen, damit dies für einen Firmen-Slogan sein könnte, der es kleiner macht. Und dann müssen wir einige Anpassungen vornehmen. Da ist also ziehen wir das aus und tun Logo mit einem Kind von Def wird dies sein und wir können Logo mit einem Kind von klein machen, und hier können wir die Farbe anpassen, also vielleicht wollen wir bei etwas bleiben, das aus roter Korallenfarbe ist. Und hier können wir auch die Schriftgröße anpassen. Also 0.8 und eine andere Sache, die ich auch hier hinzufügen werde. So transformieren Sie Text. Was Texttransformation tut, ist, wenn wir es ganz Großbuchstaben machen wollen, wird es ihren ganzen Text in Großbuchstaben transformieren. Vielleicht ist das ein guter Weg, um unseren Firmennamen zu präsentieren. Das ist immer Großbuchstaben. der nächsten Lektion werden wir uns die Aktualisierung dieser Now-Leiste ansehen und diese eine Norden-Liste in eine Navigationsleiste verwandeln , also kommt es in der nächsten Lektion. 10. 11 Erstellen einer Navbar mit aktivem Element: in dieser Lektion betrachten wir die Umwandlung unserer Navigationsleiste in etwas, das eher wie eine Navigationsleiste aussieht . So haben wir bereits den Hauptcontainerbereich festgelegt. Wir haben es hergebracht, damit es links schwebt und 60% des verfügbaren Platzes einnimmt. Also lassen Sie uns diese auf geordnete Liste in der NAV-Leiste aktualisieren, so wählen Sie jetzt weit und wo er die eine geordnete Liste auswählen und Eigenschaften auf ihre anwenden und wir werden auch jetzt Bar tun. Und wir werden unsere Listenelemente, die da sind, machen und einige Eigenschaften dort anwenden, um die verschiedenen Elemente zu transformieren. Typischerweise haben Sie sie bei Navigationstüren nicht hier als horizontal aufgelistet. Sie sind mehr, sie sind nicht vertikal aufgelistet, aber es horizontal aufgelistet, so dass wir uns um dies mit der Anzeigeeigenschaft kümmern können. Und wir werden nur in Line-Block. Und sobald wir in der Schlange gehen, sehen Sie, dass es sich bereits verwandelt und es kommt bereits in Einklang. Eso Dies gibt uns die Möglichkeit, diese wie in Zeilen auszurichten, und wir können in einigen Rändern sowie um die verschiedenen Elemente hinzufügen. Also, wenn Sie etwas wollen, einige Abstände beim Vortrag, können wir in fünf Picks hinzufügen und oder wenn was? Abstand nach links und rechts, können wir hinzufügen, dass fünf Picks auf diese Weise. Also Abstand auf der linken Seite, Abstand auf der rechten Seite von fünf Plektren. Eine andere Sache mit der Navigationsleiste ist normalerweise, wenn Sie den Mauszeiger über sie bewegen, Sie sehen, wie sich die Farben ändern, und vielleicht haben Sie einen Farbblock um ihn herum. So können wir uns auch darum kümmern. So innerhalb jetzt, Bar, können wir sehen, wählen Sie alle Hyperlinks und wir können in einigen Eigenschaften hier hinzufügen. Und ich wollte hier unten einige zusätzliche Abstände schaffen. Also sitzen wir hier nicht ganz unten. Jedes Mal, wenn ich das sage, ist es ah, es bewegt es tatsächlich nach unten. Also s Also, das ist, warum ich gerade hinzugefügt, dass schnelle Abstände in There s so das ist, wo wir tun können , Anzeige und Anzeige als Block. Dies ermöglicht es uns, den gesamten verfügbaren Block des Raumes zu nehmen. Wir wollen auch die Textdekoration ganz so Textdekoration loswerden, und wir würden sicherstellen, dass es keine hat, aber auch, wenn wir darüber schweben, werden wir loswerden, Es ist ich werde Ihnen zeigen, wie das auch zu tun. Und wir werden auch in einer Farbe hinzufügen, um es können wir eine Hintergrundfarbe auf swell eso machen Vielleicht für dieses eine, wir können eine helle Farbe machen und wir könnten Hintergrundfarbe von Schwarz machen, so dass wir sehen können, dass s o es wird ein Unterschied zwischen Hinzufügen unserer Hintergrundfarben dort und hinteren Linien Farben dort. Obwohl, wenn wir uns das ansehen, sehen wir nicht sofort einen Unterschied. Aber wenn wir das Schweben anwenden, werden wir einen größeren Unterschied zwischen was sehen? Wir fügen es innerhalb ihrer oder innerhalb des Listenelements hinzu. Manchmal sehen Sie es mit dem Listenelement hinzugefügt. Normalerweise füge ich es gerne auf das letzte Element vom Elternteil hinzu. Ich werde auch in einigen Eintopfen hier hinzufügen, einige denken wahrscheinlich über vier Picks von Eintopf s, so dass sie mehr wie Klickfußball klickbare Boxen aussehen . Und das ist, wo dieses Pseudoelement kommt in der Magie von Wann immer wir schweben, können wir in ah hinzufügen, schweben Stil hinein. Also lasst uns voran gehen und dabei. Und hier möchte ich die Hintergrundfarbe aktualisieren. Also in der Regel mag ich einen kompletten Kontrast zu tun, also gehen Sie sogar mit einer schwarzen Farbe und dann tun Hintergrund einen helleren Hintergrund. Also lasst uns so etwas wie Rot machen. So erscheint es wirklich gerade jetzt, wenn ich darüber schwebe und vielleicht sogar ein bisschen mehr Polsterung auf. Und so ist dies der Abstand hier wird durch den Rand erstellt. Wenn Sie es also wollen, wenn Sie nicht so viel Abstand zwischen den Boxen mögen, können Sie das immer reduzieren oder Sie könnten es den ganzen Weg auf Null reduzieren. So könnten Sie den Abstand vollständig reduzieren und ihre Augen tatsächlich einige Standardabstände innerhalb der Listenelemente als auch. Also werde ich mich darum kümmern. Und so bin ich die geordnete Liste. Wir haben bereits einige Standard-Abstand eso wir sehen, wenn wir in der Linie an, dass, verlieren wir den Listenstil eso der Listen-Stil ist, dass die Festplatte, die wir gesehen haben. Also wollen wir dies in keines ändern. Also, nur um Ihnen den Unterschied hier zu zeigen, wann immer wir das im Linienblock bekommen, sehen wir, dass wir diese Quadrate dort bekommen, also wollen wir letztendlich wieder loswerden, nur um Ihnen zu zeigen, dass, wenn wir nichts tun, dass das tatsächlich verschwindet. Also lasst uns dies zurück auf keines aktualisieren. Das verschwindet, nur um sicherzustellen, dass wir dort nichts haben. Und mit einer neuen geordneten Liste haben wir dort einen Standardabstand. Also müssen wir die Polsterung auf Null und Marge auf Null loswerden, nur um sicherzustellen, dass wir keine Standardwerte haben, die dort hinken, und es könnte einige Probleme verursachen. Wenn ich das jetzt auf Null ändern sollte, sehen wir, dass es auf der linken Seite ausgerichtet ist, also ist es ein bisschen besser ausgerichtet. Aber ich mag es, ein wenig Abstand zwischen den Tasten zu haben, also vielleicht werden wir es sogar bei zwei behalten und eine letzte, die wir auch kümmern sollten, wenn andere Pseudo-Element, das wir kümmern sollten. Und das ist, wann immer die Website ist, so haben wir schweben, aber wir wollen auch eine haben, wo es proaktiv ist, weil wir fähig sein wollen, zu identifizieren was die aktiven sind s Also können wir es entweder auf diese Weise tun, wo wir eine separate es beruhigen können und fügen Sie die aktiven hinzu. Auf diese Weise, vielleicht ist das einfacher, jetzt s können wir in einer Klasse hier hinzufügen und es aktiv nennen, so dass wir wissen, dass wir immer auf unserer Homepage sind. Lasst uns das auffrischen. Und eigentlich sollte dies eine aktive sein. So ist es kein Pseudoeso. Das ist aktiv und wann immer wir über sie schweben, drehen sie aktiv s. Das bedeutet also, dass wir auf diese klicken können. Also in der nächsten Lektion werden wir weiterhin bauen unsere Website und wirklich aktualisieren das Aussehen und Gefühl von unserem Content-Bereich. Also kommt es im nächsten Abschnitt auf. 11. 12 Index Willkommensnachricht: in dieser Lektion. Wir werden weiterhin unsere Website aktualisieren und wir werden das bedeuten Willkommens-Slogan erstellen , Bereich s. Ich schaue nur auf unsere Navigationsleiste und in der Regel sehen Sie, dass das Nickerchen auf der rechten Seite gezogen wird. Dies ist eine wirklich einfach zu beheben. Wir machen nur einen Text, die Zeile, und wir ziehen ihn einfach auf die rechte Seite. Dies gibt uns die Möglichkeit, unser Navigationsmenü direkt auf die rechte Seite gezogen zu sehen . Wir nehmen immer noch die richtigen Abstände und alles für die Websites ein. Wenn ich es aktualisiere, sehen wir, dass wir noch 40 60% bekommen. Wir haben das ganze Hauptmenü hier drüben, und natürlich werden wir die Zeilen entfernen. Einige könnten das jetzt genauso gut tun, weil dies nicht wirklich Teil unseres Hauptdesigns ist. Dies war gerade, während wir unsere erste Einrichtung der Website durchgeführt haben. Da ist etwas schief gelaufen, also bin ich dort im extra Court gegangen. Lassen Sie es uns nochmal auffrischen. Wir möchten, dass unsere Website so weit aussieht, wie wir sehen können, sie reagiert, und wir werden darauf achten, dass ansprechende Teil der Website, während wir durch den Kurs als auch Fortschritte . Aber im Moment bauen wir nur auf, und wir wollen, dass es in unserem aktuellen Design vorzeigbar aussieht. Also lassen Sie uns voran und schauen Sie sich den Hauptcontainer an, der Willkommensbereich. Idealerweise wollen wir etwas haben, das ziemlich groß ist, und mit Bootstrap gibt es tatsächlich eine Option damit. Während wir zu Bootstrap gehen, haben wir ein grundlegendes, einige grundlegende CSS-Styling und Komponenten, die wir innerhalb von Boots verwenden können Drop und sie können tatsächlich einige davon erreichen. Also haben wir, was man Komponenten nennt, und wir haben einen namens Jumbotron. Eso diese aufgeführte präsentiert es, wie wir normalerweise wollen, vielleicht ein Willkommensbildschirm, der auf unserer Website kommt, und ich meine, das ist wahrscheinlich wirklich ideal für die Art und Weise, wie wir es präsentieren wollen. Also könnten wir immer weitermachen und wir können einen Jumbotron kopieren. Wir könnten auf unsere Website kommen, und dieser Willkommenscontainer könnte ein Jumbotron werden, und ich zeige Ihnen, wie das jetzt aussehen wird. Also, wenn ich es erneuere, haben wir das Willkommen auf der Website bekommen und es ist in einem Jumbotron enthalten und dann müssen wir nur dieses Styling anwenden. Also lassen Sie uns voran und fügen Sie dort in Spanne hinzu. Herzlich willkommen auf der Website und dann werden wir einen weiteren Absatz dort haben. Freut mich. Sieh dich um, Julie. Also gehen wir zurück zum Jumbotron und wir sehen, dass sie typischerweise ein H für diese Hello Welt haben . Vielleicht sollten wir das sogar auf H eins aktualisieren. Obwohl was Normalerweise bin ich zögerlich, H diejenigen zu verwenden. Ich mag Zeh eher h twos verwenden. Also vielleicht könnten wir mit einem H zwei bleiben auf dies ist, weil ich normalerweise H diejenigen für den Website-Titel reserviere und das ist mehr für S e o Zwecke. Eso Dies ist etwas, das wir vielleicht sogar mit unserem Styling anpassen können und wir könnten den Inhalt über die Website als ihre Haupt h eins oder H zwei haben und dann auf diese Weise könnten wir es konsistent halten , weil wir Thies nicht wiederverwenden werden diese Haupt-Willkommensseite auf allen anderen Webseiten. Dies ist nur für die Indexseite eso Dies ist etwas zu beachten, wenn Sie Ihr Design erstellen, wie Sie Ihre Überschriften-Tags verwenden möchten, so dass jedes einzelne und h zwei. Typischerweise würde ich es gerne machen, dass ich dieses hier und h in jedem behalten möchte weil dies nur eine willkommene ist. Aber noch mehr, im Idealfall, werde ich einfach in ein div erstellen. Und dann kann ich auf diese Weise einige Eigenschaften für mit der Klasse machen So kann ich eine Klasse einrichten und ich kann es so etwas wie Welcome Header nennen und dann hier runter gehen und mein CSS öffnen . Und von hier aus kann ich die unterschiedliche Größe des Textes festlegen, die ich möchte. Also habe ich meine Optionen für die Textausrichtung, so dass ich auch die gekämpfte Größe machen kann. Und vielleicht werde ich nur 1.6 p. M. oder vielleicht können wir sogar noch größer machen, so zwei PM und eine Menge in einigen Eintopfen dort. Sehen Sie sich das einfach an und sehen Sie, wie das herauskommt. S o. Das stimmt nicht wirklich gut mit meinem Absatz ab. Also vielleicht möchte ich Teoh schauen sogar hinzufügen und dies aufgrund des Jumbotron anpassen, es ist tatsächlich etwas Styling in diese Absätze hinzufügen, so dass wir uns vielleicht oder nicht erinnern wollen. Behalten Sie das, oder wir könnten das entfernen. Das hängt also alles davon ab, wie wir unser Styling präsentieren wollen. Also die Jumbotron, wir haben einige Standard-Styling für Absätze. Eso Idealerweise wollen wir vielleicht auch zusätzliche Absätze haben, oder wir wollen einfach das Styling überschreiben, das im Dschungel verfügbar ist. Tron. Und wir möchten das Absatzstyling so aktualisieren, dass es anders gekämpft Größe ist. Vielleicht können wir es auf 13 Uhr runterbringen oder noch kleiner. Also 0.7 p. M. Vielleicht wollen wir, dass dieser eine Zehe kleiner aussieht. Und eigentlich denke ich nur darüber nach, dass es wahrscheinlich besser ist, das einfach anzupassen, und wir haben bereits ein I d... Lassen Sie uns einfach ganz anpassen und fügen Sie in unserem eigenen Styling um diesen Willkommensbildschirm. Also hier habe ich meinen Willkommensabsatz bekommen und ich habe meine willkommene Kopfzeile dort, und wir können in einigen Eintopfen herum und sogar in Rand einige Marge links hinzufügen, so ist es immer in mindestens 15 Picks gezogen. Lassen Sie uns vom Rest des Inhalts einziehen, vielleicht sogar ein wenig größer machen, und dann können wir etwas Styling für die Begrüßung hinzufügen Also lassen Sie uns einige Standard-Polsterung hinzufügen. So Polsterung an der Spitze und tun 30 Picks glauben, das ist, was Jumbotron hat. hat Klopfen unten, und es hat 30 Picks für oben und unten, so gibt es wahrscheinlich einen kürzeren Weg, dies zu tun. So oben und unten sind 30 Plektren. Es hat auch eine Marge an der Unterseite und wahrscheinlich Dinge 30 Pick Marge an der Unterseite. Wir können eine Hintergrundfarbe machen, also ist dies so hebt es ein wenig mehr hervor und lassen Sie uns auch in einem Randradius hinzufügen. Also werden wir die Ecken umrunden. Also Grenze Radius und sie würden so etwas wie 15 Picks tun. Also, jetzt ist es eine abgerundete Grenze, und ich werde tatsächlich dieses loswerden, also hebt es ein bisschen mehr hervor. Eso im Wesentlichen, das ist unsere Willkommensbotschaft, und vielleicht wollen wir sie sogar von oben nach unten verschieben, damit wir nicht vielleicht auch einen Rand an der Spitze machen würden . Also einfach Marge reden und ihn bei Null bringen. Werfen wir einen Blick auf unsere andere Webseite hier, und wir haben bemerkt, dass es auf die linke Seite gezogen wird eso Das Problem dort ist , dass eso wir den Container dort haben, aber weil wir die Ränder überschreiben, die würde normalerweise mit Container innerhalb des i. D.stattgefunden haben. D. Dies verursacht also ein Problem hier. Eso lassen Sie uns ein anderes def erstellen und wir haben nur das innerhalb dieses Containers getan. Das sollte also das Problem beheben, dass wir es auf die linke Seite gezogen hatten. Und das war wieder im Bootstrap-Styling eso, das es auf die linke Seite zog . Also lassen Sie uns einen kurzen Blick werfen. Und so war das dieser Containerbereich. Und im nächsten Abschnitt müssen wir hier unten einen zweispaltigen Abschnitt für Armee und Inhalt erstellen, also kommt das in der nächsten Lektion. 12. 14 Erstellen eines zwei Spalteninhalts: in diesem Abschnitt werden wir uns mit der Aktualisierung unserer Hauptinhaltsbereiche beschäftigen. Bleiben Sie also Container, der alle unsere Inhalte in sich hat. Es ist so, dass wir es jetzt skizziert haben. Also, wenn Sie sich hier ansehen, haben wir einen Überblick darüber, und vielleicht werde ich hinzufügen, sind Umrisse in die zu getrennten Klassenabschnitte, die wir haben , mit denen wir arbeiten werden, damit wir eine bessere Vorstellung davon bekommen können, was wir präsentieren und wie wir diesen Inhalt präsentieren wollen. Also haben wir eins und zwei, und im Idealfall möchte ich den Inhalt auf der linken Seite ziehen und ich möchte dieses Seitenmenü auf der rechten Seite setzen. Also werden wir das gleiche tun, was wir hier oben gemacht haben, in dem wir die beiden Abschnitte haben und wir können sie nach links schweben und dann können wir auch nach rechts schweben. Die Sidebar. Werfen wir einen Blick auf das. Und wir haben unsere Hauptinhalte dort. Eso Dieser wird auf die linke Seite geschoben und dann müssen wir herausfinden, was mit dem wir aufnehmen wollten. Heute wollen wir 60% in Anspruch nehmen. Also machen wir es im Gegenteil von dem, was wir da oben haben. Und dann machen wir das gleiche für das Seitenmenü, und wir werden es diesmal auf die Rate treiben. Und diesmal dauert es nur 40%. Werfen wir einen Blick auf das und sehen, wie sich das anlegt. Also, jetzt, wenn wir es schrumpfen und wir haben all das nehmen den richtigen Abstand. Und eine Sache, die mir auffällt, ist, dass unsere Bilder nicht reagieren. Das ist also nicht wirklich einfach zu beheben. Wann immer wir unsere Bilder reaktionsschnell machen wollen, machen wir Max mit. Und was Max mit tut, ist, wenn wir weniger als das Maximum mit verfügbarem Abstand haben, es schafft es zu 100%. Also diese Bilder Luft auf 50. Aber wenn wir aus dem Abstand für die 2 50 laufen, dann nimmt es es als 100%. Aber das macht die Bilder reaktionsschnell. Nur durch, dass eine zusätzliche Linie des Gerichts, so können Sie sehen, ihre Anzeigen wurden wieder Dimensionierung. Es wird immer reaktionsschnell. Diese Bilder. Also gehen wir zurück zu hier und schauen uns an, was wir noch in Esso hinzufügen möchten. Vielleicht in der Seitenleiste. Eines der Dinge hier ist, dass wir bemerkt haben, dass es direkt auf die rechte Seite fällt. Eso Idealerweise möchten wir vielleicht nur einen Hauch von etwas Polsterung zu vielleicht fünf Plektren von Polsterung hinzufügen, so dass wir tatsächlich einige Abstände zwischen den Rändern dort bekommen. Und wir wollen wahrscheinlich auch dasselbe für unsere Inhalte tun, um vielleicht wollen wir dort sogar etwas auffüllen, und das hängt alles davon ab, wie wir unsere Inhalte präsentieren. Eso in der Regel mit der Sidebar, würden sie eine Hintergrundfarbe tun, nur um sie zu unterscheiden, um es etwas von unserem Hauptinhaltsbereich zu unterscheiden, so dass auf diese Weise der Inhalt noch mehr als die Sidebar würde auch Hier drüben. Wir können jeden anderen Text zentrieren oder es könnte die Bilder zentrieren, wenn wir dies tun wollen. Eso, das ist auch verfügbar, oder wir könnten sie einfach auf die linke Seite schweben lassen. Das hängt also davon ab, wie wir diesen Inhalt präsentieren wollen. Du kannst voran gehen und diesen Umriss dort loswerden. Und jetzt, wenn wir es aktualisieren, haben wir unsere zweispaltige Website alle bereit zu gehen und zu bemerken, dass wir immer noch auf den Fuß oder Inhalt achten müssen , also kommt das in der nächsten Lektion. 13. 15 Footer erstellen: Unsere Fußzeile ist also mit der I D Footer identifiziert, so dass es wirklich einfach ist, innerhalb unseres CSS eso darauf zuzugreifen. Eines der Dinge, die wir tun müssen, ist zu klären. Wir müssen sowohl den Float löschen, der für diese übrig bleibt, und im Wesentlichen verhindert dies, dass die Fußzeile an eine dieser Seiten gezogen wird, wenn es einige verfügbare Abstände gibt . Obwohl wir dort eine volle 100% genommen haben, wann immer Sie sind, haben Sie den Abstand dort, manchmal sehen Sie, dass Boden tatsächlich in diesen Raum gehen wird, und wir wollen definitiv nicht, dass das passiert. Eine andere Sache, auch, mit der Fußzeile, möchte ich die Zeile texten, also geht das zu einem Text. Die Linienmitte ist normalerweise das Fundament in der Mitte ausgerichtet zu sehen, vielleicht möchte ich auch einige Ränder hinzufügen, so dass ich einen oberen und unteren Rand von 20 Picks hinzufügen kann, um diesen Text ein wenig mehr zu zentrieren. Vielleicht setzen Sie Null für die Ränder links und rechts, und wir werden auch einige Vergießen hinzufügen, so dass wir einige Abstände zwischen diesem mittleren Inhaltsbereich haben können , und wir möchten vielleicht etwas Polsterung auf der linken und der rechten Seite reservieren, obwohl dies nicht genau notwendig ist, weil wir unseren Text bereits zentriert ausgerichtet haben. Aber das ist etwas, das als Vorsichtsmaßnahme hinzugefügt werden könnte, eso, dass wir nicht zu viel Platz einnehmen, der für den Rest unserer Elemente reservieren möchte. Also gehen wir hin. So haben wir jetzt eine voll funktionsfähige Website. Wir haben alle diese Hover-Links funktionieren. Alles scheint also ziemlich gut zu funktionieren. Und in der nächsten Lektion werden wir uns ansehen, wie wir es reaktionsschnell machen können, weil es nicht reagiert. Und unsere Speisekarte wird hier alles durcheinander, wenn wir versuchen, es reaktionsschnell zu machen. Eso Das ist etwas, das wir hinzufügen müssen. Und wann immer wir uns unser ursprüngliches Design ansehen. So haben wir unser grundlegendes Design in Betrieb genommen, wie wir hier sehen können. Wir haben im Wesentlichen das Layout, das wir uns angeschaut hatten eso Wir haben unseren Fußzeilenbereich hier. Wir haben einen Inhalt. Es wird zu aktualisieren, dass wir den Hauptinhaltsbereich links rechts sind Willkommensseite und unsere obere Kopfzeile hier s in der nächsten Lektion haben. Wir müssen es reaktionsschnell machen. Es kommt also 14. 16 Setzen Sie es auf: unsere Website reaktionsschnell zu machen, wird in diesen Tagen wirklich wichtig sein, mit dem Web und der Art, wie es ist. Viele Leute greifen auf Ihre Website auf mobilen Geräten zu und es muss nur direkt auf einem mobilen Gerät aussehen . Eso gerade jetzt unsere Website. Es reagiert nicht. Einige der Bilder reagieren. Was? Letztendlich wollen wir, dass alle unsere Elemente richtig vorrätig sind. Immer wenn wir einen bestimmten Punkt treffen, einen gewissen mit unserem Bildschirm, wollen wir, dass die Elemente tatsächlich ein zusätzliches Styling zu ihnen bekommen. Und darüber sprachen wir vorhin, als wir die Männer betrachteten wann immer es ein Minimum ist. Damit haben wir etwas passiert. Nun, wir machen es auf die andere Weise und wir benutzen Max mit dieser Zeit. Also der Schlüssel hier sind die Medien und auf dem Lee-Bildschirm. Und das ist, wo wir Max mit setzen. Und hier werden wir nach einem Bruchpunkt suchen, dass wir etwas wollen. Sobald es diesen Max trifft, wollen wir, dass etwas anderes Zeh passiert. Eso vielleicht für den Moment, was wir tun werden, ist, dass wir das einfach aktualisieren werden. Ich meine Content-Bereich, so dass die, die wir Fuß weiß gesetzt. Lassen Sie uns das auch setzen, Der Containerbereich. Also lassen Sie uns, dass zu lesen, wenn wir schlagen oder ein grün, so dass wirklich sticht heraus So konnten wir sehen, dass, wenn wir sicher mit treffen wir sehen, dass alles grün geht eso Wann immer wir unter diesem Bruchpunkt sind, es geht grün und ich werde nur zeigen Sie hier auch ist wirklich wichtig zu verstehen, wie das alles funktioniert S o in Chrome. Wir haben hier die Möglichkeit, verschiedene Bildschirme zu simulieren. Das ist nur durch Klicken auf diese Umschaltgeräte-Symbolleiste und wir können senden simulieren ein iPhone. Wir können Nexus Galaxie simulieren und so weiter. Also diese Luft, die Standard-Verstand, die verfügbar sind, sowie wir können die ansprechende Größe anpassen . Wir sehen also, dass, wenn wir unter 700 kommen, das ist, wenn das neue Styling eine Tatsache sein wird. Und das ist, wo wir letztendlich bewegen wollen. Diese Inhalte sind ein Seitenmenü unter unseren Hauptinhaltsbereichen. Also wollen wir diese Zehe noch einmal, nehmen Sie 100% verfügbar mit und entfernen Sie die schwimmende davon und verschieben Sie dann die Rate darunter und das ist, wo wir in diesem Containerbereich haben. Also gehen wir zurück zu unserer Seitenleiste zurück zu unseren Inhalten, und wir werden nur das Styling verwenden, das wir tatsächlich aktualisieren wollen eso wir haben Float und in Inhalt haben wir Float links. Also werden wir das ändern, um keine zu schweben. Und wir werden mit 2 100% aktualisieren. Also machen wir das Gleiche hier drüben, aktualisieren Sie das, um keine zu schweben. Und wir müssen uns keine Sorgen um die Hintergrundfarbe machen. Wir müssen uns keine Sorgen um das Padding machen, da diese sich einfach von der vorherigen Version verbreiten konnten . Also schauen wir uns das noch einmal an und sehen, was jetzt passiert. Also haben wir jetzt gesehen, wenn wir unter 700 Bilder schrumpfen, stapeln sie tatsächlich, und dies ist im Einklang mit dem ursprünglichen Design. Hier s 01 letzte Sache hier ist, dass, wenn wir wieder Dimensionierung, alles andere sieht gut aus. Aber dieses Menü ist wirklich vermasselt. Eso Es gibt eine Reihe von Möglichkeiten, damit umzugehen, und in der nächsten Lektion werde ich Ihnen zeigen, wie man das macht. Wie zu machen sind ansprechende Menü. Es kommt also 15. 17 Erstellen von Schriftarten: Ich möchte eine andere Bibliothek in unseren Website-Build einbinden. Und das wird gern sein. Ehrfürchtig. Und das ist, uh so dass dies von Bootstrap verfügbar ist, wird häufig verwendet, wenn Sie mit Bootstrap entwickeln , und es gibt Ihnen die Möglichkeit, eine ganze Reihe von wirklich coolen Icons zu haben und eine ganze Reihe von wirklich coolen Icons zu verwenden . Also werden wir das auf die gleiche Art und Weise bringen, wie wir Stiefel gekauft haben, fallen auf unsere Website und nur in einer anderen Zeile, sie verlinken darauf. Also jetzt haben wir Zugang zu gekämpft genial und gekämpft. Ehrfürchtig. Wirklich, ist wirklich genial. Eso wollen wir in einem anderen Menüpunkt hier hinzufügen. Also, wenn wir unsere Website schrumpfen, möchte ich einen anklickbaren Link hier haben, dass wir unser Menü öffnen und unser Menü nach Bedarf ausblenden können. Also lasst uns hier Ah Hyperlink erstellen. Und so wird es ein h ref sein, und das wird nur der Auslöser für die Speisekarte sein. Es hat also nirgends eine Zehenverbindung. Und wir geben ihm nur ein I D. und vielleicht nennen wir es einfach viele Menüs. Und dann werden wir hier Schriftart verwenden. Ehrfürchtig. Also Icon-Klasse, und das ist, wo wir FAA angeben können. Also haben wir die Klasse angegeben, die wir verwenden wollten. Also ist es FAA, und es ist f Aybar ist einfach zu schließen, dass ich es aufbringe und wir können sehen, dass dies uns die Menüleiste gibt , die wir innerhalb unserer Website nutzen wollten. Das ist also perfekt, aber wir wollen das auch verbergen, weil wir es nicht nutzen werden. Und eine der Down-Sites hier ist, dass es diese Hyperlink-Eigenschaft nimmt, die wir in diesen Menüs haben . Das ist also nicht wirklich ideal. Also lasst uns einfach einen Diff hier verwenden und dies zu einem klickbaren Def machen. Also werde ich das auftauchen lassen und das hier machen. Wir werden hier in unseren Text gehen, und wir werden diesen vergrößern, also machen wir ihn hier oben groß. Also die FAA-Bars und wir tun Schriftgröße. Ich bin allergisch gegen GM dafür. Es macht es schön und groß. Sie sind ein nettes Unsichtbares auf unserer Seite. Also, wenn wir es verkleinern, was wir tun wollen, ist es, diesen eso zuerst zu zeigen. Was wir mit ihren vielen Speisekarten tun wollen. Wir wollen keine anzeigen. Und dann, wenn wir unsere Website schrumpfen, wollten wir sie auf diesem Block anzeigen. Also werden wir keine anzeigen, und das wird es verbergen. Und dann, wenn wir es verkleinern, wenn wir Zugriff auf unser Menü haben wollen, wollen wir Anzeigeblock tun. Also lasst es uns auffrischen. Und jetzt, wann immer wir es verkleinern, damit wir unsere Speisekarte dort haben, können wir tatsächlich die grüne Farbe loswerden, weil dies nur zu Demonstrationszwecken war , dass, wo immer wir diesen Bruchpunkt erreichen, Wenn wir fortfahren, lassen Sie uns dieses Menü weiter ausbauen und es reaktionsfähiger machen. Also lasst uns das größer machen. Und in der nächsten Lektion werden wir das Gewicht anpacken, das unsere Speisekarte präsentiert wird, wenn wir sie verkleinern. Also das ist jetzt, es ist weg. Aber wenn wir größer werden, müssen wir in der Lage sein, dieses Menü zu präsentieren. Und im Idealfall, was wir tun wollen, ist das Menü direkt unter diesem Kopfbereich unter dem Firmennamen und Slogan eso präsentieren Dies ist etwas, das vielleicht ein wenig schwierig, eso zu präsentieren wir werden sehen, was wir tun können, aber daran zu arbeiten und dieses Menü zu aktualisieren und anzuzeigen, wenn wir es verkleinern und anstelle dieser Symbole. Also möchte ich all diese verstecken oder alle diese bewegen. Ich möchte die Navigationsleiste bewegen. Aber ich möchte nur diesen einen Teil zeigen, damit es ein bisschen knifflig sein könnte, und wir müssen dieses Menü möglicherweise vollständig und so völlig separates Menü verstecken, weil wir diesen in Here s oh schweben, lasst uns daran arbeiten innerhalb der nächsten Lektion. 16. 18 Update navbar reagieren: in dieser Lektion. Wir werden unsere vielen Menüs hier aktualisieren, um zu zeigen, wie wir Teoh in einem kleinen Zustand wollten. Also, Bauchmuskeln, ummühte es rein, damit wir unser Anzeigemenü hier auftauchen und ich werde einfach eine Anzeige machen. Keine Also aktualisieren Sie das, um keine anzuzeigen, wenn es groß ist. Aber wenn wir hineinzoomen, dann wirklich wollen, um so viele Menüs anzuzeigen. Also lasst uns hier hineingehen und Block anzeigen, so dass dieser jetzt auftauchen wird, und eines der Dinge, die ich tun möchte, ist eigentlich, diesen hier zu bewegen. Und der Grund dafür ist, dass die Art, wie ich es präsentieren möchte, ich auf die rechte Seite schweben möchte , wenn es hier verfügbar ist, eso ich einige Anpassungen innerhalb des CSS vornehmen werde, und ich möchte auch, dass das Menü horizontal oder vertikal statt horizontal. Also lassen Sie uns diese Updates in unserem Code hier machen. Genau wie das, was wir mit den Containern gemacht haben, in denen wir die Floats aktualisiert haben, werden wir zuerst die Floats auf der Navigationsleiste aktualisieren, und wir werden einen Float von niemandem machen. Geben Sie ihm eine Breite von 100%. Und lasst uns auch beides klären, weil wir nicht wollen, dass keiner der Schwimmer noch da sitzt. Also werden wir beide klären. Also lasst uns das speichern und sehen, wie das aussehen wird. Also nicht eso. Jetzt ist es einfach, es hat es da runter bewegt. Es nimmt die volle Verfügung mit eso. Lassen Sie uns einige zusätzliche Updates zu jetzt weit und die Listenelemente. Also müssen wir diese zurück zu angezeigten Blöcken machen, anstatt so einfach einen angezeigten Block hier zu machen , so dass er horizontal zurückkommt. Eso Dies war etwas, das wir ursprünglich verändert hatten versucht, alle Margen als auch loszuwerden . Und ich möchte den Text auf die linke Seite ziehen, so dass der Text links ausgerichtet ist, so dass dies das Menü ist, das wir präsentieren möchten, wenn dies angeklickt wird und wir kümmern darum in JavaScript, wir werden umschalten, was sichtbar und was nicht sichtbar ist. Eso, was jetzt noch übrig ist, diese vielen Menüs zu aktualisieren, äh, dieses klickbare Symbol hier und vielleicht schweben Sie das nach links. So viele Menüs nannten wir es, und Jahre werden wir einen Schwimmer links machen, und dieses Mal dauert es langsam 20%. Und auch, lassen Sie uns das aktualisieren, um die Zeile zu schreiben, und wir werden den Text auf der rechten Seite ausrichten, dass das Menü immer da drüben sitzt , Rate bündig auf der rechten Seite. Also, was ist das Letzte, was wir tun müssen? Wir müssen diesen lokalen Bereich immer noch aktualisieren, um den Rest dieser 80% eso aufzunehmen, genauso wie das Mini-Menü schrumpft. Lassen Sie uns das Logo aktualisieren und geben Sie das Logo A mit den restlichen 80%, weil es auf einem kleineren Bildschirm sein wird und wir brauchen etwas zusätzlichen Platz. Also schauen wir uns das jetzt an. Also, wenn wir es jetzt verkleinern, wenn wir es erweitern, bekommen wir ein normales Menü. Aber wenn wir es verkleinern, bekommen wir dieses Menü. Aber dieser Regler ist immer noch sichtbar, also was wir tun wollen, ist, dass wir keine Anzeige anzeigen wollen, um sie einfach aus der Sicht zu verstecken. Also möchte ich es stylen, bevor wir tatsächlich das JavaScript hinzufügen. Eso. Was jetzt noch übrig ist, ist nur, um dies klickbar zu machen, und wenn wir darauf klicken. Wir wollen nur die naff Bar in einem Block anzeigen. Also, das kommt in der nächsten Lektion, und wir werden etwas JavaScript dafür verwenden. 17. 19 JavaScript zum Ausstecken und Anzeigen von Elementen: in dieser Lektion. Wir wollten unsere Website aktualisieren und in einigen JavaScript s hinzufügen. Wir wollen dies anklickbar dieses Menü machen und dann tatsächlich unser Menü zeigen und diese CSS-Eigenschaft umschalten . Und das kann wirklich einfach in JavaScript gemacht werden. Also, Javascript, das wird Javascript sein. Aber wir werden einige der Dämmerungskomponenten verwenden. Und mit JavaScript Zugriff auf diese Morgendämmerung ist die Morgendämmerung im Wesentlichen, was vom Browser gebaut wird . Und das haben wir uns früher angeschaut, als wir unsere Website angeschaut haben und ich möchte das einfach loswerden. Und wir haben uns ihre Website und ihre tauben Tools angesehen, und wir hatten das hier, wo wir Eigenschaften haben, wir haben Absätze und wir haben eine ganze Reihe von integrierten Funktionen, die in Eigenschaften gebaut sind. Sie sind auf jedem einzelnen Element verfügbar. Und das ist, was das dom ist, weil dies das Dokumentobjektmodell ist, das vom Browser erstellt wird . So liest der Browser den HTML-Code durch und rendert ihn den Dom. Und dann haben wir durch Javascript Zugriff auf den Hund. Was wir also tun wollen, ist die Anzeigeeigenschaften zu aktualisieren, wenn unser Menü auf das kleine Menü geklickt wird . Also zuerst, wir brauchen Teoh Zugriff auf sie von JavaScript. Und wir können das tun, indem wir auf die Einrichtung einer Eigenschaft zugreifen und dann auf diesen Wert der Eigenschaft s zugreifen, damit wir so etwas tun können, wie wir sehr Böses tun könnten. Also werden wir eine Variable setzen, und das wird nur so viele Menüs enthalten. So müssen Sie es Menü-Menü nennen. Aber wir werden es nur so nennen, nur um der Einfachheit willen. Also Dokument bekommen Element von i d... und das Element, auf das wir zugreifen wollen, wird viele Menüs sein. Und wir werden auch eine andere Variable setzen, denn was wir tun wollen, ist, dass wir diese zusätzlichen Elemente bekommen . Also möchte ich Nav Bar bekommen, weil ich in der Lage sein möchte, auch darauf zugreifen zu können. Öffne und schließe seine Schwächung, hol Navigationsleiste, und wir werden es innerhalb des Objekts enthalten. Und dann wird uns dies die Möglichkeit geben, Eigenschaften zu aktualisieren. Also, jetzt müssen wir nur in ah, Listener Ereignis-Listener für das Mini-Menü hinzufügen . Und zuerst werden wir unseren Zuhörer hier einrichten. So viele Menü auf Klicken, und wir müssen angeben, was wir passieren wollen, wenn es angeklickt wird. Also wollen wir eine Funktion ausführen, wenn sie angeklickt wird. Und dann ist dies die Funktion, die wir ausführen wollen und wir wollen eine Toggle-Navigationsleiste, also entweder wollen wir es anzeigen, wo wir es verstecken wollen. Also werfen wir einen Blick auf diese und einfach lieben unsere Style-Display. Und für jetzt, lassen Sie uns einfach eine Anzeige von Blöcken machen. Also werden wir das Display aktualisieren, um es zu blockieren und sehen, wie das funktioniert, um es zu aktualisieren. Und jetzt, wenn wir darauf klicken, gibt es etwas, das es im Ereignis-Listener nicht wirklich hinzufügt. Also lassen Sie uns einen Blick darauf werfen, dass erkannt hat, dass ich einen Raum habe. Da ist wahrscheinlich der Grund, warum es nicht funktioniert. Also lasst uns das auffrischen. Und jetzt, wenn wir darauf klicken, zeigen wir, dass s so müssen wir auch in der Lage sein, es zu verstecken, wenn wir es anklicken eso Letztendlich, anstatt nur Block zu tun, möchte ich Bedingung dort tun, um zu sehen, was es ist, Und wenn es keine ist, dann wird es blockiert, und wenn es Block ist, dann wird es sein. Es wird zu keiner gehen, also werden wir nur eine kurze Überprüfung, um zu sehen, was der Wert zu sehen ist. Wenn dieser Wert bereits gleich „none“ ist. Und wenn das wahr ist, dann wird es zu blockieren wechseln. Sonst wird es zu keiner gehen. Also lasst uns sehen, wie das funktioniert. Also, jetzt kann ich es anklicken. Ich kann es zeigen und verstecken. Und dann würde dieses Menü offensichtlich genauso funktionieren, wie es immer funktioniert hat. Dies ist also ein wirklich schnell, wirklich schnell fix toe add in klickbare naff bar. Sie könnten es auch tun, wenn Sie hier klicken und einfach diese Funktion ausführen. Und natürlich müssen Sie diese Parameter nur dort übergeben. Wir können es auch so nehmen, weil dieser Weg vielleicht ein bisschen besser sein könnte . Es gibt also viele verschiedene Möglichkeiten, dasselbe hier innerhalb von JavaScript-s zu tun, damit wir den Berg Code, den wir hier verwenden, wirklich verkleinern können , und wir haben es nicht einmal zu identifizieren. Student auf Klick so. Vielleicht ist das ein bisschen leichter zu verstehen. Ein bisschen unkomplizierter, also wird es dasselbe tun. Also, wenn es angeklickt wird, wird das abfeuern und öffnen Sie das Navigationsmenü auf. Und wir können hier sehen, dass eines der Probleme passieren wird, wenn es geschlossen haben und wenn wir es verkleinern, wenn wir die Größe des Bildschirms ändern, dann wird es tatsächlich verschwinden. Dies ist also eines der inhärenten Probleme, wie alles funktioniert richtig, wenn wir auf unserem mobilen Gerät sind und wir klicken. Aber wenn wir Größe auf dem Bildschirm wieder, dass wir in einige Probleme laufen könnten. Eso gibt es eine Reihe von verschiedenen Möglichkeiten, dies zu tun. der nächsten Lektion werden wir uns auch einige Alternativen ansehen, also kommt es. 18. 21 Erstelle eine weitere reaktionsschnelle Navbar: in der vorherigen Lektion haben wir uns angesehen, wie wir unsere Navigationsleiste reaktionsschnell machen können. Also, wenn wir es neu Größe, erhalten wir dieses Symbol hier, das anzeigt, dass es ein Menü gibt, das anklickbar ist. Es öffnet sich und es schließt sich, so dass wir die Größe ändern können und wir sehen, dass wir immer noch einige Probleme damit haben , es auf diese Weise zu tun. Und dieses Jahr ist wirklich gekommen, weil wir in der Lage sind, die Größe der Seite zu ändern. Dies würde normalerweise nicht passieren, wenn Sie auf einem mobilen Gerät kommen. Sie kamen auf die Website und die Dinge würden tatsächlich funktionieren, wenn nötig, weil Sie Ihre Seite nicht wirklich neu dimensionieren würden . Daher ist diese Art von Menüleiste auch ideal, wenn Sie eine Menüleiste ausblenden und anzeigen, oder wenn Sie eine zweite Menüleiste haben, die Sie ausblenden und anzeigen möchten. In dieser Lektion möchte ich diesen einen Schritt weiter gehen und Ihnen einige andere Optionen zum Erstellen von Menüleisten zeigen. Und in dieser Lektion, anstatt die tatsächliche Style-Eigenschaft, dieDisplay-Eigenschaft, die wir verwenden werden, hinzuzufügen und zu entfernen Display-Eigenschaft, die wir verwenden werden, , werden wir tatsächlich ah Klasse verwenden und die Klasse nach Bedarf entfernen und hinzufügen. Und diese Klasse wird der Halter dafür sein, ob die Menüleiste angezeigt wird oder keine. Und was das tun wird, ist, dass dies die Dinge ein wenig vereinfachen wird, indem Sie es herausnehmen und diese Fähigkeit auseinanderbrechen, die diese Menüleiste angezeigt haben und wir haben die Möglichkeit, das tatsächlich zu verstecken und zu zeigen, aber dann sind wir , damit es über das Styling gesteuert werden kann. Also werden wir hier eine brandneue Klasse anhängen, und dann wird diese Klasse tatsächlich über den Medien-Bildschirm gesteuert und uns wissen lassen ob wir das verstecken oder zeigen müssen. Und das wird alles hier im Medien-Bildschirm gesteuert werden. Anstatt es hier in die Navigationsleiste hinzuzufügen, werden wir es als Klasse hinzufügen, und das wird viel mehr Sinn machen, denn sobald diese Klasse eine größere Größe hat, dann wissen wir, dass wir es zeigen wollen. Also werde ich hier eine brandneue Klasse erstellen, und wir werden es einfach „sm-Bildschirm“ nennen. So wird dies für kleine Bildschirme sein, und wir wissen, dass alle Elemente hier auf unserer Website, die die gleichen Eigenschaften für kleine Bildschirme haben müssen . Sie werden in der Lage sein, die gleiche Eigenschaft zu nehmen und hier drüben innerhalb des CSS müssen wir hinzufügen, dass wir im Wesentlichen eine Anzeige machen werden. Keiner davon. Und dann schalten wir es innerhalb des Medienbildschirms hier um. Also werde ich einfach unsere CSS-Datei öffnen, die hier unten ist, und ich werde einige Eigenschaften toe, sm Bildschirm anhängen . Und was passiert ist, wenn wir auf dem kleineren Bildschirm sind, dann werden wir nur keine anzeigen, was bedeutet, dass auf dem größeren Bildschirm immer angezeigt werden. Und so geht das auf Lee für die Navigationsleiste. Also ist es wirklich gut, nichts mit dem zu tun haben, was in unserem Haupt-Display-Bereich von unserer Staub-Stop-Ansicht passiert . Probieren Sie das aus und sehen Sie, wie das funktioniert. Es ist, wenn ich es auffrische. Wir sehen, dass wir automatisch die Menüleiste nicht anzeigen, aber wenn wir groß sind, als wir es anzeigen und dann ist dieses Symbol immer noch anklickbar und wir kümmern uns darum auch in dieser Lektion. Wir kümmern uns darum. JavaScript Und was wir innerhalb des JavaScript tun möchten, ist im Wesentlichen diese Klasse ein- und ausschalten , weil diese Klasse diejenige ist, die tatsächlich die Menüleiste anzeigen oder die Menüleiste ausblenden . Gehen wir also zu unserem JavaScript hier, und wir werden einige Variablen erstellen, die den Inhalt enthalten werden. Das sind Dokumentobjekte. Also dokumentieren und wir werden Element von i d bekommen also holen wir uns die ganze Navigationsleiste. Also greifen nav bar, denn das ist, was wir die ganze Navigationsleiste hier genannt haben. Also werden wir alles hier packen, und wir werden auch überprüfen, ob unser Knopf, damit dieser Knopf hier Mini-Menü genannt wird. Also lassen Sie uns auch einen Blick auf dieses werfen, weil wir vielleicht einige Eigenschaften darauf anwenden wollen, so dass wir vielleicht das auf Klick anhängen . Also wird das hier das gleiche sein, wie wir es Schaltflächenmenü nennen können und es diesem entspricht . Und wir werden das auch ein bisschen aufräumen, indem wir das tun. Also werden wir im Wesentlichen hinzufügen, dass auf Klick-Funktion. Also machen Sie nur eine schnelle Anpassung an hier. Und was ich jetzt tun möchte, ist, dass ich es eigentlich will, anstatt all das. Was ich tun möchte, ist, dass ich diese Navigationsleiste gegen nehmen möchte, die nur im Wesentlichen das Gleiche hier tun . Also das ist, äh, dieses Objekt X hält Dokument get Element von I, d nav bar, oder wir könnten es vielleicht nab unsere nennen. Also macht es dort ein bisschen mehr Sinn. Jetzt enthält Bar alle diese Informationen, und wir werden im Wesentlichen überprüfen, dass Klasse, Name und Klassenname das Objekt ist, das alle Klasseninformationen des Elements enthält . Und wir werden überprüfen, ob dieser Nav-Bar Klassenname absolut gleich nichts ist . Und wenn es leer ist, dann wissen wir das. Also, wenn es nur ein Platz dort ist, werde ich sicherstellen, dass ich diesen Raum hinzufüge und auch, so dass, wenn wir ihn entfernen und verstecken, wir tatsächlich in einem Raum hinzufügen. Also haben wir diesen Raum. Es gibt also jetzt müssen wir sicherstellen, dass wir die richtige Klasse hinzufügen. Es wird also SM-Bildschirm hinzufügen und Essam Bildschirm entfernen. Also, wenn es nicht da ist als der Wert von NAB, unser Klassenname ist SM-Bildschirm. Und wenn es leer ist, dann wird es nur der leere Raum sein. Und ich kann auch einen Konsul Protokolle machen. Wir können eine bessere Vorstellung davon bekommen, was in diesem Objekt enthalten ist, und Sie können sehen, dass der Klassenname in der Konsole präsentiert wird. Und das Konsul Verzeichnis ist eine bessere Möglichkeit, Objektinformationen anzuzeigen, besonders wenn Sie Objektinformationen aus dem Dom erhalten. Sie werden also sehen, dass wir manchmal, wenn wir uns entwickeln, Konsul Logs, Consul Directory verwenden und im Wesentlichen spielen sie. Sie senden Nachrichten über die Konsole, und dies wird für die Entwicklung verwendet, um Informationen hin und her zu übergeben, so dass Sie nicht wirklich wissen, was der Inhalt von not bar ist. Aber wenn Sie Konsolenprotokoll undatiert als jedes Mal, wenn Sie auf die Website gehen, werden Sie in der Lage sein, zu sehen, was in diesem Objekt enthalten ist. Schauen wir uns das an und sehen, wie das jetzt funktioniert, also aktualisieren wir, und ich werde die Konsole öffnen, damit wir einige zusätzliche Informationen sehen können. Also, das ist hier unter Kontrolle. Und so werde ich den Konsul hier drüben haben, damit wir sehen können, welche Nachrichten hin und her kamen und wann wir es neu ausmessen. Also, jetzt bekommen wir die Navigationsleiste. Wenn ich darauf klicke, sehen wir, dass wir die Navigationsleiste öffnen und wir den Inhalt davon sehen. Es ist also eine leere Klasse, also sehen wir, wenn wir erneut darauf klicken. Es ist eine leere Klasse, aber es gibt immer noch etwas, das hier schief geht, und ich möchte darauf hinweisen, dass das Konsolenverzeichnis und das Konsolenprotokoll die Informationen anders ausgeben So gibt das Konsolenprotokoll nur das gesamte Element, einschließlich der HTML und dann Consul Verzeichnis, ermöglicht es uns, tatsächlich die Verzeichnisinformationen zu sehen. Und das ist diejenige, nach der wir hier suchen. Also suchen wir nach Klassennamen. Dies ist also die Eigenschaft, die wir betrachten, und wir überprüfen, um zu sehen, was der Wert ist, damit wir sehen können, wann immer wir darauf klicken. Also muss ich das nur noch einmal öffnen und innerhalb der Konsole sehen. Das ist also das letzte Objekt, auf das wir gerade geklickt haben. Und wenn wir zu Klassennamen gehen, wird es nicht wirklich hinzugefügt. Das ist also, was dieses Problem verursacht, weil es nicht in SM-Bildschirm hinzufügt. also unseren Quellcode betrachten, damit wir sehen können, dass wir auch diesen Klassennamen abmelden können, damit wir überprüfen können, was der Wert ist, der dort präsentiert wird. Aber wenn wir hier unten gehen, sehen wir, dass wir immer noch einige Probleme mit dem CSS haben, weil die Art und Weise, wie es gerade jetzt einige unerwünschte Eigenschaften macht, und wir wollen es nicht anzeigen, weil wir die Anzeige durch die Klasse steuern. Nun, das s M-Klasse, und das ist diejenigen, die keine anzeigen werden. Willst du das loswerden? Und ich mache nur einen kurzen Check Over, um sicherzustellen, dass alles andere richtig aussieht. Statistische zurück auf unsere Webseite und aktualisieren Sie sie. Und denken Sie daran, dass wir aktualisiert haben, dass die Konsole jetzt gut ist, also sollten wir in der Lage sein, zu sehen, was der tatsächliche Klassenname ist. Das wird also nur eine Liste aller Klassen sein, die da sind. Für den Fall, dass Sie einige zusätzliche Klassen haben, in denen Sie diese hinzufügen müssen, also nimmt es diese Bedingung tatsächlich nicht an und es wird sie dort nicht zurückgesetzt. Vielleicht müssen wir es einfach leer lassen. Das könnte also ein bisschen einfacher sein, wenn wir dort zusätzliche Klassen haben, denn dann wissen wir, dass die Eigenschaften vorhanden sein werden, was ich Ihnen zeigen werde. Wenn wir es aktualisieren, sehen wir, dass jetzt alles so aussieht, als ob es richtig funktioniert. Wenn ich die Größe der Seite ändere, ist unser Menü da, und es sieht so aus, als ob sie wieder die Größe funktioniert. Also, obwohl das Menü geöffnet ist und wir es neu Größe, es nimmt nichts weg von der tatsächlichen Navigationsleiste angezeigt. Und wenn wir wieder Größe wieder, zurück nach unten zu klein, dann sind wir immer noch an der Stelle, wo wir aufgehört haben, mit der Navigationsleiste ist geöffnet. Also diese Luft nur zwei verschiedene Möglichkeiten, um es zu präsentieren. Und Sie müssen wählen, was auch immer am besten für Sie funktioniert. Und ich werde dir schnell zeigen, wie es ist, wenn wir hier eine andere Klasse haben. Wenn Sie zufällig eine zweite Klasse oder so etwas haben, also vielleicht nennen wir es einfach zweiter oder so etwas S O, dann müssen wir dies auch aktualisieren . Und das sollte lesen, dass, wenn die zweite, dann werden wir es mit der zweiten Klasse aktualisieren, und wir lassen die hier einfach in. Also werden wir das noch hinzufügen. Legen Sie einfach einen Platz da rein, sollten wir vielleicht keinen Platz brauchen. Versuchen wir diese Acht und aktualisieren Sie sie. Also, wenn ich darauf klicke, wird es umschalten. Und wir können einen kurzen Blick werfen, weil wir den Entwickler Konsul immer noch offen haben, und wir können das sehen, wenn wir darauf klicken. Also fügen wir die Klasse hinzu und entfernen sie, aber wir entfernen tatsächlich beide Klassen. Also ein weiteres Problem gibt, dass wir nur ein schnelles Update davon machen müssen. Also schreiben wir tatsächlich alle Klassen dort und wo wir gerade an zweiter Stelle schreiben . Also sind wir es nicht. Wir verlieren tatsächlich diesen Bildschirm, also müssen wir sie beide in schreiben, wenn sie innerhalb dieses Klicks halten wollen. Also wollen wir beide dort bewerten, weil es diesen ganzen Klassennamen genommen hat, weil es dort mehrere Klassen anwendet. Obwohl es so aussieht, als ob es jetzt funktioniert, sehen wir, dass es tatsächlich so funktioniert, dass es diese zweite Klasse behält. Wenn Sie also mehrere Klassen darin haben, stellen Sie sicher, dass Sie den Graben auflisten und dass Sie sie wieder in dieses bestimmte Element innerhalb des Klassennamens umschreiben . 19. 23 So fügen Sie Bootstrap JavaScript Bibliothek hinzu: in den letzten Lektionen, die wir uns angesehen haben. Navigationsleisten und Navigationsleisten sind immer so wichtig für Ihre Website, wenn Sie auf mobile und responsive Funktionen Ihrer Website suchen. Und deshalb konzentrieren wir uns ziemlich viel Zeit auf diese Navigationsleisten, weil es sehr wichtig ist, sie richtig zu machen . Es ist ein wichtiger Aspekt im Webdesign, und ich möchte Ihnen auch zeigen. Also habe ich Ihnen zwei Optionen gezeigt, die im Wesentlichen JavaScript-Optionen sind, und sie funktionieren im Wesentlichen auf die gleiche Weise, wo wir unsere Navigationsleiste haben. Wir haben einige JavaScript, das hilft, einige der Styling zu kontrollieren, und wir haben unsere Stylesheets. So haben wir es so formatiert, dass es zusammenklappt und ausgeblendet und angezeigt wird, abhängig von der Bildschirmgröße. Es gibt also auch ein paar andere Optionen für Navigationsleisten, und eine von ihnen, die oft für die Web-Entwicklung verwendet wird, ist Bootstrap Now. Bootstrap ermöglicht es uns, Websites schneller und schneller zu entwickeln, und sie verfügen über eine integrierte Funktionalität, die einsatzbereit ist. Wenn Sie hinzufügen möchten, sind Sie reaktionsschnell Menüs. Jetzt, mit Bootstrap, ist das einzige, was Sie brauchen, um Teoh connect mit der Bootstrap-Bibliothek und auch mit der G Abfragebibliothek zu sammeln . Also müssen Sie zuerst in der J-Abfragebibliothek hinzufügen. Also habe ich das hier schon in meinem Dashboard. Also habe ich das ist die G-Abfrage-Bibliothek und ähnlich dem, was wir mit CSS-Verknüpfung zu einer CSS-Bibliothek von Gedankengenial einbringen konnten . Wir können auch die J. Corey Library einbringen und dann Bootstrap JavaScript nutzt diese J Coury Library, um einige wirklich schöne Funktionalität zu machen . Und wenn Sie etwas Zeit haben, gehen Sie auf die Boots Drop-Website und überprüfen Sie es. Es gibt viele wirklich nette Dinge, die mit Bootstrap gemacht werden können. Also werde ich hier unser JavaScript loswerden. Also wird es es vorerst leer lassen. Und wir werden hier rüber gehen, und wir werden unsere Website so formatieren, dass sie die neuen Bootstrap-Menüeinstellungen und Menükombinationen unterbringen . Also müssen wir in Klassen hinzufügen, ähnlich wie wir es mit anderen Navigationsmenüs tun wo wir Klassen und andere Teile von Bootstrap verwenden oder Klassen verwenden, um verschiedene Effekte zu erstellen , würden das gleiche tun hier mit Bootstrap. Also haben wir bereits i d Header. Wir haben Klasse, Container und Container ist Bootstrap-Klasse, die uns erlaubt, Wenn Sie sich erinnern, früher im Kurs haben wir uns angesehen, wie das uns erlaubt, tatsächlich einen Teil des Inhalts zu zentrieren und dann Als nächstes haben wir dieses i-d Logo hier, und dann haben wir unsere Navigationsleiste. Was wir also für Bootstrap tun wollen, ist, dass wir ein komplettes zusammenklappbares Menü erstellen möchten. Also, um dies zu tun, müssen wir loswerden und ein paar Dinge bewegen. Als ob wir so viele Menüs nicht mehr brauchen werden, weil Bootstrap sich darum kümmern wird, aber wir werden diese f ich dachte, tolle Bars brauchen. Also werde ich das vielleicht bis jetzt einfach da drin lassen. Und in der nächsten Lektion werden wir dies in ein voll reaktionsfähiges Bootstrap-Navigationsmenü umwandeln. Es kommt also in der nächsten Lektion auf. 20. 24 Bootstrap Menü NavBar: in dieser Lektion. Wir werden unser Navigationsmenü aktualisieren, um vollständig Bootstrap zu sein, hübsch und reaktionsschnell über Bootstrap. Wir werden also etwas von unserem Styling loswerden, an dem wir früher gearbeitet haben und nur die Bootstrap-Informationen enthalten. Also werde ich in das Stylesheet gehen, denn genau wie im vorherigen Beispiel, wenn wir Änderungen an unserem HTML-Code vornehmen und wir uns anpassen, wird unser Menü präsentiert. Wir müssen auch Anpassungen daran vornehmen, wie wir unser CSS präsentieren, damit wir das nicht mehr brauchen . Wir werden die FAA-Bars für die Vorderseite von einigen Bars lassen, so dass wir eine ziemlich gute Größe auf sie bekommen , weil wir eine Art Kontext haben müssen, ihre Speisekarte. Es gibt eine Option in Bootstrap. Ein Schwung, um das zu tun. Wir brauchen den SM-Bildschirm nicht mehr. Wir brauchen weder das Nebenmenü noch extra, aber wir brauchen das Nebenmenü, aber wir essen die Minibar nicht. Wir brauchen keine dieser knave Optionen, so dass das alles einfach entfernt werden kann, und es ist ziemlich viel von dem, was wir in unserem Medienbildschirm tun, aufgeräumt. Und jetzt sind wir bereit, unser CSS anzupassen. Wir können auch einen kurzen Blick auf die Website werfen und es funktioniert nicht wirklich gut ohne dieses CSS. Lassen Sie uns jetzt einige Updates und Änderungen auf unserer Website vornehmen. Eso erste Sache, die wir tun wollen, ist, dass wir aktualisieren wollen. Also werden wir jetzt das Logo und die Unternehmensinformationen enthalten, denn mit Bootstrap gibt es uns die Möglichkeit, all diese Informationen zu erhalten. Wir müssen dies nicht mehr als die Now-Leiste identifizieren, da wir alle Informationen haben, die wir ursprünglich verwendet haben. Wir müssen dort keine Container mehr herstellen. Mit Bootstrap hat es eine eingebaute Klasse namens nav bar. Und dann hat es zusätzliches Styling für die Knave-Bar. Also das ist, was ich hier hinzufügen, wir sind auf die Eingabe in knave bar toe. Lassen Sie es wissen, dass es sich um eine Navigationsleiste handelt. Und dann geht es hier um das zusätzliche Aussehen und das Gefühl der Now-Bar, und wir werden nur mit dem Standard-gehen. So wie wir unseren Klassencontainer dort hatten, müssen wir auch einige zusätzliche Klassen hinzufügen und mit Bootstrap Es ist nur eine Syriza-Klassen , die Sie hinzufügen. Und das hilft Bootstrap zu verstehen, wie Sie eine Position wollen. Verschiedene Elemente auf Ihrer Website. Da müssen wir Dibs einbringen. Und mit Bootstrap müssen Sie einige von ihnen einbringen, um Ihre Website genau so aussehen zu lassen , wie Sie wollen. Mit Containerflüssigkeit gibt uns dies die Möglichkeit, einen Container zu haben, der vollständig über den gesamten Webspace geht . Also werde ich einfach nur Containerflüssigkeit sein, die so anders ist als Containerflüssigkeit , die uns 100% mit dem vollen verfügbaren Blockabschnitt gibt. Jetzt müssen wir hier ein anderes div hinzufügen, und dieses wird eine Klasse von jetzt Balkenheader haben. Und dies wiederum hilft Bootstrap zu verstehen, was wir wollen, was wir wollen, dieses besondere Element und wie wir es innerhalb unseres Gerichtshofs darstellen wollen. Also, jetzt, Bar Header und dann als nächstes, müssen wir einen Knopf oder etwas einrichten, das umgeschaltet werden soll, wenn darauf geklickt wird, dass wir diese Bootstrap-Funktion abfeuern. Also lassen Sie uns das jetzt auch erstellen, und wir werden einfach tun Knopfband und Band ist ein Knopf und dann die Klasse. Dies ist also ein wichtiger Teil, in dem wir angeben müssen, dass dies ein Knickbalken-Toggle ist. Das ist also eine Klasse, aber es wird uns auch helfen. Wie Bootstrap. Verstehen Sie, wie wir dieses bestimmte Element verwenden möchten, und wir wollen es als ausgeblendet verwenden. Also, das ist der Typ der Navigationsleiste so reduzierte Leiste und wir müssen in Daten umschalten. Dies hilft also, J Abfrage noch mehr Informationen darüber zu verstehen, was wir tun wollen und wie wir dies nutzen möchten, damit wir auf Daten umschalten können und wir wollen ein zusammenklappbares Menü erstellen und dann ein Ziel datieren. Das ist also auch äußerst wichtig, weil wir das Ziel haben müssen, was wir zusammenbrechen wollen. Und wir werden im Idealfall alles in dieser UL-Liste zusammenbrechen. Also werden wir jetzt weit ins Ziel kommen und es gibt einen Knopf oder ich d, den wir wieder verwenden werden. Das ist also der Knopf. Und dann innerhalb des Knopfes müssen wir irgendeine Art von Charakteren haben. Es gibt also alle anderen Charaktere, die du willst, aber ich werde das gleiche benutzen, das wir im Mini-Menü benutzt haben und diesen Teil speichern. Also jetzt, wenn wir auf die Webseite gehen, mal sehen, was jetzt passiert. Also suchen wir immer noch nicht richtig aus, weil wir nicht alle Styling hinzugefügt haben. Das ist also wichtig an Bootstrap ist, dass wir wirklich das gesamte Styling und in der Regel mit Ihrem Menü hier hinzufügen müssen . Also haben wir unsere jetzt Bar-Header, und wir wissen, dass dies Teil der NAFTA Bar Header ist. Also haben wir unser Logo und all das, ihr nächstes wird ein anderes DIV erstellen. Und das wird das I D jetzt bellen, also beachten Sie , dass es mit dem Ziel hier zusammenbindet, mit dem I. D und der Klasse, müssen wir angeben, was wir wollen, dass die Klasse sein soll. Also wird die Klasse jetzt sein, also ist es eine Navigationsleiste von Bootstrap versteht das und nav bar Liebe, und wir können die Navigationsleiste nach rechts oder links ziehen. Also machen wir eine richtige Navigationsleiste. Und mit Bootstrap gibt es eine Reihe von Optionen zum Einstellen der verschiedenen Navigationsleisten Also lassen Sie uns das speichern und hinzufügen. Eigentlich habe ich die Klasse hier falsch verstanden. Wir müssen diese Klasse in zwei hinzufügen. Dies Sie eine Norden-Liste, und wir müssen dies tatsächlich aktualisieren, um nav bar kollabieren. Also wieder, mawr Bootstraps, Styling. Das muss also knave bar zusammengebrochen werden, denn das ist die Option, die wir gewählt haben und die Menüklasse wird zusammengebrochen werden. Sehen wir uns das jetzt an. Ich werde die Seite aktualisieren und sehen, was jetzt passiert. So sehen wir, dass, wenn wir wieder Dimensionierung sind, so dass es leicht funktioniert. Aber wir müssen immer noch etwas zusätzliches Styling loswerden, weil es irgendwie funktioniert, aber es ist nicht richtig zu setzen. Es gibt also einige zusätzliche Optionen, die wir brauchen, um Updates hier und in der Regel mit Bootstraps zu machen . Und das wäre typischerweise ein h rau. Also verlinken Sie irgendwo. Also werde ich das einfach stylen, wie wir es normalerweise in Bootstrap tun würden. Ich muss das Logo dort loswerden. Also lasst uns das jetzt speichern und es ein bisschen mehr optimieren. Mal sehen, wie das jetzt aussieht. Also öffne das Fenster. Ich kann das schließen und wir können sehen, dass es mehr wie ein Menü aussieht, das wir präsentieren wollen. Aber es öffnet sich immer noch nicht und das liegt daran, dass wir noch ein zusätzliches Styling haben, das wir innerhalb unseres Builds loswerden müssen . Normalerweise würden Sie also nicht alle diese Navigationsleisteneinstellungen erstellen und sie dann aktualisieren . Sie würden sie einfach nicht einschließen, da Bootstrap all diese Informationen verarbeiten würde . Also, wenn wir jetzt auf unsere Website gehen und mit wir es aktualisieren, können wir sehen, dass wir jetzt ein funktionierendes Menü haben, außer dass es nicht klickt, so dass es immer noch notwendig ist, diese Funktionalität hinzuzufügen. Und aber wir haben den Firmennamen dort, und wir haben das Menü, das zusammenbricht und hoffen, dass es sich noch nicht öffnet, aber es wird als typisches Navigationsmenü angezeigt, wenn wir sie neu dimensionieren. Wir haben unseren Firmennamen und unsere Logo-Informationen, die dort auf der linken Seite sitzen können. Also die nächste Lektion werden wir beenden und einige zusätzliche Updates machen. Wir können ihre Kleidung und Menü öffnen und dieses Menü auf unserer Website über Bootstrapgebaut Bootstrap 21. 25 Bootstrap Menü Navbar: in dieser Lektion. Ich möchte den Code ein wenig optimieren, nur um sicherzustellen, dass alles richtig funktioniert . Also, wenn ich es auffrische, haben wir in der letzten Lektion bemerkt. Die Menüleiste passt sich also richtig an, also gibt es hier ein paar Optimierungen. Also schaut uns dieses Datentransport-Ziel an und wir müssen es auf dieses I d von Nav Bar abzielen . Also hier können wir es nennen, was wir wollen. So konnten wir auch verschiedene Ziele verwenden, Eso konnten wir es auf verschiedene Ideen ausrichten. Also nannte ich es nur nab sind, um konsistent zu sein, was die Arbeit, die wir früher tun. Also, jetzt ziele ich es auf Nav Bar an, also wird das tatsächlich auf dieses bestimmte Element abzielen. Also mal sehen, wie das funktioniert. Also, wenn ich es öffne und schließe und wenn ich es neu eingestellt habe, so dass meine Navigationsleiste richtig funktioniert und wir alle diese Elemente entfernt haben und Bootstrap macht es einfach wirklich einfach und merke auch, dass ich kein JavaScript enthalten musste, damit ich dieses Skript-Tag oder dieses Skriptelement ebenfalls loswerden. Und die einzige Sache, die nicht genau richtig auftaucht, ist dieser Firmenname. Und es gibt tatsächlich eine Klasse dafür auch innerhalb Stiefel fallen, die tatsächlich Stil könnte dies und geben uns die Möglichkeit, es viel mehr Niedere eso diese Klasse hier, die wir hinzufügen könnten, ist eine knave Marke, weil mit Stiefeln fallen erwarteten Navi Bar Marke, so dass wir erwarten würden, dass es einige Branding gibt innerhalb, dass der obere linke Bereich, so dass wir in der Regel eine Marke dort haben würde. Wir können auch in einem Bild hinzufügen, ein Logo und so weiter und Slogan eso gibt es einige Optionen, aber wir wollen es nur eine Zeile zu halten. Und der Grund dafür ist die Art und Weise, wie die Bootstrap-Navigationsleiste funktioniert, dass sie am besten aussieht und am besten funktioniert, wenn dies nur ein Licht ist. Aber natürlich, wenn Sie möchten, können wir Styling anwenden und es bei Bedarf aktualisieren. Aber für jetzt lassen wir es einfach mit diesem und wir sehen, dass wir eine Navigationsleiste haben und laufen, und auch ich möchte Ihnen nur zeigen, Also das ist die Bootstrap-CSS-Datei. Dies ist die nicht einheitliche Version, so dass Sie eine bessere Vorstellung davon bekommen können, was verfügbar ist welche Klassen verfügbar sind. Also, wenn Sie nur knave Bar suchen, wir haben wir eine ganze Reihe von Einträgen für Nav Bar, so dass wir eine NAB an der Unterseite s befestigt haben könnte Oh, das ist das Ziehen nach rechts. Wir haben auch Optionen, um in Drop-Downs hinzuzufügen. Eso diese Luft die verschiedenen Radiusgrößen, so dass Sie sehen können, gibt es eine Menge von Informationen hier, und das ist, dass. Nab unseren Header, so dass er es automatisch nach links schwebt. Auf der Speisekarte. Nab, unser zusammengestürzter Verlierer. Die CSS-Styling-Optionen für das Ausblendmenü. Wir haben eine feste Oberseite statisch. sind also alle verschiedene Optionen für die Navigationsleiste, und wir können wirklich leicht da ist die NAB unsere Marke, die wir nicht verwendet wurden. Eso wirklich leicht schwächen. Fügen Sie diese jetzt Balken hinzu, wenn wir es umschalten. Dies passiert mit der Knave-Bar, und das wird alles über G-Abfrage und nur Styling gesteuert, das in Bootstrap verfügbar ist. Und deshalb ist es wichtig, alle diese Klassennamen richtig zu machen, damit wir sie innerhalb unserer Website richtig hinzufügen können. Und wenn Sie mehr über die Nap-Bar und die verschiedenen Optionen in Bootstrap lesen möchten und wie wir sehen können, erspart es uns eine Menge Ärger, wenn wir diese jetzt in Bootstrap Bar machen und Bootstrap das gesamte Styling und die tatsächliche Codierung für es s Also haben wir einige Informationskomponenten, nav bar, und wir haben alle verschiedenen Optionen hier, die wir mit nav bar tun können. Wir können auch und dann haben wir die Navigationsleiste Standard. Dies ist also die typische Bootstrap-Navigationsleiste. Wir haben Informationen über das Markenimage, das eso in der Lage war, tatsächlich in einem Markenimage als auch. Das wäre also etwas gewesen, wo wir in diesem Bild hinzufügen könnten. Wir haben eine Option, die Sie in einer Suche hinzufügen können. Reichen Sie einen Schwung da rein. Wir haben die Navigationsleiste Form und naff brennen links und so weiter. Es ist eine Menge verschiedener Optionen hier mit der Navigationsleiste und der Fähigkeit zu ändern, wie der Knave-Bar behandelt wird. Wir könnten es auch an die Spitze bringen, wenn wir eso schwächen wollen, indem wir einfach in der einfachen Klasse hinzufügen , können wir ändern, wie die Knave-Bar präsentiert wird. Wir können es auch an der Unterseite befestigen. Und so einer. Wenn wir also etwas hatten, wo wir es unten fixieren, gingen wir zurück in unsere A-reguläre Navigationsleiste. Alles, was wir tun müssen, ist die Klasse unangemessenen Speicherort zu kopieren. So ist es hier zu sehen, wir haben in der Navigationsleiste, so können wir einfach hinzufügen, dass in werde nur ad copy und fügen Sie Kunst in Sanaa Far festen Boden. Jetzt, wenn wir auf unsere Website gehen, können wir sehen, dass unsere Navigationsleiste jetzt unten ist. Und wenn wir Größe wieder, die Navigationsleiste bleibt fest am unteren Rand des Bildschirms und Sie können dies sehen. Und das ist etwas, das Stiefel fallen automatisch kümmert. So macht es wirklich einfach, Anpassungen daran vorzunehmen, wie Ihre Navigationsleiste innerhalb Ihrer Website präsentiert wird . Und das ist alles wieder durch Stiefel fallen getan. Und das ist, warum viele Entwickler Luft Bootstrap verwenden, weil es wirklich macht es einfach diese Anpassungen in diesen Updates auf machen erspart Ihnen einige Mühe, tatsächlich zu programmieren und das Styling selbst hinzuzufügen, so dass sie zu tun haben, ist mit den Stiefeln verbunden. Löschen Sie Dateien, die CSS Bootstrap, die Stiefel fielen Javas JavaScript und auch in Ajay Kori Library. Und das ist alles, was Sie brauchen, um es innerhalb Ihrer Website in Gang zu bringen und dann natürlich unangemessene Klassen hinzuzufügen. 22. 27 Seiten auf der Website erstellen: Jetzt, wo wir die Website abgeschlossen haben,den gesamten Quellcode,haben wir es so den gesamten Quellcode, aussehen und handeln, wie wir es präsentieren wollten, wie wir unsere Navigationsleiste haben . Und ich sollte das hier wieder nach oben verschieben, weil ich nicht will, dass es unten fixiert wird . Also lasst uns darum kümmern. Und es ist einfach, diese Klasse zu entfernen und zu aktualisieren, wo sich die Navigationsleiste tatsächlich präsentiert s, so dass wir sehen können, dass alles so funktioniert, wie wir wollten. Und jetzt können wir andere zusätzliche Seiten aufbauen, weil diese Website tatsächlich für Seiten hat . Das war also unsere Homepage. Und auf den zusätzlichen Seiten wollen wir die Begrüßung auf meiner Website loswerden. Wir wollen das nicht präsentieren. Vielleicht haben wir etwas anderes, das wir präsentieren wollen. Aber im Moment werden wir nur zufrieden sein, das vollständig zu entfernen und unser Design zu betrachten. So passt unsere aktuelle Website immer noch zu unserem Layout ursprünglich oh, das wir angelegt hatten und wie wir es unsere Website präsentieren wollen. Also gehen wir zurück in unseren Code. Und jetzt, um die zusätzlichen Seiten zu erstellen und dann verstecken sie sich einfach, wo ich das behalten werde. Und um zusätzliche Seiten zu erstellen, was ich normalerweise mache, ist, dass ich die Seiten einfach so erstelle. Also müssen wir auch sicherstellen, dass wir alle Seiten-Links drin haben. Also werde ich einfach diese Augen über HTML speichern und von hier aus werde ich diesen Inhalt loswerden, der diesen Top-Header-Container enthält, also könnte ich das einfach entfernen. Und dann kann ich das über uns umbenennen. Und dann hier ist, wo ich Inhalte präsentieren kann. Wenn ich innerhalb der Bootsabschnitt will und wir die Anzeigen gleich halten können, könnten wir sie dynamisch einbringen, also gibt es eine Reihe von verschiedenen Optionen. Also jetzt, wenn ich auf die Zehe geklickt habe, können wir sehen, dass wir ein völlig anderes Stillayout für eine Website haben, und dann können wir jetzt dasselbe für Produkte tun. Also speichern Sie wie auf nur werde überprüfen, um sicherzustellen, dass ich den Dateinamen korrekt. So sind es Produkte mit einem Kleinbuchstaben Peak. So, jetzt denke ich über als Produkte dot html, und wir können dann anpassen und füllen Sie unsere Website nach Bedarf. Wenden Sie also die entsprechende Syntax und den Code an. Und jetzt ist es nur noch unser Kontakt. Also speichern Augen und ich werde dies als Kontakt dot html speichern und ich werde dies aktualisieren, um Kontakt zu speichern. Und jetzt, wenn ich es aktualisiere, habe ich alle meine Seiten. Alles ist gebaut, voll responsive Website von Grund auf neu, und ich kann beginnen, Bilder hinzuzufügen, wenn ich einen zusätzlichen Inhalt und so weiter. So ist dies alles jetzt in meiner Website gebaut. Also ermutige ich Sie auch, einen Blick um den Quellcode zu nehmen, macht einige Updates, Anpassungen nach Bedarf, und bauen Sie Ihre eigene Version dieser Website Voll responsive mobile Menü. Und Sie können auch wählen, welche Männer Sie Ihren Besuchern präsentieren möchten und wie Sie dieses Menü präsentieren möchten . Daher haben wir eine Reihe von verschiedenen Optionen für das Navigationsmenü, da dies immer noch der wichtigste Teil der Gestaltung Ihrer Website ist , weil Sie möchten, dass Besucher von jeder Größe Bildschirm in der Lage sein, zu kommen und zu aktivieren und mit Ihrer Website interagieren als entworfen. Ich werde auch die Ressourcen und Links einschließen, die ich in diesem Kurs verwendet habe, damit Sie es selbst überprüfen können. Sie können überprüfen, was Boots drop zu bieten hat. Es gibt eine ganze Reihe von Optionen, um Websites schnell zu entwickeln und zu erstellen. Ich benutze nur diese Stiefel. Löschen Sie Bibliotheken und bringen Sie sie in Ihren Quellcode, und Sie können bei Bedarf auch Ihre eigenen Versionen mit Dummy-Steuer-Platzhaltern erstellen. Zehe halten Stellen und Abstand für Ihre Website-Inhalte, und dann können Sie Ihre eigenen Designs mit glitzy dot com erstellen. Und es gibt eine Reihe von anderen Optionen. Und wenn Sie nach einem Editor suchen, stehen auch Klammern zur Verfügung. Also Klammern io, also werde ich alle Links und Ressourcen einschließen, die in diesem Kurs verwendet werden. 23. 28 Online-Code-Editor: Ich habe den gesamten Quellcode auf einer Website namens Code Pen i O hinzugefügt. Und dies ist eine Website, die Ihnen die Möglichkeit gibt, es Quellcode direkt online hinzuzufügen. So können Sie hier sehen, dass, wenn ich mich wie eine Hintergrundfarbe ändere, wir sehen, dass wir sofort im Anzeigebereich die brandneue Hintergrundfarbe in diesen brandneuen CSS-Effekten sehen, die stattfinden. Und das ist eine großartige Ressource. Wenn Sie möchten, entwickeln Sie Ihre Website so, dass Sie Ihren gesamten Quellcode drin haben und losgehen können. Und Sie können einige Anpassungen hier innerhalb des Quellcodes vornehmen, um die Website gleichgültig zu präsentieren . Also, wenn Sie Ihren Grenzradius größer machen wollten, können Sie sehen, dass er sofort dort stattfindet. Sie können Ihre Hintergrundfarben aktualisieren. Das ist ein guter Ort. Nun, um verschiedene Farben zu testen, schauen Sie es sich an und sehen Sie, wie es innerhalb Ihrer Website s präsentiert wird, so dass Sie hier eine Reihe von Änderungen vornehmen können . Wir können auch unsere Schriftgröße aktualisieren und es könnte wirklich massiv groß machen. Wir können das in Dent auf der linken Seite aktualisieren, damit wir etwas davon in Dellen entfernen können. Wir können mehr eingerückt und wir sehen sofort, dass es dort oben innerhalb der Website Gestalt annimmt. Also das sind Dies ist eine großartige Ressource und ich habe den Code bereits in ihrer dort hochgeladen. Willkommen, um auf der Website zu gehen und es zu überprüfen, gespielt mit dem Gericht und sehen, was Sie passieren können und sehen Sie verschiedene Styling-Optionen , die Sie auf der Website hinzufügen können. Es wird diese hintere Zehe weiße s zu bringen, so dass Sie sehen können, alles richtig innerhalb der Website-Inhalt präsentiert wird . Also ermutige ich Sie, auf die Website zu gehen, überprüfen Sie es aus und verwenden Sie Online-Ressourcen wie diese wirklich zu entwickeln, Ihre Website und bekommen es so aussehen, wie Sie es in Echtzeit aussehen wollen und bekommen eine Echtzeit-Vorschau .