PSD zu Bootstrap 4: Verwandel dein Webdesign in eine Webseite

1. Einführung in den Kurs: Hey, alle. Mein Name ist Luke Fetish. Ich blogge auf lukefetish.com. Ich bin seit 1999 ein professioneller Softwareentwickler. Aber in der heutigen Klasse geht es darum, wie wir unser Webdesign mit Bootstrap 4 in eine Webseite verwandeln können . Wenn Sie mit Bootstrap nicht vertraut sind. Bootstrap wurde ursprünglich von den Leuten auf Twitter entwickelt um responsive Webseiten super schnell zu erstellen. Mit Responsive meine ich Webseiten, die auf einem Gerät jeder Größe gut aussehen. Während dieser Klasse werden wir Bootstrap-Basics behandeln. Wir werden lernen, wie man Bootstrap in unsere Webseite einbezieht. Wir erfahren alles über Bootstrap-Grundlagen wie das Raster und wie Sie es verwenden können , um Ihr Webdesign zu gestalten, um es in eine Webseite zu verwandeln. Machen Sie sich keine Sorgen, wenn Sie kein eigenes Webdesign haben. Ich werde während des Unterrichts einen liefern. Schließlich lernen wir, wie wir das Aussehen von Bootstrap anpassen können , um sicherzustellen, dass sich unsere Webseite wirklich wie unsere eigene anfühlt. Wenn Sie Fragen oder Bedenken haben, zögern Sie nicht, sich mit uns in Verbindung zu setzen. Ich bin hier, um bei dir zu sein und bereit, jeden Schritt des Weges während dieses Unterrichts zu helfen. Ich bin super froh, dass du hier bist und ich kann es kaum erwarten, loszulegen und zu sehen, was du mit Bootstrap 4 baust. 2. FÜR WEN IST DIESER KURS GEEIGNET?: Also, für wen ist diese Klasse? Nun, diese Klasse ist für jeden, der ein Webseiten-Design in eine wirklich funktionierende, funktionierende Webseite verwandeln möchte . Wir werden Bootstrap 4 dafür verwenden. Bootstrap ist viel niedrigerer Ebene als grafische Website-Builder wie Wix und Weebly, und Tools wie das, aber es bietet einen großen Kompromiss zwischen dem schnellen Erstellen von Webseiten und der Flexibilität, benutzerdefinierten Code zu schreiben. Aber das bedeutet, dass Sie während dieser Klasse einige Codierung durchführen werden. Ich gehe davon aus, dass Sie mit HTML mit CSS und mit der Verwendung eines Texteditors ein wenig vertraut sind. Nun, wenn Sie mit diesen Dingen nicht vertraut sind, dann machen Sie sich keine Sorgen, denn wir sind hier auf Skillshare, und es gibt eine Reihe von tollen Klassen, die Sie verwenden können, um diese Dinge zu lernen. Die Lehrer sind fantastisch und Sie werden in kürzester Zeit auf dem Laufenden sein. Also, wenn Sie bereit sind, setzen Sie sich fest für den nächsten Vortrag, wo wir im Detail übergehen , was Sie während dieser Klasse lernen werden. 3. Was du in diesem Kurs lernen wirst.: Hallo an alle und herzlich willkommen zum Video. Wir werden überprüfen, was Sie tatsächlich in dieser Klasse lernen werden. Welche Dinge werden wir abdecken? Nun, das erste, was wir besser betrachten, ist es besser herauszufinden, was Bootstrap eigentlich ist, ich meine, ist es ein Framework oder eine Bibliothek? Wir werden herausfinden, woher es kam, wir werden sehen, welche Probleme es löst, warum jeder es so gerne benutzt und keine Probleme einbringt. Spoiler-Alarm noch nicht wenig, aber nicht so sehr, dass wir es nicht benutzen wollen. Dann werden wir zu grundlegenden Bootstrap-Konzepten übergehen. Wir werden sehen, wie es die Navigation behandelt, wir werden über das Bootstrap-Raster erfahren, auch sehen, wie Container, Zeilen und Spalten funktionieren. Danach werden wir mit der Implementierung einiger Bootstrap-Navigation fortfahren, wir werden sehen, wie Bootstrap-Navigationsklassen zusammenarbeiten. Hier können Sie auch mit der Arbeit an Ihrem Projekt beginnen da Sie mit der Implementierung dieser Strecke beginnen können. Wir werden sehen, wie wir die Navigation reaktionsschnell machen können. Inside Navigation ist natürlich das Menü, das Sie auf Ihrer Website setzen würden , um Sie zu verschiedenen Teilen Ihrer Website zu bringen. Wir werden sehen, wie wir sicherstellen können, dass die Anzeige gut auf verschiedenen Bildschirmen wie auf Ihrem Laptop oder Ihrem Desktop-Computer oder auf Ihrem mobilen Gerät, und dann werden wir sehen, wie Drop-Down-Menüs auch funktionieren. Das ist eine andere Sache, die wir sofort in unserem Projekt umsetzen können. Danach wird es zum Bootstrap-Raster gehen. Jetzt ist das Raster etwas, das verwendet wird, um eine Webseite zu erstellen. Dinge auf ein Raster setzen, das heißt, wie Zeilen und Spalten, macht alles gut ausgerichtet, und es macht es auch einfacher, sie zu verwalten, wenn wir die Größe unseres Bildschirms oder sogar nur unseren Browser ändern. Wir werden sehen, wie ich gerade sagte, wie Bildschirmgrößen funktionieren. Wir werden sehen, was Haltepunkte sind und wie sie sich auf das Layout Ihrer Webseite auswirken. Wir werden sehen, wie wir die Gier auch in verschiedenen Kontexten verwenden können. Wie sich das Raster auf verschiedene Aufträge auswirkt, z. B. das Layout des Gesamtdokuments, wie sie es verwenden können, um eine Tabelle mit Daten zu strukturieren und zu formatieren. Auch, wie wir es verwenden können, um die Fußzeile zu implementieren. Das ist der untere Teil unserer Webseite, die vielleicht wieder Navigation hat, vielleicht hat es Ihre Kontaktdaten, vielleicht hat es wie Ihre Social Media Icons, diese Dinge. Wir werden sehen, wie das Gitter uns an diesen verschiedenen Orten helfen kann. Danach werden wir mit Bootstrap-Eingabekomponenten fortfahren. Wir werden sehen, wie wir Formulare und Steuerelemente verwenden können und diese Formulare wie eine Texteingabe oder Schaltflächen. Wir werden uns ansehen, wie wir Bootstrap anpassen können, um sicherzustellen, dass unsere Website oder Webdesign wie unser eigenes war. Wir werden individuelle CSS-Regeln verwenden, um dies zu tun. Ich werde auch einige Bootstrap-Stile verwenden. Aber meistens werden wir untersuchen, wie wir unser eigenes CSS verwenden können, um das Aussehen einer Seite zu ändern. Setz dich für die nächste Vorlesung fest. Wenn wir Bootstrap einführen, werden wir herausfinden, was es ist, wie es funktioniert, wo wir es verwenden möchten. 4. Was ist Bootstrap?: Hallo an alle. Willkommen zu unserer nächsten Lektion, wie Sie ein Webdesign mit Bootstrap 4 in eine Webseite verwandeln können. Bevor wir noch weiter gehen, sollten wir uns darüber unterhalten, was Bootstrap eigentlich ist. Nun, was ist das überhaupt? Bootstrap ist eine Sammlung von CSS und JavaScript. Das wurde ursprünglich von Twitter entwickelt um konsistentes Verhalten auf allen Geräten und Browsern zu bieten. Was wir hier sagen, ist, dass wir Bootstrap haben. Es hilft uns, Webseiten zu erstellen, die gleich aussehen und sich die ganze Zeit gleich verhalten. Denn wenn wir darüber nachdenken, wie die Leute im Internet schauen, haben wir Telefone und Tablets, Laptops und dann Desktop-Computer. Sie wissen, dass jeder einzelne von ihnen einen anderen Browser verwenden könnte. Potenziell Personen, die mehr als einen Browser auf demselben Gerät verwenden. Jeder dieser Browser wird Ihre Webseite nur ein wenig anders auf diesen verschiedenen Geräten anzuzeigen Ihre Webseite nur ein wenig anders auf und Ihre Webseite überall ist kompliziert und zeitaufwendig. Dies ist das Problem, das Bootstrap löst. Woher kommt Bootstrap? GetBootstrap.com. Wenn wir dorthin gehen, finden wir das. Dies ist die Titelseite für Bootstrap. Sie können es hier herunterladen und Sie haben Anweisungen hier unten auf den anderen Möglichkeiten, wie Sie es auch verwenden können. Ich zeige Ihnen, wie Sie es verwenden können, wenn wir anfangen, unser Projekt zu bauen. Aber hat Bootstrap irgendwelche Nachteile fallen? Ja. - Ein Paar. Typischerweise 100K -200K, wenn Sie es einschließen. Wenn Sie die Gesamtheit von Bootstrap in Ihre Webseite aufnehmen. Das ist eine sehr kleine Sache, die man jedes Mal herunterladen kann. Bootstrap, obwohl es weniger allgegenwärtig ist, als es früher war, ist es immer noch super beliebt und es gibt viele Bootstrappy suchen Websites. Aber wie ich bereits sagte, werden wir sicherstellen, dass wir unsere Website so anpassen können , dass sie nicht wirklich wie jede andere Website aussieht, die Bootstrap verwendet. Nun, da wir eine kleine Einführung in Bootstrap hatten und was es ist. In der nächsten Lektion werden wir über grundlegende Konzepte von Bootstrap gehen. Wir werden über die Bausteine von Bootstrap lernen , die wir verwenden können, um unsere Schnittstellen zu erstellen. 5. Bootstrap Übersicht.: Alle, willkommen zu unserer nächsten Lektion Sie ein Webdesign mit Bootstrap in eine Webseite verwandeln können. Dieses Mal werden wir einige grundlegende Bootstrap-Konzepteüberprüfen einige grundlegende Bootstrap-Konzepte und so sind dies die Bausteine, die wir verwenden werden, um unsere Webseite zusammenzustellen, und es gibt wirklich zwei Hauptkategorien, die wir suchen werden während dieses Unterrichts. Die erste ist die Navigation, und die zweite ist das Bootstrap-Raster und das Raster besteht aus Containern, Zeilen und Spalten. Schauen wir uns diese jetzt ein bisschen genauer an. Also bei der Navigation. Stellen wir uns vor, dass dies wie eine Webseite ist, sehr langweilig Webseite. Eine Webseiten werden ein Menü oben drauf haben, oder in der Regel oben, oder in der Regel oben, werden wir einige andere Optionen in einem Moment sehen und wenn wir diese Menüs haben, beziehen wir uns auf diese als die Navigation. Dies ist, was ein Benutzer verwendet, um sich durch unsere Website zu navigieren und sie werden oft schwierige Dinge wie zu Hause und die Über Seite und ich werde auf die Kontaktseite verlinken und vielleicht, wenn Sie eine Website verwenden, bei der Sie sich anmelden, gibt es eine , um auf etwas zu klicken, das mit Ihnen als Benutzer in Verbindung steht. Menü kann am unteren Rand der Seite oder auf der Seite erscheinen, spielt keine Rolle, das ist alles Navigation. Eines der Dinge, die Bootstrap-Navigation gibt uns Drop-Down-Menüs. Wenn Sie also auf vielleicht Ihr Benutzermenü klicken, erhalten Sie ein Dropdown-Menü, in dem Sie Dinge mit Ihrem Konto tun oder mit den Einstellungen für die Art und Weise, wie die Webseite funktioniert oder die Website funktioniert, oder einfach abmelden. Bootstrap-Navigation ist auch reaktionsschnell. Wenn Sie sich eine Webseite auf einem kleinen Gerät wie ein Telefon ansehen, sehen Sie eines dieser kleinen Dinge oben rechts auf dem Bildschirm, normalerweise ist es oben rechts oft Hamburger genannt und wenn Sie darauf klicken, dann erhalten Sie eine andere Art von Menü Drop unten von dort und dies ist eine Möglichkeit, Platz auf einem Handy-Bildschirm zu sparen. Also haben wir immer noch unsere Navigation, aber die meiste Zeit ist es versteckt, bis der Benutzer es braucht. Wir hoffen nur, dass der Benutzer erraten kann, wofür das Hamburger Ding eigentlich ist. Ich denke, die meisten Leute sind daran mittlerweile gewöhnt. Also haben wir darüber gesprochen, wie die Navigation funktioniert. Jetzt werden wir einen Blick auf Bootstrap Grid Container werfen. Ein Container ist etwas, das überrascht, enthält andere Komponenten des Bootstrap-Grids und das Wichtigste ist , dass andere Teile des Rasters nicht sehr gut funktionieren, es sei denn, sie befinden sich in einem Container und dies ist einer der Kompromisse, die wir bei der Verwendung von Bootstrap bekommen, ist, dass es manchmal ein wenig schwierig sein kann auszuwählen und zu wählen, welche Teile davon wir verwenden möchten. Einige der Komponenten, nicht alle von ihnen, aber einige von ihnen sind definitiv voneinander abhängig, und wenn wir also eine von ihnen verwenden wollen, werden wir, naja, mehr als eine verwenden . Wie auch immer, wir haben einen Container, es ist etwas, worin wir Dinge hineinlegen können, und dann ist der nächste Teil des Gitters eine Reihe. Eine Zeile ist, wie Sie vielleicht erwarten, eine horizontale Anordnung anderer Komponenten und so können wir mehrere Zeilen in einen Container einfügen. Dann, sobald wir unsere Zeilen an Ort und Stelle haben, können wir Spalten hinzufügen und Spalten in Bootstrap sind so konzipiert, dass sie eine bestimmte Größe haben. Sie teilen sich immer in Gruppen von 12 auf. Sie können also eine Spalte haben, die die gesamte Breite des Rasters einnimmt, oder Sie können eine haben, die ein Zwölftel des Rasters einnimmt und wir werden eine kleine funktionierende Demo davon jetzt sehen, aber das Wichtigste ist, dass, wenn wir im Bootstrap-Raster, werden wir Dinge in einen Container stecken. In diesem Container werden wir wahrscheinlich Zeilen in diesen Zeilen haben Spalten haben. Wir können die Größe dieser Spalten angeben, und lassen Sie uns sehen, wie sie sich jetzt verhalten. Hier ist eine kleine Webseite, die nur zusammengestellt wurde, um zu demonstrieren, wie das Raster funktioniert. Wir können sehen, dass ich eine spezielle Art von Container habe, der tatsächlich eine feste Breite ist, nicht den gesamten Raum des Bildschirms belegt, und darin können Sie die Zeilen nicht sehen, weil die Zeilen vollständig von den Spalten besetzt sind und Sie erinnere dich, wie ich erwähnt habe, dass Spalten in Teile von 12 aufgeteilt werden. Also haben wir diese Col-12 hier und ich habe diesen Namen col dash 12 absichtlich verwendet , weil so die Spalten in Bootstrap verwiesen werden. Das ist also eine kleine Einführung in die Bootstraping-Stile und die Art, wie sie benannt wurden, und so haben wir eine col-12, die bedeutet, dass es 12 Spalten breit ist, dh es nimmt den ganzen Platz in Anspruch. Als nächstes in der nächsten Reihe haben wir col-6, was Überraschung ist die halbe Breite unserer col-12 und dann darunter haben wir 1, 2, 3, 4 weitere Reihen und sie sind von diesen verschiedenen Arten von Col für Spalten besetzt und sie sehen alle aus das gleiche im Moment. Aber Sie können sehen, dass einige von ihnen sm im Namen haben, einige haben md im Namen, einige haben lg im Namen und dies ist Teil von Bootstrap Responsive Ansatz für den Umgang mit dem Raster. Was das bedeutet, ist, dass, wenn wir einen Farbstrich für Spalte haben, das heißt, dass dies immer eine Spalte sein wird. Aber wenn wir diese Seite etwas schmaler machen, können Sie sehen, dass unser Container schrumpft, wenn ein Container schrumpft, die Zeilen schrumpfen und so unsere Cols, naja, schrumpft, um ihren kleineren Behälter zu besetzen, Aber sobald wir eine bestimmte Größe überschritten haben, können Sie sehen, dass hier etwas passiert ist. Was ist los? Wir können sehen, dass diese col-lg-4, was vorher Spalten waren, sie alle übereinander gestapelt wurden, und so nimmt Bootstrap kleinere Bildschirmgrößen auf und sagt, naja, vielleicht in Ihrem Layout, Sie möchten, dass diese Dinge Spalten, wenn Sie auf einem großen Bildschirm sind, einem großen Monitor irgendeiner Art, aber wenn wir auf einen kleineren Bildschirm oder einen kleineren Monitor oder einfach nur ein kleineres Browserfenster kommen , weil ich es hier nur manuell schrumpfen. Wir wollen nicht mehr, dass sie nebeneinander stehen, weil sie alle überladen werden und wir sie übereinander kleben. Das ist also für Col Large. Mit col-md, das für Medium steht, wird es genau das Gleiche tun, aber erst, wenn wir auf ein mittelgroßes Browserfenster gelangen. Vielleicht fragen Sie sich an diesem Punkt, na ja, was zählt ist mittel, was zählt ist groß? Dies basiert auf tatsächlichen Pixelgrößen und wir werden später in der Klasse genau die Pixelgrößen betrachten , die Bootstrap verwendet, um zu entscheiden, ob wir auf einem großen, mittleren oder kleinen Bildschirm oder einem kleinen Browserfenster sind. Wieder einmal, wenn ich diese etwas mehr zusammenpresse, kann man sehen, dass unser col-lg übereinander gestapelt ist, unsere mittleren Säulen aufeinander gestapelt sind und jetzt sind wir auf unsere kleinen Säulen hinunter. Lassen Sie uns wieder, wir sind ein bisschen weiter und sie stapeln sich auch übereinander und jetzt, da Bootstrap entschieden hat, dass wir auf einem wirklich kleinen Bildschirm oder Browserfenster sind, und wir brauchen diese Ränder nicht mehr auf der Seite. Sie können sehen, es nimmt 100 Prozent der Breite unseres Browserfensters und dann zerquetschen wir es den ganzen Weg nach oben und diese col-4 Spalten, weil sie keine Bildschirmgröße haben. Sie haben nicht sm, md oder lg in ihrem Namen. Sie sind immer Spalten und so werden sie sich nie übereinander stapeln. Das ist also eine super schnelle Einführung in die Navigation und das Raster von Bootstrap. Dies soll Ihnen einen Überblick auf hohem Niveau geben, um zu sehen, wie diese Dinge funktionieren. Als nächstes werden wir mit der Implementierung einiger tatsächlicher Navigation fortfahren , und hier werden Sie Ihr Projekt starten. 6. So implementierst du die Bootstrap: Hey, alle. Willkommen zurück. In dieser Lektion werden wir tatsächlich anfangen, etwas zu bauen. Wir werden die Navigation für unser Projekt umsetzen. Nun, das Projekt, an dem wir arbeiten werden, oder ich werde sowieso arbeiten, baut einen kleinen Teil dieser Administrationsoberfläche auf . Jetzt, wenn Sie ein eigenes Design haben, möchten Sie umsetzen, genial. Aber der Hauptpunkt ist, dass es alle Elemente hat, die wir während dieser Klasse erkunden möchten und dass wir einige Navigation oben haben. Wir haben unsere Fußzeile unten. Unsere Navigation hat ein kleines Drop-Down-Menü von unserem kleinen User-Icon. Sogar auf der anderen Seite haben wir ein allgemeines Layout hier auf der linken Seite, wir haben die Marke und einen Fülltext dort. Auf der rechten Seite ist der nächste große Abschnitt der Webseite, wir haben eine kleine Tabelle. Wir haben auch ein paar Eingaben. Dies sind Dinge, die wir verwenden können, um mit Bootstrap zu erkunden , um unser Webseitendesign zu implementieren. Wenn Ihr Design nicht alle diese Elemente enthält, können Sie sie immer noch vorübergehend einfügen, nur um die Konzepte zu erkunden und sicherzustellen, dass Sie das Beste aus dieser Klasse herausholen. Sie können sie danach immer entfernen. Natürlich, wenn Sie kein eigenes Design haben, stelle ich dieses im Ressourcenabschnitt für Ihr Projekt bereit, damit Sie mit mir arbeiten und dieselbe Webseite erstellen können. Wie ich bereits sagte, der heutige Abschnitt ist alles über die ersten Schritte mit der Implementierung der Navigation so Bootstrap-Navigation. Navigation in Bootstrap wird implementiert, indem einige Bootstrap-CSS-Klassen HTML-Elementen die das Offensichtliche dort belegen mögen, aber so ziemlich werden wir alles erledigen. In Bootstrap erstellen wir einige HTML-Elemente, wir wenden Bootstrap-Klassen auf sie an und dann erhalten wir alle Vorteile der Verwendung des Bootstrap-Systems. Dies ist die grundlegende Struktur der Navigation in Bootstrap. Wir beginnen mit einem umschließenden nav Element und dann haben wir eine ungeordnete Liste. Hier ist das Öffnen der ungeordneten Liste, Schließen davon, und diese die Elemente in der Mitte. Die Art und Weise, wie wir das in eine eigentliche Bootstrap-Navigation verwandeln , besteht darin diese Klassen diesen bestimmten Elementen zuzuweisen. Nav Elemente erhält navbar, navbar-light, navbar-toggleable-md. Dieser, abgesehen davon, dass er ein Bissen ist, ist ein bisschen zweideutig, was es bedeuten könnte. Dies ist, um unsere Navigation reaktionsschnell zu machen. In Bootstrap 4 haben Sie entweder eine ansprechende Navigation oder Sie haben überhaupt keine Navigation, sonst funktioniert es nicht. Du denkst vielleicht, wie erinnere ich mich an diese Klassennamen? Sie machen nicht viel Sinn für mich. Ich muss zustimmen, dass in Bootstrap die Navigationsklassen nicht super kohärent oder leicht zu merken scheinen , deshalb werde ich unsere fertige Navigation als Vorlage für Sie bereitstellen , die auch in Ihre Ressourcen. Sie können das als Vorlage für Ihre zukünftigen Entwürfe verwenden. Weil ich weiß, dass ich sicherlich eine lebenswichtige Unterrichtszeit vergessen werde, die meine Navigation daran hindert, zu arbeiten. Ich arbeite auch an einer Vorlage. Wie auch immer, wir beginnen, indem wir diese CSS-Klassen, navbar, navbar-light, navbar-toggleable-md auf unsere andere Komponente nav anwenden, dann für unsere ungeordnete Liste, wir sagen, es ist das navbar-nav. Was wir hier haben, das Nav-Element auf der Außenseite. Das ist unsere navbar, die ist, wie wir es für unsere Navigation enthalten und wir sagen, diese ungeordnete Liste, diese ul, das ist die Navigation, die innerhalb der navbar geht. Dann endlich sagen wir, diese Jungs sind nav Artikel. Wir weisen sie plus nav Element zu den Listenelementen. Lassen Sie uns das in einem Code tun. Dies ist die Skelettdatei, die in den Ressourcen für Ihr Projekt bereitgestellt wird. Es ist wirklich nur eine grundlegende HTML-Datei, die eine Reihe von Content Delivery Network CDN Links zu Bootstrap und jQuery-Datei hat. Hier erhalten wir alle unsere CSS und JavaScript von. Wir benutzen das alles nicht sofort. Aber ich arbeite von dieser Skelett-Datei mit allem am Anfang enthalten ist, so dass wir beim Durchlaufen nicht weiter Sachen hinzufügen müssen. Die einzige Sache, die nicht mit Bootstrap zusammenhängt, die wir hier einschließen, ist diese Materialsymbole Schriftart. Ich benutze das für die Symbole, die in der Anwendung sind, deshalb ist das da. Ich dachte, wir müssen anfangen, unseren Navigationslauf auszubauen. Wir werden mit ein paar Nav-Tags beginnen. Ich werde diese einfach am Anfang ohne Klassen implementieren. Ich finde nur, dass am Anfang viel einfacher zu tun ist, macht für mich am meisten Sinn. Ich habe eine ungeordnete Liste, ungeordnete Liste wieder, schließen Sie das ab und dann haben wir unsere li-Elemente. Ich muss unser Design überprüfen, um zu sehen, wie viele Dinge wir in unserer Navigation haben. Das knifflige Ding hier ist, wir haben 1, 2, 3 , 4, 5, und dann haben wir diese anderen hier auf der anderen Seite. Wir werden diese in ein oder zwei Lektionen erforschen. Aber der Punkt ist, dass dies zwei separate Gruppen von Navigation und im Moment werden wir die erste tun, Preisgestaltung über FAQ, Blog, Kontakt, so ist es eine Preisgestaltung über FAQ, Blog und Kontakt. Offensichtlich ist das nächste, was wir tun müssen, ist auschecken genial Navigation in einem Browser. Hier ist unsere Datei im Browser. Wie Sie sehen können, sieht es genau wie eine ungeordnete Liste aus. Natürlich ist dies zu erwarten. Wir haben noch kein Styling auf diese Elemente angewendet, also werden wir sagen, Klasse entspricht navbar und dann navbar-light. Navbar-Licht ist nur für die Farbe. Welche Farbe soll diese Datei haben? Es wird hell in der Farbe sein. Dann haben wir unsere ausgezeichnete navbar-toggleable-md, md ist für mittlere, was bedeutet, dass wir ein ansprechendes Verhalten auf einem mittelgroßen Browser kick in wollen. Dann haben wir Klasse gleich navbar-nav. Endlich können wir haben, eigentlich ist es nicht ganz endlich, aber wir werden so tun, als wäre es endlich vorerst, nav-item. Ich werde die einfach für diese Jungs da reinlegen. Mal sehen, wie das aussieht, ich weiß, wie es aussehen wird. Nun, das ist überhaupt keine Navigation. Es ist ein bisschen besser, weil sie jetzt horizontal angeordnet sind, oder sie sind horizontal und nicht vertikal angeordnet. Aber trotzdem, das ist eklig. Die Sache ist, dass wir wollen, dass diese anklickbar sind, also müssen wir sie in ein Clicking-Element setzen. Die Sache ist in der Bootstrap-Navigation, wir verwenden einen Anker und wir setzen die href auf Hash-Preise. Das werden wir vorerst tun. Beenden Sie das einfach. Plus unsere „a“ -Tags. Nun, das wird immer noch nicht gut für dich aussehen. Kommen Sie zurück, wir können sehen, dass sie sich in Klicksachen verwandelt haben, aber sie sind alle zusammengefügt, und das liegt daran, dass wir noch eine andere Klasse brauchen. Dann sagen wir Klasse gleich nav Link. Wir laden das neu und schließlich wird unser kleines Menü magisch in Bootstrap-Stil Navigation umgewandelt. Etwas Interessantes wird hier passieren. Wenn ich diesen Browser nach oben zerquetsche, können Sie sehen, dass sie auf der Seite dort und vertikal wieder herunterfallen. Nun ist dies das ansprechende Verhalten. Das standardmäßige Responsive-Verhalten von Bootstrap. Es will unser Menü in ein vertikales Menü zu reorganisieren ist, sobald unser Browser kleiner als mittlerer Größe wird. Wie ich schon sagte, werden wir später untersuchen, was diese mittleren und kleinen und großen Bezeichnungen bedeuten. Aber wenn ich das in sm ändere und dann wieder hier rüber gehen und die Seite neu laden. Mit dem Bildschirm kann ich jetzt etwas kleiner werden, bevor er herumspringt. Aber wir werden das in der Tat ändern. Aber was wir hier getan haben, ist unser erstes Bit der Navigation zu implementieren. Jetzt wäre ein ausgezeichneter Zeitpunkt für Sie, das in Ihrem eigenen Projekt auszuprobieren. Denken Sie daran, wenn Sie überhaupt auf irgendwelche Probleme gestoßen sind, lassen Sie es mich wissen. Ich werde sehr glücklich sein, dir zu helfen. In der Zwischenzeit, halten Sie fest für den nächsten Vortrag wo wir unsere ansprechende Navigation ein wenig sinnvoller machen und sehen, ob wir vermeiden können, dass dieses vertikale Menü standardmäßig. 7. So machst du die Bootstrap in der richtigen Sprache.: Hey, alle, willkommen zurück. In der heutigen Lektion werden wir überprüfen, wie wir unsere Bootstrap-Navigation reaktionsschnell machen . Nun, wie sollen wir es reaktionsfähiger machen? Weil es jetzt schon reagiert. Es wird auf die Größe des Geräts reagieren, auf das wir am Rand schauen. Aber es ist nicht wirklich das Beste im Moment, denn wenn wir es betrachten, hier ist es, wir haben unser kleines Menü oben hier und wenn wir diesen Browser kleiner machen, können Sie sehen, dass ich den Code im Hintergrund habe. Wenn Sie es kleiner machen und auf die Größe unseres Browsers reagieren, erhält es ein Update vom Browser und ändert sich zu vertikal anstatt horizontal, das ist cool. Aber wenn wir auf wie ein Mobiltelefon sind und unser Bildschirm mehr ist als diese Art von Format, dann nimmt unser Menü eine enorme Menge an Platz oben auf dem Bildschirm ein und wir wollen das nicht. Was wir stattdessen tun möchten, ist dem Benutzer die Möglichkeit zu geben , das Menü zu erweitern und zu reduzieren. Um das zu tun, müssen wir etwas JavaScript verwenden und wir werden kein JavaScript schreiben. Wir müssen nur die JavaScript-Bibliotheken in unseren Quellcode aufnehmen und wie ich in einer früheren Lektion sagte, die Datei, von der ich gearbeitet habe, hat die Skelettdatei bereits dieses Zeug nur aus Gründen der Einfachheit enthalten, aber wenn Sie gerade mit Ihrer eigenen Datei vorangehen und nur das Bootstrap CSS enthalten haben, ist jetzt die Zeit, diese anderen JavaScript-Dateien einzuschließen. Du fragst dich vielleicht, wie soll ich das machen? Woher weiß ich, was ich brauche und woher ich es bekomme? Der einfachste Weg, dies zu tun, ist der Kopf über bootstrap.com zu bekommen. Gehen Sie also auf die Bootstrap-Seite. Sie können einfach Bootstap in der Google eingeben, die Sie hier bekommen, gehen Sie zu beginnen, und in Schnellstart können Sie sehen, dass sie sehr häufig eine Kopier- und Einfügeoption bieten , wenn Sie auf die kleine Kopie in meine Zwischenablage klicken. Dies ist für das CSS, aber wir sind an dem JavaScript interessiert und hier ist das JavaScript direkt hier ist zu Ihnen signiert. Klicken Sie auf „In Zwischenablage kopieren“ und dann können Sie es einfach in Ihren Code einfügen. Lassen Sie uns sehen, die einfache Möglichkeit, diese Dateien einzuschließen. Wieder einmal brauchen wir jQuery, Popper und Bootstrap JavaScript. Wir brauchen alle drei davon, weil das Bootstrap JavaScript jQuery und Popper verwendet. Wir werden auch eine Schaltfläche zu unserem Menü hinzufügen, damit wir auf die Schaltfläche klicken und das Menü erweitern und reduzieren können. Dann werden wir schließlich unsere<ul in einem<div einbinden, und wir werden immer noch einige Klassen und vor allem Identitäts- oder ID-Wert haben , die das JavaScript sagen, hey, das ist die Sache, die erweitert und zusammengebrochen werden muss. Ich bin sicher, dass Sie dieses Szenario schon mal erlebt haben. Wenn Sie sich das Web auf einem kleinen Gerät irgendeiner Art ansehen, werden Sie oft auf einen dieser kleinen Jungs hier oben rechts auf diesem Bildschirm stoßen, der oft lächerlich als Hamburger-Symbol bezeichnet wird, weil einige Leute denken, es sieht aus Wie ein Hamburger. Für mich sieht es eher so aus, als würde man auf einen Toaster schauen. Aber wie auch immer, das ist die Sache, die wir klicken würden und dann unser Menü erweitert und Benutzer hat die Möglichkeit, das Menü zu verstecken, bis sie es brauchen und erweitern, klicken Sie darauf und Sie sind fertig. Dies ist die Struktur unserer Navigation HTML im Moment, wir haben unser nav Element und dann haben wir eine ungeordnete Liste, hören Listenelemente darin. Nun, was wir tun werden, ist, wie ich bereits erwähnt, fügen Sie eine Schaltfläche, die unmittelbar nach unserem nav Element kommen wird. Es wird eine Spanne darin haben, und dann werden wir dieses div haben. Es beginnt knapp über unserem ungeordneten Listenelement und endet knapp darunter, um unsere Liste zu umschließen, was heißt, es ist eine Wrapping-Navigation um MenuContent und das sind die Änderungen am HTML, die wir vornehmen werden. Was wir tun werden, ist, dass wir beginnen, indem wir unseren Button und seine Span-Element zu unserem Code hinzufügen. Wenn Sie zusammen mit mir an Ihrem Projekt arbeiten, wäre dies eine tolle Zeit, um das zu öffnen und auch zu codieren. Wir werden dies in kleinen Stückchen tun, während wir gehen, nur um die Änderungen kleiner und überschaubarer zu machen. Hier bin ich in meinem Code und hier ist, wo wir unsere Navigation haben. Also hier ist unser nav-Element, ungeordnete Liste, oder wenn es geschlossen wird, und dann werde ich Elemente darin auflisten. Das erste, was wir tun werden, wie ich schon sagte, ist, dass wir einen Knopf hinzufügen werden. Sounds können Button hier hinzufügen und innerhalb dieser Schaltfläche werden wir eine Spanne haben, die leer sein wird. Dass sich unsere besten Bemühungen ändern, was kommt als nächstes? Jetzt müssen wir einige Klassen und einige andere Attribute zu unserer Schaltfläche hinzufügen, damit es etwas Interessantes machen oder es so einrichten kann, dass es etwas Interessantes tun kann. Möglicherweise stellen Sie fest, dass wir hier keine Rolle oder Arie Attribute haben. Ich denke, ich werde später irgendwo in unserem Code ein Rollenattribut einfügen , aber die Sache ist, dass ich hier viele Zugangsdaten oder Attribute für unser Mackup vermisse . Das liegt nicht daran, dass mein Code unzugänglich ist, ich möchte ihn nur so sauber und minimal wie möglich halten, um zu lehren, wie Bootstrap funktioniert. Wenn Sie es gewohnt sind, mit solchen Barrierefreiheitsattributen zu arbeiten, denken Sie bitte nicht, dass ich befürworte, sie nicht zu verwenden, und es ist sicherlich nicht der Fall. Aber zurück zu unserem Code haben wir Knopf hier raus, Es dauert einige Klassen nav Bar Toggle, weil seine Aufgabe wird immer unsere Navigationsleiste offen und geschlossen umschalten , und navbar-toggler rechts. Was eine Klasse zu sagen ist, sollte es auf der rechten Seite der Navigation sein. Es ist ein Knopf. Es hat dieses Daten-Toggle-Attribut namens Collapse und Datenziel-Hash oder Pound NavBarNavDropdown. Diese beiden sind die Dinge, die das JavaScript sagen , das wir für Bootstrap enthalten. Ah, dieser Knopf hat eine besondere Rolle zu spielen und es wird das Ding sein, das unser Menü erweitert und die Sache, die es erweitern und zusammenbrechen will, wird es eine ID haben, das ist ein CSS-Selektor hier von Hash oder Pound navbar Dropdown. Die andere Änderung, die wir hier vornehmen möchten, ist das Hinzufügen von Navbar-Toggle-Icon zu dieser Spanne. Wir mussten nichts selbst in die Spanne legen, wenn wir ihm diese Klasse geben, wird das Bootstrap CSS ein kleines Symbol für uns ausfüllen. Lassen Sie uns anfangen, das jetzt hinzuzufügen. Hier haben wir, ich kann nicht wieder codieren und navbar-toggle Symbol. Wenn wir das speichern und dann in unserem Browser einen Blick darauf werfen, habe ich gerade einen Neuladen gemacht und wir können einen Unterschied sehen. Wenn ich es zerquetsche, können wir sehen, dass wir unseren Knopf hier haben, dass unser Menü noch nicht versteckt wird, nur weil wir die Hälfte der Änderungen vorgenommen haben, die wir vornehmen müssen. Wenn ich gehe und darauf klicke, passiert nichts. Lassen Sie uns zurückgehen und sehen, welche anderen Änderungen wir an diesem Code vornehmen müssen, um unser Menü zu erweitern und zu verbergen. Das nächste, was wir tun müssen. Nun, wir müssen unsere ungeordnete Liste in ein div einpacken. Ich werde das tun, bevor ich etwas anderes mache. Hier ist unsere ungeordnete Liste, schließt div und öffnet dann das div dort. Sie können hören, wie ich plötzlich die Mathematik mache, wie viele Zeilen eingerückt werden müssen. Das sind zu viele [unhörbar]. Sie haben dieses div, das unser ungeordnetes Listenelement umschließt. Jetzt werden wir einige Klassen in unser div setzen müssen. Ich muss ihm einen Ausweis geben. Jetzt ist diese NavBarNavDropDown-ID gegen die Sache, über die wir unseren Button erzählt haben. diese Weise identifizieren wir das Element, das erweitert und reduziert werden muss. Die Klasse ist, wir geben es kollabieren und navbar kollabieren. Collapse und die ID sollte NavBarNavDropdown sein und sagen jetzt sollten Sie etwas interessanter sehen. Ich werde meinen Browser aktualisieren und schauen unsere navbar verschwunden ist, weil wir unseren Browser ein wenig von der Mine zusammengezogen haben. Wenn ich den Browser wieder herausziehe, können wir unser Menü sehen, unser Navi erscheint und verschwindet und unsere Schaltfläche erscheint und verschwindet und wenn wir gehen und auf unsere Schaltfläche klicken und unsere Navigation erweitert sich und sie können es wieder zusammenbrechen. So können wir eine reaktionsfähigere Navigation in Bootstrap mit einer Schaltfläche implementieren , um zu erweitern und zusammenzuziehen oder unsere Navigation ein- und auszublenden. 8. Wie du ein Dropdown-Menü der a hinzufügst.: Hallo wieder und willkommen zurück zu unserem PSD zu Bootstrap 4 Klasse. In dieser Lektion werden wir lernen, wie Sie ein Dropdown-Menü für Navigation implementieren. Nur um eine schnelle Aktualisierung zu machen, ein Dropdown-Menü für eine Navigation oder für ein Website-Menü ist, wo wir ein normales Menü wie dieses haben und dann verwende ich es klickt in einen der Menüpunkte. Wir haben ein weiteres kleines Untermenü, das aus dem unteren Teil dieses Menüpunkts herausspringt , auf den wir geklickt haben. Hier ist die Sache, die am wichtigsten ist, daran zu erinnern, dass diese Dropdown-Menüs, sie nur ein weiteres li oder Listenelement in unserer normalen Navigation. Hier ist unsere vereinfachte Ansicht, wie unsere Navigation aussieht, ausgedrückt als HTML-Elemente. Ich weiß, wir haben das in ein div eingewickelt und du hast einen Knopf oben gesetzt. Aber das ist die grundlegende Struktur der Navigation in Bootstrap. Was wir tun können, wenn wir ein Dropdown-Menü aus einer unserer Navigationsoptionen oder einer unserer Menüoptionen wollen , ist ein neues Listenelement mit Klasse gleich Dropdown hinzuzufügen. Hier ist die Sache, wenn wir uns das Mockup ansehen, das ich persönlich benutze, um das Projekt zu implementieren, das ich für diese bestimmte Klasse mache, können wir sehen, dass ich ein Dropdown-Menü auf der rechten Seite hier habe und es fällt aus dieses kleine Benutzersymbol, aber es gehört zu dieser anderen Gruppe von Optionen und was wir hier haben, sind zwei separate Teile der Navigation. Wir haben Preise darüber, ob eine Warteschlange Bloggen Kontakt und dann haben wir diese andere Gruppe Upgrade und dann eine Glocke für Warnungen und ein wenig Hilfe Symbol und dann dieses Benutzermenü. Dies sind zwei Teile der separaten Navigation und wenn wir Teile der separaten Navigation in Bootstrap wollen, werden wir zwei separate ungeordnete Listen haben. Wir machen diese zweite ungeordnete Liste so ziemlich wie wir die erste ungeordnete Liste erstellt haben , um unser zweites Stück Navigation zu implementieren. Wenn Sie auch allein codieren, wäre jetzt eine gute Zeit, um eine zweite Phase der Navigation hinzuzufügen , wenn Sie an dem gleichen Modell arbeiten, das IM. Noch einmal, wenn Ihr Projekt keine zweite Navigationsphase benötigt, würde ich sowieso einfach gehen und bearbeiten, sagen Sie einfach, dass Sie eine Übung daran haben und sehen, wie es funktioniert und wie es ist. Ich werde dies ziemlich genau auf die gleiche Weise implementieren, wie ich die erste implementiert habe. Ich habe gerade ein implementiertes zweites Menü so schnell wie möglich. Ich habe das beschleunigt, damit du nicht zu viel Zeit damit verbringen musst, mir zuzusehen, wie ich Dinge eintippe. Was Sie hier wissen müssen, ist, dass es im Grunde das gleiche wie die erste Navigation ist, die wir implementiert haben, hier ist die erste hier oben, wo wir ul, navbar-nav, li Klasse gleich nav-item, li Klasse gleich nav-link und dann ein paar Sachen von innen nach außen ein Element. Der einzige wirkliche Unterschied ist bisher , dass, obwohl einer von ihnen genau dem gleichen Muster folgt, es ein Upgrade darin hat. Die nächsten drei haben keinen Text in ihnen, sie haben ein i-Element mit Klassenmaterialsymbolen und dann den Text für das Symbol, das wir zwischen den i-Tags wollen. Nun, so funktioniert die Google-Materialsymbole Schriftart. Dies ist nur für mich, eine wirklich bequeme Möglichkeit Symbole einfach in die Anwendung zu bekommen. Aber die eine, die wir wirklich interessiert sind, ist unten unten hier, was nicht Benachrichtigungen, es ist Person. Wenn wir tatsächlich einen Blick auf dies in einem Browser, bevor wir etwas anderes tun, nur um zu wissen, wo an. Das ist unser Nav, wie es war und hier ist es jetzt, hier ist unsere kleine Person, unsere Hilfe, unsere Benachrichtigungen, Upgrade. Nun, da Sie sehen können, dass es gegen die andere Navigation gequetscht wird, sieht nicht sehr getrennt aus und wir wollen es trennen, um anzuzeigen, dass es einen anderen Zweck hat, weil dies eine neue Navigation. Hier geht es um den Benutzer, das sind Dinge, die sie tun, die speziell mit ihnen oder Aktionen, die sie eingeben können, verwandt sind. Auf der linken Seite haben wir Sachen blau. Auf der linken Seite hier haben wir Sachen, die auf die Website Preise und Über bezieht, FAQ und Blog, Kontakt, Dinge wie diese und wir wollen eine Trennung zwischen denen. Was wir hier tun können, ist, dass wir eine andere Klasse gegen unsere ul, uto, ml-auto setzen werden, was auf der Erde bedeutet das? Dies ist ein Teil einer Kurzschrift, die Bootstrap angenommen hat, um Dinge auf dem Bildschirm zu bewegen. Wofür das wirklich steht, ist Marge left auto, also ml-auto. Das bedeutet, dass Sie einfach den verfügbaren Platz, den wir haben, auf die linke Seite dieses Navigationselements mischen auf die linke Seite und dann werde ich es den ganzen Weg nach rechts vom Bildschirm schieben. Wenn wir das speichern und wir gehen und auf unseren Browser schauen, neu laden, da gehen wir. Aber was wir jetzt tun müssen, ist eigentlich hängen wie ein Untermenü unseres kleinen User-Icons. Um dies zu tun, werden wir eine Klasse zwei i, unten meisten li oder unten die meisten Listenelementklasse gleich Drop-down-Liste hinzufügen . Ich werde das als nächstes tun, hier fügen wir unsere kleine li-Klasse gleich Drop-down hinzu, dann gehen wir zurück zu unserer Präsentation. Dann in l letzten Dropdown, oder unser letzter Listeneintrag, wo wir gehen, um nach unten fallen. Das ist die Struktur, die wir haben wollen. Wir werden Kumpel li oder Kumpel Li eingeschlossen haben, was unser Dropdown-Menü ist, dass wir gerade das Drop-Down-Menü plus zwei gegeben haben. Dann haben wir wie üblich, wie wir alle anderen und ein Element haben, das ist der anklickbare Teil davon. Wir haben gerade ein Benutzersymbol hinzugefügt. Dann ist unser Untermenü tatsächlich in einem div eingeschlossen. Es wird ein div sein, das eine Reihe von Elementen umschließt, und somit werden Elemente unser Dropdown-Menü umfassen. Was ich tun werde, ist, dass ich div und ein Element dort drinnen löschen werde, bevor ich etwas anderes mache, <div> plus </div>, wir werden sechs Optionen haben. Jetzt werden wir einige zusätzliche Klassen zu jedem dieser Dinge hinzufügen. Wir haben unserem Listeneintrag bereits eine Dropdown-Klasse gegeben. Unser i Element, neben der üblichen nav Link-Klasse, die wir zu allen unseren Navigationslinks geben. Es benötigt auch ein Data Toggle-Attribut, das auf Dropdown gesetzt ist. Wieder einmal ist dies etwas für unser Bootstrap-JavaScript, um sich zu nähern und zu wissen, dass dies eine spezielle Funktion haben wird. Als nächstes wollen wir div und unser Dropdown-Menü schließen, um das Klassen-Dropdown-Menü zu haben, und dann wird jedes unserer Elemente in unserem Dropdown-Menü div eine Klasse von Dropdown-Element haben. Lass uns die sofort reinlegen. Eigentlich ist das erste, was ich tun werde, etwas Inhalt in diese Dinge zu stecken. Aber es gibt einige andere Dinge, die wir hier tun müssen, und es ist ein Attribut namens data-toggle equal dropdown. Dann ist unser div Klasse Dropdown-Menü. Es gibt noch etwas mehr, das wir tun müssen, um das Dropdown-Menü, aber ich möchte nur einen Blick auf es jetzt im Browser werfen. Nur weil ich finde, dass sehr nützlich zu sehen, helfen, zu sehen, wie die Dinge funktionieren. Weil ich auf diese Weise weiß, welche Klasse welche Arbeit macht. Sie können sehen, dass unser Drop-Down-Menü im Moment ziemlich unglücklich aussieht. Ich bin Liste, weil es von der Seite verschwindet, das liegt daran, dass sie standardmäßig an der linken Seite des Dings ausgerichtet sind , von dem sie heruntergelassen wurden, rechts neben unserem kleinen Benutzersymbol ausgerichtet sind. Weil es ganz rechts auf der Seite ist und es eine Klasse gibt, die wir verwenden könnten , um das zu tun, Dropdown-Menü. Werfen wir einen Blick auf das Reload, hier ist unser kleines Dropdown-Menü. Es hat ein paar Dinge, die eindeutig falsch damit sind. Nicht zuletzt, dass aus, Dropdown-Menüoptionen als nur über das Dropdown-Menü verteilt und nicht alle in einer schönen vertikalen Zeile. Das liegt daran, dass wir diese richtigen Links erstellen und ihnen eine Klasse geben müssen , die Bootstrap mitteilt, dass sie Dropdown-Menüelemente hinzufügen. Natürlich müssen wir eine Klasse hinzufügen, ich setze diese einfach super schnell ein. Wenn wir uns das jetzt im Browser ansehen, können wir sehen, dass sie alle vertikal angeordnet sind und schön in einer Dropdown-Liste gestylt sind. Es gibt noch ein paar Dinge, die wir tun müssen. Wenn wir einen Blick auf unser Design werfen, können wir sagen, dass unser Benutzername fett ist, unser Planname kursiv ist und wir haben ein paar Teiler hier, nur die Optionen im Dropdown-Menü aufteilen, so dass wir diese hinzufügen zu unserem Code jetzt. Bootstrap gibt uns eine Klasse ungleich Null, wir können es verwenden, die div Klasse Dropdown-Teiler. Wir müssen nur ein leeres div dafür haben. Ich kann das da drin stecken, das wird nur ein kleines Element mit einer Grenze auf der Unterseite machen. Wir speichern das, schauen Sie es im Browser an. Sie können sehen, dass wir jetzt sehr schön Trennwände hinzugefügt haben. Das letzte, was wir tun müssen, ist unseren Benutzernamen und Plannamen zu stylen. Dafür können wir einfach normale alte HTML-Elemente verwenden. Wir werden stark und Em haben. einmal werden wir unseren Browser überprüfen, neu laden, da gehen wir. Hier ist unser Benutzername, unser Planname, und dann haben wir stattdessen viele Optionen, wie wir es erwarten würden. Natürlich ist unsere Navigation ansprechbar. Wenn wir ein Blatt davon punkten, bis wir zu einem kleinen Hamburger-Symbol kommen und das öffnen, können Sie sehen, dass wir in unser kleines Benutzersymbol gelangen können und unser Dropdown funktioniert immer noch so, wie wir es erwarten würden, und natürlich, wenn wir das öffnen wieder, können wir sehen, dass es seinen Zustand beibehält und in der Dropdown-Position bleibt. So können wir mithilfe der Bootstrap-Navigation ein Responsive-Dropdown-Menü implementieren. 9. Erstelle ein Layout mit Containern, Zeilen und Spalten: Hey, alle, willkommen zurück. In dieser Lektion werden wir überprüfen, wie wir Bootstraps Grid verwenden können , um unser Webseitenlayout zu erstellen. Genauso super schnelle Aktualisierung. Ich habe über das Gitter gesprochen. Es ist wirklich in Container oder in wie einen Gesamtcontainer aufgeteilt. Dann können wir in diesem Container Zeilen haben und dann in diesen Zeilen können wir Spalten haben. Wir setzen unsere Website-Inhalte in diese Spalten, so dass Bootstrap sie für uns neu anordnen kann , abhängig von der Größe unseres Browsers oder des Geräts, auf dem wir uns die Webseite ansehen. Heute werden wir überprüfen, wie wir diese Spalten verwenden können, um ein Gesamtlayout für unsere Webseite zu erstellen. Dies ist der Hauptinhalt unserer Webseite. Ich vermisse das [unhörbare] bei dieses Screenshots nur aus Gründen der Klarheit. Aber wir haben diese zwei Spalten von Sachen auf unserer Seite wirklich. Wir haben die auf der linken Seite mit einer Markenidentität und einem Text darunter. Dann auf der rechten Seite haben wir unsere Hauptdaten. Ich nehme an, wir haben unsere Überschrift, wir haben eine Eingabe für die Suche mit einer Schaltfläche zum Hinzufügen eines neuen Datenelements. Dies zeigt übrigens Informationen über Website-Formulare und Informationen über diese Formulare. Jedes Datenelement ist ein spezifisches und individuelles Formular, das auf einer Website angezeigt werden kann. Informationen zu diesen Formularen sind in einer kleinen Tabelle dargestellt. Wir werden untersuchen, wie wir Bootstrap's Grid verwenden können , um dieses Gesamtlayout zu implementieren. Auf einem hohen Niveau, was das aussehen wird, ist eine große Schwad von Divs. Aber was wir haben, ist ein äußeres div hier, das unser Container ist und dann div dort drin ist, was eine Rolle sein wird. Dann haben wir diese zwei anderen Divs. Jede davon wird eine Spalte sein, eine für die linke Seite, eine für die rechte. Was ich denke, ich werde das jetzt in den Code stecken. Dann können wir gehen und die entsprechenden Bootstrap-Stile auf diese Geschenke setzen die entsprechenden Bootstrap-Stile auf , damit sie wie Container, Zeilen und Spalten funktionieren. Wenn Sie mitschneiden, um Ihr eigenes Projekt zu erstellen, unabhängig davon, ob Sie die in dieser Klasse angewendeten Mock ups oder eines Ihrer eigenen verwenden. Jetzt ist ein guter Zeitpunkt, um wieder daran zu arbeiten. Bitte vergessen Sie nicht, Ihre Projekte im Klassenprojektbereich zu posten , damit wir sehen können, wie Sie gehen . Sie können Feedback zu Ihrer Arbeit erhalten. Oder wenn Sie bereits 20 Probleme haben, das ist eine großartige Gelegenheit, sie zu bekommen. Hier sind wir in und out Code und Sie können sehen, dass wir unsere Navigation hier implementiert haben. Was wir tun werden, ist, dass wir auf den Grund der Navigation gehen und sie schließen. Wie Zeile dort und hier ist, wo wir alle unsere divs machen. Wir haben ein div für unseren Container und ein anderes für unsere Reihe. Dann drinnen werden wir Spalte eins haben, Spalte Nummer zwei und wir können digitalisieren. Dies ist das grundlegende Layout des Hauptinhalts unserer Webseite. Ich werde nur einen kleinen Kommentar Hauptinhalt setzen. Dann ein kleiner am Ende dort, nur um zu sagen, dass dies ist, wo das endet. Allerdings das Betrachten im Browser, denn wirklich ist es noch nichts zu sehen. Das ist, was wir in unserem Code unten haben. Jetzt werden wir beginnen, einige Klassen zu setzen, wir werden einen Container, Zeile, col-md-4 und dann col-md-8 haben . Ich werde das jetzt wie in die Karte legen. Klasse ist gleich Container. Ich werde das nur ein paar Mal kopieren und das in Zeileändern, Zeile dann col-md-4 und dann col-md-8. Was wir hier haben, ist unser Gesamtcontainer, der unsere Zeile und Zeile enthält, zwei Spalten darin. Wir haben eine Spalte, die vier Leerzeichen beansprucht und eine weitere Spalte, die acht braucht. Denken Sie daran, aus der vorherigen Lektion, wo ich darüber gesprochen habe, wie wir 12 wirklich wie Spaltenräume in Bootstrap haben . Dies ist eine Art zu sagen, naja, die linke Spalte wird ein Drittel der Seite aufnehmen und unsere rechte Spalte wird zwei Drittel nehmen. In der nächsten Lektion werde ich die Spalten genauer betrachten, damit wir mehr darüber sprechen können, wie diese Spaltenbreiten funktionieren, und mehr darüber, wie diese Bezeichnungen wie md, die für Medium wie in einem mittelgroßen Bildschirm steht, sprechen können. Wir werden darüber reden, wie die funktionieren. Aber für diese Lektion, folgen Sie einfach und Sie werden in der Lage sein, ein Beispiel zu sehen, wie sie in der Praxis funktionieren. Jetzt arbeiten wir an der linken Spalte. Was wir tun werden, linke Spalte, sehen Sie, ich habe es hier unten unten hervorgehoben. Was wir haben es raus, diese 10 Spalte, die md-4 genannt wird. Wir füllen das einfach aus, wie wir ein anderes div haben werden, das eine andere Zeile und dann ein anderes div sein wird, das eine Spalte sein wird. Dann haben wir ein Bild da drin. Das ist eine passive Identität, aber ein Branding und ihr Logo. Dann wird in unserem nächsten div eine andere Zeile haben, die eine andere Spalte haben wird. Dann steht dies usw. für den Text. Dies ist durch das Gesetz so weiter wichtig. Was wir tun werden, ist, dass wir alle diese divs col-md-4 nach innen setzen, die aus der linken Spalte ist. Hier ist col-md-4. Ich werde auch einen kleinen Kommentar dazu setzen. Spalte. Sieht so aus und sagen Sie das. Das ist die rechte Spalte. Wenn Sie nur einige Abstände und einige Kommentare hier einfügen, wird dies ein wenig überfüllt mit all diesen Divs und Spalten und was haben wir dort herumschweben. Nur damit wir sie individuell und klar sehen können, also was wir in unserem Urlaub vorwärts haben werden, wir ein div haben, das eine Reihe darstellen wird. Wirklich haben wir zwei Reihen, also werden wir zwei dieser äußeren Divs haben. Dann haben wir in jedem von ihnen eine Spalte, die ein anderes div sein wird. Dann haben wir in diesem Bild unser Bild. Hier drinnen werden wir einen Text haben. Jetzt habe ich mein Bild vorbereitet. Wenn Sie an dem von mir angegebenen Beispiel arbeiten, kommt der Skelettcode aus meinem Ordner, in dem auch ein Bild enthalten ist, im Bildverzeichnis. Da drin haben wir ein Bild und es nennt sich Entitätsdoping. Ich werde ein Attribut auf das gleich 100 Prozent setzen. Das ist eine Zwischenlücke, die ich hier mache. Denn wirklich, was wir tun wollen, ist dies mit einigen individuellen benutzerdefinierten CSS für unsere Website zu stylen . Aber ich mache im Moment kein CSS. Ich lasse das alles bis zum Ende, wenn wir das Aussehen unserer Webseite anpassen, so dass es nicht alles wie Bootstrap-Stile fallen. Aber im Moment möchte ich nur bei 100 Prozent Bootstrap bleiben, nur damit wir sehen können , wie es funktioniert und wir das Wasser nicht wirklich mit ihren eigenen Sternen schlammen. In der letzten Video-Lektion dieser Klasse, das ist, wo wir uns das CSS ansehen, das wir auf unserer Website anwenden können , um es weniger bootstrappy und mehr wie eigen aussehen zu lassen? Für den Moment, um zu verhindern, dass das Bild den gesamten Bildschirm übernimmt, werde ich nur dieses Breitenattribut darauf setzen. Ich bewege mich zum nächsten Bit Inhalt. Ich weiß, dass das hier eine Reihe ist, und das wird eine Kolumne sein. Das wird eine Reihe sein. Dies wird auch eine Spalte sein. Ich weiß, dass wir da drin etwas Inhalt haben müssen. H2, das ist wichtig. Ich werde das nur schnell ausfüllen. Aber das ist im Grunde der Inhalt, den wir in der linken Spalte unserer Seite haben müssen . Dies ist offensichtlich, bevor wir angefangen haben, es mit Bootstrap-Stilen zu stylen. Werfen wir einen Blick auf unseren Webbrowser, um zu sehen, wie er aussieht. Da ist es, wir haben unsere Marke und dann unseren Text. Schon sieht es so aus, wie wir es gerne aussehen würden. Wir werden nur einige Zeilen und Spalten zu unserem DBS hinzufügen , nur die Einschränkung ein wenig, und es wird später auch bei unserem Styling helfen. Wir können sehen, dass alles auf eine Seite beschränkt wird, die unsere linke Spalte ist. Aber welche Stile werden wir ihm geben? Wir werden das zweite mit div als Zeile beginnen. Dann das div, das das Bild als kaltes Medium 10 hält. Jetzt vielleicht etwas kontra intuitiv, um die zehn in einem Col MD 4 aufzurufen. 10 scheint größer zu sein als die vier, also fragt es, wie man das passt. Wieder einmal werden wir uns das in unserer nächsten Lektion genauer ansehen. Wir bewegen uns entlang und definieren unsere nächste Zeile, fügen noch einen weiteren Col MD 10. Dies ist ziemlich einfach in unserer Code-Klasse gleich Zeile zu tun. Klasse ist gleich. Wenn ich mich erinnere, wie man Code eingibt, tatsächlich MD 10. Natürlich wird dies die gleiche Klasse gleich K. Das ist 100 Prozent des Stylings, das wir für die linke Spalte anwenden müssen. Wenn wir das in unserem Browser aktualisieren, können wir sehen, dass es buchstäblich gequetscht wird. Wieder einmal werden wir mehr darüber sprechen, wie dies in der nächsten Lektion ohne Spalten und Dimensionierung funktioniert . Da wir dies als Spalte für einen mittelgroßen Bildschirm umgesetzt haben, sobald wir das zerquetschen. B auf der Größe eines mittelgroßen Bildschirms können wir sehen, dass sie plötzlich ausdehnen, um 100 Prozent der Breite zu nehmen, was wir erwarten. Wenn es nicht mehr genug Platz gibt, um sie als einzelne Spalten anzuzeigen, sie alle übereinander gestapelt, um sicherzustellen, dass sie lesbar sind, die leicht lesbar sind und trotzdem schön genug angelegt sind, um bequem auf einem kleinen Gerät. Das ist unsere linke Spalte, die sich vorerst um sie gekümmert hat. Aber wir müssen auch die rechte Hälfte der Seite oder die rechte zwei Drittel der Seite machen , sorry, auch. Wieder einmal haben wir ein ziemlich einfaches Layout. Div und ein H1 drin, was falsch sagt. Ich werde dieses Mal nicht die Mühe machen, diese Divs und das Styling separat im Code anzuwenden , weil es entweder nichts super schockierend gibt. Dieses äußere div ist unser col MD 8, das wir zu Beginn dieser Lektion erstellt haben. Da drin haben wir eine Reihe, dann eine Col MD 4, die unsere H1-Formulare enthalten wird. Sie können sehen, dass es viele andere Inhalte auf der rechten Seite oder in der rechten Spalte. Aber wir werden das in nachfolgenden Lektionen implementieren, wenn wir uns mit Formulareingaben und Steuerelementen beschäftigen und dann eine Datentabelle mit Bootstrap ebenfalls implementieren. Lassen Sie uns diese erste Implementierung unserer rechten Spalte in unseren Code einfügen. Es gibt eine sehr einsame, leere aussehende rechte Spalte. Wir werden eine div Klasse gleich Raum haben, dann haben wir ein div gleich col MD 4, H1 Formen, und wir werden unser div beenden. Ich denke, wir sind fertig, darunter in unserem Browser und Überraschung, Überraschung , gibt es unsere Formulare. Nun, was wir hier getan haben, sind zwei Spalten implementiert. Als wenn wir die Seite ein wenig zerquetschen, können wir sehen, dass sie übereinander stapeln, was das reaktionsschnelle Styling ist, das wir wollen. Wir können gehen und klicken Sie auf unser Navigationsmenü. Wir können sehen, dass es sich öffnet und erweitert, und schiebt dann den gesamten Hauptinhalt nach unten auf dem Bildschirm. Aber die Sache ist, dass unsere Navigation und unser Hauptinhalt zusammen überleben. Anzeige schön als große Seite [unhörbar] Format. In unserer nächsten Lektion werden wir uns die Spalten viel genauer ansehen. Wir werden sehen, wie Spalten unterschiedliche Breiten definiert sind und wie Bootstrap mit Spalten für verschiedene Bildschirmgrößen umgeht. 10. Bootstrap im Detail.: Willkommen zurück. In dieser Lektion werden wir uns Bootstrap-Spalten etwas genauer ansehen . Es gibt ein paar Dinge, die wir bis jetzt nicht wirklich sehr sorgfältig behandelt haben, was ist, wie wir große Spalten wie col-10 in kleineren Spalten wie col-four und die Definition von großen, mittleren und kleinen Bildschirmen haben können kleineren Spalten wie col-four und die Definition von großen, . Das ist mit wie lg und md und sm für große, mittlere und kleine. Wir haben diese wirklich nicht angeschaut oder erklärt. Das ist der Zeitpunkt, an dem wir diese Dinge klären. Was ich jetzt durchlaufen werde, ist, wie Spalten in Bootstrap definiert sind, wie col dash number, sagen wir col-one zum Beispiel. Wenn Sie sich im Bootstrap-CSS ansehen, würden Sie sehen, dass col-one als 8.33333 Prozent definiert ist. Wenn wir dann gehen und uns die Spalte 2 ansehen, sind es 16,66667 Prozent doppelt so hoch wie Col-One, und wenn wir dann zu Col-3 gehen, sehen wir, dass es 25 Prozent sind. Der Punkt hier ist nicht wirklich für uns, sich an diese Prozentsätze zu erinnern, sondern zu bemerken, dass es sich um Prozentsätze handelt und sie um acht und ein Drittel für jede Zahl zunehmen. Das gibt uns insgesamt 12 Säulen, die sich um acht und ein Drittel erhöhen, gleich groß, bis zu 100 Prozent. Das Wichtigste hier, wie ich sagte, ist, dass es sich um Prozentsätze handelt, sie sind keine harten Breiten. Wenn wir etwas als kaltes Eins definieren, wissen wir, dass es acht und ein Drittel der Breite von allem sein wird, was es enthält. Werfen wir einen Blick auf ein kleines Beispiel. Nehmen wir an, wir haben ein div und wir haben ihm die Klasse col-four gegeben. Wenn wir uns Col-4 ansehen, wissen wir, dass es 33 und ein Drittel von allem sein wird , was es enthält. Stellen wir uns vor, dass das bei 100 Pixeln herauskommt. Obwohl diese Stile als Prozentsätze definiert sind , wenn sie innerhalb des Browsers gerendert werden, werden sie eine tatsächliche Pixelbreite abhängig von der Größe der Sache, die sie in und die Größe der Browserseite. Das wird sich jedes Mal ändern, wenn wir die Größe der Browserseite ändern. Wenn Sie es sehr breit machen, wird es vielleicht 200 Pixel sein. Wenn Sie es sehr schmal machen, wird es vielleicht wie 50 Pixel sein. Der Punkt ist, dass wir wissen, dass es ein Col-4 ist, es wird 33 und ein Drittel von dem, was auch immer es drinnen sitzt. Nun, wenn wir gehen und eine weitere Spalte in unser col-four div legen, und wir geben dem eine Klasse von col-nine. Nun, wenn wir uns Col-neun ansehen und sehen, dass es 75 Prozent sind. Das bedeutet, dass Col-neun das sein wird, was 75 Prozent von Col-4 besetzen wird. Wenn col-four 100 Pixel ist, bedeutet das, dass col-nine 75 Pixel breit ist. diesem Grund ist es gültig, aber vielleicht ein wenig verwirrend, Spalten mit großen Zahlen in Spalten mit kleinen Zahlen zu sehen . Was wir sagen, ist, dass es einen bestimmten Prozentsatz der Sache besetzen wird, die es enthält. Das nächste, was wir berücksichtigen müssen, sind Bootstrap-Bildschirmgrößen. Jetzt sehen Sie, wie Sie über die rechte obere Seite des Bildschirms laufen, haben wir Col-3, Col sm drei, col-md-drei, col-lg drei und col-xl- drei. Diese sm, md, lg und xl stehen für klein, mittel, groß und extra groß. Jeder Bildschirm, der weniger als 576 Pixel breit ist, wird als extra kleiner Bildschirm behandelt. Das bedeutet, dass ich zum Beispiel drei als praktisches Beispiel drei verwendet habe, weil es eine schöne runde Zahl hat, 25 Prozent. Wir wissen, dass col-three immer 25 Prozent Breite auf einem extra kleinen Bildschirm haben wird. Aber für kleine Bildschirme, für mittlere Bildschirme, für große Bildschirme und für extra große Bildschirme, das wird nicht als Spalte Null behandelt. Das wird als 100 Prozent breite Spalten oder Spalten mit einer Breite von 100 Prozent behandelt. Wenn wir auf die nächsten Bildschirme schauen, jeder Bildschirm, der über 576 Pixel ist, dann col-three, die extra klein ist, wird immer noch als Spalte behandelt werden, col sm drei, klein. Wird immer noch als Spalte behandelt, erhält immer noch eine Breite von 25 Prozent. Allerdings werden mittlere, große und extra große Spalten als Spalten mit einer Breite von 100 Prozent behandelt , was bedeutet, dass sie, wenn sie als Spalten angezeigt werden, übereinander gestapelt werden. Aber wenn wir eine andere Größe nach oben gehen, können wir sagen, dass unsere Bildschirmgröße jetzt 768 Pixel beträgt. Alles, was 768 Pixel oder breiter ist, würde die extra kleine Spalte als 25 Prozent breit behandelt werden. Die kleine Säule wird 25 Prozent breit behandelt und die mittlere Säule wird 25 Prozent breit behandelt, aber große und extra große Säulen werden nicht sein. Dann können wir so weitermachen. Wir haben einen großen Bildschirm definiert als 992 Pixel und dann einen extra großen Bildschirm definiert als 1.200 Pixel. einmal ist es nicht wirklich der Sinn, sich an diese hart definierten Werte in Bootstrap's CSS zu erinnern . Der Punkt ist, dass wir diese handlichen Mnemonics, sm, md, lg und xl haben , die wir verwenden können, um zu sagen; gut auf großen Bildschirmen möchte ich, dass diese Spalten erscheinen, aber auf irgendetwas Kleines, ich möchte nur, dass sie auf jedem gestapelt werden Sonstiges. Dann unten für extra kleine Bildschirme, können wir sagen, na ja, ich werde diese Col- drei benutzen, weil ich will, dass es immer eine Spalte ist, egal was passiert. Ich weiß, das ist wie eine ziemlich komplizierte Folie, um viele Zahlen zu betrachten, und es scheint für Sie nicht super intuitiv zu sein , aber es ist hier, um wirklich die Art und Weise verschiedene Bildschirmgrößen und verschiedene Spaltendefinitionen funktionieren . In der nächsten Lektion werden wir uns ansehen, wie wir Spalten für verschiedene Bildschirmgrößen verwenden können, um das Aussehen der Dinge zu ändern , wenn wir unsere Inhalte in verschiedenen Browsern anzeigen. Wir werden als nächstes eine praktische Demonstration haben, wie das funktioniert. 11. Füge eine Datentafel mit kleinen Spalten hinzu.: Hallo und willkommen zurück in der heutigen Video-Lektion, wir werden sehen, wie wir Bootstrap 4 verwenden können, um eine Datentabelle in unserer PSD zu implementieren , die in unserem ersten Design dieser Webseite entwickelt wurde. Was wir tun werden, ist die Implementierung dieser kleinen Tabelle , die sich auf der rechten Seite der Seite befindet. Es ist mehr in der Mitte nach rechts. Es hat insgesamt fünf Spalten, aber vier Spalten mit Daten, die Überschriften und Namen, Impressionen, Antworten und Konvertierung, und dann in der fünften Spalte haben wir einige kleine Symbole, die Dinge tun, um Datenzeilen hinzuzufügen. In der heutigen Lektion führen wir keine neuen Bootstrap-Konzepte oder -Ideen ein, wir werden nur die Dinge, die wir bereits behandelt haben, in die Praxis umsetzen. Das erste, was wir tun möchten, ist einige Header für unsere kleine Datentabelle zu implementieren. Wirklich, das wird nur ein äußeres div sein, das eine Zeile sein wird, die vier div s für unsere Header enthält. Ich werde diese jetzt in unseren Code einfügen und dann zurückkommen und unsere Stile auf sie anwenden. Hier unterstützen wir Codes, Sie können unsere anfängliche Implementierung unserer rechten Spalte hier sehen, und es hat nur diese H 1-Formulare darin. Wir werden beginnen, was in Ihrer Zeile sein wird, sobald wir mit diesem div hier und innerhalb dieses div vier weitere div s für unsere Spaltenüberschriften anwenden diesem div hier und innerhalb dieses div vier weitere div s . In jedem von ihnen werden wir nur den Namen unserer Spalten setzen. Wir haben Namen, Impressionen, Antworten und Konvertierung. Jetzt können Sie im Browser schauen und Sie können sehen unsere Spaltenüberschriften wie normale div s genau so angezeigt werden, wie wir es erwarten würden. Weg zurück zur Präsentation, können wir sehen, dass wir eine Zeilenklasse dem Additiv zuweisen, und dann hier können wir sehen, dass wir zwei Spaltenstile zum ersten div kombinieren, also ist das der Name und für den Rest von ihnen geben wir ihnen eine Rufen Sie auch an. Wir haben einen anderen Stil, der Text rechts genannt wird. Dies ist ein Bootstrap-definierter Stil, der nur ohne SMS in diesem speziellen div nach rechts ausgerichtet ist, und das ist die Standardpraxis für Datentabellen, die numerische Werte haben, wir werden sie entlang der rechten Seite der Spalte ausrichten. Aber zurück zu unserem ersten div, mit Call col md- 3 col- 2. Was bedeutet das? Nun, das bedeutet auf einem mittleren Bildschirm, dass diese Spalte drei Spalten Leerzeichen besetzen wird, aber auf einem extra kleinen Bildschirm namens Bindestrich zwei, dann wird es nur zwei Spaltenräume einnehmen. Hier kommt die Flexibilität der Bootstrap-Spaltenstile ins Spiel, da wir eine Reihe unterschiedlicher Breiten auf die eine Spalteanwenden können unterschiedlicher Breiten auf die eine Spalte und sich diese je nach Größe unseres Bildschirms ändern. Ich werde jetzt gehen und die Stile auf unsere Spaltenüberschriften anwenden, und da gehen wir von diesem Durchlauf und wenden diese schnell an. Wir können unseren Browser wieder betrachten, geben ihm eine Aktualisierung, und es gibt, wie Spalten Abstand über den Bildschirm, wie wir erwarten. Wenn wir anfangen, das auszugleichen, können Sie sehen, dass wir hier ein kleines Problem haben wo sie sich gegenseitig treffen, das ist nicht großartig. Dies ist ein weiteres von diesen Dingen, die wir beheben werden, wenn wir benutzerdefinierte Styling anwenden, aber Sie können sehen, was hier passiert ist, ist, dass der Name jetzt rechts unten unten unten hier können Sie sehen, Name ist besetzt viel dieser Raum, als es zuvor war. Es nimmt über die Breite dieser Tabelle einen gleichen Platz ein wie die anderen Spalten. Während es einmal ein bisschen größer ist, bekommt es relativ mehr Platz. Dies ist unsere Spalte drei gegen Spalte zwei Styling tritt ein. Alles, was wir tun müssen, ist einige Einträge für die Daten in unserer Tabelle zu definieren. So wird eine Datenzeile in unserer Tabelle aussehen. Wir werden ein äußeres div und dann vier div s für unsere Daten haben. Sie werden sich mit diesen Spaltenüberschriften aufstellen, und dann ein zusätzliches Div für unsere Symbole und ich werde einfach direkt durchlaufen und die Klassen ansehen, die jetzt für sie gelten. Sie können sehen, dass das erste div eine Zeile sein wird und dass die anderen div danach sind, und sie werden die gleichen wie unsere Überschriften sein, weil wir möchten , dass diese Daten unter der Überschrift ausgerichtet werden, so dass wir die gleichen Stile anwenden. Ich werde diese jetzt durchmachen, bevor wir in unsere Ikonen kommen. Wirklich, alles, was ich tun muss, ist, diesen Teil zu nehmen , eine Kopie davon zu machen, und dann einige Daten einzufügen und jede LP 1 zu sagen, und es hatte 2034 Eindrücke und 1017 Antworten, die zu 50 Prozent kommen Konversionsrate begann, die Dinge einfach auf mich selbst zu machen. Sie wollen mich hier nicht sehen und versuchen, miteiner Umwandlungsrate von 34 Prozent von 2034 Impressionen zu arbeiten einer Umwandlungsrate von 34 Prozent von . Wenn wir schauen, wie das jetzt in einem Browser aussieht, geben Sie dem einen Neuladen und wie Sie sehen können, haben wir LP 1, 2034 Impressionen, 1017 Antworten, 50 Prozent Conversion-Rate und alles ist gut aufgereiht. Es sieht so ziemlich aus, wie wir es erwarten würden, und wenn wir das noch etwas zusammendrücken, können Sie sehen, wie unser Text läuft. Es braucht Kopftexte, die ineinander laufen, aber wir können sehen, dass unsere Spalten schön noch aufstehen. Was werden wir mit Symbolen machen? Sie werden immer eine Spalte drei sein, so dass sie die ganze Zeit drei Spaltenbreiten einnehmen können. Ich werde auch Popup in den Code gehen. Es ist Zeit, unsere Symbole in unseren Code zu setzen, für wen und hier sie sind. Wir haben eine weitere Spalte zu unserer Zeile hinzugefügt, und das ist ziemlich ähnlich dem, was wir in der Navigation gemacht haben. Dann haben wir eine Reihe von H-Tags, die ein I-Tag für Materialsymbole enthalten, und wir verwenden, welches Material Icon-Name für diese Aktion geeignet ist. Wie sieht das im Browser aus? Wir haben unsere Ikonen da drin hängen am Ende unseres kleinen Tisches. Hier gibt es ein paar Dinge zu beachten. Eines davon ist, dass wir nicht erwartet haben, all das auf einmal zu zeigen. Dieser kleine Punkt ist da, um zu sagen, hey, warte, es gibt mehr, komm und schaut euch an, und wenn ihr mit der Maus über das Ding geht oder darauf klickt oder so etwas, werden die anderen Dinge erscheinen. Wirklich, wir wollen, dass sie erscheinen, wenn wir alles mit der Maus machen. Dies ist eines dieser benutzerdefinierten Styling-Dinge, die wir gegen Ende der Klasse hinzufügen werden, und die andere Sache, die zu beachten ist, ist, dass dies wie eine super künstliche Möglichkeitist eine super künstliche Möglichkeit , diese Daten anzuzeigen, weil Sie nie lehrte es bis dahin diese offenbar Live-Daten. Dies ist ein Teil einer Webseite, also würde es irgendwo von Daten von einem Server gefüllt werden, aber Art, es jetzt als HTML zu implementieren, nur weil dies eine großartige Sache für uns ist, zu üben und zu lernen. Dies ist oft die Art und Weise, wie wir diese Arbeit sowieso mit implementiert als HTML-Typ von Prototyp machen würden , und dann die Datenbits aus der Mitte des HTML greifen und das auf der Serverseite implementieren würden. Es ist wirklich gar nicht so verrückt. Lassen Sie mich noch ein paar Zeilen von Daten in unsere Tabelle , damit es ein bisschen mehr wie eine Datentabelle aussieht. Da gehen wir, Ich habe gegangen und in ein paar Sachen gepostet, die ich früher gerettet habe. Wieder, wenn wir dies in unserem Browser überprüfen, da gehen wir. Hier ist eine kleine Datentabelle ohne Symbole und aus verschiedenen Teilen von Daten. In unserer nächsten Lektion werden wir unsere kleinen Eingabesteuerungen neben Schäumen hier oben hinzufügen. Wir fügen diese Suche hinzu und fügen ein neues Formular hinzu. Steuerelemente, die in unserem Webseiten-Design sind. 12. Erstellen von Bootstrap: Hallo, schon wieder. In dieser Video-Lektion werden wir sehen, wie wir einige Eingabesteuerungen mit Bootstrap 4 definieren können. Hier ist also ein kleines Webseiten-Design und neben unserer Forms Überschrift, können Sie sehen, dass wir eine Eingabe mit einer kleinen Lupe darin haben, die für die Suche ist, und eine Schaltfläche namens Neues Formular hinzufügen, die wir vermuten würden, ist Hinzufügen eines neuen Formulars. Also werden wir sehen, wie wir diese beiden jetzt umsetzen können. Zunächst einmal ist hier unser HTML-Mockup für die Implementierung ein wenig Eingabe-Controls. Wenn Sie einen von ihnen in ein Formular einfügen, weil wirklich in einer Situation wie dieser, diese Schaltfläche Neues Formular hinzufügen wird nichts an einen Server senden. Es wird nur ein kleines Pop-up oder eine neue Seite für uns öffnen um Dinge in ein Formular zu setzen und das dann an einen Server zu senden. Es ist also nur da, um einen ähnlichen HTML-Code anzuzeigen. Aber eine solche Eingabe, die, wird eine Abfrage an den Server höchstwahrscheinlich senden, und dann wird der Server einige Ergebnisse zurücksenden. Also wollen wir das in ein Formular einfügen. Wieder implementieren wir heute nur wie ein HTML-Prototyp. Wir werden also keine Suchfunktionen implementieren, aber so möchten wir unseren HTML so organisieren , dass wir diese Suchfunktion anschließen können. Also das nächste, was ich tun werde, ist unser HTML-Mockup in unseren Quellcode zu setzen, und danach werden wir einige Stile darauf anwenden. Also hier sind wir in unserem Code und ich schaue auf unsere Forms-Überschrift, die wie das erste ist, was wir in unserer rechten Spalte sehen. All das geht in der gleichen Reihe. Also werde ich es direkt nach unserer Forms-Spalte in das Zeilendiv einfügen. Das erste, was wir haben werden, ist unsere Form. Das scheint konterintuitiv zu sein. Aber so wird es funktionieren müssen, und das ist die Art, wie Bootstrap-Stile im Moment funktionieren. Du wirst in einem Moment sehen, wovon ich rede. Sagen Sie Input, dann offensichtlich [unhörbar]. Dann nach unserem Formular haben wir ein anderes div. Dies ist, wo unsere Schaltfläche geht, Neues Formular hinzufügen. Lassen Sie mich einfach unser Mockup überprüfen. Ja, dafür habe ich Title Fall benutzt. Also lassen Sie mich das ändern. Kommen wir zurück zu unserer Präsentation und sehen, welche Art von Stilen wir auf unser Formular und unsere Eingaben anwenden können. Zunächst einmal werden wir unsere Form geben, die Form Inline-Klasse. Wenn Sie sich nicht erinnern, sind alle unsere Elemente in HTML entweder Block- oder Inline-Elemente. Inline-Elemente werden horizontal von Seite zu Seite ausgerichtet. Blockelemente werden vertikal ausgerichtet, von oben nach unten. Aber wir möchten, dass sich unser Formular wie ein Inline-Element verhält, weil wir möchten, dass es auf der gleichen Zeile wie unsere anderen Eingaben und als h1 daneben angezeigt wird. Also geben wir ihm das Form-Inline Plus, dann wird eine Form-Gruppe gefolgt von einer Spalte div haben . Mir scheint das rückwärts zu sein. Ich denke, dass unsere Spalte wie das enthaltende Element sein sollte und die Form darin sein sollte. Aber glauben Sie mir, die Stile funktionieren nicht sehr gut, wenn wir es so machen, und das ist derzeit, wie die Bootstrap-Dokumente empfehlen, mit Forms zu arbeiten. Wir haben Spalte innerhalb des Formulars und dann haben wir unser Eingabeelement. Danach haben wir unser enthaltendes div für unsere Schaltfläche, die nur eine Spalte mit der Breite drei für kleine Bildschirme sein wird. Also lasst uns gehen und diese in unser HTML einfügen und wir werden sehen, was wir bekommen. Also ist unsere Form Klasse auf Inline, und div wird Form-Gruppe sein und dann haben wir eine Klasse von drei Spalten auf einem kleinen Bildschirm. Dann haben wir das Gleiche für diesen Kerl. Also gehen wir und laden das in unserem Browser. Nachladen, und dann können Sie sehen, was wir diese Form bekommen haben, und Sie können sehen, was überall wieder offenbart, aber wer hat das ohne Styling behoben. Das ist also so ziemlich alles, was es für die Implementierung unserer Eingabesteuerelemente gibt. In unserer nächsten Lektion werden wir die Fußzeile implementieren und dann werden wir mit unserem Bootstrap-Teil der Implementierung der Seite fertig sein , und dann gehen wir zu unserem benutzerdefinierten CSS, um es an das Design anzupassen, das wir begonnen haben mit. 13. So erstellst du eine page in Bootstrap.: Hallo schon wieder alle. In dieser Lektion werden wir sehen, wie wir Bootstrap verwenden können , um eine Fußzeile in unserer Webseite zu implementieren. Nun, das ist eine weitere dieser Vorträge. Wir werden keine neuen Bootstrap-Konzepte erforschen, aber wir werden sehen, wie wir es verwenden können, um unsere Fußzeile zu implementieren , die der Teil am unteren Rand der Webseite genau dort ist . Nun, wenn es gerade geht, um unsere Haupt-Website-Navigation zu wiederholen, und es wird ein wenig Copyright-Hinweis ganz unten haben. Mal sehen, wie das in unserem HTML aussieht. Hier haben wir es. Wir beginnen mit einem umschließenden Fußzeilen-Tag, dem HTML-Tag mit fünf Fußzeilen. Dann haben wir ein umschließendes div, das eine Klasse von Containerflüssigkeit haben wird. Jetzt in Bootstrap haben wir zwei Arten von Containern. Wir haben Container alleine, die eine feste Breite ist, und dann Containerflüssigkeit, die die volle Breite der Seite ist. Wir möchten, dass unsere Fußzeile in diesem Fall die volle Breite der Seite ist. Danach werden wir eine Zeile und dann eine Spalte haben, die wir ihr auch zugewiesen haben, was eine Möglichkeit ist zu sagen, dass unsere Ränder einen Wert von auto haben, was eine Möglichkeit ist, sie zu zentrieren. Danach werden wir eine weitere Zeile haben, dann ein anderes zentriertes div, und wir sind fertig. Lasst uns das jetzt direkt in unseren Code setzen. Wir setzen das unter unseren Container, der alle anderen Spalten enthält , die den Text darstellen, der die Datentabelle bildet. All das Zeug und wir fangen mit unserer Fußzeile an. Wenn ich uns alle von meinen Tippfehlern ersparen kann. [ unhörbar] ist gleich Behälter für den Lead. Wann hatte auch unsere Wurzel, und dann werden wir unsere Klasse gleich mx-auto haben. Dann werden wir das div schließen. Dann wiederholen wir genau die gleiche Struktur noch einmal. Für unsere nächste Reihe werde ich das genau dort setzen. Dies ist im Grunde diese Struktur, die wir für unsere Fußzeile brauchen. Nun, was werden wir hineinlegen? Wirklich, es ist nur eine Wiederholung unserer Hauptnavigation. Wir haben 1, 2, 3, 4, 5 Links. Preise über FAQ Blog und Kontakt und HRFs zu Pfund Werte. Preisgestaltung, dass als Cube Blog Kontakte in der realen Welt Tag sie würde undicht auf andere Seiten auf unserer Website. Aber für unseren Prototyp bleiben wir bei diesen. Dann müssen wir in unserem Copyright-Hinweis setzen, die zwei Spannen sein wird.Einer mit dem Copyright Symbol das andere mit unserer Marke, Copyright 2017. Wenn wir einen Blick darauf werfen, wie das in unserem Browser aussieht, und da gehen wir. Wir haben es passiert, dass, wenn Sie den Kontakt und dann die Marke 2017 blockieren, das natürlich nicht wie unser Mock-up aussieht, aber in der nächsten Lektion werden wir gehen und einige CSS auf diese Implementierung anwenden , um sicherzustellen, dass es mit unserer originelles Design. 14. So gestaltest du eine a an.: Willkommen zurück. In dieser letzten Lektion gehen wir über die benutzerdefinierten Stile, die wir auf unsere Webseite anwenden können , damit sie mit unserem Problem Webdesign übereinstimmt Wie Sie sehen können, haben wir ein bisschen Arbeit zu erledigen, aber es wird nicht zu lange dauern. Ich werde diese Veränderungen ziemlich schnell durchlaufen. Es gibt ein paar von ihnen, aber meistens sind sie ziemlich klein. Sie müssen sich keine Gedanken darüber machen, Notizen oder so etwas zu machen, weil ich die endgültige CSS-Datei als Teil der Projektressourcen bereitstellen werde. Sie können später darauf zurückverweisen. Hier sind wir mit dem Code. Bisher habe ich meine Datei index.html auf der linken Seite hier, und auf der rechten Seite habe ich einen Dateicode form-admin.css , der im Moment leer ist, hier wird unser benutzerdefiniertes CSS gehen. Jetzt habe ich ein CSS-Unterverzeichnis in meinem Projektordner erstellt, und wir werden uns auf eine neue CSS-Datei beziehen , obwohl es nichts aus unserer Index-HTML-Datei enthält. Das ist die allererste Änderung, die ich vornehmen werde. Anstelle von HTTP als Google-Schriftarten usw. werde ich nur unsere form-admin.css dort setzen und das speichern. Das allererste, was ich tun werde, ist unsere Website-Navigation etwas über ein wenig zu schieben und ich werde tatsächlich eine Bootstrap-Klasse verwenden , um dann zu tun, und dies ist eine der Klassen, die wir vorher nicht abgedeckt haben. Es heißt offset-md-4. Dies funktioniert wie eine Spalte, außer es ist nicht etwas, in das wir Dinge einfügen, wir verwenden es, um Dinge über eine bestimmte Anzahl von Spaltenräumen zu schieben. In diesem Fall möchten wir, dass unsere Navigationsleiste über vier Leerzeichen von links geschoben wird. Ich werde das hineinlegen und dann werde ich sehen, wie das im Code aussieht , um sicherzustellen, dass es den Effekt hat, den wir wollen. Hier sind wir, diese Webseite, speichern Sie das und laden Sie es eher neu, und wir können sehen, dass unsere Website-Navigation über geschoben wurde, was wir wollen und das nächste, was wir tun wollen, ist fügen Sie einige Änderungen an der Schriftart für die Webseite in unserem Design verwenden, verwenden wir eine Schriftart namens letztere, und Sie haben drei oder letztere. Ich bin mir nicht sicher, wie ich das mit ihnen aussprechen soll. Wir haben drei verschiedene Wege dafür. Ich verstehe, dass in diesem von den Google-Schriftarten, und dann setzen wir es in unseren Körper und stellen die Körperschriftgröße. Noch einmal, ich werde es im Browser überprüfen, nur um sicherzustellen, dass es eine Änderung gibt, und dort können wir sehen, dass ich gefunden habe, hat sich geändert, und das nächste, was wir tun wollen, ist endlich in Farbe in diese navbar im Moment, Es ist sehr blass aussehend und unser Design, wie Sie sehen können, verwendet diese blaue, hellgrüne Hintergrundfarbe. Wir sollten das besser auch reinlegen. Da ist es. Was haben wir hier? Nun, das erste, was wir tun, ist tatsächlich das Schriftgewicht für die Navigation festzulegen weil es tatsächlich ein bisschen größer ist als der Textkörper. Danach kommen wir tatsächlich dazu, unsere Hintergrundfarbe für unsere Navigation einzustellen. Ich definiere eine neue Klasse namens navbar-brand-bg oder navbar-brand-background und setze die Hintergrundfarbe auf diesen blauen grüny Wert, und danach sagen wir jeden nav Link, innerhalb der navbar ist, die sich in navbar-brand-bg befindet, setzen Sie es auf weiß. Dann haben wir eine ähnliche Regel, wenn Elemente in der Navigationsleiste mit dem Mauszeiger über oder unsere Links mit dem Mauszeiger bewegt werden. Dann setzen wir sie auf dunklere blaue, grüne Farbe. Nur um dem Benutzer ein wenig Feedback zu geben , dass etwas passiert, wenn er darauf klickt. Aber all das, was auf diese neue Klasse verweist, bedeutet, dass wir es zu unserem HTML hinzufügen müssen. Hier sind wir, und ich werde nur diese Klasse zu navbar hinzufügen , und es wird navbar-brand-bg sein. Wir werden einen Blick auf das in unserem Browser werfen, wieder neu laden und, ist nicht so spannend. Endlich ein farbenfroher Hintergrund. Aber wenn ich meinen Browser schließe, denke ich, wir werden auf einige Probleme stoßen. Wenn wir zu unserer ja, reaktionsschnellen Navigation wechseln . Sieh dir das an. Wir haben diese eigentümliche blaue Band, die über die Spitze geht, und alles andere scheint eine Ordnung zu sein, die gut ist. Glücklich zu sagen, dass wir aber etwas gegen diese blaue grüne Band tun wollen, die dort über die Spitze geht. In unserem responsiven Navigationsmodus. Also muss ich etwas tun, das hier nur ein wenig nicht offensichtlich ist, was additive Klasse gleich navbar-brand ist, und dann einen leeren Raum dort hineinlegen und das schließen, und wirklich, was wir tun, ist Bootstrap-Klassen, die alle so eingerichtet sind, dass sie gut zusammenarbeiten, so dass unsere Toggle Taste eine bestimmte Höhe hat und diese navbar Markenklasse ist festgelegt, dass sie eine bestimmte Höhe hat, und ohne dass ich gehe und Hand diesen Höhenwert codiert in unsere benutzerdefinierte CSS, kann ich die Vorteile der navbar Marke nehmen und lassen Sie es tun, dass für uns. Klicken Sie auf neu laden, und da gehen wir. So sieht die Navigation jetzt nur ein bisschen gesünder aus, und schön. Ich fühle mich besser, wie die Dinge schon aussehen. Also das nächste, was wir tun wollen. Ist, wenn Sie einen Blick auf unsere kleine Benutzer-Symbol hier, sitzen dort und sehen perfekt glücklich mit dem Rest dieser Symbole. Aber wenn Sie sich unser Webdesign ansehen, können wir sehen, dass wir diesen kleinen Kreis hinter der Ikone haben. Also werde ich jetzt etwas dafür reinbringen, und nach Hause gehen wir. Es gibt also ein paar Dinge, die hier passieren. Eine davon ist, dass wir ein Klassenbenutzersymbol definieren, die Hintergrundfarbe dafür festlegen eine Vordergrundfarbe dafür senden. den Randradius auf 50 Prozent setzen, wird im Grunde ein kleiner runder Kreis erstellt und die Breite manuell eingestellt, versetzt sie ein wenig breiter und höher in der Web-Implementierung als im Design. Nur weil das für unsere Responsive-Styles etwas besser funktionieren muss und einige Polsterungen verlagern, die darauf übrig sind, um sicherzustellen, dass unser kleines Benutzersymbol im Hintergrund zentriert ist und wir haben danach wichtig gefürchtet. Nur weil es einige spezifischere Stile gibt, die in unser Symbol einhängen, überschreiben unsere Polsterung links. Anstatt eine künstlich spezifische CSS-Regel für unser Benutzersymbol zu erstellen, verwende ich dort das wichtige Schlüsselwort, setze eine Hintergrundabdeckung für den Hubbub, und schließlich brauchen wir diese Auffüllung nur, wenn wir uns in unserem Responsive-Modus befinden . Das heißt, wenn unsere Seiten auf einem kleineren Gerät angesehen werden, dann brauchen wir diese zusätzliche Polsterung. Aber wenn wir auf einem großen Gerät sind, eines, das 768 Pixel oder breiter ist, dann brauchen wir keine zusätzliche Polsterung. Also habe ich diese kleine Medienabfrage hier, nur um den Stift auf der linken Seite auszuschalten, und alles, was wir jetzt tun müssen, ist unser neues Klassenbenutzersymbol anzuwenden. Also werden wir es auf ein Tag anwenden, auf das Auge, aber sehen Sie das A Tag Benutzersymbol. Speichern Sie das, Kopf zurück zum Browser, und ich habe bereits verwandt, so dass Sie es jetzt sehen können, und wenn wir das schließen, kommen Sie zu unserer reaktionsfähigen Navigation. Wir können sagen, dass es auch da drin funktioniert. Ist es das, was wir wollen? Als nächstes ist es an der Zeit, unserem Layout nur ein wenig Atemraum hinzuzufügen. Die Dinge sehen zerquetscht aus, und jetzt Webseite im Moment, und ich denke, wenn wir einige Abstände auf unsere Zeilenklasse anwenden , dann wird dies viel besser aussehen. Also ein Ziel, ich werde sagen, es ist wahrscheinlich zu viel. Jetzt denke ich, das ist gut. Also werden wir ein Ziel des Head-Space auf unsere Reihen anwenden. Also in unserem CSS, ich werde, passt nicht wirklich in irgendwelche schönen Kategorien. Ich setze es einfach an die Spitze, sagen Punkt. Ich mag es dort nicht, weil es sie auf den HTML-Elementen mischt. Erstellen Sie mehr Platz im Layout, Zeile. Also ein halbes Em. Speichern Sie das, gehen Sie zurück zum Browser. Nachladen. Ich weiß nicht, ich sagte, ich mache ein volles Em, nicht wahr? Ja, ich denke, ein volles Em wird besser sein. Ein Em. Da gehen wir. Ich bin viel glücklicher damit. Ok. Hör zu, ich bin froh, dass wir etwas mehr Platz in unserem Layout bekommen. Die Navigation sieht viel schöner aus. Jetzt ist es Zeit, mit unserer Fußzeile umzugehen, denke ich. Es schwebt im Raum, es hat keine Hintergrundfarbe. Zeit, das jetzt zu beheben. Das erste, was ich tun werde, ist das Styling für unseren Körper anzupassen, da ist es. Was machen wir hier? Wir setzen ein Minimum an Höhe auf 100 vh. Vh ist eine vertikale Höheneinheit. Dies sind 100 von ihnen, was im Grunde sagt, dass die minimale Höhe unserer Webseite die Höhe unseres Browserbildschirms sein wird. Dann stellen wir die Anzeige ein, um sie in und Flex-Richtung zu Spalte zu biegen. Dies ist alles dazu beitragen, dass unsere Fußzeile am unteren Rand der Seite kleben, nicht am unteren Rand der Seite kleben, es wird nicht klebrig sein, aber es wird am unteren Rand der Seite platziert, auch wenn der Seiteninhalt nicht ausreicht, um die gesamte Höhe unseres Browsers. Das ist alles gut und gut, aber jetzt müssen wir etwas für unsere Fußzeile haben. Lassen Sie uns es hier setzen, weil es ein HTML-Element ist. Wir sagen „Margin-top: auto“. Ok. Mal sehen, wie das funktioniert. Da gehen wir. Es wird geschoben, unten nach unten gebracht. Es ist ein bisschen zu nah an der Unterseite jetzt wirklich und es braucht seine Hintergrundfarbe und andere Styling als auch. Es klingt groß genug, ich werde es ein wenig hinlegen, nur um unter unserem nav, HTML-Styling, Fußzeile zu sein , wenn das nicht allzu offensichtlich ist. Abgesehen davon, dass es einen Rand oben gibt habe ich das Schriftgewicht auf 300 reduziert , um den Text unten nur ein wenig edel aussehen zu lassen. Ich habe die Hintergrundfarbe eingeführt, eine minimale Höhe von 100 Pixel, ein wenig gepolstert. Ich habe die Farbe auf Weiß gesetzt und unseren Links ein bisschen Polsterung hinzugefügt , nur damit es nicht so überfüllt aussieht, habe ich den Boden eingefügt. Ich habe ein paar Stile, unsere Marke Text und Copyright eingeführt . Also unser Markentext ist das kleine Ding, das „The Brand“ sagt, ich mache das ziemlich schwer. Das Copyright gilt für das Copyright-Symbol oder das Ganze. Eigentlich Copyright-Text, ich möchte, dass es ein bisschen kleiner ist als der Rest davon. Eigentlich müssen wir das erfolgreich nutzen. Ich werde unsere Fußzeile ein wenig neu anordnen müssen , was nur ist, um diese Spannweiten zusammen zu verschachteln. So einfach wie das. Ich könnte das Ganze auf eine Zeile setzen, nur damit wir ganz leicht sehen können , wie das aussieht. Ich werde das speichern, zurück zum Browser. Ich habe es gerettet. Jetzt lade ich neu und da ist unsere Webseiten-Fußzeile. Das ist großartig. Das nächste, was ich ansprechen möchte, ist dieses Bild, The Brand. Wenn Sie sehen, wie wir neulich herumstochen, haben wir unsere Werkzeuge entwickelt. Ich werde die jetzt schließen. Sie können sehen, dass wir dieses Bild haben, die Marke, und ich fühle mich, dass es ein bisschen zu groß ist. Ich bin nicht begeistert von dieser supermassiven Größe unseres Hauptlogos. Also werde ich nur eine Beschränkung auf die maximale Größe davon setzen. Ich glaube, wo es so sitzt, ist das gut. Ich werde das nochmal inspizieren. Ich kann sehen, dass das 286 mal 298 Pixel ist. Jetzt geh zurück zum Code und ich gehe hier runter nach unten. Ich denke, ich nenne es ID-Bild. Wir haben ID dafür, weil es nur gibt, wenn es einer von ihnen sein wird, sage ich, max-Breite: 297px. Ok. Ja, endlich können wir diese Breite 100 Prozent loswerden und sagen, id ist gleich „id-img“. ID ist die Abkürzung für Identität, da hier die Markenidentität ist. Lass uns zurück zum Browser gehen, neu laden, und da gehen wir. Es ist nicht so eine überwältigende Größe, aber sieh dir das an. Jetzt will es in unsere Datentabelle laufen. Wie groß es sein muss, bevor das nicht passiert. bin ich neugierig. Ja, ich denke, das reicht, 245 Pixel. Das wird uns gut dienen. Ich habe dort ein schnelles Nachladen gemacht. Hier ist unser kleines Markenbild, das sich den ganzen Weg durch schön verhält. Fantastisch. Nun ist das nächste, was wir tun wollen, ist, diese Eingaben unter Kontrolle zu bekommen. Ich rede von diesen Typen. Im Moment sehen sie aus wie eine absolute Katastrophe. Jetzt muss ich sie ein wenig neu anordnen und ich werde diese Schaltfläche innerhalb des Formulars mit der Texteingabe verschieben . Das ist nicht das Größte auf der Welt, denn es ist nicht wirklich, wie ich schon sagte, mit dem Formular, wenn ich dieses Formular einreiche. Aber um zu vermeiden, viele sehr spezifische Styling auf diese Schaltfläche zu setzen und dann in der Linie herunterzufahren, werde ich die freien definierten Stile in unserer Form nutzen. Ich werde auch einige Stile hinzufügen, um diesen Knopf nur ein bisschen weniger grob zu machen und den Rest unseres Designs trotzdem mit den abgerundeten Ecken zu passen. Das erste, was ich tun werde, ist, auf die Form zu gehen. Ich glaube, wir wollen diese Formgruppe auch nicht mehr. Ich lege das da hin, es sollte hier reingehen. Diese Jungs kommen ein bisschen zurück. Das ist einer meiner Besten. Das ist das Ende einer Reihe. Mal sehen, wie wir jetzt aussehen. Schrecklich. Wahrscheinlich müssen wir das etwas größer machen. Da gehen wir, jetzt funktioniert es. Wir sehen schon besser aus. Was passiert, wenn wir das zerquetschen? Ja, das ist gut, immer noch gut und glückliche Tage. Das ist etwas unregelmäßig. Die Breiten dieser Dinge, aber wir werden das in einem Augenblick klären. Jetzt müssen wir etwas Stil hinzufügen, nur um unsere Eingaben ein wenig hübscher aussehen zu lassen. Was haben wir hier? Sowohl für die Eingabe als auch für die Taste setzen wir den Rand auf auto. Wir setzen den Rahmenradius auf 25 Pixel, was ihnen einen schönen runden Rand an beiden Enden gibt, und Padding auf fünf Pixel, um ihnen ein wenig Platz innerhalb der Eingabe zu geben. Außerdem setzen wir unsere Box-Schatten auf keine, was ihnen einen schönen, kleinen, sehr feinen hellgrauen Randverleiht einen schönen, kleinen, sehr feinen hellgrauen Rand und die Breite auf 100 Prozent einstellen, damit sie den verfügbaren Platz in Anspruch nehmen. Schließlich habe ich eine Regel zum Hinzufügen von Formular-Schaltflächen-ID bei der der Rahmen auf Null mit 100 Prozent eingestellt ist, kein Hintergrundbild, Hintergrundfarbe, die eine hellere, blaue Farbe ist. Dann haben wir endlich einen weißen Text. Ich gehe weiter und wende das auf die Schaltfläche an. Reload, und unsere Eingaben sehen jetzt viel schöner aus. Jetzt fehlt eine Sache, die diese kleine Lupe hier ist. Wir wollen, dass es in den Texteingaben sitzt. Wie Sie sehen können, ist es nicht da, also gehen wir besser und machen das jetzt. Eine Sache, die ich tun werde, ist diese große, haarige CSS-Styling-Regel namens Suchsteuerung hinzuzufügen . Im Grunde, was es tut, ist eine Reihe von Sachen, um diese Lupe innerhalb der Texteingabe zu positionieren . Was wir tun müssen, bevor das funktioniert, ist tatsächlich ein kleines Symbol hinzufügen , um dies durch die Formularmaterialsymbole, und dann Suchsteuerung. Das hat überhaupt nicht funktioniert. Habe ich das CSS gespeichert? Nein. Offensichtlich bin ich nicht qualifiziert, mehr als ein Editor-Fenster gleichzeitig zu fahren. Nachladen. Da gehen wir. Endlich. Wenn ich das nicht verstehe, werde ich das reparieren. Was ich mache, ist, dass ich einen Anfang eines Werkzeughinweises mache, der auf Dadadada eingestellt ist. Da gehen wir. Das sieht ein bisschen besser aus. Ich werde das auf unserem kleinen Suchsymbol verwenden, Tool-Hinweis, überprüfen Sie es im Browser. Großartig. Jetzt ist es die richtige Farbe. Unsere Eingaben sehen diesmal viel besser aus. Nur das kleine Suchsymbol zu überprüfen, verhält sich selbst, und es ist durchgehend. Fantastisch. Nun ist das nächste, was fehlt, ziemlich unkompliziert, nur ein kleiner Rand, eine kleine Zeile, die unter unseren Datentabellenüberschriften läuft. Wir wollen eine Trennung in einer Zeile unter Name, Impressionen, Antworten und Konvertierung. Wir bekommen sie jetzt in Datentabellengebiet, also werde ich das markieren, und ich habe einen Stil namens lo border erstellt , der ein wenig Polsterung und einen Rand auf der Unterseite hat , der nur ein weiteres hellgrau ist. Um das zu benutzen, werde ich es hier unten stecken. Div-Klasse entspricht col md 11 und lo border, und das kann nur ein leeres div sein. Fantastisch. Es gibt eine Zeile, die unsere Spaltenüberschriften von unseren Spaltendaten trennt. Nun, das nächste, was wir suchen müssen, sind diese Symbole hier drüben. Sie sehen nicht ganz richtig aus. Sie sollen versteckt sein. Dieser kleine Punktpunkt soll ein Hinweis darauf sein, dass es mehr Symbole zu sehen gibt, wie ich zuvor in der Klasse erwähnt habe. Also gehen wir besser mit dem Verstecken und Anzeigen dieser Symbole fort. Was ich getan habe, ist, dass ich einige weitere Stile hinzugefügt habe sich auf diese Symbole beziehen und ich werde sie Admin-Tools nennen. Das erste, was wir tun, ist, etwas Farbe zu ihnen hinzuzufügen und die Anzeige auf keine zu setzen , das heißt, wir verstecken sie, aber wenn wir über etwas bewegen, das eine Datenzeile genannt wird und unser Admin-Tool wird angezeigt Inline-Block. Dies ist eine Art zu sagen, dass diese Dinge verborgen sind, bis wir über sie schweben, dann zeigen wir sie. Allerdings haben wir diesen kleinen Hinweis, dass drei kleine horizontale Punkte sind, die uns sagen, dass es mehr zu sehen gibt, aber wenn wir den Mauszeiger über unsere Linie bewegen, wollen wir, dass diese ausgeblendet wird, also setzen wir die Anzeige auf keine. Dann setzen wir schließlich einige alternative Farben für unsere Admin-Tool-Symbole, ein helleres Grau und dann ein dunkleres Grau, wenn wir den Mauszeiger über sie bewegen. Bevor wir etwas anderes tun, müssen wir diese Dinge in die Tat umsetzen , indem wir diese Klassen unseren Icons zuweisen, also was wir unser Admin-Tool haben werden. Ich mache eins zu eins, um damit zu beginnen, nur um sicherzustellen, dass alles funktioniert, und dann werde ich sie für den Rest von ihnen einarbeiten. Dies wird ein Werkzeughinweis sein, wie unsere kleine Lupe. Außerdem sollte unsere Zeile auch eine Datenzeile sein, damit wir unsere Symbole genau auswählen können. Wir werden diese Aufmerksamkeit geben und schauen, wir können sehen, dass kleine Symbole verschwunden sind und wenn wir über sie fahren, können wir die anderen Symbole dort sehen. Sie erscheinen und ein wenig mehr Symbol ist verschwunden. Da gehen wir. Das ist es, was wir wollen. Also werde ich das schnell auf die restlichen Datenzeilen anwenden. Endlich bin ich sicher, dass es jetzt funktionieren wird. Fantastisch. Wenn wir das zerquetschen, arbeiten wir noch? Ja. Da gehen wir. Wir sind so ziemlich fertig mit unserem individuellen Styling für die Seite. Wenn Sie es noch nicht getan haben, posten Sie bitte Ihr Projekt in die Projekt-Galerie. Ich würde es gerne sehen wie immer und ich wette dass alle anderen, die an der Klasse beteiligt sind, es auch gerne sehen würden. Es ist eine großartige Gelegenheit, Notizen zu vergleichen, Feedback zu erhalten und Hilfe zu erhalten, wenn Sie es brauchen. Ich freue mich sehr darauf, zu sehen, woran du gearbeitet hast. 15. Kursüberprüfung: Also sind wir bis zum Ende der Klasse gekommen. Es war super Spaß für mich und ich hoffe, Sie haben es genossen und fanden es auch wirklich nützlich. Während dieser Klasse haben wir behandelt, was Bootstrap ist, wie man es in eine reguläre Webseite einschließt, wie Bootstrap Navigationscontainer, Zeilen und Spalten funktionieren, wie wir diese Komponenten kombinieren können, um eine funktionale -Webseite. Wenn Sie es noch nicht getan haben, vergessen Sie bitte nicht, Ihr Projekt zu posten. Sie können Feedback dazu bekommen und ich kann es wirklich kaum erwarten, es zu sehen. Denken Sie auch daran, dass ich immer zur Verfügung stehe, um zu helfen; wenn Sie auf irgendwelche Probleme stoßen, lassen Sie es mich wissen. Ich hoffe noch einmal, dass Ihnen die Klasse gefallen hat und ich freue mich darauf, Sie in Zukunft wieder zu sehen.