Erstellen deiner Website mit Bootstrap

1. Einführung: Hallo und herzlich willkommen. Ich habe Einheiten und das ist erstellen Sie Ihre Website mit Bootstrap. Also vor allem, was ist Bootstrap? Grundsätzlich ist Bootstrap eine Website, die es uns erlaubt, die bereits implementierten und eingebauten Klassen zu nehmen und sie auf unserer eigenen Website zu verwenden. So können wir die Klassen nehmen, die für uns in Bootstrap zur Verfügung stehen und sie in unseren HTML-Dateien verwenden , um unsere Website schöner aussehen zu lassen. Das ist also die allgemeine Idee über Bootstrap. Und in dieser Klasse werden wir die verschiedenen Klassen überprüfen. Bootstrap, dann lernen Sie, wie man sie benutzt. Und natürlich, ähm, und unsere Websites. Dann werden wir das, was wir bisher gelernt haben, nutzen und unsere eigene Website aufbauen. Und denken Sie daran, diese Website wird urllib mit Bootstrap erstellt werden. Und natürlich beenden wir unsere Klasse mit der Erstellung des Projekts. Und diese Projektsitzung ist für Sie, selbst zu erstellen und zu erstellen und natürlich veröffentlichen Sie sie und den Projektbereich, so dass ich Ihnen eine Rezension und einige Vorschläge geben kann. Und natürlich, damit Sie diese Klasse abschließen können, sollten Sie in der Lage sein, die grundlegenden Elemente oder die grundlegenden Aufgaben zu verstehen , die Sie ein HTML verwenden werden. Also, ohne weitere Umschweife, lasst uns anfangen. 2. Was ist Bootstrap: Hallo und herzlich willkommen. Also heute werden wir über Bootstrap sprechen. Und Bootstrap ist ein freies und Open-Source-CSS-Framework. Und es enthält im Grunde CSS- und JavaScript-basierte Entwurfsvorlagen oder Formulare, Schaltflächen, Navigation und andere Schnittstellenkomponenten. Und wenn Sie nicht mit HTML und CSS vertraut sind, ermutige ich Sie dringend, mit denen zu beginnen, bevor sie zu meiner vorherigen Klasse zurückkehren und diese Themen ansehen können , dann kommen Sie zurück und beginnen mit Bootstrap. Und für diese Klasse werden wir den Visual Studio-Code verwenden. Und Sie können zu Google gehen und rechts, Visual Studio-Code herunterladen und herunterladen. Und du erhältst die neueste Version. Das ist es also für Visual Studio-Code. Und jetzt lassen Sie uns unsere Aufgabe in einfachere aufteilen. Zunächst einmal ist bootstrapped, wie gesagt, ein freies und Open-Source-CSS-Framework. Also, was bedeutet das? Es bedeutet, dass, wenn wir unsere HTML- und CSS-Datei schreiben, wir immer die Hilfe von Bootstrap verwenden können. Anstatt also die Überschrift zu schreiben und ihre Breite, ihre Farbe, ihr Design anzugeben , wo ich sie wollte. Ich kann einfach Bootstrap verwenden, um die Arbeit für mich zu erledigen. Und es ist einfacher und immer besser, diese Arten von Framework zu verwenden. Zunächst einmal werden wir uns verschiedene Schnittstellenkomponenten anschauen und wie man sie mit einem Bootstrap benutzt. Dann werden wir mehrere Komponenten und mehrere Formen erstellen. Danach werden wir unsere Klasse mit der Erstellung einer vollständigen Website mit HTML, CSS und Bootstrap beenden . Das ist es also. Fangen wir mit unserem ersten Video an. 3. Elemente: Das erste, was Bootstrap zu verwenden, ist, zu bootstrap.com zu gehen. Und das ist die Homepage. Klicken Sie also auf „Erste Schritte“. Dies ist die Einführung, Quickstart, CSS JavaScript. Und wir können all diese ignorieren und den ganzen Weg hinunter zu unserer Starter-Vorlage gehen. Dies ist also die gestartete Vorlage von Bootstrap. Wie Sie sehen können, enthält es die Länge für CSS, Bootstrap Dokument, dass CSS und auch den Link für das JavaScript. Also, jetzt lassen Sie uns das kopieren und zurück zu unserem Visual Studio-Code. Ich habe bereits eine Datei erstellt und habe sie Bootstrap genannt. Hier sind einige Bilder, die wir später verwenden werden, natürlich. Und das erste, was wir tun werden, ist die HTML-Datei zu erstellen. So können wir einfach index.html schreiben. Dies ist unsere HTML-Datei. Wir haben einfach alle unsere Bootstrap startete Vorlage hier basiert. Und lass mich das einfach retten. Und natürlich, wenn wir diese Datei überprüfen möchten, können wir immer klicken, mit der rechten Maustaste auf unsere Datei und öffnen und Standardbrowser. Wie wir sehen können, ist dies unser HTML5. Da steht „Hallo Welt“. Dies ist die Überschrift, die wir erstellt haben, oder es ist im Grunde, dass der Standard in Bootstrap. So können wir es immer entfernen. Und natürlich, wenn wir hierher zurückgehen, aktualisieren, wird es nicht mehr verfügbar sein. Diese Hello World stammt jedoch aus dem Titel. Und lassen Sie mich einfach ändern und Bootstrap unterschreiben. Lassen Sie mich einfach eine Überschrift erstellen. Willkommen auf unserer Bootstrap-Website. Und wenn ich hierher zurückgehe und mich auffrische, wird das erscheinen. Wie wir hier sehen können, ist dies eine Überschrift eins und dies ist die größte Rubrik. Wir haben Überschriften, die von einem bis zu sich selbst gehen. Und sie sind alle in Bootstrap verfügbar. Jetzt, wenn wir dieses Hinzufügen von Gonorrhoe erstellen, wann immer wir ein Tag eins und das schließende Tag H2 schreiben, haben wir hier nie wirklich Bootstrap verwendet, wir geben einfach an, dass dies eine Überschrift in HTML ist. Also, wenn ich schreibe, zum Beispiel, bei x2 und das wird hier zurück gehen, aktualisieren. Dies ist Überschrift eins, und das fügt zwei hinzu. Jetzt in Bootstrap haben wir die H1, H2, oder alle diese sind Klassen und Bootstrap. So können wir hier und diese H2 zuletzt angeben, und lassen Sie uns die Klasse H1 angeben. Wenn ich hier zurück gehe, wenn Müll, wie wir sehen können. Diese Überschrift nahm die Attribute und es sieht so aus, als wäre es eine Überschrift eins, obwohl wir diese Überschrift als Überschrift zwei erstellt haben. Wie wir jedoch sehen können, ist es das gleiche und das sind Klassen in Bootstrap. Lassen Sie mich einfach anpassen diese und Klasse H1 und dann sehen Sie es klar, bevor ich eine Überschrift erstellen, sagt Sex, hatte ihn zurückgehen, aktualisieren. Wie Sie sehen können, ist dies die Überschrift Sex und es sieht sehr klein aus. Wenn ich ihm jedoch eine Klasse gebe, jede, wird es wie diese Überschrift aussehen. Und das ist nicht im Grunde für die Überschriften. Wir können erstellen Hinzufügen 123456. Jetzt können wir auch die Überschrift anpassen. Also zum Beispiel, wenn ich Welcome auf unserer Bootstrap-Website schreiben möchte , möchte ich diesen Bootstrap als verblasst schreiben. So kann ich es einfach löschen lassen. Und ich werde es in kleine ziehen. Und die Klasse wird stumm geschaltet. Und ich würde Bootstrap hier schreiben. Und das wird überprüft, wie wir sehen können. Und so haben wir unsere Überschrift mit einem sehr einfachen Schritt angepasst und es sieht ein bisschen besser aus. Jetzt. Und gehen wir zurück zu unserem Code und lassen Sie uns über die Anzeige unserer Überschriften lernen. Also hier haben wir unsere Überschrift eins erstellt. Und zum Beispiel, wenn ich es anzeigen möchte, kann ich die Klassenanzeige verwenden. Und du wirst den Unterschied in einer Minute sehen. So zeigen Sie eine und speichern Sie gehen zurück. Und wie Sie sehen können, wird dieses Display unsere Überschrift nicht Becker machen. Es wird jedoch die Größe der Buchstaben sind ein bisschen kleiner. Und das ist es im Grunde für das Display. Und natürlich können wir jede Klasse anzeigen, zum Beispiel, ist, wenn ich hier die SpaceX schreibe. Und es wird wie der Überschrift Sex aussehen. Auch wenn ich Kante sechs schreibe und dies als Hinzufügen von sechs schreibe und ihm eine Klasse gebe, zeige sie an. Sx, geh zurück, erfrischen. Sie werden genau gleich aussehen. Und natürlich, wenn ich ihm eine Klasse gebe, ist spielen eins, um größer als diese Anzeige zu sein. Jetzt haben wir auch die Klassenführung, und es macht im Grunde einfach jeden Absatz durch Hinzufügen hervorstechen. Lassen Sie mich zum Beispiel diese Überschriften löschen und erstellen Sie einen Absatz mit einigen Lernhilfen. Und lass mich hier zurück und lass uns den Absatz sehen. Das ist also unser Absatz. Gehen wir zurück und geben ihm eine Klasse von Lead. Jetzt geh zurück. Und wie Sie sehen können, ist dies unser Absatz nach der Änderung, der aussehen wird. So wie das. Und Sie können zustimmen, dass dies ein besser aussehender Absatz ist als der zuvor, indem Sie einfach diesen Klassenvorsprung hinzufügen. Jetzt und HTML, wir haben das Styling für Elemente, wir haben das Inline-nächste Element. Lassen Sie mich nur einige Beispiele demonstrieren. Wenn ich zum Beispiel ein Wort hervorheben möchte, kann ich einfach das Tag MAC verwenden. Also, wenn ich, das, ist der MAC an hohe Licht gebunden. Und in diesem Fall möchte ich dieses Wort hervorheben. Also, wenn ich Mark hier und diese detaillierten Highlight tippe , Gehen Sie zurück. Und wie Sie sehen können, ist dies die Markierung, um Texte hervorzuheben und das Wort Highlight ist tatsächlich hervorgehoben. Natürlich haben wir auch ein weiteres Inline-Textelement. Und in diesem Fall wird es das d, l oder delete Tag sein. Also, wenn ich Lorem, Lassen Sie mich einfach durch Absenken Rohr und wie wir sehen können, haben wir unseren Herrn und ich werde einfach das Lösch-Tag hinzufügen. Lauren fünf. Gehen Sie zurück, aktualisieren Sie, und wir werden unseren Login-Absatz bekommen, aber mit einer geraden Linie in der Mitte. Und natürlich haben wir auch die Linie, die darunter ist, und wir können es verwenden, die Uta x2, y2 und eine niedrigere ihn fünf, gehen Sie zurück, aktualisieren. Und das ist unser Tag. Und wir haben so viele andere Dinge, die wir nicht so sehr ins Detail geraten werden. Wir können jedoch immer Bootstrap für diese Arten von Dingen verwenden. Wir müssen das Tag nicht hier oder hier schreiben. Lassen Sie mich zum Beispiel das einfach löschen. Und anstatt die Masterclass zu verwenden, kann ich einfach das DOD-Markierungsglas mit Bootstrap verwenden. Also habe ich einen Absatz, wir haben acht, und ich kann einfach die Klasse hier verwenden. Markieren Sie, gehen Sie zurück, aktualisieren Sie, und wie Sie sehen können, wird es hervorgehoben. Nun natürlich, wenn Sie ein bestimmtes Element hervorheben möchten, zum Beispiel. So können wir das Wort immer erstellen, erweitern und schreiben und dann die Klassenmarke hinzufügen. Lassen Sie mich das löschen. Und die, die Klassenmarke von hier, gehen Sie zurück und aktualisieren. Und wie wir sehen können, haben wir das gleiche exakte Ergebnis wie zuvor. Gehen wir nun zurück zu unserem Code und löschen Sie diesen Absatz. Wir haben auch Abkürzungen, also lassen Sie uns hier einen Absatz erstellen. Und in diesem Absatz haben wir eine Abkürzung für ein bestimmtes Wort. Und der Titel wird zum Beispiel sein. Und das ist zum Beispiel CSS. Wenn ich zurückgehe und meine Seite aktualisiere, wie wir sehen können, haben wir diese Abkürzung und für eine etwas kleinere Schriftgröße können wir den Klasseninitialismus hinzufügen. Und lassen Sie mich einfach eine weitere Abkürzung erstellen, nur um den Unterschied zu sehen. Also hier haben wir auch CSS. Allerdings haben wir nur, wir haben auch die Klasse. Jede Schale nicht. Wenn wir zurück zu unserem Browser, und wie Sie sehen können, ist eine etwas kleinere Schriftgröße. Und das ist es für die Abkürzung. Und schließlich, das letzte Element, das wir in diesem Video als die Blockcodes abdecken werden. Und in diesem Fall, wenn wir einen Blockcode erstellen, müssen wir die Block-Code-Tags öffnen und wir haben einige lernen hier. Das ist also Band neun. Geh zurück, aktualisiere, und das ist unser Code. Allerdings können wir das Glas hier hinzufügen und es wird auch Blackout sein. Wie Sie sehen können, hatten die meisten Klassen den gleichen Namen wie das Tag. Nur um die Dinge für euch zu vereinfachen und nur um es ein bisschen einfacher zu machen und wie ihr sehen könnt, ist es ein bisschen größer und es sieht schöner aus. Jetzt haben wir auch die Quelle. Wann immer wir einen Code schreiben, möchten wir höchstwahrscheinlich unsere Quelle hinzufügen. Das ist also unsere Kälte. Ich kann hier eine Figur hinzufügen, Doug. Und lassen Sie mich hier ersetzen. Und das ist unsere Figur. In unserer Figur haben wir unseren Code, und natürlich haben wir unsere, zum Beispiel, unsere Feigenunterschrift oder Beschriftung. Und in diesem Fall werde ich einfach Loudon sieben schreiben. Und hier kann ich den Klassenglückscode hinzufügen und ihn einfügen, um anzuzeigen, dass dies die Beschriftung oder die Fußzeile unseres Blockcodes ist. Gehen Sie zurück und wie Sie sehen können, ist dies unsere Beschriftung und das ist unser Blockcode. Also das ist es im Grunde für dieses Video. Im nächsten Video werden wir über weniger sprechen. So sehen wir uns dann. 4. Listen und Farben: Weiter zu weniger. Und es sei denn, wir haben eine unformatierte Liste und wir haben etwas, das Inline-Liste genannt wird. Fangen wir also mit dem Unstyled an. Und das ist im Grunde, wie der Name schon sagt, es ist eine unsortierte Liste. Und dies gilt nur für unmittelbare untergeordnete Elemente der Listenelemente. Lassen Sie mich zum Beispiel einfach die Figur löschen. Und in diesem Fall, um eine Liste zu erstellen, wie wir wissen, können wir eine ungeordnete Liste erstellen. Innerhalb dieser ungeordneten Liste. Lassen Sie mich einfach einen Listeneintrag fünf bekommen und das ein paar Mal kopieren. Also 12345. Und in diesem Fall ist dies das erste Listenelement. Und wenn ich hierher zurückgehe und aktualisiere, und wie wir sehen können, haben wir eine ungeordnete Liste mit einigen Aufzählungspunkten. Wenn wir jedoch nicht möchten, dass diese Punkte, Punkte ansprechen, können wir einfach die Liste und die gestylte Klasse von Bootstrap verwenden. Also in unserer ungeordneten Liste, oder ich kann Klasse eingeben und die Liste und den Stil verwenden. Dein Rücken, erfrischen Sie sich. Und wie Sie sehen können, werden die Aufzählungspunkte verschwinden. Und wir haben auch gesagt, dass diese Eigenschaften nicht für die Kinder der Kinder gelten. Nehmen wir an, ich habe eine ungeordnete Liste, eine weitere ungeordnete Liste. In diesem Fall wird es aus Lorem zehn bestehen. Und wenn ich hierher zurückgehe, aktualisiere, wie Sie sehen können, wird dieser Punkt immer noch den Eindruck haben, dass dieses Kind nicht das Kind als die erste ungeordnete Liste ist. Das ist also im Grunde für die unstyled Liste. Lassen Sie uns zu etwas übergehen, das Inline genannt wird. Und in diesem Fall können wir die Kugel entfernen und einen leichten Rand mit einer Kombination von zwei Klassen anwenden. Wir haben die Listenfrist und die Liste und Position. Und wir werden sie jetzt erforschen. Das erste, was wir tun werden, ist, alle diese Elemente zu entfernen. Das ist also unsere ungeordnete Liste. Wir wollen aber nicht, dass es unstylt wird. Wir wollen, dass es weniger als Linie ist. Und das wird im Grunde in Navbars verwendet. Wann immer wir eine ABA erstellen möchten, können wir diese Art von Klassen verwenden. Und natürlich haben wir unseren ersten Artikel. Also lass mich einfach ein Zuhause schaffen, willkommen. Und Status. Und natürlich müssen wir hier eine Klasse namens Liste und Liste und Zeile hinzufügen. Und wir müssen die gleiche Klasse hier und hier hinzufügen. Und das ist eine Abkürzung, wenn Sie es verwenden möchten. Wann immer Sie etwas an mehr als einem Ort hinzufügen möchten, können Sie hier zum Beispiel klicken. Und klicken Sie auf Hinzufügen auf der Tastatur und dann auf die andere Position. Dann sind diese, Sie können auf diesen Positionen zur gleichen Zeit fahren. Also, wenn ich hier Raum drücken, können Sie sehen, dass wir hier Glas und Liste und Zeile schreiben können. Jetzt gehen wir zurück und erfrischen uns. Und wie wir sehen können, sind unsere Artikel jetzt auf der gleichen Zeile, Startseite, Willkommen und Status aufgelistet . Und das ist im Grunde für die Inline-nicht. Wir haben auch so viele Beschreibungen und so viele Elemente, die Sie auf der Bootstrap-Website besuchen können. Es gibt so viele Elemente und so viele Klassen, die Sie verwenden können, um Ihre Website besser aussehen zu lassen. Aber das sind die Grundlagen, die wir kennen sollten, bevor wir eine Website mit Bootstrap erstellen. Jetzt, da wir einige Elemente haben, können wir, lassen Sie uns einige andere erstellen und wir können über Farben und Bootstrap mit diesen Elementen sprechen. Also Liste und Zeilenelement. Und in diesem Fall werde ich es nennen. Kontaktieren Sie uns. Und in diesem Fall, wenn ich zu unserem Browser zurückgehe und unseren Kontaktieren Sie uns Artikel aktualisieren. Also zuerst haben wir in Bootstrap so viele Farben. Gehen wir zurück zu unserem Bootstrap. Und hier haben wir die Ökonomen. Zunächst einmal haben wir die primären, sekundären Erfolgsinformationen, Warnung, Gefahr, Licht und Dunkel. Und Sie haben auch so viele Anpassungen für diese und Sie können voran gehen und sie selbst ausprobieren. Wir werden jedoch einige der ursprünglichen versuchen und die Gelehrten verwenden. Wir können einfach zu unserem Listenartikel gehen und hier haben wir unsere Home-Artikel. Wir können die Textinformationen verwenden, um anzuzeigen, dass dies eine Information ist. Und wie Sie sehen können, wird es blau werden. Und zum Beispiel haben wir den Erfolg. So besteuert Erfolg. Ändern wir das in Gefahr, roter Text, Gefahr. Und das wird die Axt dunkel sein. Jetzt gehen wir zurück, erfrischen wir uns. Und wie wir sehen können, haben wir jetzt den Willkommensstatus zu Hause. Kontaktieren Sie uns. Alle diese Elemente sind verschiedene Farben und wir haben einfach die Gelehrten erstellt oder diese Farben verwenden, prompt Bootstrap ohne Verwendung von CSS überhaupt von unserer Seite. Ich hoffe, dass Sie jetzt vollständig verstehen, was Bootstrap ist und warum wir es verwenden. So können wir einfach diesen CSS-Status oder Merkmal in unserer Datei hier erstellen. Aber wir entscheiden uns, nicht angespannt zu werden. Sie sind bereits erstellt und für uns verfügbar, wann immer wir sie verwenden möchten. Jetzt, da wir über Farben gesprochen haben, sprechen wir über Hintergrundfarbe. Und um dies zu verwenden, können wir einfach B, G und Bindestrich Punkt zum Beispiel korrigieren. Gehen wir zurück. Und wie wir sehen können, dieser Artikel Debugger auf, wird dieser Artikel dunkel. Jetzt verwenden wir VG Gefahr, BG, Erfolg, und sie sind im Grunde die gleichen Klassen. Aber wie der Text, aber wir schreiben Vg, um anzuzeigen, dass diese Hintergrund sind. So VGS, zum Beispiel, Hymne. Jetzt geh zurück, erfrischen. Und ich weiß, dass sie nicht übereinstimmen, aber das ist nur ein einfacher Hinweis darauf, wie man sie benutzt. Und das ist es im Grunde für die Farben. Wir haben so viele Autos im Bootstrap. Und Sie können voran gehen und überprüfen Sie sie von der ursprünglichen Website. Und es gibt super einfach und schön zu bedienen und zu lernen. Und ich ermutige dich, sie selbst zu überprüfen. Das ist es also für dieses Video. Und das nächste Video werden wir einige andere Komponenten in Bootstrap entdecken. Wir haben so viele Komponenten und wir werden die meisten von ihnen durchgehen. Und damit das gesagt wird, ist dies das Ende dieses Videos. Wir sehen uns den nächsten. 5. Bilder: Hallo und willkommen zurück. Und in diesem Video werden wir mit Bildern beginnen. also ein Bild zu erstellen, können wir einfach das Geo-Tag verwenden. Und hier müssen wir unsere Quelle schreiben und dann von der Alternative gefolgt. Also diese Alternative ist verwenden, um nur anzuzeigen, dass dieses Bild ist, zum Beispiel, sagen wir, ich habe Kind ein Kind nahm eine Theorie, lassen Sie uns das erste Bild verwenden. Guter. Und in diesem Fall öffnete sich das Bild aus irgendeinem Grund nicht. Die Alternative wird dies als E zuerst sein. Und wenn ich das öffne, können wir das einfach benutzen. Sehen Sie, dass dies die erste Angst ist, da wir die Solarzyklusnummer nicht hinzugefügt haben. Nun, um die Quelle hinzuzufügen, können wir einfach zu unserer Image-Datei gehen. Wir haben diese Bilder und wir werden das Gute benutzen. Bild, geh zurück, erfrischen. Und wie wir sehen können, ist dies das erste Bild. Und Sie können deutlich sehen, dass dieses Bild sehr groß ist und wir es anpassen müssen. Also lassen Sie uns das mit Bootstrap tun. Also zuerst, das ist unsere Quelle. Das ist die Alternative. Lassen Sie uns hier unsere Brille hinzufügen. Also die erste, so werden wir hinzufügen, ist die Bildflüssigkeit. Jetzt geh zurück, erfrischen Sie sich. Und um unser Bild anzupassen, müssen wir es in eine bestimmte Abteilung oder eine bestimmte Form hinzufügen. Und in diesem Fall, um das zu tun, können wir einfach unsere Abteilung hier hinzufügen, def schreiben, all dies bewegen und es der Division hinzufügen. In unserer Abteilung füge ich den Klassencontainer hinzu und gehe jetzt zurück. Und lasst uns erfrischen. Und das ist unser Bild jetzt angepasst. Und das ist nur mit der Division, die wieder, unsere HTML-Datei. Und natürlich die Container-Klasse von Bootstrap. Nehmen wir nun an, ich möchte hier einige Bilder hinzufügen. Also zum Beispiel, ich will drei Bilder. Der erste hier, der zweite, der dritte. Und in diesem Fall muss ich eine Zeile erstellen. Das ist also die erste Reihe. Und dann muss ich einige Spalten erstellen. Dies ist also die erste Spalte, zweite Spalte und die dritte Spalte. Jetzt ist unser Browser normalerweise in 12 Elemente oder 12 Elemente unterteilt. Und in diesem Fall können wir diese 1223 gleiche Elemente teilen, indem wir für jeden verwenden. So wird die erste Spalte Folie nehmen, die zweite nehmen wir Folie, und die dritte wird auch, sie definieren es dafür. Um das zu tun, lassen Sie mich das einfach löschen. Und lassen Sie uns das Rho erschaffen. Und wir können die Rolle erstellen indem wir entweder die Todesfälle erstellen und dann die Klasse Grove schreiben, oder indem wir einfach den Punkt Rho schreiben und dann die Eingabetaste drücken. Und dies wird automatisch eine Division der letzten Zeile erstellen. Jetzt müssen wir die Spalte erstellen, und in diesem Fall erstellen wir die Spalte. Und die erste Spalte wird vier sein. Und dann haben wir auch eine andere Spalte, es tut mir leid, dass ich d Punkt Spalte nach vorne schreiben. Und letztendlich wäre die letzte Komponente auch. Und hier können wir unsere Bilder hinzufügen. Also das erste Bild, das erste Bild wird von Bildern sein und b1 erhalten. Das zweite Bild wird auch von Bildern sein, kommen Sie zu. Und das letzte Bild wird Bilder sein. Und gehen wir zurück und erfrischen wir uns. Und wie wir sehen können, haben wir unsere Bilder, aber sie sind nicht so, wie wir wollen. Also werde ich die Klasse Bild Fluid und die Flüssigkeit hier auch treffen. Und schließlich hinzugefügt, um diese Klasse Bild Flüssigkeit und gehen Sie zurück, aktualisieren. Und wie wir sehen können, haben wir unsere Bilder hier. Das sind also unsere Bilder und sie sind in drei gleiche Seiten unterteilt. Und natürlich, wenn wir sie auf dem Browser als Folie wollen, brauchen wir zwei Jahre Flüssigkeit. Da wir die Bildflüssigkeitsklasse verwendet haben, können wir auch die Behälterflüssigkeit verwenden. Also geh zurück, erfrischen Sie sich. Und wie wir sehen können, sind dies unsere drei Bilder. Nehmen wir an, wir wollen diese quadratischen Kanten nicht. Wir können diese Bilder immer mit den Klassen in Bootstrap anpassen. In unserer Klasse hier kann ich sehen, dass ich möchte, dass dieses Bild abgerundet wird, wenn ich hierher zurückgehe. Und wie Sie feststellen können, dass dieses Bild im Vergleich zu den anderen etwas gerundet ist. Und das ist im Grunde, um Bilder zu erstellen und sie mit Bootstrap auf unserer Website zu platzieren. Natürlich haben wir so viele Elemente oder so viele Eigenschaften, die Sie verwenden können. Aber wir werden sie später erkunden, während wir unsere Websites erstellen. Moment denke ich, dass das für Bilder genug ist. Nun gehen wir zu einer anderen Komponente, die in der Lage ist, und wir werden es im nächsten Video besprechen. So sehen wir uns dann. 6. Tabellen: Hallo und willkommen zurück. In diesem Video werden wir einige Tabellen erstellen. Also zuerst, wie üblich, wo immer wir eine Komponente in HTML erstellen müssen, schreiben wir sie einfach auf und drücken dann die Eingabetaste. Das ist also unser Tisch. In unserem Tisch haben wir, wie wir wissen, den Kopf und den Körper. Also zuerst, lassen Sie uns den Kopf erstellen. Das ist also der D-Hat Tischkopf. Und in unserem Tischkopf brauchen wir einige Überschriften. Nehmen wir an, dass ich eine Tabelle erstellen möchte, die aus einem Vorname, Nachname und E-Mail besteht. Und dazu müssen wir einfach die Überschrift hinzufügen, die erste Überschrift, die der Vorname sein wird. Und dann der zweite, Nachname, schließlich, E-Mail-Adresse. Und natürlich, nach dem Abschluss, lassen Sie einfach zurück. Dies ist unsere FirstName, Nachname E-Mail-Adresse, und sie sehen zu klein aus. Aber vorerst werden wir damit arbeiten. Das ist also der Kopf. Lass uns weitermachen und unseren Kumpel erschaffen. In unserem Körper. Wir müssen unsere erste Reihe erstellen. Und drinnen werde ich wachsen. Dies wird und die ersten Daten, der Vorname wird Mein Name Heidi sein, und dann Uranus, und dann meine E-Mail-Adresse, zum Beispiel 1-2-3 auf gmail.com. Nun, das ist unsere erste Reihe. Dann können wir eine weitere Zeile erstellen. In der zweiten Reihe. Der Vorname wird Markierung sein, und dann wird der Nachname sein, nehmen wir an, Brunnen. Und dann wäre die E-Mail natürlich eins bis zwei auf email.com. Wenn wir nun zu unserem Browser-Refresh zurückkehren, können wir sehen, dass wir gerade eine ganze Tabelle erstellt haben, die aus einem Kopf und Körper besteht. Und in unserem Körper haben wir unsere Daten. Wir hatten also Einheiten, Mark Thornton, und wenn wir hierher zurückgehen, glauben wir, dass wir einige Anpassungen am Stall brauchen, da es nicht ganz schön aussieht. Das erste, was wir tun werden, ist, dieser Tabelle das Attribut oder die Klassentabelle von Bootstrap zu geben . Also Klasse Tabelle, gehen Sie zurück, aktualisieren. Und wie Sie sehen können, gibt es einen großen Unterschied zwischen unserem ersten Tisch und dieser Tabelle. Diese Tabelle ist auf der ganzen Seite und eine besser aussehende Tabelle, und wir haben diese Zeilen. Die erste Zeile ist also ansprechender als die anderen, da diese vielleicht leicht sind, und das ist die Überschrift. Und natürlich sind unsere ersten Elemente am Bolzen und vergleichen sie mit den Daten. Das ist also nur ein einfaches Wort, das sich so sehr verändert hat. Nun, natürlich, wenn wir mit dem Stall nicht zufrieden sind, können wir immer ändern und einige Klassen hier hinzufügen. Also zum Beispiel, wenn ich möchte, dass diese Zeile dunkel ist. Zweite Reihe, um leicht zu sein, kann ich diese einfach in unserer Tabellenklasse hinzufügen. Nehmen wir zum Beispiel an, ich möchte, dass alle Zeilen Info sind. So kann ich Tabelle hinzufügen und zurückgehen, aktualisieren. Wie wir sehen können, wurde der Tisch blau. Jetzt wollen wir das nicht. Wir möchten nur, dass die erste Zeile, zum Beispiel die erste Datenzeile so ist. So können wir hier in der Klasse hinzufügen und wir können erkennen oder Hintergrundfarbe, tut mir leid, farbige NFO, gehen Sie zurück, aktualisieren und Krankheit Hintergrundfarbe. Und es besteht aus einer Reihe, die Farben, in denen die Farbe blau ist. Nun, lassen Sie uns das bewegen und machen es zum Beispiel dunkel. Und wie wir sehen können, wir den Text hier nicht sehen, wenn wir es dunkel machen . Eine Möglichkeit, damit umzugehen, besteht darin, den Text ansprechender oder weißer zu geben. Wir haben die Textfolie und wir können sie hier verwenden. Und dies wird normalerweise mit dem Hintergrund dunkel verwendet, und es gibt eine besser aussehende Taemin. Jetzt können wir auch hier die zweite Tabelle oder die zweite Zeile erstellen, wird eine Hintergrundfarbe Licht sein, und der Text wird dunkel sein. Und das ist das Gegenteil der ersten Reihe. Und es wird schöner aussehen. Und das ist im Grunde für die Farben. Wir haben auch den Streifen wachsen. Und dazu können wir hier einfach die table-striped Klasse verwenden. Anstatt diese Klassen und unsere, innerhalb unserer Zeilen hinzuzufügen , kann ich einfach hier Tabelle hinzufügen. Geh zurück, erfrischen Sie sich. Und wie wir sehen können, ist unser Tisch jetzt gestrichen. Also haben wir die erste wie diese, die zweite, ich schätze, lass mich einfach die dritte Zeile hinzufügen. Dritte Datenzeile, nur um den Unterschied zu sehen. Und das ist es. Und so können wir ein Skript Rho erstellen, wir haben auch die Tabelle dunkel oder table-gestreift. Und während es dunkel ist, fügen wir einfach den Tisch hier dunkel hinzu. So dunkel. Und natürlich, wenn ich jetzt zurückgehe, erfrischen, wie wir gesagt haben, ist es das. Und zur gleichen Zeit, während erkennt als weiß. Jetzt weniger, lassen Sie uns zu den Hover-Doppelreihen gehen. Und in diesem Fall müssen wir hier etwas hinzufügen. Und das ist vorbei. Geh zurück und aktualisiere dich. Sie können sehen, dass es nicht sehr etwas Besonderes ist. Ich dachte jedoch, wenn Sie sich auf die Daten bewegen, wird das nur diesen Effekt geben. Und es ist ein schöner Effekt. Und wir können das Gleiche mit der dunklen Version machen. Geh zurück. Und wie Sie sehen können, haben wir diesen schönen Effekt, wenn wir Mauszeiger über irgendwelche Daten in unserer Tabelle bewegen. Also das ist es für die schrecklichen Reihen. Und jetzt haben wir etwas, das eine aktive Rolle genannt wird. Und das wird normalerweise verwendet, wenn wir das Stroh präzisieren müssen. Zum Beispiel ist die erste Zeile die aktive und wir müssen die zweite verschieben. Dann wechseln oder wechseln wir einfach zwischen dem aktiven innerhalb der ersten zweiten Reihe. Aber hier lernen wir nur die Grundlagen und es gibt tatsächlich eine Klasse, die wir verwenden können. Zum Beispiel in dieser Zeile, wenn wir angeben können, dass dies eine aktive Zeile ist. Nun, wenn wir zurückgehen, aktualisieren, lassen Sie mich es einfach als Tisch setzen, nur Tisch und aktualisieren. Gehen wir zurück, um das Problem zu sehen. Es tut mir leid, die Tabelle in unserer Klasse aktiv hinzuzufügen. Und wenn wir zurück gehen, aktualisieren, und das ist eine aktive Zeile in unserer Tabelle, ist sehr häufig und sehr verwendet. Und normalerweise, wenn Sie eine Website öffnen, zum Beispiel hier, ist dies eine aktive Schaltfläche. Also, wenn ich auf dieses Formular drücke, wird das verschwinden. Und diese Form wäre jetzt aktiv. Und wir haben auch den Hover-Effekt hier. Wie Sie sehen können, so ziemlich, wo, wann immer Sie drücken, gibt es einen Hover-Effekt. Und das sind sehr wichtige und sehr leistungsfähige Tools, die Sie innerhalb Ihrer Website verwenden können. Gehen wir nun zum Tisch ohne Grenzen. Und dazu können wir einfach das aktive von hier entfernen. Und wir können den Tisch randlos benutzen. Und das wird uns einen Tisch ohne Grenzen geben. Also, wenn wir hierher zurückgehen, erfrischen, wie Sie sehen können, haben wir keine Kessel und es ist nicht so gut. Es wird jedoch auf einigen Websites verwendet. Und natürlich, wenn wir wollten, dass es dunkler wird, können wir einfach den Tisch dunkel hinzufügen. Und ich denke, dass das ein bisschen schöner aussehen wird. Jetzt haben wir auch die kleinen Tische. Und dazu können wir einfach die Tabelle hier hinzufügen. Und lasst uns das einfach entfernen. Speichern, aktualisieren. Und das ist unser Tisch. Und es schneidet einfach die gesamte Polsterung in zwei Hälften. Also nur um sicherzustellen, dass Sie den Unterschied verstanden haben. Dies ist die Tabelle wie gewohnt. Und wenn wir Tabellen schreiben und zurückgehen, aktualisieren, das, werden wir ein wenig kleiner, da die Polsterung in zwei Hälften geschnitten wird. Jetzt gehen wir zum Kopf. Also, jetzt ist das unser Kopf. Wir können genau dasselbe tun wie für die Daten. Zum Beispiel können wir das Jahr hinzufügen oder hatte eine Klasse, um anzuzeigen, dass dies die Tabelle ist und leicht sein wird. Natürlich, lassen Sie uns diesen Tisch klein bewegen. Und wie Sie jetzt sehen können, haben wir unsere Überschrift. Und es ist wie jetzt können wir es auch als dunkel machen, natürlich, indem wir einfach hier dunkel hinzufügen. Und das werde ich nicht tun, da es dasselbe ist. Gehen wir nun zur Fußzeile über. Und tatsächlich ist die Fußzeile ein weiteres Element, das nicht so häufig verwendet wird. Es existiert jedoch und wir können es einfach nach dem Körper benutzen. Also, wenn wir die für den Körper fertig sind, können wir einfach den Tischfuß hinzufügen. Und in diesem Tisch Essen, lassen Sie uns etwas versuchen. Also hallo, oder versuchen wir es einfach Fußzeile. So auch die Fußzeile und die Fußzeile. Und jetzt, wenn wir zurückgehen und aktualisieren, werden wir Fußzeile, Fußzeile und Fußzeile erhalten. Nun, endlich, haben wir auch die Untertitel. Wenn wir also eine Tabelle erstellen, benötigen wir höchstwahrscheinlich eine Beschriftung. Und dazu können wir diese Beschriftung einfach direkt vor dem Kopf hinzufügen. So können wir Etag anhängen, die Beschriftung und alle Benutzer genannt wird. Dies ist also die Tabelle aller Benutzer. Und es wird hell gemacht erscheinen. Ich denke, das reicht für Tische. Dies sind die Grundlagen, die Sie wissen müssen, wann immer wir eine Tabelle und HTML mit Bootstrap erstellen möchten. Und damit das gesagt wird, ist dies das Ende dieses Videos. Wir sehen uns im nächsten. 7. Formulare: Hallo und willkommen zurück. Und in diesem Video werden wir Formularsteuerelemente diskutieren. Also lassen Sie mich fortfahren und das löschen. Um zu beginnen, werden wir mit einer Eingabe und einem Textbereich beginnen , in dem der Benutzer etwas eingeben kann. Wenn wir zum Beispiel eine Eingabe erstellen wollen, ist es sinnvoll, mit einer Division zu beginnen. Sobald wir unsere Division erstellt haben, können wir unseren Input erstellen und es wird zum Beispiel vom Typ II gemacht werden. Und wir werden ihm eine Klasse von Formularsteuerung geben. Und dann lassen Sie uns einfach den Platzhalter geben Sie Ihre E-Mail hier ein. Und danach, lass mich das hier aufmachen. Und wie wir sehen können, ist dies unser Input. Nun wollen wir nicht wirklich, dass unsere Eingabe oben auf der Seite steht. Vielleicht wollen wir ein bisschen Platz. Um dies zu tun, können wir einfach eine der Klassen verwenden, die mit dem Padding und in Bootstrap zusammenhängen. Also haben wir mehrere. Einmal, zum Beispiel, wenn wir eine Polsterung am Rand wollen, tut mir leid, eine Marge an der Spitze. Wir können einfach den MD verwenden und die Länge angeben. Zum Beispiel wollte ich hier fünf Pixel sein. Wenn ich wieder drei sein wollte, tippen Sie einfach drei. Dies ist vier Rand, oben, Rand, unten MB. Und dann haben wir eine Axt für die X-Achse und natürlich y für die Y-Achse. So X-Achse bedeutet, dass es uns eine Marge von der letzten und getrockneten geben wird. Und y-Achse bedeutet, dass es uns den Rand von oben Taste geben wird. Und wir können zum Beispiel auch angeben, dass die gesamte Marge drei sein sollte. Und wenn ich jetzt zurückgehe, erfrische, können wir sehen, dass wir drei von hier und drei von hier und auch drei von hier haben. Und wenn wir etwas nach dieser Eingabe einfügen, werden wir hier eine weitere Polsterung bekommen. Und das ist im Grunde für die Eingabe, wird es später ändern, aber jetzt lassen Sie mich einfach die andere Division erstellen. Und dann diese Division, wir werden eine Marge haben, auch drei. Und natürlich müssen wir einen Textbereich erstellen. Der Name dieses Textbereichs wird also ein Beispiel sein. Ich will vorerst keinen Ausweis. Spalte scrollen wir, okay, und jetzt lasst uns überprüfen, was wir haben. Das sind unsere Angriffe bis jetzt. Wir können hier etwas versuchen. Zum Beispiel hat P Recht, und wenn wir es retten, können wir sehen, dass wir hier Bienen haben. Wenn wir jedoch etwas schreiben wollen, können wir es entweder hinzufügen oder einfach gelöscht und von Anfang an. Und natürlich ist es nicht gut aussehend, also müssen wir es ein wenig ändern. Jetzt gehen wir zurück. Und mal sehen, was können wir tun? Das erste, was wir tun werden, ist, hier eine Klasse von Bootstrap hinzuzufügen, und es ist das gleiche wie zuvor, was ein Formular-Steuerelement wäre. Da wir gehen, verwenden wir ein Formular, wie es sinnvoll ist, Standard-Controller-Klasse zu verwenden. Wenn ich hier zurück gehe und wir sehen können, dass wir einen Textbereich den ganzen Weg auf dem ganzen Browser haben. Und das Gleiche für den Eingabebereich. Jetzt können wir sehen, dass der Benutzer möglicherweise nicht verstehen, was wir zu sagen versuchen. So können wir hier zum Beispiel einfach ein Label für die E-Mail und natürlich ein weiteres Label für den Textbereich hinzufügen . Eine Möglichkeit, dies zu tun, besteht darin, einfach ein Label vor der Eingabe hinzuzufügen. Und dieses Etikett wird die Folie haben, diese spezifische. Und lassen Sie mich hier einfach eine ID hinzufügen. Und es wird gleich Eingang sein. Und das ist für die Eingabe. Und natürlich wird die Klasse auch für Label sein. Dann werden wir hier etwas schreiben, zum Beispiel E-Mail-Adresse. Und natürlich, nachdem ich von hier fertig bin, kann ich das einfach entfernen. Oder wir können 1-2-3 auf example.com eingeben. Und das würde den Benutzer besser verstehen, was hier vor sich geht. Also zuerst hatten wir die E-Mail-Adresse und wir haben auch das Beispiel hier. Jetzt gehen wir zurück. Und wie wir sehen können, müssen wir erkennen Bereich anpassen. Eine Möglichkeit, dies zu tun, besteht darin, auch das Label hinzuzufügen. Diese Beschriftung wird für den Textbereich verwendet. Und natürlich wird die Klasse ein ausländisches Etikett wie zuvor sein. Und das ist Textbereich. Und natürlich, nachdem Sie von hier fertig sind, löschen Sie das einfach und aktualisieren Sie es. Und wie Sie sehen können, haben wir unsere E-Mail-Adresse und unseren Textbereich. Nun, wenn wir zum Beispiel feststellen, dass wir hier so viele Leerzeichen haben, können wir einfach unsere Marge ändern. Zum Beispiel, hier sagen wir, dass wir wollen, dass wir haben eine E-Mail-Adresse und dann gefolgt von dieser. Und natürlich, gefolgt von dem Textbereich mit dem Textbereichsfeld. Nun zum Beispiel könnten wir hier die Margin-bottom anpassen, tut mir leid, die Marge auf Margin-bottom. Also, wenn ich so etwas mache und wir wieder aktualisieren, können wir sehen, dass wir die E-Mail-Adresse oben auf der Seite haben. Und natürlich, die E-Mail, wo wir unsere E-Mail einfügen können. Und natürlich, wenn wir hier die Eingabetaste drücken, wird nichts passieren, da wir nichts oder eine Aktion hinzugefügt haben , die aus der Eingabe oder Übermittlung unserer Daten resultieren könnte. Vorerst ist dies unsere E-Mail-Adresse und der Textbereich. Jetzt haben wir auch die Dimensionierung. Also haben wir die Dimensionierung von Klassen wie. Formular-Steuerelement und gibt dann eine angegebene entscheiden. Also, zum Beispiel, diese Größe, lassen Sie mich einfach hier ändern. Ich kann zu unserem Eingang gehen und innerhalb unserer Eingabe und innerhalb unserer Klasse können wir Formularsteuerung hinzufügen. Und dann gefolgt von LG. Und das bedeutet Schlamm. Geh zurück, erfrischen Sie sich. Wir können sehen, dass entscheidet ein bisschen größer geworden. Und wir haben drei Klassen, die LG und die Standard, und die kleine SM. Jetzt können wir auch das deaktivierte Attribut hinzufügen, und dies ist ein boolesches Attribut. Also zum Beispiel, wenn wir etwas haben, das wir nicht für den Benutzer zeigen, da er möglicherweise nicht eingeloggt ist. Und wir können das mit der deaktivierten Schaltfläche tun. So kann ich zum Beispiel zu unserem Input zurückkehren. Und in unserer Eingabe füge ich einfach die Deaktivierten hier hinzu. Geh zurück, erfrischen Sie sich. Und sorry, lassen Sie mich einfach und natürlich haben wir es hier nicht hinzugefügt, also lassen Sie es mich hinzufügen. Also haben wir deaktiviert. Und natürlich gehen Sie zurück, erfrischen Sie sich. Wie wir sehen können, haben wir diese graue E-Mail-Adresse. Wir können init eingeben oder sogar etwas von hier löschen. Hier drüben können wir einfach hinzufügen. In Ordnung, jetzt gehen wir zurück zu unserem Code und reden wir über Passwort und Bestätigung der Identität. Also zuerst haben wir unsere Abteilung. Lassen Sie mich einfach alles löschen und erstellen Sie unser Formular. Und in dieser Form gehen wir natürlich ohne Aktion, da wir es nicht gelernt haben. Und jetzt haben wir unsere Klasse. Und dann haben wir in unserer Klasse. Lassen Sie uns die Reihe und natürlich g drei verwenden. Und dann lassen Sie uns unseren Mangel erstellen und das ist Spalte, lassen Sie mich ihm das Attribut Auto geben. Dann werden wir unsere Arbeit schaffen. Dieses Etikett wird also für E-Mails verwendet. E-Mail, und dann natürlich, unsere Eingabetyp, können wir angeben, dass es E-Mail oder Text sein kann, spielt keine Rolle. Und dann nach dem Typ können wir die Klasse, das Forum-Steuerelement und natürlich den Klartext hinzufügen . Der Platzhalter wird per E-Mail an example.com gesendet. Dies ist aufgeschoben. Erste Division. Die zweite Division wird auch die Glasinsel Auto haben und wir haben das Etikett für dieses Label, es wird für das Passwort sein, also schreibe ich einfach Pass, und dann wird die Klasse visuell versteckt. Dies ist also die Klasse, die wir verwenden, wenn wir ein Passwort erstellen möchten. Und wir werden sehen, was wir in einem Moment tun werden. Dies ist also die beschriftete Eingabe. Ich, natürlich, Passwort, um die Eingabe zu verstecken. Und dann wird die Klasse zur Kontrolle sein, gefolgt von der ID, die die Vergangenheit sein wird, die wir das Label vorher gegeben haben. Und natürlich wird der Platzhalter Passwort sein. Und dann hier müssen wir nur ID Email eingeben. Das ist also unsere zweite Division. Und in der letzten Abteilung werden wir unsere Schaltfläche erstellen, um nur diese Daten an unseren Server zu geben. Also, wie machen wir das? Wir erstellen einfach unsere, natürlich, die Klasse wird automatisch wie zuvor sein. Und innerhalb dieser Abteilung werden wir einfach den Button erstellen. Die Schaltfläche wird Konformation der Identität sein und der Typ wird Senden sein. Und dann die Klasse, wir werden ihm einige Klassen geben. Aber jetzt, lassen Sie mich das einfach auffrischen. Und wie Sie sehen können, haben wir hier die E-Mail, E-Mail an example.com. Dann haben wir das Passwort Bestätigung der Identität. Und wie wir hier sehen können, diese Bestätigung einer Identität kein Eis aus. Wir werden es ändern, aber mit Bootstrap. Nun, dies ist eine E-Mail unter example.com. Lassen Sie mich nur lesen. Das hier. Sieht eigentlich nicht gut aus. Also lassen Sie mich einfach anständig oder wir können das optisch versteckte hier auch verwenden. So können wir einfach visuell hinzufügen und dann zurück gehen. Und mal sehen. Wir haben visuell getan. Und wie wir sehen können, ist es nicht mehr hier. Wenn wir nun zu unserem Code zurückkehren, können wir sehen, dass wir diesen Knopf anpassen müssen. Also haben wir hier mehrere Klassen. Eine der wichtigsten Klassen ist DBT, und das zeigt an, dass dies eine Schaltfläche hat. Ich gehe jetzt zurück, lass uns den Unterschied sehen. Und es sieht sehr, sehr anders aus als vorher hatten wir diese Grenzen und die Strömung war nicht schön. Und jetzt, wie Sie sehen können, sieht es modern und viel schöner aus. Dies ist also das erste Beispiel oder die erste Klasse, die wir verwenden werden. Natürlich können wir den Hintergrund wählen, so dass die Schaltfläche für jetzt primär sein wird. Und natürlich, Marge, unten drei, gehen Sie zurück, aktualisieren. So können wir sehen, dass wir jetzt unseren Knopf haben. Und natürlich, wenn wir das anpassen wollen, können wir einfach zu unserem Formular hier die gerandeten drei hinzufügen und zurückgehen, aktualisieren. Und wir haben jetzt unsere Marge. Das ist es also für das Passwort und die Bestätigung der Identitätsschaltfläche. Sie können immer alles ändern, was Sie wollen, wenn Sie die Farbe nicht mögen oder wenn Sie die Größe ändern möchten, alles, was Sie zu bootstrap.com gehen und jedes Element überprüfen können und Sie werden eine detaillierte Beschreibung jedes einzelnen Elements in dort. Und natürlich, zum Beispiel, lassen Sie mich einfach damit beenden. Wir können diese Schaltfläche ändern, um dunkel zu sein. Und ich denke, es sieht jetzt besser aus mit weiß und dunkel wie Farben. Und das ist es für dieses Video. Und das nächste Video, werden wir unsere Diskussion über Foren fortsetzen. Und wir werden einige neue Formulare vorstellen , die wir verwenden können, und sie werden häufig unter Websites verwendet. So sehen wir uns dann. 8. Formulare 2: Lassen Sie uns nun über Dateieingabe sprechen. Wann immer Sie etwas sehen oder ausgerichtet, zum Beispiel, und innerhalb dieser Zeile haben wir das Attribut select file. Dies ist in der Regel eine Dateieingabe. Lassen Sie uns nun einen von ihnen erstellen, nur um die Verwendung dieser Dateieingaben zu demonstrieren. So zum Beispiel, das erste, was wir tun werden, ist, unsere Teilung zu schaffen. In dieser Abteilung gebe ich ihm eine Klasse von Güterstrauch. Und diese Klasse wäre natürlich die Marge, nur um ihm einen gewissen Spielraum aus allen Blickwinkeln zu geben, dann haben wir unsere Arbeit und so wäre das Etikett aus der Datei. Die Klasse wird wie gewohnt beschriftet gebildet. Und dann haben wir auch das Label hier können wir hinzufügen, zum Beispiel, Datei. Aber nach dem Etikett können wir unsere Eingabe hinzufügen. Die Eingabe wird also vom Typ Datei sein. Das Glas wäre fremde Kontrolle, gefolgt von der ID, nur um es für das Etikett zu machen. Und das ist auch aus der Akte. Jetzt gehen wir zurück und erfrischen uns. Und wie wir sehen können, ist dies unser Label und das ist unsere Choose-Datei. Immer wenn ich darauf drücke, kann ich auf meinen Desktop gehen, Dokumente, Downloads und so weiter. Wählen Sie eine beliebige Datei von hier aus und hochgeladen. Nun, lassen Sie uns den Unterschied zwischen diesem und dem Label ohne diesen HTML an diesem Bootstrap sehen. Wie wir sehen können, sieht es nicht schick aus, es ist nicht so modern. Wenn wir jedoch dieses Klassenformular-Steuerelement hinzugefügt haben, denke ich, dass wir zustimmen können, dass es viel besser aussieht. Nun, das ist nicht für die Dateieingabe. Wir haben auch einige andere Attribute, die wir hinzufügen können, zum Beispiel, die mehrere Eingaben. Wir können mehrere Dateien gleichzeitig hinzufügen. Und wir haben auch die deaktiviert, die kleine, kleine und große Dateieingabe. Wir können entweder dies ist die Standardgröße, wir können es kleiner oder größer machen. Ich werde mich nicht all das ansehen, seit wir sie vorher nummeriert haben. Sie können jedoch immer zu Bootstrap gehen und nach ihnen suchen. Irgendwas hier, irgendwo hier. Und ich denke, dass dies die Grundlagen sind. Und wir brauchen nur die Grundlagen, um unsere Websites zu machen, wenn Sie wollen, wenn Sie tiefer in sie graben wollen, können Sie immer zu Bootstrap gehen. Aber vorerst ist dies unsere Dateieingabe. Und lasst uns zu einem anderen Thema gehen, und das ist der Farbwähler. Und hier haben wir etwas, das eigentlich der Farbwähler genannt wird. Und in diesem Fall erstellen wir eine absichtliche wird die Ecke für die Farben sein, zum Beispiel für Spalte. Und Klasse wird wie üblich für Arbeit und eine Farbe sein. Und dann gefolgt von der tatsächlichen Eingabe. Und in diesem Fall haben wir die Eingabe vom Typ. Hallo, Klasse zur Kontrolle. Und lass mich einfach löschen und mal sehen, was los ist. Also, wenn ich die Klasse lösche, gehe zurück, aktualisiere. Dies ist unser Farbwähler FE, und drücken Sie darauf. Es wird uns alle Ecken geben, die für uns zur Verfügung stehen. Das ist der RGB. Wir können von hier wählen, die Zahlen ändern, oder wählen Sie aus hier. Und vom Bildschirm. Es sieht jedoch nicht schön aus. Eine Möglichkeit, dies anzupassen, besteht darin, die formulargesteuerte Klasse hinzuzufügen, gefolgt von der fremden Steuerfarbe. Geh zurück, erfrischen Sie sich. Und wie wir sehen können, haben wir das schönere Aussehen, sieht besser aus. Und es wird die gleiche Arbeit wie zuvor erledigen. Aber vielleicht wollen wir diese Farbe Schwarz nicht als Standard. Wie können wir das ändern? Eine Möglichkeit, dies zu tun, besteht darin, zur Eingabe zurückzukehren. Und in der Eingabe haben wir etwas, lassen Sie mich einfach die Idee für Darm hinzufügen eher. Und dann haben wir etwas, das man einen Wert nennt. Und innerhalb dieses Wertes können wir eine beliebige Zahl oder eine beliebige Farbe wählen, um die Standardfarbe zu sein. Also, wie wählen Sie die Art von können wir zurück zu der Farbe und Bootstrap die Idee jeder Farbe, die wir wollen wählen. Also nehmen wir an, ich will diese Farbe. Ich kann es einfach kopieren, zurück gehen, rechts, Hashtag, diese Farbe, und dann zurück zu unserer Website gehen, aktualisieren. Und da gehen wir. Wir haben unsere blaue Standardfarbe. Das ist also im Grunde für die Farbe. Lassen Sie uns jetzt über die Datenlisten sprechen. In diesem Fall erlauben Datenlisten uns also, eine Gruppe von Optionen zu erstellen die innerhalb einer Eingabe zugegriffen und automatisch abgeschlossen werden kann. Eigentlich ähneln sie den ausgewählten Elementen, kommen aber mit mehr Menü-Styling, Einschränkungen und Differenzen, und wir werden sie jetzt erkunden. Also das erste, was wir tun müssen, um diese Art von Liste zu erstellen um das Etikett zu erstellen und das Etikett wird wie üblich sein. Also d4 ist, wird die Datenliste sein, dann die Klasse für Label. Und natürlich ist dies eine Datenliste. Und dann gefolgt von der tatsächlichen Eingabe des Typs. Wir können den Typ tatsächlich ignorieren. Und wir werden die Klasse für die Kontrolle erstellen. Dann gefolgt von der ID zu sein Datenliste, dann der Platzhaltertyp, der überspannt werden soll. Und natürlich, um diese Idee zu erstellen, müssen wir die Liste, Daten, Listenoptionen haben. Und in diesem Fall, wenn wir so etwas tun, wenn wir gehen und aktualisieren, ist dies unsere Datenliste. Und hier können wir nach jedem suchen, alles, was wir wollen. Nun werden die Optionen nach der Eingabe sein. Wir können unsere Datenliste erstellen. Und in dieser Datenliste, Datenliste. Lassen Sie mich einfach so kreieren. Und die Idee wäre Datenlistenoptionen, wie wir bereits gesagt haben. Und dann lass uns aufmachen. Die erste Option wird also von Wert sein. Sagen wir, teilen Sie den Libanon als Ägypten. Lasst uns Vereinigte Staaten schreiben. Und schließlich Indien. Jetzt gehen wir zurück, erfrischen wir uns. Und ich denke, wir haben hier Probleme. Das ist also Datenlisten Option, Datenlistenoptionen. Lassen Sie uns einfach Klicks hier verschieben, speichern, zurückgehen, aktualisieren, drücken Sie hier. Und wir haben unsere Möglichkeiten hier, Libanon, Ägypten, USA. Und wir können aus ihnen wählen. Oder wir können unser eigenes eingeben, zum Beispiel Dubai. Und es wird richtig funktionieren, aber das sind einige Optionen. Vielleicht möchten Sie sie zu den einzigen Optionen machen, es liegt ganz an Ihnen. Und das wird später kommen. Wann immer wir JavaScript verwenden oder wann immer wir mit unserer Website fertig sind. Und das ist nicht im Grunde für die Datenliste, sehr einfaches Thema, aber es ist auch sehr mächtig und es gibt uns ein wenig, oder es macht die Website ein wenig schöner, da der Benutzer es tatsächlich sehen kann, dass er einige Optionen hat oder er kann Wählen Sie aus etwas. Und es ist nicht nur, dass er nur schreiben kann, wenn. Und das ist es im Grunde für dieses Video. Aber das wird gesagt: Wir sehen uns im nächsten. 9. Schecks und Radios: Lassen Sie uns nun über die Auswahl sprechen. Und dies ist eine benutzerdefinierte Auswahl, die in HTML verwendet werden kann. Allerdings haben wir einige Klassen, die wir ändern oder net können wir unsere ausgewählten hinzufügen. Das erste, was wir tun werden, ist, zu unserem Code zurückzukehren, all dies zu löschen und dann von Grund auf neu zu beginnen. Das erste, was ist, die Auswahl und ohne Namen oder ID zu erstellen. Und ich kann einfach sagen, dass die Klasse ausländische Kontrolle sein sollte. Und fangen wir mit unseren Optionen an. Die erste Option wird also sein, wie üblich, Option Nummer eins wäre eins, und hier können wir es trocknen. Libanon, Option, Ihnen zwei Vereinigte Staaten zu kaufen. Dann gefolgt von Wert drei, Ägypten. Und dann sind das unsere Werte, die sie gerade vorangetrieben haben. Und natürlich können wir hier den Bereich LeBron hinzufügen, und es wird die Standardauswahl Beispiele sein. Dies ist also das Standard-Select-Beispiel. Und natürlich, wenn ich hier oben zurück gehe, und wir haben DS3-Entscheidungen. Nun, zum Beispiel, wollen wir nicht, dass der Libanon im ersten erscheint. Möglicherweise fügen wir die Option hinzu und sie wird ausgewählt. Und der Wert wird ohne jemanden sein, wir geben hier keinen Wert. Und natürlich wäre die Option geöffnet, um aus Aktualisieren auszuwählen. Öffnen Sie dies, um aus arpanet zu wählen. Wir haben alle diese für uns zur Verfügung. Ich kann die USA, Ägypten und den Libanon wählen. Hier ist es jedoch anders als zuvor. Wir können alles hier versuchen. Dies sind also die einzigen Optionen, die uns zur Verfügung stehen, und wir müssen eine von ihnen wählen. Dies ist also im Grunde für den Standard. Jetzt können wir auch die Größe wählen, indem wir einfach die Größe hier hinzufügen. So haben wir das Formular auswählen, können Formular wählen Mittagessen hinzufügen. Und wenn ich zurückgehe, aktualisiere, wie wir sehen können, wurde diese Auswahl größer. Und es sieht klar aus. Jetzt können wir auch wählen, die und diese Abel. Und das ist das Attribut, das wir zuvor hinzugefügt haben, und es ist ein boolescher Wert, also können wir es einfach hier hinzufügen. Also diese Mitarbeiter gehen zurück, aktualisieren und wir können daraus wählen. Und es ist sehr genutzte und gängige Websites, vor allem, wenn Sie nicht eingeloggt sind und Sie nichts auswählen oder ändern können. Und diese deaktivierte Schaltfläche, deaktiviertes Attribut ermöglicht es der Website oder dem Ersteller, sicherzustellen, dass Sie angemeldet sind, um dies zu tun, oder Sie können es tun. Das ist also im Grunde für die Auswahl. Jetzt reden wir über Schecks und Radios. Also lassen Sie uns voran und löschen Sie dies und erstellen Sie unseren Scheck. Um das zu tun, können wir einfach unsere Division erstellen und werden für Schock innerhalb unserer Division sein, wir werden unsere Input schaffen. Der Typ dieser Eingabe wird also ein Kontrollkästchen sein. Und natürlich wird die Klasse für Jack und Putt sein. Und dann die Idee, sagen wir, dass dies ein Scheck ist, gefolgt von der beschrifteten Klasse. Also hier müssen wir den Scheck hinzufügen und dann wird die Klasse vor dem Scheck beschriftet sein. Das ist also unsere erste Division von Go. Und aktualisieren Sie diese Seite. Wir können sehen, dass wir diese Teilung hier haben. Allerdings haben wir nichts im Inneren sind beschriftet. Also lassen Sie mich einfach hier hinzufügen. Überprüfe mich, erfrischen. Wir haben mich überprüft. Ich kann es überprüfen oder deaktivieren und es wird gut funktionieren. Nun, manchmal wollen wir nicht, dass diese Standardschaltfläche hier nicht deaktiviert ist. Wir mussten es sein. Eine Möglichkeit, dies zu tun, besteht darin, für den Browser zu überprüfen oder zu sagen, dass diese Schaltfläche aktiviert ist. Also lassen Sie mich das einfach kopieren und es hier einfügen. Wie machst du das? Wir können einfach zu unserer Eingabe gehen und fügen Sie das Wort überprüft, aktualisieren. Wir haben also eine Schaltfläche, die nicht aktiviert ist und das andere Kontrollkästchen aktiviert ist. Und Sie können immer zwischen ihnen wechseln oder wählen oder beide aktivieren, da sie Kontrollkästchen sind. Jetzt haben wir auch etwas, das als Zwischenprodukt bezeichnet wird, und es kommt als die horizontale Linie. Also lassen Sie mich hier zurück. Und wir können es nicht aus HTML oder Bootstrap erstellen. Es muss mit JavaScript erstellt werden und ist in HTML-Attributen nicht verfügbar. Nun, schließlich können wir unsere deaktivierte Schaltfläche oder deaktivierte Überprüfung zum Beispiel erstellen, hier, anstatt überprüft, kann ich einfach deaktiviert schreiben, zurückgehen, aktualisieren. Und wie Sie sehen können, kann ich diesen Knopf nicht überprüfen. Ich glaube, ich kann allein den Schwan überprüfen. Dies ist deaktiviert. Gehen wir jetzt zum Radius. Und in diesem Fall, lassen Sie mich das einfach löschen, beginnen Sie erneut. Das Formular wird also vier sein. Überprüfen Sie. Der Eingang wird vom Typ Radio sein. Die Klasse wird für Shack-Eingabe sein. Und dann gefolgt von einer Idee. Zum Beispiel ist dies ein Radio. Und dann wird der Name im Radio sein. Und dann nach der Eingabe müssen wir unser Label erstellen. Also für Radio, und dann wird die Klasse gebildet. Überprüfen und beschriften. Natürlich können wir innerhalb unseres Labels alles erstellen oder eingeben. Also für jetzt werde ich Radio tippen, und wie wir sehen können, haben wir diesen Funkeingang. Jetzt können wir es auch eingeben oder tun es als Jack einfach durch Hinzufügen der hier geprüften. Gehen Sie zurück, aktualisieren Sie, und es ist bereits überprüft. Wir können es auch als Standard oder als deaktiviert verwenden. Aber das werde ich nicht tun. Sie können dieses Wort einfach mit deaktiviert ändern und gut funktionieren. Jetzt haben wir etwas, das sehr beliebt und sehr in Websites verwendet wird. Und das wird ein Schalter genannt. Also habe ich gewechselt hat bemerkenswerte benutzerdefinierte Checkbox, verwendet aber die Form gewechselt Klasse zwei Mixer oder einen Kippschalter. Um das zu tun, werden wir bleiben und diese taub. Aber lassen Sie mich das anpassen, was wir vorher hatten. Und wir haben auch verformt Schalter. Also jetzt haben wir die beiden Formen. Lassen Sie mich löschen und sah das Gunk von D. Und die Eingabe wird der Typ sein, wird ein Kontrollkästchen sein. Dann haben wir die Klasse zum Scheck. Und dann, gefolgt von der Idee oder nicht, lassen Sie mich einfach unser Etikett in unser Etikett füttern. Wir werden tippen. Lassen Sie mich das einfach machen. Und die Klasse wird gleich vier Check-Label sein, gefolgt von dem tatsächlichen Text hier. Das ist also switch, checkbox und put. Und wenn ich hierher zurückgehe, aktualisieren, Wir haben diese Checkbox und wechseln zwischen ein und aus. Und wir können das Gleiche damit machen, wie wir es vorher getan haben. Wir können es deaktivieren, wir können eine als Standard überprüft machen oder wir können es deaktivieren, während es überprüft wird. Das ist also nicht im Grunde für diese Muster und ich denke, dass das jetzt genug ist. Lassen Sie mich einfach eine Sache hinzufügen, die die aufgeklärten Kontrollkästchen sind. Also, wenn ich zum Beispiel nicht möchte, dass sie sich auf der horizontalen oder auf der gleichen Spalte befinden. Ich will, dass sie in der gleichen Reihe sind. Zum Beispiel, lassen Sie mich hier einige Kontrollkästchen hinzufügen. Also der erste wird die Division von vier sein, überprüfen Sie, überprüfen Sie erleuchtet. Und das erleuchtet wird die Kontrollkästchen in der gleichen Zeile machen. Die Eingabe wird also vom Typ Checkbox sein. Die Klasse wird für Steuereingabe sein. Und dann gefolgt von dem Wert, diesem Namen und Option eins. Und natürlich wird das Label von Klasse sein. Diese Klasse wird vier Schecks beschriftet sein. Und natürlich ist dies die Option. Und lassen Sie mich das noch zwei Mal kopieren und einfügen. Das ist also Option zwei. Und der Wert hier wird auch zwei und hier drei und auch drei sein. Und wenn ich jetzt zurückgehe, aktualisiere, wie wir sehen können, sind sie alle in der gleichen Zeile, da wir das Formular-Steuerelement oder den ausländischen Check in Zeile verwenden. Und ich kann jede dieser Eingaben ankreuzen. Gehen wir nun zu den Kontrollkästchen-Toggle Buttons. Und in diesem Fall, lassen Sie mich das einfach löschen. Und lassen Sie uns unsere Checkbox-Schaltfläche erstellen. Also das erste, was wir tun werden, ist, das Kontrollkästchen zu erstellen und die Klasse wird btn check sein. Lassen Sie uns die gleiche Idee geben und dann TLB automatisch abschließen. Danach können wir einfach auf die nächste Zeile zurückgehen und unser Label erstellen. Die Klasse wird wie üblich sein, btn, BTN primär zum ersten Mal. Dann geh zurück und lass es uns nennen. Schaltfläche prüfen. Geh zurück, erfrischen. Und wie wir sehen können, haben wir diesen Knopf und es ist eine primäre Taste. Nun, wenn ich wollte, dass es überprüft wird, kann ich einfach das checkte Attribut hier verwenden. Wie Sie hier sehen können, kann ich zurückgehen, aktualisieren und wird jetzt überprüft. Wenn ich darauf klicke, wird nichts passieren, da wir nicht am Ende etwas hinzufügen, um jetzt. Und das ist im Grunde für die Tasten. Wir können sie immer befähigt, alle, überprüft sie, wie wir wollen. So können wir, wir können dies entfernen, dass hier deaktiviert und gehen Sie zurück aktualisieren. So können wir sehen, dies ist eine deaktivierte Schaltfläche. Und schließlich haben wir den Umrissstil. Und das wird normalerweise verwendet, um Dinge zu vereinfachen. Also zum Beispiel, wenn dies der Button ist und wir sind nicht zufrieden mit dem Stil dieser Schaltfläche. Wir sind nicht zufrieden mit der Hintergrundfarbe. Vielleicht möchten wir es entfernen. Wir können diesen Umriss einfach verwenden. Und in diesem Fall für das Label kann ich einfach den BTM-Umriss primär verwenden. Jetzt gehen wir zurück und erfrischen uns. Und wie wir sehen können, könnte es in einigen Sonderfällen schöner aussehen. Das ist es also für die Schecks und den Radius. Davon abgesehen, das ist das Ende dieses Videos. Wir sehen uns im nächsten. 10. Range und Input: Jetzt reden wir über Reichweite. Und zuerst, lassen Sie mich einfach löschen und erstellen Sie unsere Arbeit. So wird dieses Kabel nach dem Bereich suchen. Die Klasse wäre wie üblich für beschriftet. Und das ist eine Reihe. Natürlich müssen wir die Eingabe von Typvenen erstellen. Wir haben auch die Klasse für Reichweite. Und lassen Sie mich ihm auch die Idee der Reichweite geben. Gehen wir zurück und aktualisieren Sie die, wie wir sehen können, wir haben jetzt unser Sortiment, so können wir es hin und her bewegen , wie wir sehen können und setzen Sie es, wo immer wir wollen. Und das haben wir seltsam. Jetzt können wir es immer ändern. Wir können entweder einige Zeilen erstellen, also ist dies die Zeile und teilen Sie die Seite in zwei verschiedene Spalten und machen ihren Zoll kleiner, zum Beispiel. Oder erstellen Sie eine Teilung in der Mitte der Baustelle und legen Sie diese Seite in diese Abteilung und damit sie besser und intelligenter aussieht. Denn dies ist kein sehr gut aussehender Bereich. Es hat jedoch alle Eigenschaften, die wir brauchen. Jetzt können wir immer das deaktivierte Attribut hinzufügen. Wir können ein Minimum und das Maximum hinzufügen. Und ich ermutige Sie, sie selbst auszuprobieren. Und natürlich sind sie alle auf der Bootstrap-Website verfügbar. Nun gehen wir zu einer anderen sehr wichtigen Form, die die Eingabegruppe ist. Und um das zu tun, lassen Sie mich das einfach löschen und unsere Abteilung erstellen. Und in unserer Abteilung geben wir ihm die Klasse. Diese Klasse wäre die Eingabegruppe, und ich werde den Rand auf allen Seiten hinzufügen. Innerhalb dieser Klasse werden wir unser Erweiterungselement in diesem Band haben. Ich schreibe einfach die Anzeige, um anzuzeigen, dass dies ein Benutzername ist. Und natürlich wäre die Klasse Eingabetext. Und wie wir jetzt sehen können, wenn ich zurückgehe und unsere Seite aktualisiere, werden wir das bei Symbol und den Speichen bekommen. Und wie wir sehen können, ist dies unsere Spaltung. Wir haben die Spannweite geschaffen. Jetzt müssen wir unsere Eingabe erstellen, wo der Benutzer eingeben kann, hat ausgesprochen. In diesem Fall werden wir die Eingabe vom Typ Text erstellen. Deklarationen werden wie üblich für die Steuerung sein, und der Platzhalter wird im Benutzernamen sein. Und natürlich können Sie danach alles hinzufügen, was Sie wollen, aber wir werden dies nur für jetzt verwenden. Und wie wir sehen können, ist dies unser Anzeigenbenutzer. Wir können hier schreiben, was wir wollen. Und natürlich können wir einen Button oder so etwas hinzufügen , nur um anzuzeigen, dass wir einreichen möchten. Oder vielleicht haben wir ein Formular. Also, wenn wir mehrere Elemente haben, müssen wir nur füllen sie alle und klicken Sie dann auf Absenden, um unsere Informationen alle auf einmal zu übermitteln. Also das ist es für den Benutzernamen. Zum Beispiel, wenn wir diese E-Mail hinzufügen möchten, können wir die Spanne verwenden, zum Beispiel unten hier. Und natürlich kann ich example.com hinzufügen, um anzuzeigen, dass dies das Ende ist. Und wenn ich das noch einmal versuche, haben wir hier Benutzernamen und example.com. Und Sie möchten vielleicht nur die Breite oder die Länge davon verringern. Da es sehr lang ist, ist es auf dem ganzen Bild auf der Website. Sie können einfach eine Abteilung erstellen und vielleicht nur die Hälfte der Seite oder in der Mitte der Seite oder so weiter. Das ist also im Grunde für die E-Mail. Nehmen wir an, wir sind uns nicht sicher über die example.com. In diesem Fall können wir eine weitere Eingabe nach dieser Spanne hinzufügen und wir können es wie zuvor angeben. Also lassen Sie mich das einfach verschieben und einfügen. Und natürlich können wir den Platzhalter ändern, um example.com hinzuzufügen, zurückgehen und aktualisieren. Und wie wir sehen können, haben wir jetzt unsere neue Division oder unseren neuen Input. In diesem Fall können wir unseren Benutzernamen hier schreiben unter, und natürlich, die example.com, wir müssen es in alles ändern, was wir haben. Nun, eine weitere Sache hinzuzufügen, zum Beispiel, wenn wir wollen, um dies und setzen besser aussehen, können wir immer die Eingabe-Gruppe klein oder Eingang zu Gruppe große Lebensmittel, ein größerer Eingang. So Eingabegruppen klein. Jetzt gehen Sie zurück, aktualisieren, und wie Sie sehen können, wurde es kleiner. Und natürlich wird das LG größer sein. Und wie wir sehen können, ist dies jetzt unser Input. Jetzt können wir auch die Checkboxen und Radios innerhalb unserer Optionen hinzufügen. Zum Beispiel, anstatt den Typ der Eingabe als Text zu spezifizieren, können wir es als Kontrollkästchen angeben. Nun, natürlich müssen wir das ändern und wir geben ihm die Klasse Bug Shack. Und das ist die Eingabe. Geh zurück, erfrischen Sie sich. Können wir sehen, haben wir diese kleine Checkbox hier. Und wenn wir es ändern können, können wir es auch anstelle des Add hier hinzufügen. Und wir können alles tun, was wir in dieser Abteilung wollen. Jetzt können wir auch mehrere Add-Ons hinzufügen. Zum Beispiel, anstatt dies zu spezifizieren oder vielleicht löschen Sie dies einfach. Und davor, lass mich einfach zu unserem Standard zurückkehren. Und stattdessen füge ich ein weiteres Span-Element mit einer Eingabeklasse hinzu. Gruppieren Sie Text. Und hier werde ich die example.com hinzufügen und zurück aktualisieren. Und wie Sie sehen können, müssen wir Elemente umfassen und diese zeigen mehrere Add-Ons. Jetzt können wir auch die Schaltfläche hinzufügen ons. Anstatt also eine Spanne zu erstellen, können wir eine tatsächliche Schaltfläche erstellen. Lassen Sie mich in diesem Fall einfach die zweite oder vielleicht die dritte löschen . Und lassen Sie uns eine Schaltfläche der Klasse BTN, PT und Umriss sekundär erstellen. Und natürlich, lasst uns etwas versuchen. Also das ist eine Schaltfläche und gehen Sie zurück aktualisieren. Und wie wir sehen können, haben wir unseren Knopf hier. Wir können darüber schweben und es gibt uns einen schönen Effekt. Jetzt haben wir auch etwas, das Buttons, Drop-Downs genannt wird. Und in diesem Fall können wir unsere Schaltfläche erstellen und wir können einige Elemente zu dieser Schaltfläche hinzufügen. Wenn wir also darauf drücken, erscheinen diese Elemente und wir können aus ihnen wählen. Um das zu tun, lasst uns das löschen und ich werde die Division und die Klassen innerhalb der Division behalten. Also das erste, was wir tun werden, ist die Klasse zu erstellen, die Schaltfläche und die Klassen werden das Ende btn, Umriss und sekundär wie üblich sein. Und jetzt werden wir eine weitere Klasse für das Dropdown-Menü hinzufügen, und es wird als Dropdown-Menü umschaltbar bezeichnet. Und in diesem Fall wird der Typ eine Schaltfläche sein. Und natürlich, wann immer wir das Dropdown-Menü verwenden müssen, müssen wir die Daten aktualisieren. Daten ps sind also gleich der Dropdown-Liste. Und in diesem Fall setzen wir, können unsere Schaltfläche hinzufügen. Also innerhalb dieser Schaltfläche haben wir, lassen Sie uns eine ungeordnete Liste erstellen. Die ungeordnete Liste wird also von einer Klasse sein, die als Dropdown-Menü bezeichnet wird. Das ist also unsere Klasse und die Listenelemente. Innerhalb des letzten Elements werden wir einen Link erstellen. Und das ist der Hyperlink. Und wann immer Sie einen Link ohne Referenz erstellen möchten, können Sie einfach das Hashtag-Jahr schreiben und dann wie gewohnt arbeiten. Die Klasse wäre also ein Dropdown-Element. Denken Sie daran, dass alle diese Klassen sind Boosts die Bootstrap-Klassen, und wir sind nicht verantwortlich für das Schreiben. Wir können sie jetzt einfach benutzen. Und natürlich können wir in diesem, zum Beispiel, sagen wir Homepage erstellen. Lassen Sie mich das kopieren und fügen Sie es mehrmals ein, und machen Sie sie einfach in separaten Zeilen. Und hier, sagen wir Mission. Nehmen wir an, kontaktieren Sie uns. Und sagen wir Feedback. Klingt gut. Und das ist unsere ungeordnete Liste. Wir haben die Dropdown-Menüklasse in unserer ungeordneten Liste als in jedem Listenelement, wir haben einen Link und dieser Link ist Avid Glas Dropdown-Element. Jetzt müssen wir hier nur noch unsere Input erstellen. Das ist also unser Input und hier sollte das nicht hier sein. Wir können es einfach hier verschieben und die Schaltfläche erstellen. Also lassen Sie es mich einfach versuchen, vielleicht Knopf. Und das ist es. Machen Sie es einfach auf der gleichen Linie. Und jetzt, gut. Also wird der Typ vielleicht Text sein. Also lassen wir es als Text. Und lasst uns ein paar Klassen schreiben. So wird die Klasse wie üblich für die Kontrolle sein. Und wir passen das auch an. Und jetzt denke ich, dass wir gut sind, gehen wir zurück und erfrischen uns. Und wie Sie sehen können, haben wir unseren Knopf. Und wann immer wir drauf drücken, haben wir unsere Heimat Michigan Kontakt und Feedback. Denken Sie nun daran, wenn wir uns auf etwas ausruhen, wird nichts passieren, da wir unserem Atlas keine Aktion hinzugefügt haben. Dies ist also im Grunde für die Schaltfläche mit Dropdowns. Wir können immer die Position der Schaltfläche ändern. Zum Beispiel, hier habe ich es auf der linken Seite erstellt, Sie werden auf der Braut oder vielleicht beides erstellt. Das liegt also an dir. Und das ist es im Grunde, wir können hier einfach etwas ändern. So zum Beispiel, nehmen wir an, ich habe das Haus Michelle Kontakt und Feedback auf einer Seite. Und ich brauche eine separate Zeile, um diese von einer anderen Sache zu trennen, die wir vielleicht hinzufügen möchten. Um das zu tun, können wir einfach hinzufügen und unsere ungeordnete Liste, den Listeneintrag. Und dieses Listenelement wird im Grunde das Element sein und die Klasse wird ein Dropdown-Trenner sein. Und so machen wir es. Also, jetzt haben wir einen Teiler, was auch immer wir versucht werden, eine andere Sache hier, wir an, wir verabschiedet und gehen zurück zu frisch und drücken noch einmal. Wir können sehen, dass der Abschied anders ist und von den anderen getrennt. Und ich glaube, hier habe ich einen Fehler gemacht. Also diese Drop-Down-Aktualisierung und es ist jetzt gut. Das sind also unsere, unsere erste Seite und das ist die zweite Seite, die durch diese Linie getrennt ist. Das ist also im Grunde für die Tasten. Also sprachen wir über mehrere Eingabegruppen und wie man sie erstellt. Wir sprachen auch über Bereiche. Und ich denke, dass diese für jetzt genug sind. Und damit das gesagt wird, ist dies das Ende dieses Videos. Wir sehen uns im nächsten. 11. Layout: Hallo und willkommen zurück. Und in diesem Video werden wir Layout diskutieren. Also gehen wir zurück. Und im Grunde, was wir tun werden, ist, mehrere Seiten oder mehrere Formen einer Website zu erstellen . Und natürlich müssen wir sie modifizieren und sie wie eine moderne Website aussehen lassen. Also zuerst, lass mich das einfach löschen und hier gehen. Wir können damit beginnen, unsere Abteilung zu schaffen. Und wir werden mit dem My Gym Marge Bottom Utility beginnen. Und das ist im Grunde, wie wir sagen können, m3. Also lassen Sie mich einfach B5 schreiben. Also, anstatt das zu spezifizieren, anstatt zu sagen, dass wir in der Tat alle Kanten mindestens drei Pixel sein. Wir können angeben, dass wir nur den Boden brauchen. Und natürlich, nachdem wir die Division verlassen haben, können wir mit der Erstellung unseres Labels beginnen. So geliefert werden, lassen Sie mich einfach löschen die für. Die Klasse entspricht vier beschriftet. Und dann haben wir das Beispiel hier. Gehen wir nun zu unserer Eingabeseite. Die Eingabe wird Text eingegeben. Dann wird die Klasse wie gewohnt Formular-Steuerelement sein. Und natürlich, lassen Sie mich einfach den Platzhalter hier erstellen. Und der Platzhalter wird vielleicht Benutzername sein. Und jetzt, wenn ich hier zurück gehe, erfrischen, werden wir das bekommen. Nehmen wir an, ich brauche den Vor- und Nachnamen, oder die E-Mail oder das Passwort und das Passwort. So kann ich zum Beispiel in diesem Fall eine andere Division erstellen. Und in diesem Fall, wenn ich jetzt aktualisiere, werde ich diese zwei separaten Divisionen in separaten Zeilen bekommen. Vielleicht wollen wir das nicht. Vielleicht wollen wir nur, dass der Benutzername, die Hälfte der Seite und die, zum Beispiel, die Vorname Hälfte und der Nachname, die zweite Hälfte genommen wird. Also lassen Sie mich einfach den Platzhalter anpassen, um Vorname und Nachname zu sein . Jetzt geh zurück. Und das ist Vorname, Nachname. Eine Möglichkeit, dies zu tun, besteht darin, unsere neue Abteilung zu schaffen. Und in diese Teilung, legen Sie diese zwei Divisionen. Zunächst einmal sollte unsere Teilung von einer Klassenreihe sein, um anzuzeigen, dass dies unser Teig ist. Und natürlich brauchst du das explizite hier. Und das sind Brillensäule. Das sind also unsere zwei Säulen in unserer Drohne über Erfrischung. Und wie wir sehen können, haben wir unsere zwei Divisionen und sie sind in der Mitte getrennt. Also, jetzt lasst uns weiter. Unsere Seite, so haben wir jetzt unsere Vorname, Nachname. Also werde ich das einfach löschen und E-Mail und Passwort schreiben, bis es auch das ist. Also der Platzhalter hier, nur gelöscht und löschen Sie dann den Nachnamen. Hier haben wir die E-Mail und das Passwort. Wie üblich, wenn wir Passwort verwenden, wird der Typ der Eingabe auch Passwort sein. Nun, nachdem wir diese beiden Spalten in unserer fuhr erstellt haben, können wir eine weitere Zeile erstellen. Und in diesem Fall können Sie hier einfach eine weitere Zeile erstellen. In dieser Reihe werden wir unsere Spalten teilen und zwei, vielleicht drei voneinander getrennt. Oder lassen Sie mich zuerst die Adresse hinzufügen und dann diese erstellen. Das ist also unsere Drohne und wir haben nur eine Säule. Und diese Spalte besteht aus einer Eingabe und der Typ wird besteuert. Die Klasse wird für die Kontrolle sein. Und natürlich wird der Platzhalter Adresse sein. Wenn ich hierher zurückgehe, aktualisieren, haben wir auch unsere Adresse, aber wie Sie sehen können, haben wir keinen Raum zwischen ihnen. Also vielleicht fügen Sie einfach ein wenig von einem Rand oben hier. Also in unserem Glas, können wir, in dieser Klasse von Reihenrand oben, vielleicht drei. Das ist genug Erfrischung. Und wie wir sehen können, haben wir ein wenig Platz zwischen den beiden Eingängen. Nun, hier zurück zu gehen, ist das unsere erste Adresse. Nun, wo wir eine zweite Adresse haben, lassen Sie mich sie kopieren und einfügen. Also hier haben wir hinzugefügt, um zurück zu gehen, aktualisieren. Und wie wir sehen können, haben wir Adresse eins und Adresse zwei, aber vielleicht nur modifiziert. Anstelle von nur einer können wir einfach ein Beispiel für eine Adresse schreiben. Also Main Street, das ist der Platzhalter. Und hier können wir einfach das Gebäude und den Fluss hinzufügen. Und da wir keine Adressen angegeben haben, müssen wir unsere eigenen Etiketten erstellen. Im Inneren des Gelehrten wird das Etikett vom Typ sein. Also für April und dann gefolgt von der tatsächlichen Arbeit, das ist die Adresse. Und natürlich, lassen Sie mich einfach diese Basis hier kopieren und nur auf Adresse geändert, um zurück zu gehen und zu aktualisieren. Und wie wir sehen können, haben wir unsere Adressen. Fügen wir nun die Stadt, den Bundesstaat und die Postleitzahl hinzu. Und in diesem Fall müssen wir sie in einer Abteilung erstellen und sie werden alle diese Website aufnehmen. Allerdings müssen wir unsere Website teilen. Und wie gesagt, wir haben 12. Diese Webseite. Also können wir diese 12 teilen. Zum Beispiel kann die Stadt bis zu acht nehmen, und die anderen 24, vielleicht fünf. Also lasst uns das herausfinden. Jetzt. Gehen wir zurück zu unserem Code. Und in unserem Joe Jetzt müssen wir unsere Spalten erstellen. Also wird die erste Spalte sein, sagen wir Sex. Ich denke, Sex ist gut. Und darin werden wir unser Set M kreieren So wird das Etikett aus Glas für L1 sein. Das ist also für beschriftet. Und dann wäre das Label die Stadt. Dann die Eingabe. So besteuert wie üblich Klasse für die Kontrolle und dann von der anderen, dem Staat gefolgt. Und lassen Sie mich einfach auffrischen und sehen, was los ist. Das ist also unsere Stadt. Es dauerte auf die Hälfte der Seite. Wir haben noch die andere Hälfte. Und in diesem Fall kann ich einfach kopieren und zurückkleben. Wir möchten jedoch nicht, dass der Staat den gesamten Rest der Seite aufnimmt , die wir brauchten, um bis zu vier. Jetzt geh zurück, erfrischen. Wir haben unseren Staat hier, und dann schließlich gefolgt von unserer Postleitzahl. Also kann ich einfach kopieren diese, wieder, basierte Änderung, diese, aktualisieren, und jetzt haben wir unsere Stadt, Bundesstaat und Postleitzahl. Also lassen Sie mich das einfach ändern. Das ist also der Code. Also das ist es im Grunde können wir auch einige der Elemente hier ändern. Wenn wir zum Beispiel die genaue Anzahl der Zustände und die genauen Namen kennen, können wir einfach die Option hier hinzufügen. Und dann, wenn der Benutzer einfach auf diese Option drückt, erscheinen alle Optionen und er kann aus ihnen wählen. Und er kann hier immer etwas schreiben. Aber wie gesagt, wenn wir etwas schreiben, wird nichts passieren. Und da wir keine Aktion für dieses Formular hinzugefügt haben, und ich denke, dass das genug ist. Wir können hier immer eine einfache Schaltfläche hinzufügen, zum Beispiel, um unser Formular zu senden. Und ich denke, das ist es für diese Website. Lassen Sie uns ein anderes erstellen, indem Sie einfach einige der Elemente hier ändern. Zum Beispiel brauchen wir vielleicht die E-Mail und das Passwort, und dann müssen wir einige der Optionen überprüfen. Also lassen Sie mich das alles löschen. Und in unserer Verlosung haben wir E-Mail-Passwort und ich denke, wir brauchen nicht all das. Dies ist Version. Das ist die zweite Division. Das ist tief im Inneren. Und jetzt können wir einen anderen erschaffen, gehen Sie in den Strohhalm. Wir werden die erste Spalte haben und es dauert bis zu zwei in diesem, lasst uns etwas versuchen, so spannend, wie üblich sind vielleicht lasst uns ein Label erstellen. Das Ding wird besser. Und die Klasse wäre für Label. Dann gefolgt von einer Hütte. Und ich denke, das reicht vorerst. Wir haben hier unseren Scheck, lassen Sie mich einfach anpassen. Also in unserer Spalte, es tut mir leid, in unserer Zeile werde ich vielleicht MD5 hinzufügen. Und wie wir sehen können, haben wir diese fünf. Lassen Sie mich es von allen Seiten schaffen. Jetzt haben wir unseren Scheck hier. Und natürlich, lassen Sie uns die andere Spalte erstellen. Und es wird bis zum ganzen Rest der Seite dauern. Und in dieser Spalte können wir einige Optionen erstellen. Also lassen Sie uns unsere Chat-Box erstellen. Und wir können einfach Eingabe eingeben, geben Checkbox. Und natürlich haben wir mehrere Klassen hinzuzufügen. Einer von ihnen ist für die Check-Eingabe und das ist die wichtigste. Gehen Sie zurück zu frisch, wir haben jetzt unsere Chat-Box. Das ist also unsere Klasse und das ist unser Input. Wir können es immer zu einer Division und einer Klasse für Shack hinzufügen. Und dann ist das nur unsere Abteilung. Und wenn wir etwas schreiben wollen, zum Beispiel nach Hause. Und wie Sie sehen können, ist dies unser erster Input. Kann hier immer mehrere Eingaben hinzufügen. Also, um sie zu überprüfen. Und dann fügen Sie endlich den Button hier hinzu, zum Beispiel, melden Sie sich an oder so etwas. Und ich denke, dass das jetzt genug ist. Sie können immer mit diesen Elementen spielen. Zum Beispiel können Sie sie alle in derselben Zeile setzen oder die Inline-Formulare verwenden. Oder Sie können sie, jedes Element und eine Zeile setzen. Und das hängt von Ihnen ab, wie Sie möchten, dass Ihre Website aussieht, und von verschiedenen Arten von Seiten. Damit ist dies das Ende dieses Videos. Wir sehen uns im nächsten. 12. Komponenten: Hallo und willkommen zurück. Und in diesem Video werden wir einige Komponenten in Bootstrap diskutieren. Der erste wird das Akkordeon sein. Also lassen Sie mich einfach eine erstellen, damit Sie besser verstehen, was für ein Akkordeon. Also zuerst, um es zu schaffen, wie üblich, müssen wir eine Division erstellen. In dieser Abteilung wird das Glas Wächter sein. Und lassen Sie mich einen Ausweis geben. Das ist also Akkordeon. Auch in dieser Abteilung werden wir ein Akkordeon-Element erstellen. Also, dass Akkordeon Artikel, das ist eine andere Abteilung. Innerhalb dieser Abteilung können wir unser Akkordeon kreieren. Das ist also der Akkordeonartikel. Es besteht aus einem Header und einer Schaltfläche. Um den Headless zu erstellen, erstellen Sie einen H2-Header. Die Klasse wird Akkordeon Hadoop sein. Und wir können hier einfach etwas eingeben. Dies ist also Punkt eins, dann gefolgt von der Taste und der Klasse, und dieser Knopf wird Akkordeon-Taste sein. Der Typ wird wie gewohnt Button sein. Und dann natürlich, da wir das Akkordeon benutzen werden, sagen wir hier einfach etwas. Zum Beispiel ist dies ein kalter Yen Artikel eins. Und lass es mich einfach hier platzieren. Natürlich löschen Sie diesen Artikel eins, da wir ihn gerade zu unserer Schaltfläche hinzugefügt haben. Wenn ich jetzt zurückgehe und mich erfrischen würde, dann ist das unser Akkordeon. Jetzt, wenn wir etwas zu diesem Akkordeon hinzufügen und darauf drücken, wird es hier erscheinen. Lassen Sie uns also erstellen, nachdem wir die Überschrift erstellt haben, werden wir die Division hinzufügen. Dies ist die zweite Unterteilung innerhalb des Artikels. Und dann werden wir dieser Abteilung eine Klasse von Akkordeon-Labors geben. Und dann natürlich, lass mich einfach den Kumpel erschaffen. Also hier wird die Teilung von einem Klassenakkordeon sein. Aber innerhalb dieser Division lassen Sie uns den Absatz erstellen. Lauren. Vielleicht. Geh zurück, erfrischen Sie sich. Und das ist unser Absatz. Nun, fangen wir an, einige Ideen hinzuzufügen, da wir es nicht verwenden können, um jetzt können wir einfach diesen Absatz verschwinden lassen. Um das zu tun, müssen wir hier zwei Dinge hinzufügen. Also Daten, BS umschalten, um zu reduzieren und das VS-Ziel. Und ich gab ihm den Zusammenbruch, nur um ihn innerhalb der zweiten Division hinzuzufügen. Jetzt. Also hier, in unserer zweiten Division, lassen Sie uns unsere ID kollabieren. Eins, natürlich. Und lasst uns das einfach ändern. Hier. Wir haben die Division ID kollabieren eine Klasse und wir müssen auch Daten BS schreiben, übergeordneter. Und in diesem Fall wird es das Akkordeon sein, das ist dieses vorher. Also wird diese Band gleich sein. Jetzt. Wenn ich darauf drücke, wird es verschwinden. Und wenn ich darauf noch ein Mal drücke, wird es appellieren. Und wir können dasselbe für mehrere Akkordeons tun. Also können wir das einfach noch zwei Mal kopieren und dann spielen bezahlt es. Bezahlt es. Also lassen Sie mich es einfach kopieren. Und ich denke, wir gehen zurück und erfrischen uns. Wie wir sehen können, haben wir unsere drei Akkordeons und wir können zwischen ihnen wechseln. Allerdings sind sie jetzt verwandt, da wir die gleiche ID und die gleichen Ideen tatsächlich für mehrere Gegenstände in China innerhalb dieser Akkordeon haben. Also müssen wir Ideen ändern, nur um sicherzustellen, dass sie völlig unabhängig sind. Wie Sie sehen können, werden sich diese beiden ändern, und wir wollen nicht, dass das passiert, also können wir diese Ideen einfach ändern. So zum Beispiel hier kann ich es nach benennen, nach, und dann sind wir gut. Und ich glaube, das ist es für das Akkordeon. Gehen wir zu Warnungen. Also, was sind Warnungen? Tatsächlich sind Alerts etwas, das uns eine Feedback-Nachricht für einen typischen Benutzer liefert. Jede Aktion, die wir ausführen. Und wir haben den Benutzer gewonnen, um diese Nachricht zu bekommen. Wir können ihnen tatsächlich diese Nachricht mit der für uns verfügbaren Alert-Klasse und Bootstrap zur Verfügung stellen. Und sie sind eigentlich ein JavaScript-Plugin. Dann Nazi-SS, sie verwenden JavaScript. das zu tun, lassen Sie mich das einfach löschen und von Grund auf neu beginnen. Nehmen wir an, ich möchte eine Warnung erstellen. Wir können einfach unsere Abteilung schaffen. Innerhalb dieser Abteilung, die Klasse, die wachsam und andere primäre wäre. In dieser Division. Wir können es versuchen. Lauren. Und wir können die Rolle als Limit spezifizieren. Nun, lassen Sie uns weitermachen und es wird als Warnung angezeigt. Jetzt können wir auch eine weitere Warnung für die Abweisung von etwas erstellen. Lassen Sie mich zum Beispiel das einfach löschen und unsere Klasse erstellen, die wachsam sein wird. Und in unserer Abteilung. Fügen wir hier ein paar Klassen hinzu. Also haben wir die Alarm-, Warn- und Alarmstufe zulässige Klasse. Wir haben auch das Fade and Show. Natürlich wird die Rolle wachsam sein. Und dann, nachdem wir diese Division erstellt haben, erstellen wir einen Absatz. Also in diesem Absatz, werde ich Lorem sieben schreiben und dann von der Schaltfläche gefolgt. Und das wird der X-Button sein. So Typ wird Schaltfläche sein. Und dann nach diesem Knopf haben wir die Klasse BTN, Kleidung und Daten, BS, entlassen. Es wird gleich Alarmstufe sein. Und natürlich können wir das Etikett angeben, um gleich zu schließen. Wenn wir jetzt wieder aktualisieren, werden wir diese Warnung abweisen. Und es ist wieder JavaScript, und es ist möglich, jede Warnung in Zeile zu verwerfen. Und zum Beispiel, wenn Sie darauf drücken, wird es verschwinden. Und so können wir dies immer dann verwenden, wenn etwas falsch passiert ist oder der Benutzer gerade etwas eingegeben hat, das nicht hinzugefügt werden sollte. Wir können das einfach herausstellen und sagen, zum Beispiel, das ist falsch, aber versuchen Sie es einfach noch einmal oder versuchen Sie diese Methode oder so weiter. Und der Benutzer kann auf die X-Taste drücken und es wird automatisch verschwinden. Das ist also für die Alarmbereitschaft. Ich ermutige Sie, voranzugehen und sie zu überprüfen. Sie sind nett und Sie können so viele von ihnen in verschiedenen Fällen verwenden. Jetzt gehen wir zu den Abzeichen. Nehmen wir an, wir haben eine Überschrift. Und in unserer Überschrift möchten wir hinzufügen, dass dieser Artikel neu ist. Also nehme ich an, ich habe ein H1 in diesem. Wir haben zum Beispiel Artikel eins, und wir möchten angeben, dass dieser Artikel nu ist. Eine Möglichkeit, dies zu tun, besteht darin, das Spannelement zu gewinnen und dann ein Glas Batch hinzuzufügen. Und wir können die Farbe so ändern, dass die Hintergrundfarbe sekundär wäre. Und ich kann hier einfach neu hinzufügen. Wenn Sie nun zurückgehen und aktualisieren, werden wir Artikel eins und mit diesem neuen sehen und entscheiden, anzuzeigen, dass dies ein neuer Artikel ist. Und das wird als Batch bezeichnet. Jetzt können wir verwenden, wir können es auf jedem Element oder eine, beliebige Elemente verwenden. Das ist also das Hinzufügen eines. Sie können es für Überschriften eins bis sechs und natürlich Absätze, Schaltflächen und so weiter verwenden. Lassen Sie mich einfach die Verwendung davon auf einem Knopf demonstrieren. Nehmen wir an, ich habe einen Knopf. In diesem Knopf. Wir haben den Typ hier natürlich. Und dann haben wir den Unterricht. Also, btn, btn-primär. Jetzt können wir zum Beispiel erstellen, nehmen wir an, ich möchte die Benachrichtigungsschaltfläche erstellen. Das ist also nicht besiegen Patienten. Und dann erstellen Sie die Klasse span Element. Die Klasse wird Badge und BG, sekundär sein. Und innerhalb Versand, Lassen Sie mich einfach hinzufügen. Spezifische Nummer, zum Beispiel, Ich habe neun Benachrichtigungen. Also geh zurück, erfrischen. Wir haben diese Schaltfläche Modifikationen. Und hier haben wir unser Abzeichen, das darauf hinweist, dass wir neun Multiplikationen haben. Nun haben wir auch einige Hintergrundfarben, die wir vielleicht ändern möchten. Also hier verwenden wir die primäre, wir haben auch die sekundäre Erfolg, Gefahr, Warnung, und dann für Licht und Dunkel. Also schließlich haben wir noch die Pillenabzeichen und sie sind in der Regel abgerundet. Wie wir hier sehen können, sind sie EBIT geerdet, dann nicht vollständig quadriert, aber vielleicht wollen sie als Gürtel. Wir können hier einfach das heruntergeladene Pillenglas verwenden. Also lassen Sie mich eine Idee klingen. Klasse, geh zurück und aktualisiere dich. Und wie wir sehen können, wird es jetzt gezählt. Also lassen Sie mich das einfach anpassen, nur damit Sie es klarer sehen können. Das ist also unser Span-Klassenelement, es tut mir leid, so dass die Klasse geerdet wird und der Hintergrund primär ist. Jetzt versuchen wir etwas hier. Das ist also primär. Und gehen Sie zurück zu aktualisieren. Und wie Sie sehen können, haben wir unsere abgerundet. Aber das ist es für die Abzeichen. Nun, da wir hier einige Schaltflächen verwenden, sprechen wir einfach über Schaltflächen. Es wird mehr sein. So. Zum Beispiel ist dies eine Schaltfläche. Wie gesagt, sollte der Typ Taste sein. Und dann Klassen, die wir verwenden werden. Die btn ist essentiell und DBD und die Farben zu wählen. Also werde ich primär wählen. Das ist also eine Taste, eine, aktualisieren. Das ist also unser erster Knopf. Wie gesagt, haben wir mehrere Arten und einige andere. Also zum Beispiel, wenn ich gegraben werden wollte, kann ich hier einfach dunkel hinzufügen, aktualisieren. Ich bekomme diesen dunklen Knopf. Jetzt. Angenommen, ich möchte nicht, dass dieser Knopf ein anderer Hintergrund ist, Doug, ich wollte transparent sein. Und in diesem Fall kann ich die Gliederungsschaltflächen verwenden, die ich bereits implementiert habe, aber es ist besser, es einfach zu sagen, wenn wir gehen, wir haben das Buttonelement diskutiert. Also in diesem Fall können wir die Gliederung begann verwenden, skizziert, primär, und gehen Sie zurück aktualisieren. Wie wir sehen können, sind die Ränder der Schaltfläche jetzt blau. Im Inneren ist es jedoch weiß. Und wann immer wir darüber schweben, können wir sehen, dass dies der Effekt ist. Es gibt uns die Wirkung eines gewöhnlichen Knopfes. Und das ist für den äußeren Knopf. Wir haben auch Größen. Wir können die Größe unserer Butter wählen. Also, wenn ich hier zurück gehe und BTN, groß, bist du wieder da und erfrischen. Wir können sehen, dass unser Knopf größer wurde und wir haben auch die kleine und diese fähige Brille. Und ich werde sie nicht benutzen, da sie gleich sind. Und ich denke, dass das über Knöpfe genug ist. Wir haben mehrere Elemente und mehrere Eigenschaften, mehrere Klassen, die wir eine Schaltfläche verwenden können. Und ich rate Ihnen, sie selbst zu binden und sie wirklich gut zu machen, damit Sie nicht mehr in die Dokumentation gehen müssen. Sie können sie einfach verwenden, wann immer Sie wollen. Aber das ist das Ende dieses Videos. Wir sehen uns im nächsten. 13. Karten: Hallo und willkommen zurück. Und in diesem Video werden wir über Karten sprechen. Also gehen, um unsere eigenen Teile mit Bootstrap-Klassen anpassen. Und wir haben so viele Eigenschaften und so viele Klassen, die wir verwenden können. Also lassen Sie uns voran und beginnen mit unserem ersten. Das erste, was wir tun werden, ist, unsere Divisionsklasse zu erstellen. Und innerhalb dieser Division wird die Klasse Karte sein, da wir eine Wache schaffen. Und lassen Sie mich einfach die Breite davon anpassen. Es muss 18 RER sein. Und jetzt können wir mit Entsorgung arbeiten. Also lassen Sie uns ein Bild erstellen. So wird das Bild Bilder zweites Schwein sein. Und natürlich kann ich eine Alternative hinzufügen, also zweites Bild. Und jetzt, wenn ich zurückgehe und aktualisiere, können Sie sehen, dass das Bild sehr lang ist und wir das anpassen müssen. Und tatsächlich haben wir eine Klasse in Bootstrap, die uns in Gott helfen wird. Und das ist ein aktuelles Bild. Und jetzt gehen wir zurück und erfrischen wir uns dort, wie wir sehen können, betrachten unser Bild. Und es sieht schön aus. Jetzt können wir hier etwas Text hinzufügen. Zum Beispiel können wir eine Überschrift hinzufügen und dann einen Absatz folgen, der das Bild beschreibt. Und Sie können das schaffen, wir können eine Abteilung erstellen. Innerhalb dieser Abteilung haben wir die Überschrift, also eins und dann Absatz noch ihm acht. Und wie wir jetzt sehen können, wenn wir zurückgehen und uns auffrischen, haben wir unseren Führer namens Lorem Ipsum, und das ist unser Absatz. Und aber wir haben auch eine Klasse in Bootstrap, um uns zu helfen und haben freundlich Bali und das ist eine Karte, aber die Klasse so genannte Kumpel. Wenn wir jetzt zurückgehen und uns auffrischen, können wir den Unterschied bemerken. Wir haben einige Polsterung von links nach rechts und unten und oben. Und natürlich haben wir auch einige Klassen im Körper. Und einer von ihnen ist der Titel und der andere SD-Kartentext. Denken Sie daran, dass Sie sie ignorieren können, aber wenn wir zurückgehen und aktualisieren, können Sie sehen, dass sie besser aussehen, wenn Sie diese Art von Klassen verwenden, so genannte Karosseriewagen Titel und Kontexte. Und schließlich, lassen Sie mich einfach einen Link hier hinzufügen. Und in diesem Link sollte die Klasse eine Schaltfläche sein, Schaltfläche primär. Und natürlich, lass mich einfach versuchen, los zu gehen. Wenn wir aktualisieren, haben wir jetzt unseren kompletten Strom. Wir haben das Bild drinnen. Wir haben den Hauptteil Absatz Überschrift und die Schaltfläche. Also das ist S. Das ist also das erste Beispiel. Und lassen Sie uns zurückgehen und ein anderes Beispiel erstellen, nur um es besser zu verstehen. Vielleicht braucht unsere Karte kein Bild. Also lassen Sie mich das löschen. Und lassen Sie uns den aktuellen Körper behalten. Wenn wir jedoch kein Bild haben, ist es vielleicht eine gute Wahl, unseren Header zu erstellen. Also lassen Sie mich den Code Hadoop-Division erstellen. Und in diesem, schreibe ich einfach alles. Lassen Sie mich nur lesen. Dies ist die Kopfzeile. Wenn wir nun zurückgehen und uns auffrischen, können wir sehen, dass wir unser Bild nicht mehr haben. Aber wir haben etwas. Und es sieht so aus, der Header unseres Codes. Und Sie können zustimmen, dass dies viel schöner ist als einfach Richtlinien zu schreiben und dann unsere Absätze zu schreiben, können wir jetzt unsere Karte löschen. Und wir haben die Kopfzeile hier und den Absatz auf dem Körper. Nun, wenn wir zurück zu unserer Website gehen, können wir sehen, dass alle Elemente aus Hadar, Titel und Absatz und auch die Schaltfläche auf der linken Seite unseres Leitfadens. Vielleicht wollen wir, dass sie auf der rechten Seite sind oder so. Eine Möglichkeit, damit umzugehen, besteht darin, innerhalb unseres Titels oder vielleicht unserer Division zu schaffen. Also hier haben wir unseren Gott. Wir können das Textcenter hinzufügen. Und jetzt, wenn Sie zurückgehen und aktualisieren, können wir sehen, dass alle Elemente jetzt zentriert sind. Und wenn wir wollen, dass sie am Ende sind, können wir einfach den Text und die Klassenaktualisierung verwenden. Und jetzt sind sie auf der rechten Seite unserer Autos. Nun, das ist für die Grundlagen. Wie können wir etwas erschaffen, das komplizierter oder etwas komplexer ist? Zum Beispiel, wenn wir eine Navigation innerhalb unserer aktuellen erstellen möchten, lassen Sie mich gehen und löschen Sie dies und beginnen Sie von vorne. Das erste, was wir tun werden, ist, unsere derzeitige Division zu schaffen. Und ich werde dazu das Textcenter plus hinzufügen. Und jetzt lassen Sie uns unseren Warenkorb erstellen Hadoop, so genannte. Entweder. In unserem Code-Header werde ich unsere ungeordnete Liste erstellen. Also hier werden wir eine kleine Zahl erstellen. Wir werden es jedoch in den nächsten Videos ausführlich besprechen. Aber jetzt werden wir unsere ungeordnete Liste erstellen. In dieser Liste haben wir unseren Listeneintrag. Innerhalb dieses Listenartikels haben wir unsere Länge. Und dieses Listenelement wird das Klassennav Element haben. Die ungeordnete Liste wird die Klasse nav und jetzt abs haben. Aber beide Tabs. Und all dies sind Klassen in Bootstrap. Und natürlich, unsere Länge, müssen wir einige Klassen hinzufügen. Also wird die Klasse nav Link sein und dann ist dies das erste Listenelement. So Eisen macht es aktiv. Und natürlich, lassen Sie mich einfach etwas eingeben Jahre, also zu Hause. Und jetzt, wenn Sie zurückgehen und aktualisieren, können wir sehen, dass wir unseren Führer und es ist und die ganze Seite. Und wir haben unseren Button oder unsere erste Elementliste Element hier und es ist aktiv, es heißt zu Hause. Gehen wir nun zurück und kopieren Sie diesen Listeneintrag noch zwei Mal. Hier und hier. Lass mich einfach dieses Haus wechseln, vielleicht Mission und dann Produkt. Jetzt gehen wir zurück und erfrischen uns. Und wie Sie sehen können, haben wir drei Elemente. Wir wollen jedoch nicht, dass sie aktiv sind. Also lassen Sie mich das einfach von hier und hier löschen. Und ich denke, wir können zurückkehren und uns erfrischen. Und wie Sie sehen können, ist dies das erste Listenelement und es ist aktiv. Alle diese sind jedoch noch nicht aktiv. Nun, wenn wir nicht wollen, dass unsere Wache nehmen alle unsere Website, wir können den Stil hinzufügen und die Breite wird, wird 18 RAM RAM sein. Jetzt gehen wir zurück und erfrischen uns. Und das ist unser Leitfaden. Nun sollten wir eine Überschrift oder einen Titel, ein Jahr und den Körper hinzufügen . Und natürlich können Sie diesen Vogel anpassen, wie Sie wollen. Zum Beispiel, wenn Sie zum Beispiel auf der Hälfte der Seite möchten, können Sie die Breite der Jungs von hier aus anpassen. Und jetzt gehen wir zurück und fügen Sie hinzu. Das ist also unser Header und es endet hier. Wir können eine andere Teilung namens Körper innerhalb des Rockbuddy erstellen. Lassen Sie uns unsere Überschrift erstellen. Dies ist die Herde von und dann einige Paragraph Lorem sechs. Nun lassen Sie uns hier einige Klassen hinzufügen. Also plus aktueller Titel- und Absatztext. Nun, wenn Sie wieder aktualisieren, haben wir unseren kompletten Code und diesen Text zentriert, wir haben zu Hause Maschine Produkt. Dies ist die Überschrift der Karte und der Kreisdiagramm, die wir wollen. Nun, wenn Sie bemerken, wenn ich auf diese Tasten drücke, wird nichts passieren, da wir kein JavaScript hinzugefügt haben, das zwischen den Atomen jedes Elements umschalten kann. Aber für jetzt haben wir dies als aktiv und all dies als normale Elemente. Jetzt haben wir etwas, das Bild-Overlays genannt wird. Und lassen Sie uns voran gehen und eine von denen erstellen nur um den Unterschied zwischen ihnen und unserer normalen Strömung zu sehen. Das erste, was wir tun werden, ist, unseren Code zu erstellen. Und das tun wir, indem wir einfach unsere Division schaffen. Und die Klasse würde anfallen und die Hintergrundfarbe wird dunkel sein, und dann erkennt, wird weiß sein. Jetzt, nach Abschluss der Teilung, lassen Sie uns unser Bild erstellen. So wird das Bild wie das Bild vor dem zweiten Stift sein. Und natürlich müssen wir die Kult-Bildklasse hinzufügen. Dann lassen Sie uns unseren Körper erschaffen. Und dies zu tun, wird einfach eine neue Abteilung schaffen. Wir brauchen jedoch, dass dieser Körper auf unserem Bild steht. Und dazu fügen wir einfach die Klasse hinzu, diese Bild-Overlay. Dann geh zurück und probiere es aus, was immer wir wollen. Zum Beispiel ist dies ein Titel. Und wenn ich zurückgehe und natürlich würden die Titelklasse und der Absatz besteuert werden, plus Senkung acht wie üblich. Jetzt gehen wir zurück und erfrischen uns. Und wie wir sehen können, haben wir unser Bild bekommen. Und in diesem Bild haben wir unseren Titel und Absatz. Jetzt können wir immer die Breite eines Bildes anpassen, indem wir einfach den Stil hier hinzufügen. Die Breite beträgt 18 RAM für jetzt. Jetzt gehen wir zurück und erfrischen uns. Und wie wir sehen können, haben wir unser Bild und in diesem Bild haben wir unseren Titel und Absatz, und sie sind übereinander. Jetzt haben wir so viele andere Elemente und Eigenschaften, die wir unserem Führer hinzufügen können und wir werden sie entdecken. Und das nächste Video. 14. Karten 2: Nun gehen wir zu einer anderen Struktur über. Und es ist der horizontale Schnitt. Und es wird mit einer Kombination von Grit und Utility-Klassen gemacht. Also lassen Sie uns voran und löschen Sie dies und beginnen mit der Erstellung unserer Division Class Division Card. Und drinnen, lassen Sie mich einfach einen Spielraum geben, vielleicht drei. Und wie üblich können wir die Breite über diese Zeit angeben. Ich werde die max-width Eigenschaft verwenden. Und dies bedeutet, dass die maximal zulässige Breite 540 Pixel beträgt. Und jetzt können wir mit unserer Wache beginnen. Das erste, was wir tun werden, ist, die Zeile in unserem Job zu erstellen. Wie üblich verwenden wir die Spalte und wir werden unseren Schnitt tatsächlich in zwei Abteilungen teilen müssen. Also lassen Sie mich hier zurück. Und nehmen wir an, das ist unser Code. Wir werden es teilen, da dieser Bereich für unser Bild ist und diesen Bereich für unseren Körper, der unsere Überschrift und Absatz enthält. Und um das zu tun, können wir vielleicht wählen, um es als 48 Folie für das Bild und Hilfe für den ganzen Absatz, Titel und Körper im Januar zu teilen 48 Folie für das Bild und Hilfe für den ganzen Absatz, . Um das zu tun, können wir einfach die Säulenfolie verwenden und hier unser Bild hinzufügen. Also Bilder, zweites Bild. Und jetzt lassen Sie uns die zweite Division erstellen und es wird acht sein. Und diese Abteilung wird die Überschrift beinhalten. Dies ist das Update. Und dann der Absatz. Und natürlich können wir hier einige Klassen hinzufügen, wie zum Beispiel Titel. Und dann hier ein Text. Ich denke, wir könnten retten, zurückgehen. Und wie wir sehen können, betrachten Sie dieses Bild. Und gehen wir zurück. Hier. Wir haben unsere Klasse vergessen. Also wird die Klasse Bild sein, Gott ist beschädigt. Und jetzt, wenn wir zurückgehen, aktualisieren, haben wir dieses Bild und gefolgt von diesem, aber wir haben auch vergessen, die Division hier hinzuzufügen. Eine Klasse namens body. Sieht schöner aus. Und natürlich fügen wir eine Träne hinzu. Und jetzt betrachten, gehen Sie voran und aktualisieren. Und wie wir jetzt sehen können, wenn ich nur die Größe verringern will, wird nichts passieren. Wir wollten jedoch horizontal sein, wann immer wir. Ein verheddert zwischen den Größen. Also hier haben wir einen großen Bildschirm. Wenn wir jedoch eine mittlere oder kleinere Größe haben, brauchten wir dieses Bild groß und die Überschrift und Titel, Titel und Absatz befinden sich darunter. Eine Möglichkeit, dies zu tun, ist einfach zu spezifizieren, dass, wenn wir hier Medium und höher haben, dies gilt. Und ansonsten müssen wir unser Bild oben sein und dann den Kopftitel und Absatz folgen. Nun, wie Sie sehen können, wenn die Größe des Bildschirms, wird es horizontal. Und das ist es für die Horizontale. Lassen Sie uns voran und beginnen mit unseren Hintergrundfarben. So können wir zum Beispiel unsere Karte mit einem blauen Hintergrund erstellen. Wie wir sehen können. Lassen Sie uns das löschen und beginnen Sie mit der Gestaltung des Alkohols. Das erste, was wir brauchen, ist, den Code zu erstellen. Die Klassen werden weiß besteuert. Weil ich den primären Hintergrund wählen werde, der hauptsächlich blau ist. Und natürlich geben wir ihm etwas Budget und aufgeknöpft. Und lassen Sie uns diese Fliesenbreite von 18. Rem. Jetzt sind wir gut. Wir können mit der Gestaltung unserer Karten beginnen, so dass die Karten Kopf und kehrt einfach richtig, primär. Und dann innerhalb des Kartenkumpels können wir unsere Überschrift erstellen. Und eine Möglichkeit, unsere Einstellung und unsere Klassen gleichzeitig zu schaffen, besteht darin, einfach unsere Rubrik H5 zu trocknen und dann darauf zu drücken. Und dann gefolgt von b, eine Klasse, die Titel VI genannt wird eingegeben hatte. Es wird automatisch erstellt. Und ich kann einfach schreiben straffen Absatz fünf. Und ich habe vergessen, hier den Klassentest hinzuzufügen. Nun, wenn ich zurückgehe und aktualisieren, haben wir unsere Karte, die blau auf der primären, und das ist der Titel und der Absatz. Und das können wir auch immer ändern. So haben wir so viele Farben, wie Sie wissen, haben wir die meisten von ihnen verwendet. Und das ist die Dunkelheit. Und wir haben, wie gesagt, Erfolg, Gefahr, Warnung, NFO, sekundäre und Licht. Jetzt wollen wir vielleicht auch nur die Grenze entdeckte die dunkle Farbe. Und wir wollen nicht, dass der Hintergrund Wasserlinsen ist, sondern nur transparent sein muss. Eine Möglichkeit, dies zu tun, ist, dies einfach zu modifizieren, damit wir den Hintergrund nicht wollen, wir brauchen nur die vermiedenen, um dunkel zu sein. Geh zurück zu frisch. Wie wir sehen können, haben wir unsere Grenzdiät. Unser Text ist jedoch weiß und wir können ihn jetzt sehen. Also lassen Sie mich das einfach löschen. Und erfrischen. Und das ist jetzt unser Wagen. Also das ist es im Grunde für die Farben. Gehen wir zu einem anderen Thema, und das sind die Grid-Karten. Nehmen wir zum Beispiel an, ich möchte so viele Karten auf meiner Website platzieren. Ich kann wählen, entweder 123 Karten auf der gleichen Ebene und dann von drei Karten oder vielleicht vier Karten und dann vier. Das liegt also an uns. Gehen wir zurück und löschen und beginnen, unser Leben zu erschaffen. Nehmen wir an, ich möchte, dass meine Website Prognosen hat. So 1234. Und fangen wir damit an, indem wir unsere Sonde erstellen. Das erste, was wir tun werden, ist, die Zeile zu erstellen. Und dann werde ich in dieser Klasse die Reihe eins und Zeile zwei geben, und wir werden sie intermittierend besprechen. Das sind also die Klassen und die erstklassige Inside Out Rho ist d-Säule. Und wir haben unseren Code. Das ist also die Aufteilung der Karte. Wir können unser Bild hier als hinzugefügt weitaus hinzufügen. Dann können wir in unserem Code unseren Wach-Buddy hinzufügen. Ich füge einfach die einfache Überschrift hinzu. Also denke ich, und ich denke gut, gut, jetzt in diesem Code, lassen Sie mich einfach zurück, aktualisieren. Wie wir sehen können, haben wir das bekommen und lassen Sie mich einfach anpassen, indem Sie das Bild oben verwenden. Geh zurück, erfrischen. Und das ist unser Strom bis jetzt. Fügen wir noch einen hinzu. Und indem ich diese ganze Zeile, Spalte kopiert, tut es mir leid. Und wenn ich jetzt zurückgehe, habe ich zwei Karten. Lass uns das Bild ändern. Das wird also das erste Bild sein. Und wie wir sehen können, entschuldigen Sie, lassen Sie uns ein anderes Bild wählen. Also vielleicht dritter. Und ich denke, wir sind jetzt gut. Wir gehen zurück und erfrischen uns. Wir haben beide Bilder. Wenn wir nun ein paar andere Bilder hinzufügen möchten, zum Beispiel, kann ich kopieren und einfügen ds. Wenn ich mich erfrischen würde. Um diese Bilder zu bekommen, lassen Sie mich aber einfach zurückgehen. Mal sehen. Also für die Spalte und das, OK, also das ist das Problem. Wir haben hier aus Versehen eine Division hinzugefügt. Und hier. Und ich denke, jetzt werden wir klassisch schlecht. Es tut mir leid. Lassen Sie uns das einfach auch löschen. Ja. Okay, jetzt sind wir gut. Aktualisieren. Und das ist es. Wir haben unsere vier Karten bei 1234. Und das ist alles für die tollen Karten. Sie können immer einige Elemente zu den Röcken hinzufügen, zum Beispiel, hier habe ich gerade die Überschrift hinzugefügt. Sie können den Absatz hinzufügen und das Gleiche gilt für alle anderen Karten. Und das ist im Grunde das, eigentlich das Letzte, was ich abdecken werde, ist die Fußzeile. Wenn ich zum Beispiel eine aktuelle habe und eine Fußzeile hinzufügen möchte, kann ich einfach das Glas hinzufügen und alles hinzufügen, was ich will. Lassen Sie mich entweder klein. Also sollte die Klasse stumm besteuert werden. Und das ist Fußzeile. Und ich habe gerade im letzten Bild hinzugefügt, also werde ich es in keiner dieser Wurzeln hier sehen. Dies ist die Fußzeile und es sieht aus wie eine tatsächliche Fußzeile. Und das ist es im Grunde für die Karte. Damit ist dies das Ende dieses Videos. Wir sehen uns im nächsten. 15. Karussell:: Hallo und willkommen zurück. In diesem Video werden wir über Karussell sprechen. Und das sind die Folien, die du kannst, die du siehst. Normalerweise, wenn Sie eine Website haben, zum Beispiel eine Shopping-Website. Und es gibt so viele Produkte, sie verwenden normalerweise Karussell. Und das ist das Bild. Und das kann man ändern. Und Sie können entweder nach rechts oder links gehen. Und es ändert sich automatisch auch. Und um dies zu erstellen, lassen Sie mich das einfach löschen und starten. Das erste, was wir tun werden, ist, unsere Division zu schaffen. Und es wird in unseren Klassen Karussell und Arten von Terrorismus und Rutsche sein. Und das ist ein, lassen Sie uns in unserem Karussell erstellen, das Karussell. Also gibt es Energie. Das ist es. Und bevor wir vergessen, müssen wir die Daten BS hinzufügen, richtig? Und das soll darauf hinweisen, dass dies ein Sonnenschirm ist. Und natürlich müssen wir in unserem Karussell die Gegenstände erstellen. So wird der erste Gegenstand der Klasse Karussell Artikel sein. Und ich gebe ihm die Art der aktiven. Da dies das erste ist und es wird hauptsächlich ein Bild von Bildern sein. Diesmal wähle ich Kinder aus. Der erste wäre also gut. Und natürlich, Lassen Sie uns hier einige Klassen hinzufügen. Die erste Klasse wird das Glück sein, und die zweite wird vier Breite 100 sein, nur um es schön aussehen zu lassen. Und dann kopieren wir das und fügen Sie es ein paar Mal ein. Und vielleicht fehlen dir nur drei Mal Stücke genug. Lassen Sie uns das jetzt von aktiv zu normal ändern. Und das von Kindern wollen 32 bekommen. Und jetzt denke ich, wir sollten wieder erfrischen. Und das ist unser Karussell. Und wie wir sehen können, wenn wir ein bisschen warten, wird es sich dramatisch ändern. Und wie wir sehen können, änderte es sich in das zweite Bild. Und wenn wir länger warten, werden wir die dritten Zehn bekommen. Gehen Sie zurück zum ersten Bild. Moment gehen wir zurück zu unserem Code und sehen, wie wir das ändern können. Also haben wir tatsächlich die Kontrolle. Und das sind die Pfeile, die kommen und die rechte und die linke. Und wir können sie zu unserem Karussell hinzufügen. Und um das zu tun, können wir einfach innerhalb unserer Abteilung hinzufügen. Also, nachdem wir von unserem Enter beendet haben, können wir den Link hinzufügen. Und dieser Link wird sein. Brille, Karussell Kontrolle Als Nächstes. Und natürlich wird die Rolle ein Knopf und Daten BS Folie sein . Und diese Folie wird vom Typ vorheriger sein, also d gleich dem vorherigen. Also hier haben wir unseren Link. Und in diesem Fall lassen Sie uns eine Spannweite erstellen. Das erste wäre also das Karussell gesteuerte Rebus-Symbol. Dies ist das Symbol für die vorherige. Und natürlich, lassen Sie mich einfach sagen, dass die verborgene Fläche gleich wahr sein wird. Und dann nach dem Erstellen der Spanne, die die zweite erstellt, wird in diesem Fall die Schaltfläche Vorherige sein. Ich mache es jedoch visuell versteckt, also ist es hier, aber wir können es jetzt sehen. So optisch. Und dann, damit wir diese Pfeile erscheinen lassen, müssen wir sie mit unserem Karussell verknüpfen. Und um das zu tun, müssen wir hier einfach eine ID erstellen. Also lassen Sie mich es Sonnenschirm nennen und vielleicht Karussellkontrollen. Und natürlich müssen wir das auch mit Karussell und Profis verknüpfen. Und ich denke, wir könnten es. Hier haben wir jedoch ein vorheriges Symbol hinzugefügt und hier haben wir es zu einem X angegeben . Das ist also auch eine vorherige. Jetzt gehen wir wieder zu aktualisieren. Und wie wir sehen können, haben wir diesen Knopf hier. Wenn ich drauf drücke, gehe ich wieder zurück und gehe noch einmal zurück. Jetzt werden wir dasselbe für die nächste tun. Also hier haben wir die Karussell Kontrollen. Und dann werden die Klassen eine Klasse eigentlich Karussellkontrolle sein. Und als nächstes ist die Rolle Schaltfläche und Daten, BS, Folien, und es wird als nächstes sein. Und ich denke, jetzt sind wir gut mit müssen nur unsere Spannweite hinzufügen. Die Klasse wird Karussell sein. Kontrolle. Nächstes Symbol. Also hier fügen wir das nächste Item-Symbol hinzu. Und das Bereichspedal wird auch wahr sein. Und lassen Sie uns die zweite Spanklasse erstellen, die optisch Plus getan hatte. Und das wird darauf hinweisen, dass dies hier der nächste ist. Wenn wir jetzt wieder aktualisieren, wie Sie sehen können, haben wir beides. Wir haben die nächste und die vorherige. Aber hier, als nächstes wird hier ein Fehler gemacht, und ich werde zurückgehen, aktualisieren. Und jetzt sind wir gut. Wir haben unsere Rechte und Links. Und Sie können zwischen ihnen umschalten. Wir können nach rechts und links gehen, oder wir können warten. Und es wird sich selbst umschalten. Und das ist es für das Karussell. Wir haben auch den Indikator. Und das ist etwas, das am Ende des Bildschirms kommt. Und wir können aus wählen, vielleicht, wenn wir vielleicht drei Bilder haben, es wird drei Zeilen hier haben und wir können die Linie wählen, die wir wollen. Also lasst uns weitermachen und es umsetzen. Und um das zu tun, müssen wir zu unserer Abteilung zurückkehren. Vor dem Erstellen des Karussell eingeben. Wir müssen tatsächlich die geordnete Liste erstellen. Und in diesem, werden wir die Klasse Darussalam Indikatoren haben, Hasser. Und ich denke, wir sind gut. Und jetzt lassen Sie uns unseren Listeneintrag erstellen. Das erste Listenelement haben wir die Daten BS, Ziel. Und dies zeigt für das Karussell die ID des Karusells an. Also Karussell steuert. Und dann Daten VS Folie. Und das wird zum ersten gleiten, wird die Folie 0 sein, und ich gebe ihm die Klasse der aktiven. Und der zweite, lass mich das einfach kopieren und hier einfügen. Und noch einmal. So wird der erste auf 0, der zweite und der dritte 22. Und natürlich wird der erste, den wir nur haben werden, der einzige sein, der die Klasse aktiv hat. Wenn ich jetzt zurückgehe und mich auffrischen, wie Sie sehen können, haben wir diese kleinen Zeilen hier. Wenn ich auf einen von ihnen drücke, um mich automatisch auf das Bild zu bringen. Also, wenn ich hier drücke, gehe ich zurück zum ersten Bild. Und wann immer Sie ein Karussell erstellen, benötigen Sie nur eines davon. Entweder sind Kontrollen oder die Indikatoren da unten. Und das ist es für die Karussellindikatoren. Nehmen wir an, ich muss etwas hierher fahren, vielleicht eine Beschriftung. Also gehen wir zurück zu unserem Code. Nachdem Sie das Bild erstellt haben, können wir jedes Karussellelement, die Karussellbeschriftung, und die wir mit Karussellbeschriftung erstellt haben, hinzufügen . Und ich werde die Klasse hinzufügen, die keine und den mittleren Block. Also, wenn ich jetzt etwas hier und niedrig tippe, dann Absatz sechs, wenn ich jetzt zurückgehe und aktualisiere. Wie Sie sehen können, haben wir hier etwas. Wenn ich jedoch minimiere, verschwindet das Bild. Und das ist wegen dieser Klasse, die ich hier hinzugefügt habe. Also DMD schwarz. Dies bedeutet, dass dies für alles gilt, was größer ist als Medium. Wenn wir jedoch zu einem Punkt kommen, an dem wir mittlere, kleine x kleine Größe haben , verschwinden Bildschirmgrößen und 12 automatisch. Und das ist es. Wir können dies kopieren und auf verschiedene Elemente eingefügt und es wird gut funktionieren. Also, wenn ich jetzt zurückgehe und mich erfrischen, kann ich es hier sehen. Vielleicht änderte die Kynar jedes Mal. Also vielleicht hier können wir den Text dunkel hinzufügen. Gehen wir zurück und erfrischen wir uns. Und wie Sie hier sehen können, haben wir unsere Texte in der dunklen Farbe, und das ist es für die Beschriftung. Und ich denke, das sind genug Informationen über Karussell da wir es verwenden werden, wenn wir ein Projekt erstellen. Und damit das gesagt wird, ist dies das Ende dieses Videos. Wir sehen uns im nächsten. 16. Navbar: Hallo und willkommen zurück. In diesem Video werden wir über Nickerchen und Tabs sprechen. Einige davon haben wir bereits in den vorherigen Videos verwendet und implementiert. In diesem werden wir jedoch tiefer graben und wir werden in die Details darüber eingehen, wie man erstellt und verwendet. Lassen Sie uns zuerst das alles löschen und beginnen. Das erste, was wir tun müssen, ist die ungeordnete Liste zu erstellen. Und die Klasse wird es sein. So u l Punkt. Und das ist unsere ungeordnete Liste. Jetzt können wir einige Listenelemente innerhalb erstellen, so dass nav Element, so dass die Klasse nav Element innerhalb dieser Klasse sein würde, geben wir es einen Link. Innerhalb dieser langwierigen Klasse wird nav Element oder nav Link sein. Und dieser erste wäre aktiv. Und wir können das einfach hinzufügen. Das ist also aktuell und es wird gleich Seite sein. Und natürlich, das ist, müssen wir ihm einen Namen geben und dies wird die Homepage oder das Home-Element sein. Jetzt gehen wir zurück. Siehst du, was wir geschaffen haben? Also erschaffen wir einfach dieses Haus. Lassen Sie uns nun einige andere Listenelemente erstellen. Also am zweiten wird erwähnt. Dann. Marken vielleicht. Wenn wir jetzt zurückgehen und uns auffrischen, werden wir das bekommen. Also das ist es für die Link-Elemente. Wir können immer hinzufügen, zum Beispiel, die deaktivierte Klasse hier. Und das ist, um den Listeneintrag deaktiviert zu machen, damit wir darauf drücken können. Und im Vergleich dazu kann ich auf Haus- und Missionsmarken drücken. Wir können drauf drauf drücken. Also gehen wir zurück und lassen Sie uns jetzt über die horizontale Ausrichtung sprechen. Und eine Möglichkeit, damit umzugehen, wenn Sie nicht auf der linken Seite sein wollen, besteht darin, den Rechttify-Inhalt zentriert zu verwenden. Und dies ist eine Klasse, die im Allgemeinen für die ungeordnete Liste verwendet wird , wenn Sie eine navbar erstellen. So rechtfertigen Content-Center. Geh zurück, erfrischen Sie sich. Und jetzt haben wir unsere Elemente in der Mitte der Seite. Wenn Sie möchten, dass sie am Ende sind, kann ich dies einfach ändern und zurückgehen und aktualisieren. Und wie wir jetzt sehen können, sind sie am Ende. Wir haben auch die vertikale Ausrichtung. Und in diesem Fall, lass mich einfach hierher gehen. Und lassen Sie uns die Flex-Kragenklasse verwenden. Also Flags Spalte. Jetzt geh zurück, erfrischen. Und wie wir sehen können, sind sie jetzt alle vertikal, also sind die Elemente vertikal und wir haben auch die Registerkarten. Und das wird benutzt. Verwenden der Klasse nav-Registerkarten. Also nav Tabs. Und wenn wir zurückgehen und uns auffrischen, werden wir die Tabs bekommen. Und das ist deaktiviert, da wir es mit den Deaktivierten hier deaktiviert haben. Und natürlich haben wir auch die Pillen. Und wie der Name schon sagt, müssen wir die Nav-Pillen benutzen. Wenn ich zurückgehe und mich erfrischen, werden wir den Puls so bekommen. Und lassen Sie mich einfach den Schauspieler von diesem löschen. Also sehen wir den Unterschied, aktualisieren. Und wie Sie sehen können, ist dies aktiv, das ist normal, und das ist dies. Nun, lassen Sie uns Dropdown in unserer Navigationsleiste verwenden. Und in diesem Fall haben wir Heim-Mission-Bands. Lassen Sie hier hinzufügen, es fiel herunter und fügen Sie einige Optionen hinzu. Das erste, was wir tun werden, ist, diese Basis hier zu kopieren. Und das sollte die Dropdown-Liste sein. Drop runter. Und natürlich, wenn wir unser Dropdown-Menü erstellen, müssen wir einige Optionen erstellen. Und dazu erstellen wir einfach eine ungeordnete Liste. Und die Klasse wäre Dropdown-Menü. Wir haben dies bereits früher implementiert, aber wir werden es noch einmal inkrementieren. Und in diesem Fall werden wir es hier und die Navbar implementieren. Also haben wir Listenelement Seite, diesen Artikel, wir haben einen Klassenlink und dieser Link verweist auf nichts. Die Klasse wird Dropdown-Element sein. Und das ist Punkt eins. Also lassen Sie mich das kopieren. Vielleicht zwei oder drei mal 123. Also ist das Element zu Punkt drei, Element für und das ist es für die ungeordnete Liste. Und natürlich müssen wir einige Klassen zu unserem Link hinzufügen. Für mich haben wir den Navigationslink und den Dropdown-Schalter. Also Drop-Down-Toggle. Und schließlich zum Listenelement als Ganzes müssen wir das Klassen-Dropdown-Menü hinzufügen. Und ich denke, wir sind gut. Wenn ich zurückgehe und zu aktualisieren, wirst du dieses Drop-down-Menü bekommen, ist, dass ich drauf drücke. Ich denke, das wird passieren. Vielleicht haben wir einen Tippfehler gemacht. Also haben wir jetzt eine Sanduhr spielen Dropdowns, die ich könnte. Okay, also haben wir vergessen, die Daten hinzuzufügen. Wechseln Sie zu UDL. Was auch immer wir weitermachen, das ist runtergekommen. Und jetzt könnten wir uns erfrischen. Und das ist es. Wir haben unsere Artikel, aber ich werde auf Drop-down-Menü drücken. Sie erscheinen und noch einmal verschwanden sie. Jetzt, da wir einige Informationen über Drop-down-und navbar haben, lassen Sie uns eine vollständige Karte erstellen, die wir auf unserer Website verwenden können. Das erste, was wir tun werden, ist, unsere Division zu schaffen. Und es wird die Klasse navbar und Navbar erweitern auf großen Bildschirmen enthalten. So billig. Und ich denke, wir sind jetzt gut. In unserer Klasse werden wir die Containerflüssigkeit erstellen und später besprechen. Aber jetzt werden wir es einfach schreiben. Wir haben die Verbindung. Und in diesem Fall wird die Klasse navbar Marke sein. Und das ist Navbar. Gehen wir zurück und erfrischen wir uns. Und wie wir sehen können, haben wir unseren ersten Artikel auf unserem ersten Element nach rechts drinnen, und es ist hier. Jetzt gehen wir zurück zu unserer Abteilung. Lassen Sie uns innerhalb dieser Abteilung eine Schaltfläche erstellen. Und in diesem Fall wird die Schaltfläche vom Typ Button sein. Und die Klassen wären genug, aber umgeschaltet, umgeschaltet. Und natürlich haben wir Daten umschalten. Und es wird vom Typ Zusammenbruch sein. Und jetzt nach der Erstellung dieser, haben wir immer noch die Daten BS und Ziel. Und das ist es. Und das ist, um die Daten zu zielen. Und wann immer wir drücken, also geben wir ihm einen Namen wie navbar Inhalt. Und ich denke, jetzt sind wir gut. Wenn ich hierher zurückgehe. Und so ist das unser Knopf. Lassen Sie uns unsere überspannten erstellen. In unserer Division haben wir diese Band. Dieses Band wäre der Klasse navbar, doppeltes Kanten-Symbol. Bis jetzt, da wir mit unserer ersten Division oder unserem ersten Knopf fertig sind, lassen Sie uns die zweite Division erstellen. Und das werden die Navigationsbalkenelemente sein. Also lassen Sie mich ihm die Klasse des Zusammenbruchs und des Navbar-Zusammenbruchs geben. Und geben Sie ein. Natürlich müssen wir die ID hinzufügen, die wir hier verwendet haben. Also haben wir gesagt, dass die Daten sind, sollten wir den navbar-Inhalt anvisieren. Also müssen wir die ID navbar Inhalt hinzufügen. Und natürlich innerhalb unserer Abteilung müssen wir unsere ungeordnete Liste wie zuvor erstellen. Die Klasse wird navbar sein, nav. Und das Auto. Lassen Sie uns etwas Spielraum geben. Also MV2 und groß sein 0. Dies ist also margin-bottom für große Bildschirme gleich 0. Und jetzt können wir unsere Listenelement öffnen, das erste Listenelement, wie üblich Klasse nav Element. Und in unserem Listenartikel können wir unsere Länge erstellen. In diesem Fall ist der aktuelle Bereich gleich Seite. Und natürlich werden die Klassen nav Link sein und der erste wird aktiv sein. Und das ist zu Hause. Jetzt lasst uns das ein paar Mal kopieren. Das ist also die erste 1, zweite, dritte, vierte. So zu Hause Mission, Produkt und kontaktieren Sie uns. Gehen wir zurück und erfrischen wir uns. Können wir sehen, haben wir unsere Knöpfe hier. Und wenn wir wollen, können wir die Dropdown-Schaltfläche hinzufügen. Wann immer, wie wir es vorher getan haben, wenn wir etwas drauf drücken, erscheinen einige Optionen. Aber wir werden es nicht um der Zeit willen tun. Aber für jetzt denke ich, dass das gut ist. Gehen wir nun zurück und fügen Sie die Suche hinzu. Also, nachdem wir mit unseren ungeordneten Listen fertig sind, können wir unser Telefon ohne jede Aktion erstellen. Und die Klasse wird die Verzögerungen sein. Natürlich haben wir in unserer Form den Input. Die Eingabe wird in diesem Fall vom Typ Suche sein. Und natürlich müssen wir einige Klassen wie gewohnt hinzufügen. Die erste Klasse wird also für die Steuerung und den Platzhalter sein. Wir können einen Platzhalter hinzufügen, um über Label zu suchen. Auch suchen. Und ich denke, wir sind gut mit dem Input. Wir können die Schaltfläche hinzufügen. Und dieser Knopf wird von Klassen btn, PTEN, Erfolg sein. Und der Typ wird Submit sein. Und natürlich müssen wir das Wort Suche hinzufügen. Nun, wenn ich zurückgehe und aktualisiere, wie wir sehen können, haben wir unseren Suchknopf und wir können Social alles von hier aus. Wenn wir jedoch etwas eingeben und Präzedenzsuche suchen, wird nichts passieren, da wir keine Fontenelle oder irgendeine Aktion hinzugefügt haben. Also das ist es für die Navigationsleiste. Sie können alles verwenden, was wir bisher gelernt haben, von vielleicht Wörtern, Abzeichen, Warnungen, Karten. Sie können alles in dieses Netzwerk setzen. Und natürlich kannst du sie teilen, wie wir es vorher getan haben. Und wie Sie hier sehen können, haben wir uns entschieden, dies am Ende zu setzen. Wenn wir die deflects Klasse entfernen und wieder aktualisieren, können wir sehen, dass es nicht schön aussieht. Wir haben hier ein paar Taschen. Und das lenkt uns ab, unsere Navigationsleiste besser zu manipulieren. Das ist also im Grunde für die Navigationsleiste. Sie können voran gehen und es selbst ausprobieren. Sie können vielleicht die Farbe ändern. Lassen Sie mich nur einmal die Farbe ändern. Wir können entscheiden oder wählen Sie die Farbe von hier. Also werden wir zwischen Dunkelheit sein. Wenn wir zurückgehen und uns erfrischen. Das ist unsere dunkle Navigationsleiste. Wir können auch den Text anpassen, der ausgerichtet werden soll. Und wir können das mit dem navbar dunklen Attribut oder Glas tun. Also naff, aber dunkel. Und so können wir sehen, dass die navbar Heimmaschine weiß geworden ist. Da Bootstrap weiß, dass wir ein Hintergrunddunkel verwenden, wird es diese Wörter automatisch in einen weißen Modus verwandeln. Nun, wenn wir zurück gehen und um es ein wenig besser zu machen, können wir den btn-Erfolg von hier entfernen, aktualisieren und vielleicht einfach das btn Licht wählen. Ich denke, es wird gut, frisch und es sieht jetzt schöner aus. Wir nutzen das Dunkle und Licht in unserem Netzwerk. Also das ist es im Grunde für die Navigationsleiste. Sie können fortfahren und ändern, alles ändern, was Sie wollen, und wählen Sie Ihre Navigationsleiste. Damit ist dies das Ende dieses Videos. Wir sehen uns im nächsten. 17. Bootstrap-Website: Navbar: Hallo und willkommen zurück. In diesem Video werden wir mit dem Aufbau unserer ersten Bootstrap-Website beginnen. Und diese Website wird komplett mit Bootstrap erstellt werden. Und am Ende könnten wir einige Effekte hinzufügen und einige mit CSS formatiert. Aber jetzt werden wir es mit Bootstrap Andi bauen. Bevor wir anfangen, müssen wir zu Google gehen und nach Font suchen. Ehrfürchtig. Und dies ist eine Website, die es uns ermöglicht, die Symbole zu verwenden. Also gehen Sie voran und registrieren Sie sich kostenlos, erstellen Sie Ihre erste bekommen, und dann gehen Sie zu Ihren Kindern von Ihrem Konto und drücken Sie darauf die erste. Und dann, nachdem Sie die Fähigkeiten erhalten haben, kopieren Sie einfach den Code und fügen ihn in Ihre Website ein. Und das ist alles, was Sie im Grunde tun müssen, jetzt können wir mit font-awesome arbeiten, wie wir wollen, und wir werden sehen, wie wir diese Symbole auf unserer Website verwenden können. Das erste, was wir erstellen werden, ist die Navigationsleiste. Lassen Sie mich also voran und erstellen Sie einen Kommentar. Und so können wir einen Moment mit HTML und Limit Anzahl erstellen. Und dann, und so können wir jetzt anfangen. Das erste, was wir erschaffen werden, ist die NADPH. Und wir können es mit dem nav Element erstellen. Und die Klassen werden navbar, nav bar, erweitern HAT medium. Und vielleicht verwenden wir den Hintergrund dunkel, also Vg dunkel. Und natürlich, wenn wir den dunklen Hintergrund verwenden, müssen wir in diesem Fall die Text-Dia-Decks oder Navbar Licht haben. Und jetzt haben wir gesagt, dass wir mit unserem Netzwerk beginnen können. Das erste, was wir erstellen werden, ist ein Symbol. Um das zu tun, werden wir den Link erstellen. Und dieser Link würde nichts zeigen, bis jetzt wird die Klasse navbar Marke sein. Und innerhalb dieses Links können wir unser Symbol erstellen. Und hier müssen wir ihm einige Klassen geben. Also hier müssen wir einige Symbole von Font Awesome verwenden. Wenn wir zurück zu unserer und auch Seite gehen und zu den Symbolen gehen, können wir für mehr als 7 Tausend Symbole suchen. Wenn wir ein wenig nach unten scrollen, würden wir einige verfügbare Symbole finden. Diese sind für Pro und Sie benötigen eine Lizenz, um sie zu haben. Also werden wir diejenige verwenden, die für uns zur Verfügung steht. Und das sieht so aus, also drauf drauf zu nehmen, um uns dazu zu bringen. Und wie Sie sehen können, können wir es benutzen. Und als B und Microsoft. Also gehen wir zurück zu unserem Code und zeichnen hier f a, b, f a. Und natürlich brauchen wir den Text warngespannt, wir verwenden einen dunklen Hintergrund. Und lassen Sie uns ein paar Klassen geben. Also für zwei Akte brauchten wir 2x mal. Und natürlich geben wir ihm etwas Spielraum und vielleicht Max drei. Also gehen wir zurück und aktualisieren unsere Seite. Wie wir sehen können, haben wir unser Symbol hier am Anfang unserer Navigationsleiste. Also das ist es für das Symbol. Jetzt gehen wir und fahren mit unserer Navbar fort. Nachdem wir unseren Link erstellt haben, können wir unseren Button erstellen. Dies ist also die Schaltfläche, die vom Typ Button sein wird. Und wir müssen ihm eine Brille geben. So nav bar, tabellarische und der Hintergrund wird hell sein. Und wir können auch den Daten-Toggle hinzufügen. Und es wird die Zeit verstrichen sein. Natürlich wollen wir das Datenziel nicht durcheinander bringen. Und das wird zielen und etwas, das wir später erstellen werden, aber lassen Sie mich ihm die ID nav geben. Jetzt, nach dem Erstellen der Schaltfläche, können wir unsere Erweiterung erstellen. Und in der Spannweite. Wir werden es einige Klassen wie navbar, tabellarische Symbol, und geladen, um den HTML der Website zu visualisieren. Während wir unseren Code fahren. Ich werde diese Erweiterung herunterladen und es ist ein Live-Server. Kann voran gehen und es herunterladen. Dann, wenn du fertig bist, kannst du auf Go Live drücken. Und die Summe automatisch die Bootstrap-Seite auf unserer Website anhängen und es wird sich ändern und automatisch geändert werden, wenn wir etwas ändern. Also lassen Sie mich einfach diese Seite anpassen und ich denke, jetzt sind wir gut. Zum Beispiel, wenn ich dieses Symbol degradiert und speichern, wird es automatisch von hier entfernt. Aber jetzt, lassen Sie mich es nochmal speichern. So können wir sehen, dass wir unser Ich Comeback bekommen haben. Also lasst uns weitermachen. Wir gehen zu unserer ersten Abteilung und es wird vom Typ genug sein oder die Idee, lassen Sie mich einfach die ID nennen, da wir hier in unserem Datenzielnerv benannt haben. Also werden wir diese Division anvisieren. Und die Idee wird sein, jetzt werden wir einige Klassen hinzufügen, aber lassen Sie mich hier erschienen und die Brille wird die erste sein, ist Zusammenbruch. Um zusammenzubrechen. Und Navbar-Warnungen. Wir müssen auch das gerechtfertigte hinzufügen. Dann zwischen und wir sehen, werden wir sehen, was das in einer Minute tun wird. Aber jetzt lassen Sie es uns hinzufügen. Und natürlich, wenn wir unsere Navigationsleiste erstellen, müssen wir die ungeordnete Liste hinzufügen. Die ungeordnete Liste wird der Klasse navbar nav sein, und die Listenelemente werden vom Typ nav Elemente sein. Also Klasse nav Artikel. Und dann öffneten wir eine ungeordnete Liste, Listenelement darin. Wir haben die Länge. Und diese Länge wird von Gläsern sein. Nun, Länge und der Text wird Licht Schriftart sein. Oder lassen Sie mich sie einfach Großbuchstaben machen. Also Text Großbuchstaben. Und wir werden die b X drei hinzufügen, nur um uns etwas Polsterung zu geben. Und natürlich müssen wir etwas dazwischen hinzufügen. Also das erste, was wir zu Hause sein werden, indem Sie auf Speichern klicken. Und jetzt können wir es nicht sehen, da wir das haben. Wenn ich die Größe vergrößere, können wir sehen, dass wir unser Zuhause hier haben. Also gehen wir zurück und fahren fort. Lassen Sie uns das ein paar Mal kopieren. So zu Hause. Und ich denke, jetzt mit gut, wenn ich das ändere, das erste, was wir hinzufügen werden, ist nach Hause der Kontakt mit uns oder vielleicht unsere Mission. Und dann das letzte, was wir SP hinzufügen könnten, kontaktieren Sie uns. Und wir können hier unser Produkt hinzufügen. Und ich denke, wir sind gut. Wie wir sehen können, haben wir unsere Hausmaschinenprodukte und Kontakt. Lassen Sie mich einfach die Größe davon verringern. Und auch das. Und jetzt sind wir gut. Wir beendeten den ersten Schritt unserer Navigationsleiste. Also jetzt möchten wir vielleicht die Suchschaltfläche hinzufügen, die hier kommt oder die Sucheingabe. Und dazu müssen wir eine neue Reform schaffen. Und ohne jede Aktion wird die Klasse gleich vier sein. Schlange einchecken. Und ich bin bei drei. Und jetzt, wenn wir gehen und anfangen, können wir unsere Division erstellen und es wird Eingangsgruppe sein. Und innerhalb unserer Abteilung können wir unseren ersten Input erstellen. Und die drei sind vom Typ Text. Die Klasse wird wie gewohnt für oder Formular-Steuerelement gesteuert werden. Und der Platzhalter wird einfach sein. Suchen Sie einfach nach allem. Und jetzt, wenn ich zurückgehe und die Größe vergrößere, können wir sehen, dass wir unsere Sucheingabe haben. Jetzt können wir die Schaltfläche hinzufügen, um die Suche zu generieren. Fügen Sie es direkt hier nach unserer Eingabe hinzu. Das ist also die Division, und wir können eine neue Division innerhalb der alten hinzufügen. Und D2 wird Eingabegruppentext sein. So können wir jetzt unsere Schaltfläche erstellen. Es Typ wird Schaltfläche sein. Wie immer. Die Klasse wird einfach sein, nur btn. Und innerhalb dieser Schaltfläche können wir unsere Suche hinzufügen. Ich kriege, wir können von Font kommen. Ehrfürchtig. Also, wenn ich zurückgehe und nach dem Suchsymbol suche, wie wir sehen können, ist dies Welle und drücken Sie die Eingabetaste. Wir werden diese Suche bekommen. Lasst uns drauf drücken. Und das ist das Suchsymbol. Wenn wir es verwenden wollen, schreiben wir einfach F ein S einer Suche. In unserer Schaltfläche müssen wir das Symbol erstellen. Die Klassen werden eine als Suche sein. Und geben wir ihm eine Farbe des Textes stummgeschaltet. Und wenn wir zurückgehen, Erhöhen Sie die Größe, gehen, um diese Suche zu bekommen. Das ist also im Grunde, das ist unsere Navigationsleiste, unser erstes Element unserer Website. Im nächsten Video werden wir weiterhin die nächsten Elemente, Formulare erstellen und versuchen, Dinge zusammenzuführen, um eine vollständige Bootstrap-Website zu finden. So sehen wir uns im nächsten Video. 18. Zuhause und Mission: Willkommen zurück. Und in diesem Video werden wir anfangen, unser Haus und unsere Mission zu schaffen. So zu Hause ist das erste, was der Benutzer sehen wird, wenn er unsere Website betritt. Und ich denke an etwas sehr Einfaches, das ist ein Willkommensbrief. Und lassen Sie uns das tun, indem Sie einfach die Navigationsleiste verlassen, das Haus, die Art von Haus und Zuhause schaffen. Also in unserem Haus müssen wir einen ganz neuen Abschnitt erstellen. Im Inneren des Abschnitts haben wir die Teilung Behälter Flüssigkeit. Also Containerflüssigkeit. In dieser Division haben wir unsere erste Reihe. So wird die Zeile sein, wir werden einige Klassen hinzufügen, die zu werfen. Die erste ist, Benton Center zu rechtfertigen. Das ist, um einfach alle Inhalte in der Mitte unserer Website hinzuzufügen und Elemente, Zentren auszurichten. Und dies, um die Elemente in der Mitte auszurichten. Und geben wir ihm eine Höhe von 100. Ich denke, es wird gut sein. Und jetzt fangen wir mit unserer Abteilung an. Das erste, was wir erstellen werden, ist die Spalte zehn. Und in dieser Spalte werden wir auch die Überschrift der Klassenanzeige erstellen. Und natürlich sollte die Steuer kapitalisiert werden. Also werde ich die Steuer kapitalisieren verwenden. Und in unserer Überschrift haben wir unsere Spannweite. Und lassen Sie mich hinzufügen. Hallo und willkommen auf meiner Website. Wenn ich auf Speichern klicke, wird es so etwas erzeugen. Wie wir sehen können, ist dies die Willkommen auf unserer Website. Wir können es jedoch ein wenig ändern. Also innerhalb unserer Spanne können wir tatsächlich die Klasse hinzufügen. Und das ist der Text. Vielleicht versuchen wir es im Dunkeln. Und das ist die Dunkelheit. Vielleicht fragen Sie sich, da wir das Gelb hier verwenden, vielleicht benutzen Sie es hier. Also SMS Warnung, ich denke, es sieht gut aus. Nun, nach der Textwarnung, können wir die nach der Überschrift hinzufügen, können wir den Text hinzufügen. So Absatz. In diesem Absatz schreiben wir hier einige Lauren und einige Klassen. Die erste Klasse wird Text sein. Der Text Clyde? Nein. Also denke ich, dass die Dunkelheit gut ist. Also danke. Doug. Und ich denke, das ist zu breit. Vielleicht fügen Sie die Textfolie hinzu. Und es ist das Gleiche, aber wenn du es merkst, wird es ihm ein bisschen Dunkelheit geben. Es ist mehr zwischen Weiß und Grau. Und das ist im Grunde für die Begrüßung durch diese ist sehr einfach. Sie können weitergehen und es ändern und damit arbeiten. Aber eigentlich werde ich es einfach halten, damit du mit mir nachgehen kannst. Und dann, wenn Sie eine Chance hatten, ändern Sie einfach und verbessern Sie sich. Und das hier. Also eigentlich ist das ein 20-Zuhause. Lassen Sie uns weitermachen und beginnen, unsere Mission zu entwickeln. Nach dem Haus haben wir die Mission. Und dann das Ende dieser Mission und Mission. Und jetzt fangen wir an. Das erste, was wir tun müssen, ist, unseren Abschnitt zu erstellen. Und dieser Abschnitt wird ein Plus Michigan Abschnitt Klasse Mission sein. Und lassen Sie mich damit beginnen, unsere erste Division zu schaffen. Und das ist die Behälterflüssigkeit. Lassen Sie uns die Klassentexte sekundär hinzufügen, nur um es zu sehen und zu visualisieren. Und lassen Sie uns hier einige Zeilen hinzufügen. Also BR mal zehn, aktualisieren. Und das ist die zweite. Von hier aus. Lassen Sie mich hinzufügen die, sorry hier müssen wir den Hintergrund hinzufügen. Also BG sekundär. Und wenn ich speichern, werde ich dieses Grau hier bekommen. Und das zeigt die Containerflüssigkeit oder den Abschnitt unserer Mission an. Beginnen wir also hier, löschen Sie all dies und beginnen mit der Erstellung der ersten Zeile. Und das wird unser Titel sein. Also lassen Sie mich einfach sagen, dass wir hier den Titel und, und Titel in unserem Titel haben. Wir können die Zeile erstellen. Und lassen Sie mich das einfach anpassen. In unserer Reihe. Wir können die Spalte erstellen. Und natürlich in dieser Spalte haben wir die Mission. Und wie wir sehen können, haben wir unsere Mission hier, aber wir müssen sie anpassen. Also in unserer Klasse hier haben wir die Anzeige. Und natürlich muss der Text weiß sein. Also Steuer Weiß und Textcenter in der Mitte, dass wir sehen können, wir hier versammelt. Jetzt können wir entweder die graue Farbe oder vielleicht die dunkle Farbe wählen. Versuchen wir es im Dunkeln und dann werden wir sehen, ob wir wechseln müssen. Um das zu tun, fügen wir einfach hier hinzu. Und statt sekundär. Der Text dunkel. Und los geht's. Wir haben jetzt unseren Text und den Hintergrund, der dunkel ist. Jetzt endet mit unserer Abteilung. Und vielleicht können wir hier etwas Polsterung oder Rand hinzufügen. Also Modul drei, denke ich, wird gut sein. Und nachdem wir die erste Division beendet haben, können wir unsere zweite hinzufügen. Und das wäre der Absatz. In dieser Abteilung haben wir also den Absatz, der aus Glasblei besteht, und es wird im Grunde Lauren 25 sein. Ich stelle fest, dass dies eine Menge Lorin ist, aber ich denke, es wird es gut aussehen lassen. Und das ist es im Grunde für den Titel, wir haben unsere Mission und dann gefolgt von einigen Informationen darüber. Und das ist es. Wenn ich die Größe vergrößere, denke ich, es wird schön bleiben. Und jetzt gehen wir weiter und schaffen das Beste aus unserer Mission. Das ist also das Ende unseres Titels und der Beginn unserer Mission. Also das erste, was wir werden, um die Zeile zu erstellen, in dieser Zeile, haben wir die Spalte vielleicht, nachdem das Medium gekämpft wird und Text zentriert von Zielen. Dies werden wir unser erstes Symbol erstellen. Und, und ich werde nicht von Font Awesome hin und her gehen und das Symbol kopieren, also anpassen, vorbereitet sie vorher. So wird der erste FACS ein Versand schnell sein. Ein 5X, um eine 105 mal größer zu machen, erkennt Gefahr sein oder vielleicht wollen. Mal sehen. Der Rand unten wird für sein. Wenn wir jetzt zurückgehen und diesen Versand bekommen. Nun, nachdem ich dies beendet habe, werde ich vielleicht etwas Text hier hinzufügen. Also wird H eins aus Glas sein. Lassen Sie mich es einige Marge geben, dass die Taste, und es wird schnelle Lieferung sein. Und ein paar Absatz acht. Und wenn ich zum Absatz zurückgehe, lassen Sie uns den Klassentext stummgeschaltet hinzufügen. Und mal sehen, können wir sehen, dass wir unseren ersten haben. Nun, der zweite wäre das Gleiche. Also lassen Sie mich das einfach kopieren und einfügen. Also 12. Und natürlich müssen wir die Symbole und die Überschriften ändern. Also der erste Punkt, den ich hören kann, ist MAS, eine Hand, die USD hält. Also hier F a, S, F a und hält USD. Und statt der schnellen Lieferung, werden wir es zu besten Preisen ändern. Und dann schließlich, die letzte wird FAR FAA Pfeil Alpha, gehen Sie nach oben und Top-Qualität. Das ist also im Grunde, und wie Sie sehen können, ist dies unsere Mission. Wenn wir weitermachen und es größer machen, haben wir unsere drei Symbole und drei Absätze in der gleichen Zeile. Und wir haben die Mission und den Absatz, der darüber spricht. Und wie Sie sehen können, sehen wir nicht die schnelle Lieferung, beste Preise und Top-Qualität. Vielleicht müssen wir etwas dagegen unternehmen. Also geh zurück und lass uns sehen. Also das ist unser H1, vielleicht machen Sie es Text weiß. Und das ist eine schnelle Lieferung. Und wir tun dasselbe für den anderen Untertext, Weiß und Weiß. Jetzt geh zurück, mach es größer. Und wie wir sehen können, haben wir unsere Mission. Und das sind unsere drei Symbole. Wie Sie hier sehen können, gibt es wenig Abstand zwischen den Symbolen und diesem Absatz. Lassen Sie uns also anpassen, indem Sie einfach zu dem Absatz gehen, den wir gerade erstellt haben, und fügen Sie einfach die verbleibende BY hinzu. Und wenn ich zurückgehe, denke ich, es ist besser, aber es ist eine gute Idee, es größer fünf zu machen. Und jetzt denke ich, dass wir gut sind. Und das ist im Grunde, wir haben unsere Mission Absatz, schnelle Lieferung, beste Preise und Top-Qualität. Also das ist es für die Mission und die Homepage. Und damit das gesagt wird, ist dies das Ende dieses Videos. Wir sehen uns im nächsten. 19. Produkte: Jetzt, da wir mit unserem Haus- und Missionsbereich fertig sind, können wir mit unserem Produktbereich beginnen. Also zuerst, lass mich den ganzen Weg runter gehen. Und das ist das Ende unserer Mission. Wir können mit der Erstellung eines Kommentars beginnen. Und der Kommentar wird einfach sagen, dass dies der Produktbereich ist. Und dann beenden wir es mit einer anderen Regierung und einem Produkt. Und jetzt können wir mit der Erstellung unserer Sitzung beginnen. Also das ist der Abschnitt mit dem Glas, aber Polsterung fünf. Und innerhalb des Abschnitts, wie üblich, beginnen wir mit der Schaffung unseres Behälters, und das ist die kontinuierliche Flüssigkeit. Und innerhalb dieser Abteilung können wir damit beginnen, unseren Bogen zu erschaffen. Und werfen wir einen Blick auf diese Website. Ich möchte, dass mein Abschnitt in vier Spalten unterteilt wird, und ich habe zum Beispiel vier Produkte. Das ist also die erste 1, zweite, dritte, vierte. Also, um das zu tun, gehen wir zurück. Und in unserer Auslosung können wir beginnen, indem wir zuerst den Titel und einige Informationen erstellen, und dann teilen wir ihn in vier Spalten auf. Also in der ersten Reihe haben wir den Pollen. Und natürlich möchte ich, dass mein Text zentriert ist, also verwenden wir den Text zentriert und Rand unten drei. Also, jetzt in unserem Muster, lassen Sie uns unsere Überschrift erstellen. Wie immer. Die Klasse der Überschrift. Tags können Warnung sein. Lass uns jetzt sehen. Und das ist auch der Geist. Richtig? Produkte. Und jetzt gehen wir zurück und sehen. So ist das unsere Produkte straffen. Und wie üblich, wenn Sie einen Absatz wollen, können wir immer einige laden Sie sie. Vielleicht 15. Und die Klasse wird führen, Text und vielleicht sekundär sein. Werfen wir einen Blick. Und wenn wir sparen, wie wir sehen können, sieht es schön aus. Nun, nachdem wir den ersten Teil erstellt haben , der Titel und Absatz ist, lassen Sie uns voran und erstellen Sie den zweiten Teil, der unsere tatsächlichen Produkte enthält. Also, jetzt ist dies für die ETO. Wir können damit beginnen, eine weitere Zeile hier zu erstellen. Und diese Reihe wird tatsächlich in vier Produkte unterteilt werden. Das sind also vier Spalten. Und in diesem Fall füge ich einfach drei hinzu. Da haben wir bereits gesagt, dass unsere Website besteht aus 12. Und wenn wir vier Teile wollen, können wir 12 durch vier teilen. Wir werden drei bekommen. Deshalb haben wir diese Nummer drei hier. In diesem werden wir die Bilder von Bildern verwenden. Nehmen wir das erste BEC. Und die Alternative wäre Projekt oder Produkt eins. Und das sind keine Bilder von tatsächlichen Produkten. Produkte. Wir haben hier bereits einige Bilder für Getz und einige zufällige Bilder. Also werde ich sie benutzen. Aber vorerst ist dies für den Moment, wenn Sie dieses eigentliche Projekt erstellen möchten, müssen Sie diese Bilder ändern. Also das ist wie für das Bild, lassen Sie mich einige Klassen hinzufügen. Die erste Klasse wird in der Bild-Miniaturansicht sein. Und ich wollte gerundet werden. Und jetzt, wenn ich mit unserem Absatz beginne, kann ich die Klassen wählen. Lassen Sie uns den Text stummgeschaltet Klasse wählen. Und einige lernen, lernen Sx gleich. Gut. Nun, geh zurück und wie wir sehen können, haben wir unser Bild hier mit dem darunter. Wie wir jedoch sehen können, sieht dieses Bild sehr klein aus und es sieht gut aus, wenn wir die Seite öffnen, wenn wir eine ganzseitige Seite haben. Wenn wir jedoch ein Gerät, ein mobiles Gerät, verwenden , wird es so aussehen und es sieht klein aus. Also müssen wir uns damit beschäftigen. Eine Möglichkeit, damit umzugehen, besteht darin, anzugeben, dass wir immer dann, wenn wir einen kleinen Bildschirm verwenden, nur zwei Bilder in derselben Zeile benötigen. Und eine Möglichkeit, dies zu tun, besteht darin, einfach anzugeben, dass die Spalte drei nur für große Bildschirme sein wird. Und wann immer wir eine kleine haben, werden wir eine Spalte SpaceX verwenden. Und das deutet darauf hin, dass wir nur ein Bild auf, auf DES. Und wenn ich zurück zu Medium gehe, kann es zwei Bilder passen. Und wann immer ich groß gehe, passt es für Bilder. Das ist es also. Nun, lassen Sie uns das vier Mal kopieren. Das ist also 1234. Ändern Sie die Bilder. Also hier haben wir die zweite, dritte. Und ICANN. Wählen Sie das Bild als erstes aus. Wieder. So können wir hier sehen, haben wir unsere vier Bilder. Und wenn ich das Bild oder den Bildschirm größer gemacht habe, werden wir zwei Bilder auf der gleichen Linie haben. Und dann, wenn ich es zu einem Vollbild mache, werden wir Standardbilder oder Standardführungen in der gleichen Zeile haben. So wie wir sehen können, haben wir die komplette Website bis jetzt erstellt. Wir haben unsere Heimat Michigan Produkte und Kontakt. Dies ist die Homepage, das ist die Mission. Und wir haben diese Produkte. Du kannst diese Bilder ändern, wie du gesagt hast, was immer du willst. Und im nächsten Video werden wir die Kontaktieren Sie uns erstellen. Und natürlich könnten wir ein paar andere Dinge hinzufügen, die Ihnen helfen, eine bessere Website zu erstellen. Und denken Sie daran, dass alle diese reinen Bootstrap am Ende sein können, werden wir einige Modifikationen hinzufügen und CSS oder JavaScript verwenden. Also werden wir sehen, aber im Moment werden wir unsere gesamte Website aus Bootstrap bauen. Also im Grunde für dieses Video, wir sehen uns im nächsten. 20. Brands: Hallo und willkommen zurück. Und im letzten Video haben wir die Erstellung unserer Produkte abgeschlossen. Und ich dachte, dass, da wir einige Produkte haben, warum schaffen, warum nicht das Marken-Teil erstellen? Und in diesem Marken-Teil werden wir einige Karten erstellen. Und lasst uns weitermachen und anfangen, sie zu bewerten. Also werde ich damit beginnen, den Kommentar zu schreiben, der Marke ist. Und natürlich, und Rand. Und jetzt beginnen wir mit der Erstellung unseres Abschnitts. Und wir geben ihm ein paar Klassen. Lass es uns für den Moment dunkel machen. Also VGA dunkel und etwas Polsterung und die Y-Achse. Jetzt öffne es, beginne mit unserer Behälterflüssigkeit. Wie immer. Lassen Sie uns in dieser Division mit der Erstellung des Titels beginnen. Das ist also unser Titel. Und das ist E und Titel. Und natürlich innerhalb dieses Titels haben wir einen zurückgezogen. Und lasst uns, da wir unseren Hintergrund dunkel gemacht haben, machen wir unseren Text weiß. Und natürlich sollte der Titel darin zentriert sein. Lassen Sie uns unsere Spalte und einen gewissen Rand erstellen. Und natürlich, das ist unsere Überschrift der Glasanzeige für und dann etwas Rand an der Taste. Jetzt können wir alles auf diese Marken schreiben als einen Absatz. Und in diesem Absatz werde ich die Division erstellen und diesen Absatz innerhalb der Division platzieren. Und die Division wird d m vor und die zugrunde liegenden Klassen haben. Der Absatz wird aus Glas, Blei und Sundaram sein. Wenn wir jetzt zurückgehen, wie wir sehen können, haben wir unsere Marken und einige Absätze, die beschreiben, was die Marken sind, die wir haben. Und natürlich, nachdem wir mit dem Titel fertig sind, können wir mit der Erstellung unserer tatsächlichen Karten beginnen, die unsere Marken halten werden. Also für jetzt werden wir die Zeile erstellen und dann die Spalte erstellen. Und wie gesagt, wenn wir wollen, dass unsere Spalten reagieren, müssen wir für die großen Bildschirme, Bildschirme angeben , was passieren wird. Also dachte ich daran, drei Karten zu haben, wenn wir großen Bildschirm haben. Also, wenn wir diesen großen Bildschirm haben, haben wir 3123. Und insgesamt Tag wird sechs Karten sein. In diesem Fall haben wir zwei Spalten und jede Spalte, sorry, zwei Zeilen und jede Zeile haben wir drei Spalten. Und wann immer wir den Bildschirm und die mittlere Größe haben, werden wir drei Reihen haben. Und in jeder Zeile werden wir zwei Spalten wie diese haben. Also lasst uns weitermachen und mit Harlem anfangen. Im Großen und Ganzen wird es vier und mittelgroß und größer als klein sein, Sex zu sein. Also MEINE F5, und ich denke, wir haben jetzt in dieser Division, werden wir schaffen unsere Division wird unsere Karten halten. So geschnitten. Ich füge den aktuellen Schatten der Klasse hinzu. Und natürlich möchte ich keine Grenzen, also wird der Zeiger 0 sein. Also lasst uns voran gehen und erstellen. Unser erstes Bild wird von Bildern Erwachsenen wählen Sie das gleiche Bild für alle Karten, aber Sie können es natürlich ändern. Dies ist also die erste Bildklasse wie gewohnt, Bild oder aktuelle Dimension. Und dann, wenn wir unser Bild erstellen und wir etwas Text auf diesem Bild wollen, müssen wir die Overlay-Klasse verwenden. Unsere neue Abteilung wird also Kartenbild Overlay sein. Und dann setzen Sie unseren Absatz hier. Also werde ich das Hinzufügen von fünf verwenden. Die Klasse wird mit Weiß und Text in Großbuchstaben besteuert. Und vielleicht etwas angehender. Und ich denke, wir sind gut. Das ist also die erste Marke. Vielleicht schreibe ich einfach zuerst Rand. Und natürlich, wenn ich hierher gehe, wie wir sehen können, haben wir unsere erste Marke. Es ist jedoch nicht so visuell, also können wir den Hintergrund hier hinzufügen. Wir können für die Überschrift, einen Hintergrund der sekundären hinzufügen . Und wie wir sehen können, ist es jetzt ein klarer. Und natürlich, wann immer wir fertig sind, können wir das kopieren. Dies ist unser Leitfaden und wir müssen alle unsere Spalten kopieren. Das ist also die Spalte 123. Jetzt ist das Zweite und das ist dritter. Und wie wir sehen können, wenn wir einen mittelgroßen Bildschirm haben, haben wir zwei in der gleichen Zeile. Und wenn ich es größer mache, werde drei gleichzeitig haben. Und natürlich, wenn ich einen kleinen Bildschirm habe, werde ich nur 11 Karte haben. Und lassen Sie uns das jetzt ein paar Mal kopieren. Das ist also, und ich denke, wir sind gut. Dies ist der vierte, fünfte, sechste. Und jetzt, ich aber Vollbild, können wir sehen, dass wir unsere sechs Karten haben. Und das repräsentiert die sechs Marken, die wir verkaufen oder die wir haben. Und natürlich können Sie die Bilder ändern und vielleicht die Seite der Karte ändern. Der Absatz, wie erkennt sekundäre, sorry, der Hintergrund. Und Sie können viele Dinge tun und ändern, was Sie wollen in diesen Karten. 21. Kunden: Jetzt, da wir mit unserem Produkt fertig sind, können wir mit unserem Kundenbereich beginnen und den Abschnitt, den wir schreiben werden, einige Kunden sehen sollten. Also lassen Sie uns voran und fügen Sie hier einen neuen Kommentar an. Kunden und, und Kunden. Also in diesen Kommentaren, in diesen Kommentaren, können wir beginnen, indem wir unsere Kunden Abschnitt erstellen. Und wieder, öffnen Sie es einfach als Division. Und Kunden. Wir haben auch etwas Polsterung, also p5. Und innerhalb dieses Kundenabschnitts können wir damit beginnen, die Containerlast zu erstellen. Und wie immer haben wir unseren Titel. Und das wird sein, lassen Sie mich einfach eine neue Grenze und einen neuen Titel eröffnen. Wie üblich beginnen wir damit, unsere Zeile innerhalb der DO zu bekommen, lassen Sie mich es einen Text weiß machen. Und natürlich, x, Mitte und angehängte Teilung. Lassen Sie uns innerhalb dieser Division die Spalte und einen gewissen Rand erstellen. Natürlich beginnen wir innerhalb dieser Division mit der Erstellung der Klasse, aber unsere Überschrift wird für Marge unten vier angezeigt. Und das sind die Kunden. Und vielleicht etwas Text hinzufügen. Also Klasse und senken Sie sie. Vielleicht 14. Ich denke, wir sind gut. Wenn ich jetzt zurückgehe, wie wir sehen können, haben wir unsere Kunden Abschnitt, aber es ist breit und wir können nichts sehen, da wir den Text weit hinzugefügt haben. Also lassen Sie mich damit umgehen, indem Sie einfach die Dunkelheit hier anwenden , dass wir sehen können, dass unser Kundenbereich. Nun sieht es nach diesem dritten Abschnitt, Abschnitt, nicht sehr schön aus, da sie beide Doug sind. Vielleicht können wir den Text dunkel ändern und ihn weiß halten, wenn Sie wollen. Aber für jetzt werde ich mit ihm als dunkel arbeiten, da diese Seite nur am Ende sein wird. Und wahrscheinlich verwerfen Sie Seite 1 B auf der gleichen Seite davon. Das ist also die ganze Website. Sie können einige der Elemente oder einige der Abschnitte, die wir erstellt haben, und auf andere Seiten verschieben . Zum Beispiel, wenn ich auf die Mission oder die Produkte klicke, sollte es mich zu der Mission bringen, alle Produkte Abschnitt. Aber vorerst haben wir sie alle auf der gleichen Seite. Wenn Sie das Gefühl haben, dass Sie erstellen können. Und jeder von ihnen auf der anderen Seite und dann verknüpfen sie miteinander. Das ist auch in Ordnung. Also das ist es im Grunde für den Titel. Gehen wir zurück. Und jetzt lassen Sie uns unser Karussell erstellen, das unsere Kunden bewerten wird. Das erste, was wir tun werden, ist, die Indikatoren zu erstellen. Und natürlich, lassen Sie uns wirklich anfangen die Zeile und Spalte wie gewohnt Spalte und dieses Geschlecht zu erstellen. Und ich wollte in der Mitte. Also benutze ich das umax auto. Und dann lass uns aufmachen. Natürlich müssen wir das Karussell erstellen. Also zuerst mussten Teresa und ich rutschen. Und natürlich, ich muss Daten, versucht, wird gleich Charakter sein. Und das haben wir schon vorher umgesetzt. Aber es ist schön, sich daran zu erinnern. Ich gebe ihm einen Ausweis von Aerosol oder Kunden. Da ist es. Und ich denke, wir sind gut. Wir können damit beginnen, unsere eigene Liste von Indikatoren zu erstellen. Das ist also, und wir werden ihm einige Klassen geben. Und das sind die Karussellindikatoren. Und natürlich wird das Listenelement das Ziel davon sein. Wäre Kunden-Karussell. Haben wir das gegeben. Also lassen Sie es mich einfach schnell. Und wir haben ihm gewordene Charaktere gegeben. Also werden wir Hashtag schreiben. Und dann müssen wir Daten schieben zwei. Und das wird auf 0 gleiten. Wann immer wir drauf drücken. Und ich werde es ein Glas aktiv geben. Und ich denke, wir sind gut. Also lassen Sie mich das kopieren und ein paar Mal einfügen. Also 123. Was ist passiert? Also lass mich zurückgehen. Also haben wir eine, wir haben die zweite und die dritte. Und natürlich muss ich einige ändern, die ich brauche, um einige Anpassungen vorzunehmen, damit er L12 sehen wird und das zweite Drittel nicht braucht, dass wir sie nicht so aktiv machen müssen. Und ich denke, wir sind jetzt gut. Wir haben unsere Indikatoren. Also gehen wir zurück und beginnen mit unserem Aerosol geben. Also Karussell betreten. In diesem werden wir unser Karussell Artikel erstellen und der erste Gegenstand wird wie gewohnt aktiv sein. So Karussell Artikel, die aktiv und es wird sein. Danke Zentrum. Das ist es also. Jetzt haben wir unseren Artikel. In diesem Artikel werde ich ein einfaches Bild posten und es wird abgerundet. Also habe ich schon ein paar Bilder von einigen Babys. Ich benutze sie, so dass das Bild Bilder sein wird, es eins. Und die Klassen werden flüssig abgebildet. Und natürlich es haben wir Kreis abgerundet. Und die Marge wird fünf sein. Und ich füge die Breite hinzu, um ein 150 Pixel zu sein. Jetzt gehen wir zurück und sehen uns an. Wie wir hier sehen können, haben wir unsere Kunden, den Absatz und das Bild mit den Indikatoren. Wir haben jedoch noch kein nächstes oder vorheriges Bild. Also lasst uns warten. Und natürlich müssen wir das eigentliche Interview schreiben. Und ich werde es in einen Blockcode geben. Der Blockcode würde also den Klassen-Blogcode haben. Und natürlich in Texten wird weiß sein, und wir haben die Klasse und geben ihm eine Marge, unten fünf und einige Anwalt Lamm, Lende, 20 vielleicht. Jetzt denke ich, wir haben einen Text und das Bild. Und jetzt gehen wir zurück und kopieren diese Division und eingefügt ein paar Mal. Also hier haben wir unsere Abteilung. Oder vielleicht, bevor Sie es kopieren, fügen Sie vielleicht einige Stile hier hinzu, um es besser aussehen zu lassen. Um dies zu tun, geben wir einfach den Namen der Person und gefolgt von der Datierung. Also, dass einfach hier hinzugefügt, vielleicht ein und H für die Klasse werden Texte Licht sein. Mal sehen, X, Großbuchstaben, da es der Name ist. Und Margin-unten drei, wird es sein, sagen wir. Und jetzt lassen Sie uns unsere ungeordnete Liste erstellen. Und es wird eine Klassenliste und Linie sein, da wir brauchen, dass unsere Schüler auf der gleichen Linie sind. Also Liste in Zeile und etwas Rand. Jetzt müssen Sie unsere Listenelement, Liste, Artikel, Liste und Position erstellen . Und natürlich haben wir unsere Icons hier. Und das Symbol für unseren Stern ist AS ein Anfang, und es wird ein gelber Stern sein. Also werden wir die Textwarnung verwenden. Und jetzt denke ich, gut, gut. Also lassen Sie uns warten und wir haben unseren Namen, Hadi und einen Stern. Also lassen Sie mich das vier Mal kopieren. Es tut mir leid. Ich kopiere es und füge es ein. 1234. Jetzt sparen Sie, wie Sie sehen können, haben wir unsere 5-Sterne hier, meinen Namen, und was habe ich geschrieben? Das ist also nicht im Grunde für unsere erste Bewertung. Jetzt müssen wir all dies kopieren und zwei weitere Male einfügen. Also das ist unser Karussell eingeben. Lassen Sie es uns kopieren, bis ich einfach nachsehen kann. Das ist also für das Auto, vielleicht geht das jetzt zurück. Das ist die Teilung, die wir kopieren müssen. Also habe ich es dreimal eingefügt. Und das ist der Eine. Ich bekomme zwei und drei. Und das ist, das läuft jetzt. Und wie Sie sehen können, drücken Sie fünf auf dem Schreibtisch. Es dauert automatisch zwei Tage, bis ich zu dem Kunden zwei komme. Und das ist der dritte Kunde. Und wenn ich es auf Autoplay behalte, wird es automatisch weitergehen, bis ich meine Website akzeptiere. Das ist also im Grunde für unseren Sonnenschirm und den Kundenbereich. Damit ist dies das Ende dieses Abschnitts. Wir sehen uns das nächste Video. 22. Kontaktiere uns und Footer: Hallo und willkommen zurück. In diesem Video werden wir weiter bauen unsere Website und wir werden unseren Kontaktbereich aufbauen. Um das zu tun, lassen Sie mich gehen und einen neuen Abschnitt beginnen. Und das ist der Kontakt. Kontakt. Und, und Kontakt. Natürlich beginnen wir mit der Erstellung unserer Rubrik. Und in diesem Abschnitt der Klasse wird fünf auffüllen und es wird gemocht werden. Der Hintergrund wird also hauptsächlich hell sein. Natürlich beginnen wir mit der Herstellung unserer Behälterflüssigkeit. Und wie üblich, d rho in der Reihe, wir haben die Spalte. Und wir brauchen unseren Text zentriert. Also werden wir das Tech-Center benutzen. Und so Rand an der Schaltfläche. Jetzt, nachdem wir unsere Spalte erstellt haben, können wir mit der Erstellung unseres Titels beginnen. Das ist Kontakt als. Also würde die Klasse besteuert werden. Warnung und Anzeige wären zwei. Und wir werden einfach sagen, kontaktieren Sie uns. Natürlich haben wir einen Absatz, und es wird führen und Texte sekundär sein. So kennen wir bereits die meisten dieser Klassen, so dass keine Notwendigkeit, bei jedem einzelnen von ihnen zu stoppen. Ich schreibe sie einfach so, wie ich es jetzt tue. Und das ist unser Absatz. Nun, wenn wir hier zurück gehen, haben wir unseren Kontakt mit uns, wir haben einen Absatz und wir sind mit dem Titel fertig. Wir können jetzt eine neue Division beginnen. Also wird diese Division nach der Spalte sein. Also das ist die Spalte und jetzt, oder vielleicht können Sie es nach der Rolle auch starten. Das ist also eine neue Reihe. Und natürlich möchte ich, dass der Inhalt zentriert wird, also verwende ich es gerechtfertigt Contact Center. Wir haben eine Spalte und es wird für großen Sex und für Medium sein. Die beiden Acht und für kleine Zehn. Also lassen Sie mich es öffnen und wir haben die Division, die ein Textcenter nehmen und manchmal sekundär anhängen wird. So werden die Überschriften Fragen bekommen. Und dann vielleicht Absatz. Zum Beispiel. Fragen Sie uns. Und jetzt, nachdem wir diese Abteilung erstellt haben, können wir mit der Erstellung unseres Telefons beginnen, das die Eingaben des Benutzers enthält. So wird das Telefon von Text gedämpft Typ arpanet sein. Und wir haben jetzt keine Aktion. Jetzt in unseren vier können wir mit der Erstellung des Labels beginnen. Und das Etikett wird für unseren Namen sein. Entschuldigung, für den Benutzernamen. Und Eingabe wird vom Typ Text für Steuerelement und ID-Namen sein. Nun, nachdem dies erstellt wurde, sind dies unser Label und Input. Wir haben jedoch vergessen, sie einer Division hinzuzufügen. So wird die Division von Klasse für Gruppe sein. Und diese Beschriftung und Eingabe, ich könnte sie einfach kopieren und sie darin einfügen. Und jetzt sind wir gut. Dies ist unsere Abteilung für Gruppe und wir haben unseren Namen und die Eingabe. Und natürlich erstellen wir dann eine weitere Formgruppe. Und dies wird die E-Mail enthalten, so beschriftet für E-Mail. Und es wird tatsächlich die E-Mail des Benutzers, Eingabe, Text, Formular, Steuerelement und ID-E-Mail enthalten . Jetzt haben wir, wir haben immer noch die letzte Division und wie üblich für Gruppe, und dies wird für die Nachricht und Nachricht sein. Und jetzt brauchen wir keine Eingabe, wir brauchen einen Textbereich. Also werde ich den Textbereich verwenden. Es wird heißen, ich brauche den Namen nicht. Die ID wäre die Nachricht. Belgiens Würfe. Ich brauche sie nicht wirklich. Geben Sie sie einfach und die Klasse wäre zur Kontrolle. Und hier haben wir unseren Textbereich. Als Finanzierung aus dieser Abteilung müssen wir den Submission Button hinzufügen, damit die Klasse btn sein wird. Btn. Der Umriss dieser wäre Warnung und BTN Glück. Und ich denke, jetzt müssen wir noch die Arten von treffen und einreichen. Wenn ich hierher zurückgehe und wie Sie sehen können, wir unsere vier erschaffen, wir haben Fragen. Fragen Sie uns, der Benutzer kann diesen Namen eingeben und dann eine E-Mail gefolgt von der Nachricht. Und dann dieses Patent, das zu übermitteln wann immer er auf diesen Knopf drückt und Aktion durchgeführt werden sollte. Aber da wir kein JavaScript oder zurück kennen und wir werden bei dem Wissen bleiben, das wir bis jetzt kennen. Also das ist es im Grunde für die. Kontaktabschnitt, die noch den letzten Abschnitt haben, der die Fußzeile ist. Also lasst uns weitermachen und es jetzt tun. Also lassen Sie uns Fußzeile anhängen. Und so, um eine Fußzeile zu erstellen, haben wir tatsächlich das Fußzeilen-Tag in HTML. Und wir müssen einige Klassen von Bootstrap hinzufügen, damit der Hintergrund gegraben werden sollte und wir haben etwas Polsterung. Auf der X-Achse. Wir können unsere Behälterflüssigkeit herstellen. Und dann beginnen Sie mit der Erstellung unserer Reihe. Und die Steuer wäre tatsächlich am Licht mit etwas Polsterung auf der Y-Achse. Jetzt in diesem können wir unsere Spalte erstellen. Und das wird für sein, für große und sechs für kleine und darüber. In diesem gehen, um unsere Überschrift zu schreiben. Und es wird über uns sein oder vielleicht über uns. Ich denke, es ist gut. Dies ist der erste Teil unserer Fußzeile und der Text wird klein sein. So klein. Und ein paar Lauren, Lauren 20. Ich denke, wir könnten F Jetzt, wenn wir nach unten scrollen, können wir sehen, dass wir den Abschnitt über uns haben. Und wenn ich es größer mache, wird es hier sein. Jetzt gehen wir zurück. Ich denke, wir haben hier so viele Texte. Lass es mich einfach kleiner machen. Und jetzt gehen wir zum ersten Teil unserer Division oder zu unserer Fußzeile. Jetzt, da wir unsere erste Kolumne beendet haben, können wir mit der zweiten beginnen. Und ich möchte, dass das nur zwei von zwölf ist. Das dauerte vier. Ich mache das Band auch zu groß. Und für dieses kleine wird es das gleiche Problem wie m sechs sein. Öffnen Sie es drinnen. Dies wird der erste sein würde, und der Köper sagen, besuchen Sie uns. Und dann haben wir eine ungeordnete Liste. Und die Klasse wird Liste unstylt sein. So werden die Aufzählungspunkte verschoben. Und jetzt haben wir den Listeneintrag. Innerhalb des Listenelements wird einen Link haben. Zeigt auf Mapping. Die Klasse wird Fußzeilenlink sein. Und dann haben wir nach Hause. Wir werden das kopieren. Und vielleicht werde ich einfach noch ein Mal erschaffen. Und die Klasse wird Fußzeilenlink sein. Und wir haben die Mission. Und schließlich, lassen Sie mich noch eine hinzufügen. Und es wird die enthalten, vielleicht die Produkte. So Fußzeile Link und die Produkte. Wenn ich jetzt nach unten scrolle, kann ich Besucher's Home Maschinenprodukte finden. Wenn ich es größer mache, haben wir es so. Und jetzt haben wir noch wie die Hälfte des Strandes, da wir Folie konsumiert haben. Hier. Und zwei hier. Also lass uns wieder runter gehen. Und jetzt werden wir den Hilfebereich erstellen. Und es wird auch dauern, um die Säule zu groß zu setzen und bei kleinen sechs offenen H5. Und das wäre keine Hilfe nötig. Ich brauche Hilfe. Und dann können wir mit der Erstellung unserer ungeordneten Liste beginnen. Die Klasse sollte wie gewohnt, unstyled Liste, unstylt sein. Und dann können wir unseren Listeneintrag wie zuvor erstellen. Wir haben unsere Referenz Fußzeile Link und erkennt wird tatsächlich Großbuchstaben. Und das ist Kundenservice. Und dann lassen Sie uns das kopieren und es ein paar Mal basieren. So haben wir den Kundenservice, wir haben die Unterstützung, und wir haben E-Leitfähigkeit. Ich denke, jetzt würden wir kriegen, wenn wir nach unten scrollen, haben wir alle diese. Und wie Sie sehen können, haben wir die über uns besuchen Sie uns, brauchen Hilfe. Jetzt machen wir ein wenig kleiner und gehen zum letzten Abschnitt zurück. Und in diesem Abschnitt werden wir den Benutzer bitten, seine E-Mail einzugeben, um in Verbindung zu bleiben. Also fügen Sie eine neue Division an. Und das würde die letzte Folie nehmen. So LNG FOLDOC für kleines Werkzeug sagen sechs arpanet H5. Bleiben Sie in Verbindung. Und natürlich, der kleine Absatz. In diesem Absatz haben wir Ihre E-Mail eingegeben, um mit uns in Verbindung zu bleiben. Und dann können wir unser nächstes Telefon erstellen. Und in dieser Form werden wir eine D-Eingabegruppe sein. Also ohne jede Aktion wird die Klasse der Rand unten drei sein. Und natürlich haben wir unsere Abteilung, die eine Inputgruppe ist. In dieser Division. Wir haben den Eingabetyp Text. Dann haben wir die Klasse für Kontrolle und Platzhalter E-Mail. Und dann haben wir eine andere Division, die die Plus-Eingabegruppe anhängen enthält. Und dann haben wir den Knopf. Und der Typ wird Button sein. Klassen wären Button BT, Gefahr und erkennt auch weiß. Und jetzt können wir innerhalb dieses Knopfes hinzufügen, sehen Sie oder mich oder so etwas. So sehen wir uns. Und jetzt, wenn ich zurückgehe, wie wir sehen können, haben wir unseren Knopf hier. Und das ist im Grunde haben wir über uns mit der Aufgabe brauchen Hilfe, bleiben Sie in Verbindung. Und der Benutzer kann eingeben ist E-Mail hier und drücken, und er wird mit uns in Verbindung bleiben. Wir können auch einige Links oder einige Symbole für die Facebook-Seite oder die Instagram-Seite hinzufügen , sogar YouTube. So können Sie für sie in dem Symbol suchen, Schriftart, Awesome Symbole, und Sie können sie verwenden. Vielleicht nach der E-Mail hier. Vielleicht füge sie hier und dann bist du gut. Das ist also im Grunde für unser Projekt. Ich hoffe, es gefällt dir. Und ich ermutige Sie, es selbst zu überprüfen und vielleicht zu modifizieren oder daran zu arbeiten. Damit ist dies das Ende dieses Videos. Wir sehen uns. 23. Projekt: Hallo und herzlich willkommen im Projektabschnitt. Und wir haben bereits so viele der Formulare und Komponenten implementiert , die für uns in Bootstrap zur Verfügung stehen. Und Ihr Projekt wird tatsächlich darin bestehen, ein anderes Projekt zu bauen, ähnlich wie dieses, Sie können jede Bootstrap-Komponente oder jede Bootstrap-Klasse verwenden , die Sie nützlich und natürlich schnell nach unten finden können. Im Projektabschnitt werde ich Ihnen das zur Verfügung stellen. Und das wird tatsächlich die Vorlage sein, die Starter-Vorlage mit einigen Links von Zielen. Dieser Link wird jedoch nicht verfügbar sein, da jeder von euch sein eigenes Gut haben sollte. Und das ist der Link für Font Awesome. Wie gesagt, sollten Sie sich kostenlos anmelden, dann erhalten Sie diese, erhalten, verwenden Sie es auf Ihrer Website. Das ist also, dass Sie im Grunde in der Lage sein sollten, die meisten davon auf eigene Faust zu tun. Wenn Sie jedoch nicht das Gefühl haben, dass Sie etwas vermissen, können Sie immer wieder zu den Video-Vorträgen zurückkehren und sie erneut überprüfen. Das ist also im Grunde, ich hoffe, Sie haben diesen Abschnitt genossen. Und natürlich viel Glück in Ihrem Projekt. Und vergessen Sie nicht, dem Projektabschnitt hinzuzufügen damit ich einen Blick darauf werfen und Ihnen meine Rezension geben kann. Das ist es also. Ich hoffe, Sie haben die ganze Klasse genossen und wir sehen uns.