Webdesign leicht gemacht: Lerne Bootstrap Studio in 12 Stunden

1. EINFÜHRUNG: Hallo da und herzlich willkommen zu diesem Kurs. In diesem Kurs werden wir alles über die Desktop-Software namens Bootstrap Studio lernen . Bootstrap Studio ist ein Drag-and-Drop-Front-End oder Website-Designer. Wir können es verwenden, um einfach schöne und reaktionsschnelle Websites zu erstellen , ohne dass Sie Code schreiben müssen. In dieser Klasse werden wir eine ansprechende Website wie diese erstellen. Wir werden den Kurs beginnen, indem wir die Grundlagen von HTML und CSS lernen. Ein Verständnis dieser Grundlagen wird die verbleibenden Kapitel wesentlich einfacher zu befolgen. Als nächstes werden wir uns mit der Benutzeroberfläche vertraut machen, lernen, einige einfache Inhalte und Formatierungen hinzuzufügen. Und danach werden wir lernen, einige fortschrittlichere Komponenten wie die Navigationsleiste und ein Karussell und vieles mehr hinzuzufügen . Wir werden über die Verwendung von Zeilen und Spalten lernen, um Responsive Grid zu erstellen. Und wir werden über kundenspezifisches Styling lernen. Wir werden auch über den schwarzen Fleck lernen, und wir werden lernen, unsere eigene benutzerdefinierte Komponente zu erstellen, und wir werden lernen, interaktive Komponenten hinzuzufügen. Schließlich werden wir lernen, unsere Website auf einer kostenlosen Bootstrap Studio-Domain zu veröffentlichen , um diesem Kurs zu folgen, stellen Sie zuerst sicher, dass Sie ein Bootstrap Studio auf Ihrem Computer installiert haben. Sie können die Software von dieser Website. Dieser Kurs ist so konzipiert, dass er für Personen zugänglich ist, die keine Webdesignerfahrung oder keine Erfahrung im Programmieren haben. Wenn Sie bereits Erfahrung haben, ist das großartig und Sie werden wahrscheinlich in der Lage sein, den Kurs zu beschleunigen. Aber auch wenn Sie ein kompletter Anfänger sind, ist dieser Kurs für Sie zugänglich. Sie brauchen nur ein wenig Geduld und Ausdauer und Sie werden schöne responsive Websites in kürzester Zeit machen. Ob Sie also eine Website für Ihr kleines Unternehmen erstellen möchten oder einfach etwas für Ihr Hobby kreieren möchten. Oder auch wenn du einfach nur daran interessiert bist, etwas Neues zu lernen, dann lass uns loslegen. 2. Kursprojekt und Wie du diesen Kurs befolgen: Dieser Kurs ist in 12 mundgroße Kapitel gegliedert, einfach beginnen und schrittweise weiter fortgeschritten werden. Als Faustregel sollte jedes Kapitel, sehr grob gesagt, etwa eine Stunde dauern. Aber natürlich ist jedes Individuum anders und es ist am besten, in Ihrem eigenen Tempo zu studieren. Wenn Sie ein langsamer und stetiger Lernender sind, der gerne alles perfekt wie ich versteht, Sie vielleicht ein wenig länger dauern und Sie sind, wenn Sie einer der Lernenden sind, die gerade Flüssigkeit zoomen, sind Sie wahrscheinlich ein bisschen schneller. Wie du den Kurs befolgst, liegt ganz bei dir. Aber ich empfehle, dass Sie es in der angegebenen Reihenfolge befolgen. Und ich empfehle, dass Sie mit allen Beispielen folgen , um einige praktische Erfahrungen zu sammeln. Wenn du mitmachst, ist es am besten, mich nicht genau zu kopieren, sondern deine eigene Kreativität und Einfallsreichtum zu nutzen, um den Dingen dein eigenes Flair zu geben. Experimentieren und mit Dingen herumspielen ist eine großartige Möglichkeit, neue Dinge zu lernen. Als unser Klassenprojekt sollten Sie die Werkzeuge verwenden, die wir gelernt haben, um Ihre eigene einfache oder aufwändige Website zu erstellen. Alternativ können Sie auch Ihre eigene benutzerdefinierte Komponente aufbauen. Zum Beispiel könnten Sie Ihre eigene Fußzeile oder Kopfzeile oder eine Uhr, oder eine Vorlage für einen Lebenslauf oder Lebenslauf oder was auch immer Sie wollen, während Sie für den Kurs arbeiten, Es ist eine gute Idee, im Hinterkopf zu behalten , was Sie vielleicht als ein Klassenzimmer-Projekt. Je nachdem, wie viel Sie aus diesem Kurs herauskommen möchten, können Sie Ihr Projekt so einfach oder so aufwendig gestalten, wie Sie es möchten. Aber ich empfehle dringend, dass Sie mindestens ein Projekt teilen, weil die Erstellung Ihres eigenen Projekts viel aktives Lernen erfordert, was eine viel bessere Art zu lernen ist als passives Lernen, erhalten Sie nur die Erklärungen zu beobachten. Und außerdem freue ich mich sehr darauf, zu sehen, was du dir einfällt. Wenn Sie mit dem Projekt fertig sind. Veröffentlichen Sie es auf einer kostenlosen Bootstrap Studio-Domain. Veröffentlichen Sie einen Link als Projekt. In der Tat können Sie ein Projekt hochladen, wann immer Sie das Gefühl haben Feedback zu benötigen oder auch wenn Sie nur zeigen möchten, was Sie erstellt haben. Also freuen Sie sich auf Ihr Projekt zu sehen, sehen Sie im nächsten Video. 3. Hour 1 – HTML: Html steht für Hypertext Markup Language. Eine HTML-Datei ist einfach eine einfache Textdatei, die leicht von einem Menschen geschrieben werden kann und auch von jedem Webbrowser leicht verstanden werden kann. So erstellen Sie eine einfache HTML-Datei. Folgen Sie den nächsten Schritten. Starten Sie einen einfachen Texteditor und erstellen Sie eine neue Datei. Unter Windows könnten Sie beispielsweise Notepad verwenden. Ich bin auf Linux, also werde ich g edit verwenden, speichern Sie die Datei als einfachen Seiten-Punkt-HTML in einem praktischen Ordner auf Ihrer Festplatte. Fügen Sie den folgenden Text hinzu. Suchen Sie die Datei und öffnen Sie sie mit Ihrem bevorzugten Webbrowser. Kacheln Sie diesen Texteditor und einen Webbrowser nebeneinander auf dem Monitor, sollten Sie ähnliche Ergebnisse erhalten. Sie haben wahrscheinlich ein paar interessante Dinge bemerkt. Das Feuer beginnt mit einer Klammer, HTML-Klammer und endet mit dem gleichen, außer mit einem umgekehrten Schrägstrich vor dem HTML-Teil. Dies sind Beispiele für Tags. Das erste Tag ohne umgekehrten Schrägstrich ist ein Start-Tag. Das Tag mit dem umgekehrten Schrägstrich endet Tag. Alles zwischen diesen beiden Tags ist HTML-Code. Erstens, wir haben eine Spirale mit dem Browser verwendet. Wir sehen nur den Text zwischen den beiden Tags, und wir sehen die beiden Tags nicht selbst. Als Nächstes ändern Sie den Text, indem Sie ein weiteres Paar von Tags hinzufügen. Aktualisieren Sie dann den Browser. Kannst du sehen, was die Tags p und Schrägstrich B gemacht haben? Das ist richtig. Sie haben den Text zwischen den beiden fett gemacht. Als Nächstes wird das geändert. Die Akte wie diese. Sehen Sie, ob Sie alle Tags erkennen können, die wir verwenden, und sehen Sie, ob Sie erraten können, was sie tun. Ich habe sie alle. Hier ist ein Übersichtskopf. Alles zwischen diesen beiden Tags ist Information über die Webseite, ohne Teil der Webseite selbst zu sein. Alle Arten von Informationen können hier gestellt werden. Zum Beispiel, in diesem Fall, habe ich den Titel der Webseite. Browser setzen in der Regel den Titel der Webseite hier oben in der Registerkarte. Wir haben auch diese beiden Body-Tags. Alles zwischen diesen beiden Tags ist Teil des Körpers oder des Hauptteils der Webseite, die den Inhalt der Webseite enthält. Man bedeutet, dass die Texte zwischen diesen beiden Tags eine Überschrift sind. 1 ist die wichtigste Art der Überschrift, aber Sie haben auch weniger wichtige Überschriften wie die Überschrift PRE, et cetera. P bedeutet, dass es sich bei dem Text um einen Absatz handelt. Sie bedeuten, dass der Text unterstrichen werden sollte, und ich bedeutet, dass der Text kursiv sein sollte. Und im Grunde ist das alles, was es gibt, zu HTML. Alles, was es wirklich ist, ist eine einfache Textdatei mit speziellen Tags, um dem Browser über spezielle Formatierungen zu informieren. In der Tat gibt es eine große Anzahl von Tags in HTML und Sie können alle möglichen Dinge tun, wie die Hintergrundfarbe ändern, Bilder und Weblinks hinzufügen und so etwas. Aber wenn Sie ein Drag-and-Drop-Web-Authoring-Tool wie Bootstrap Studio verwenden. Du brauchst keine davon zu wissen. Wenn Sie neugierig sind, wenn Sie einen neugierigen Geist haben, Sie, Ich empfehle die Website www w w preschools.com. Es hat einige ziemlich nützliche interaktive Lektionen, die Ihnen helfen, mehr über HTML zu erfahren. 4. Hour 1 – CSS erklärt: Mit HTML ist es möglich, eine ganze Menge Formatierung zu einer Webseite hinzuzufügen, aber dies kann ziemlich ineffizient sein. Die meisten Websites bestehen aus mehreren Seiten, vielen Absätzen und vielen Überschriften. Also, wenn Sie das Format für jede einzelne Seite, jede einzelne Überschrift und jeden einzelnen Absatz, et cetera, et cetera, et cetera. Es wäre zeitaufwändig. Ganz zu schweigen davon, dass, wenn Sie oder Ihr Kunde eine Änderung vornehmen wollten, Sie zu jedem einzeln zurückkehren müssen, die Formatierung jedes einzelnen Elements zu ändern. Das ist also, wo CSS ins Spiel kommt. Css steht für Cascading Style Sheets. Und im Wesentlichen ist es nichts anderes als eine Möglichkeit, das Format für alle Tiere eines bestimmten Stils in einem Rutsch einzustellen . Werfen wir einen Blick auf die folgende HTML-Datei. Auf der linken Seite haben wir die Datei in einem Texteditor geöffnet. Und auf der rechten Seite haben wir es in Firefox geöffnet. Wir können ein paar Dinge sehen. Zunächst einmal haben wir gelernt, dass ich ein schrecklicher Koch bin, aber das ist jetzt nicht wirklich der Punkt. Zweitens sehen wir, dass es ziemlich einfach war, Absätze und Überschriften zu verwenden , um den Inhalt dieser Website einzurichten. Es könnte jedoch immer noch eine Menge Formatierung verwenden. Lassen Sie uns also ein Stylesheet hinzufügen. Fügen Sie dem Kopf des Dokuments ein Stilelement hinzu. Wir könnten das auch in einem separaten Dokument hinzufügen, aber um es einfach zu halten, lassen Sie es einfach im Kopf des gleichen Dokuments, geben Sie p ein, um zu zeigen, dass wir nur die Absätze im Moment beeinflussen. Und benutze geschweifte Klammern. Und zwischen den geschweiften Klammern setzen wir die Farbe auf blau wie folgt, und wir setzen die Schrift auf sans serif. Der P-Buchstabe lässt den Browser wissen, dass wir dieses Zifferblatt oder dieses Format auf jeden Absatz auf der Seite anwenden sollten . Speichern wir also die Textdatei und aktualisieren Sie den Browser. Und wie Sie sehen können, sind alle Absätze blau geworden. Als nächstes stellen wir die Hintergrundfarbe des Textkörpers des Dokuments auf hellblau. Und lassen Sie uns die Schriftart der Überschrift auch Serif senden. Das Problem ist natürlich, dass Sie nicht unbedingt wollen, dass alle Absätze gleich sind. Vielleicht möchten Sie verschiedene Arten von Absätzen. In diesem Fall. Zum Beispiel möchten Sie vielleicht eine spezielle Art von Format für den Einführungstest und eine besondere Art für speziell für die Rezepte. Um dies zu tun, fügen wir ein Klassenattribut zu den relevanten Tags hinzu. Dann ändern wir den CSS-Code, um ein bestimmtes Format für die Tags zu erstellen , die dieses Klassenattribut haben. Sie können sich eine Klasse als eine Art Bezeichner vorstellen, um den Browser wissen zu lassen , welche Art von Formatierung jedem Element zu geben. Zuerst ändern wir den HTML-Code, um jedem Absatz, der eine Rezeptanweisung enthält, eine Klasse namens Anweisungen hinzuzufügen . Tun Sie dies, indem Sie die Textklasse gleich Anweisungen hinzufügen. Als nächstes fügen wir einen bestimmten Stileintrag hinzu, um jedes Element mit der Anweisungsklasse zu formatieren. Wie Sie aus dem Beispiel sehen können hinzugefügt Text Einzug 40 Pixel. Das bedeutet, dass alle Texte, die das Attribut der Anweisungsklasse haben, um 40 Pixel, Zeilenhöhe, fünf Pixel nach rechts eingerückt werden , den Zeilenabstand zwischen diesen Absätzen auf fünf Pixel setzen. Farbe Rot legt die Textfarbe auf Rot fest. Und das ist wirklich alles, was es gibt, ein einfacher CSS-Code im Style-Element im Kopf Ihres HTML-Dokuments ist eine einfache Möglichkeit, Ihrer Seite eine aufwendige, aber konsistente Formatierung hinzuzufügen . Und noch wichtiger ist, dass es auch einfach ist, das Styling zu modifizieren und zu experimentieren , ohne das Styling und die Formatierung jedes einzelnen Elements individuell ändern zu müssen . 5. Hour 1 – Bootstrap erklärt: Lange Zeit waren HTML und CSS mehr als genug, um ziemlich gute Websites zu erstellen. Aber das änderte sich alles, als Telefone und Tablets alltäglich wurden. Eine Website, die auf einem großen Monitor mit Tastatur und Maus übersichtlich und einfach zu bedienen ist , ist möglicherweise nicht einfach auf einem kleinen Touchscreen zu bedienen. Das ist, wenn reaktionsschnelle Websites populär wurden. Bei responsiven Websites ändert sich das Design und das Layout der Website je nachdem, welche Art von Gerät Sie verwenden, um die Website anzuzeigen. Sie einen Blick auf diese Webseite. Wenn ich die Webseite in einem breiten Fenster ansehe , habe ich drei Absätze in drei Spalten angeordnet. Aber wenn ich das Fenster schmaler mache, wenn ich es zum Beispiel auf einem Telefon betrachten würde, dann sind die Absätze vertikal gestapelt. Ich musste nicht zwei separate Websites schreiben, um dies zu implementieren. Ich habe gerade das Bootstrap-Framework verwendet. Dieser Code zeigt Ihnen, wie ich diese Webseite geschrieben habe. Wir müssen im Moment nicht zu viel in der technischen Seite der Dinge aussehen. Aber wie Sie sehen können, habe ich einen Link zum Bootstrap-Framework im Kopf des Dokuments. Und ich habe eine Reihe von Klassenattributen in meinen Elementen, die dem Bootstrap-Framework sagen, wie ich möchte, dass sich diese Elemente verhalten. Zum Beispiel habe ich eine Klasse namens container und eine Klasse namens row und eine Klasse namens Call for. Wie ich schon sagte, wir müssen vorerst nicht in die technischen Details eingehen. Wir werden mehr darüber erfahren, wie das funktioniert in einem zukünftigen Video. Also, was ist Bootstrap Studio? Bootstrap Studio ist ein Drag & Drop Website-Editor. Die Benutzeroberfläche wird verwendet, um das Layout und die Formatierung der Website in ähnlicher Weise zu erstellen , wie man ein Textverarbeitungsprogramm verwenden würde, um einen Bericht zu schreiben. Wir klicken und ziehen Elemente wie Überschriften, Absätze , Bilder, Links, Symbolleisten usw. an Ort und Stelle. Die Bootstrap-Software erstellt dann alle notwendigen HTML, CSS und Bootstrap Code für Sie. Und das sind alle Hintergrundinformationen, die wir brauchen, um in den nächsten Kapiteln über Bootstrap Studio zu lernen. Wir sehen uns dann. Tschüss. 6. Hour 2 – Benutzeroberfläche: Endlich sind wir bereit, etwas über Bootstrap Studio zu lernen. Als nächstes werden wir uns mit der Benutzeroberfläche vertraut machen und lernen, eine einfache Seite zu erstellen. Aber zuerst, lassen Sie uns unser erstes Projekt erstellen. Wenn Sie Bootstrap Studio zum ersten Mal öffnen, haben Sie die Möglichkeit, ein neues Design zu erstellen oder ein vorhandenes zu laden. Wenn Sie auf neues Design klicken, sehen wir, dass es viele vorgefertigte Vorlagen zur Auswahl gibt. Um die Dinge einfach zu halten, lassen Sie uns eine leere Vorlage wählen. Legen Sie den Namen Ihres Projekts fest, wählen Sie die neueste Version von Bootstrap Framework und klicken Sie auf Erstellen, um fortzufahren. Und dann wird die Benutzeroberfläche angezeigt. Mal sehen, was wir sehen können. Zuallererst, in der Mitte haben wir die Leinwand. Hier werden wir eine Website erstellen. Auf der linken Seite haben wir eine Spalte. Die Spalte enthält das Bedienfeld „Komponenten“, in dem wir alle Arten von Elementen finden können. Einfache wie Absatz und Überschrift, und auch komplexere wie eine Galerie oder eine Diashow oder solche Sachen. Und unten haben wir einen Überblick über die Dokumentstruktur. Dieses Panel gibt einen praktischen Überblick darüber, welche Elemente und Komponenten der Seite hinzugefügt wurden. Möglicherweise wird diese Spalte nicht angezeigt, aber möglicherweise wird eine Liste mit Symbolen angezeigt. Wenn das der Fall ist, können Sie einfach die Größe dieser Spalte ändern, indem Sie auf den Rand hier klicken und ziehen. Wenn wir hier nach oben schauen, sehen wir eine Reihe von Symbolen. Diese Symbole sind eine schnelle Möglichkeit, zwischen Ansichten zu wechseln. Zum Beispiel, Telefonansicht, Tablet-Ansicht, Desktop-Ansicht. Auf der rechten Seite haben wir auch eine Spalte. Wenn Sie dies als eine Liste von Symbolen sehen, klicken Sie einfach und ziehen Sie, um die Größe der Spalte zu vergrößern. Und oben, wir haben drei Registerkarten, die verwendet werden können, um verschiedene Elemente, Aussehen, Optionen und Animationen zu formatieren . Und hier unten haben wir Design. In dieser Registerkarte sehen wir die Ressourcen, die mit der Seite verknüpft sind. Dazu gehören die HTML-Dateien, die CSS-Dateien, die JavaScript-Dateien, Schriftarten und Bilder. 7. Hour 2 – Einfache Komponenten hinzufügen: Als nächstes werden wir einige grundlegende Inhalte auf der Seite hinzufügen. Wechseln Sie zur Registerkarte Studio in der linken Spalte, und suchen Sie nach Überschrift. Klicken Sie auf die Erin, und ziehen Sie sie auf die Leinwand. Sie werden sehen, dass die Überschrift sowohl auf der Leinwand auch im Übersichtsfenster unten in der linken Spalte angezeigt wird. Wiederholen Sie die letzten Schritte, um einen Absatz unterhalb der Überschrift hinzuzufügen. Wählen Sie einen Absatz aus. Eine Reihe von Symbolen wird oberhalb des Absatzes angezeigt. Verschieben Sie den Absatz an eine andere Position. Übergeordnetes Element auswählen Das übergeordnete Element eines Elements ist Element, in dem es enthalten ist. Sie finden es ganz einfach im Übersichtsfenster. In diesem Fall ist das body-Element offensichtlich des Absatzes und das HTML-Element ist offensichtlich von der Partei an es ändert den Text im Absatz. Duplizieren, erstellt eine Kopie des ausgewählten Elements. Hyde macht das ausgewählte Element unsichtbar und löscht, entfernt die ausgewählten Elemente. Lassen Sie den Absatz bearbeiten. Sie können dies auch tun, indem Sie auf das Element in Canvas doppelklicken. Lassen Sie uns den folgenden Text eingeben. Eine einfache Textformatierungsleiste wird angezeigt. Und lasst uns dasselbe mit den Kopfschmerzen machen. Wenn Sie die Überschrift auswählen, bemerken Sie eine zusätzliche Option, mit der wir die Ebene der Überschrift festlegen können. Lassen Sie uns es für jetzt auf einem behalten, und lassen Sie uns den Text ändern, um willkommen zu heißen. Nun, da wir wissen, wie einige grundlegende Elemente hinzufügen, Lassen Sie uns auch lernen, wie einige grundlegende Formatierung elektrische Komponente zu tun und gehen Sie zum Erscheinungsbild Panel. Wir sehen folgendes. Im oberen Bereich des Panels sehen wir das aktuell ausgewählte Element in blau sowie seine Eltern. Darunter haben wir ein Dropdown-Menü mit dem Optionsstil-Attribut. Style-Attribut lässt uns den aktuell ausgewählten Block formatieren. Im Folgenden haben wir alle Arten von Formatierungsoptionen unter verschiedenen Überschriften kategorisiert, einschließlich Layout, Schriftart, et cetera. Sie können auf die Dreiecke klicken, um die Kategorien zu öffnen oder zu reduzieren. Also zuerst wählen wir den Absatz aus und stellen sicher, dass das Stilattribut in der Dropdown-Liste auf der Schriftfarbe ausgewählt ist, wir können die Farbe des Textes einstellen. Ich wurde gesagt, Farbe meiner Schriftart zu blau. Sie können jede Farbe auswählen, die Sie mögen. Als nächstes werden wir die Hintergrundfarbe der Party einstellen. Wählen Sie im Übersichtsfenster einen Körper aus. Unter Hintergrund BG Farbe. Klicken Sie auf das weiße Quadrat, um eine nicht standardmäßige Farbe auszuwählen. Ich werde auch die Hintergrundfarbe meines Hintergrunds einstellen. Leichte Abzeichen Es gibt viele weitere Dinge, die wir hier formatieren können. Die meisten dieser Dinge sind selbstverständlich und diejenigen, die nicht so selbstverständlich sind, können Sie leicht Informationen über sie finden, indem Sie auf Google nach ihnen suchen. In diesem Kurs werden wir viele dieser Optionen abdecken, aber keine, alle von ihnen. Wie Sie wissen, wird die Website, die wir erstellt haben, schließlich zu HTML- und CSS-Dateien ausgenutzt werden. Diese Dateien können ganz einfach in Bootstrap Studios überprüft werden. Am unteren Rand des Fensters sehen Sie ein Panel mit zwei Registerkarten, HTML und Stilen. Klicken und ziehen Sie den oberen Rand des Panopto, ziehen Sie ihn nach oben. Auf der Registerkarte HTML sehen Sie HTML-Code für das Dokument. Klicken Sie auf die Dreiecke, um verschiedene Elemente zu öffnen und auszublenden. Es ist nicht notwendig, hier zu viel zu verstehen, aber hoffentlich werden Sie zumindest einige der Tags erkennen. Beim Hinzufügen neuer Komponenten zur Arbeitsfläche wird der HTML-Code automatisch aktualisiert. Unterhalb des HTML-Bedienfelds befindet sich ein Attributfenster, in dem Sie die ID-Klassen und andere Attribute inspizieren können. der Registerkarte Formatvorlagen werden alle Formatierungen angezeigt, die für das ausgewählte Element relevant sind. den Absatz auswählen, sehen Sie, dass das Element etwas Styling vom übergeordneten Element erbt. Und auch die Marge wurde vom Bootstrap-Framework festgelegt. Wir sehen auch, wo wir die Schriftart blau gefärbt haben. Eine gute Sache beim Arbeiten auf diese Weise ist, dass es super einfach ist , mehr über HTML und CSS zu erfahren. Also, wenn Sie in einer neugierigen Stimmung sind, ziehen Sie einfach einige hartnäckige, geben Sie Ihre Seite ein und sehen Sie, wie es sich auf den Code auswirkt. Also denke ich, das reicht für ein Video. Im nächsten Video werden wir mehr über Ränder und Polsterung erfahren. Wir sehen uns dann, tschüss. 8. Hour 2 – Ränder und Padding: Hallo an alle. In diesem Video werden wir über Ränder und Polsterung lernen. Ränder und Padding, unsere grundlegenden HTML Strich CSS-Eigenschaften, die wir verwenden können, um das Layout der Elemente und deren Inhalt zu ändern. Jedes Element nimmt eine gewisse Menge an Speicherplatz auf unserer Seite ein. Um zu visualisieren, wie viel Platz wir leicht einen Rahmen und eine Hintergrundfarbe zu jedem Element hinzufügen können. Lassen Sie uns dies für den Absatz, den ersten gewählten Absatz, entweder auf der Leinwand oder im Übersichtsfenster, in der Spalte auf der linken Seite tun. Im Darstellungsfenster unter dem Hintergrund können wir eine Hintergrundfarbe auswählen. Ich würde grün wählen. Als Nächstes an der Grenze. Sie können den Stil der Grenze, die Farbe, tun Sie es, et cetera. Ich werde den Rahmenstil auf eine durchgezogene Linie setzen und es war bei der Farbe auf blau. Als Ergebnis sehen wir, dass sich der Rahmen und die Feldfarbe geändert haben. Wir sehen, dass die Elementbreite die gesamte Seite einnimmt und die Höhe des Elements im Grunde so groß ist wie sein Inhalt. Der Schaltplan hier oben gibt einen schnellen Überblick über die aktuellen Ränder und Padding. Die Breite ist derzeit auf die gleiche Breite wie eine Seite festgelegt. Der Standardwert der Höhe hängt von der Schriftgröße und wie viele Textzeilen oder R. Und hier unten haben wir Rand und Padding. Was ist der Unterschied zwischen Marge und Padding? Rand gibt den äußeren Abstand an. Mit anderen Worten, wie weit das Element von anderen Elementen weggeschoben wird. Wir sehen, dass der Absatz um 10 Pixel nach innen und nach unten gedrückt wird, die Größe des Elements muss abnehmen, um mehr Platz für die Ränder zu schaffen. Polsterung hingegen ist der innere Abstand. Es gibt den Abstand zwischen dem Rahmen und dem Inhalt an. Wie Sie sehen können, wird der Text nach rechts gedrückt und die Höhe des Elements erhöht sich, um genügend Platz für das Auffüllen zu bieten. Wenn Sie bestimmte Ränder und Polsterungen für die oberen, unteren, linken und rechten Kanten festlegen möchten. Sie können hier auf den Pfeil klicken und hier die Werte einstellen. Wenn Sie übrigens die maximale oder minimale Breite und Höhe einstellen möchten, können Sie hier auf die Pfeile klicken. Eine nützliche Sache in CSS ist übrigens, dass Sie den Rand auf auto setzen können. Der linke und rechte Rand wird automatisch so eingestellt, dass das Element in der Mitte der Seite zentriert wird. In diesem Beispiel setze ich den Rand auf 10 Pixel Leertaste auto. Das bedeutet, dass die vertikalen Ränder am oberen und unteren Rand, anderen Worten, auf 10 Pixel eingestellt sind. Warum werden die linken und rechten Ränder automatisch festgelegt um sicherzustellen, dass das Element in der Mitte der Seite zentriert ist. Also, das war's vorerst. Danke fürs Zuschauen. Im nächsten Video werden wir untersuchen, wie komplexere Komponente, die Navigationsleiste hinzufügen. Wir sehen uns dort. Tschüss. 9. Hour 3 – Hinzufügen der Navbar: Bisher haben wir mit sehr einfachen Elementen gearbeitet. Als nächstes ist ein komplexeres Element, die Navigationsleiste. Wir werden eine grundlegende Navigationsleiste hinzufügen. Wir werden eine Dropdown-Liste auf die Navigationsleiste hinzufügen, und wir werden die grundlegenden Navigationsleiste Optionen erkunden. Dann werden wir im nächsten Video mehrere Seiten zu einem Projekt hinzufügen und sie in der Navigationsleiste verknüpfen. Wir werden auch die Navigationsleiste auf die anderen Seiten kopieren und wir werden die Seite mit der Vorschau testen. Beginnen wir also mit dem Hinzufügen der Navigationsleiste im Bedienfeld „Komponenten“. Suchen Sie nach navbar. Klicken Sie auf die Komponente, und ziehen Sie sie an den oberen Rand der Arbeitsfläche oder in das Übersichtsfenster. Die Navigationsleiste ist wesentlich komplexer als das, was wir bisher verwendet haben. Im Übersichtsfenster sehen wir, dass die Navigationsleiste die navbar Marke enthält. Ich werde meinen Namen nennen. Seite pausieren. Navigationsleiste umschalten ist für das Menü-Symbol. Wenn die Breite der Seite klein genug ist, zeigt die Navigationsleiste anstelle der Navigationselemente das Menüsymbol an. Das Element navbar-collapse enthält eine Luft, die wiederum die nav Elemente enthält. Jedes Navigationselement wiederum enthält einen Link. Wir können leicht auf mehr nav Elemente durch Duplizieren hinzufügen und wir können sie leicht entfernen, indem Sie sie löschen. Sie sehen in der Formatierungsleiste, dass Sie diese schmalen Elemente auf aktiv oder inaktiv einstellen können . Um Verwirrung zu vermeiden, lassen Sie alle von ihnen deaktivieren. In meinem Fall werde ich freie Navigationselemente hinzufügen und ich werde sie auf die Home-Galerie und über mich setzen. Manchmal ist es nützlich, Dropdown-Liste zur Navigationsleiste hinzuzufügen. Es gibt ein paar Möglichkeiten, dies zu tun. Eine Möglichkeit besteht darin, es aus der Komponentenspalte hinzuzufügen. Wechseln Sie zum Bedienfeld „Komponenten“, und suchen Sie nach Dropdown- Klicken Sie auf die Komponente, und ziehen Sie sie in das Übersichtsfenster, stellen Sie sicher, dass sie zwischen den beiden Navigationselementen platziert wird. Die Dropdown-Komponente enthält einen Link und ein Menü. Und das Menü enthält drei Menüpunkte. Lassen Sie uns den Text für das Dropdown-Menü und die Menüpunkte bearbeiten. Als Beispiel werde ich die Text-Downloads, Software und Ressourcen hinzufügen . Und ich würde den dritten Menüpunkt löschen. Die navbar kommt mit einigen spezifischen Optionen. Schauen wir uns mal an. Die Oberseite des Panels. Wir haben die Optionen, die für die Navigationsleiste spezifisch sind. Wir können den Hintergrund und die Textfarbe einstellen. Wir können es standardmäßig halten, oder wir haben eine Auswahl aus vielen verschiedenen Themenfarben. Wir können auch die Position einschließlich Standard einstellen, nach oben fixiert, fixieren Sie die untere und klebrige Oberseite. Ich habe Lust, mein zu klebriges Top zu verkaufen. Fluid bedeutet, dass sich die Breite des Inhalts der Navigationsleiste allmählich ändert, wenn sich die Breite des Fensters ändert. Wenn Flüssigkeit deaktiviert ist, ändert sich auch die Breite des Inhalts in Abhängigkeit von der Breite des Fensters. Aber in diskreten Schritten. Mit erweitert, können wir einstellen, wann wir lieber das Menü-Symbol oder die nav Elemente sehen würden. In diesem Fall werden die Navigationselemente für mittelgroße Fenster und höher angezeigt. Und wir zeigen das Menü-Symbol für Bildschirmgrößen an, die kleiner als mittel sind. Schließlich bestimmt der intelligente aktive Status ob die Navigationsleiste anzeigt, welche Seite gerade aktiv ist. Mit anderen Worten, der Navbar-Element-Link auf die aktuelle Seite wird als aktiv festgelegt. Mit den verbleibenden Settern inaktiv. Ich werde meinen Arm so setzen. Der Benutzer kann auf einen Blick sehen, welche Seite aktuell angezeigt wird. Das war also ein kurzer Überblick über sie nav bar. Im nächsten Video werden wir einige weitere Seiten hinzufügen und wir werden sie verlinken. Wir werden auch diese Navigationsleiste Komponente auf die anderen Seiten in einer Weise kopieren , dass, wenn wir eine von ihnen ändern oder die Navigationsleiste Elemente ändern. So sehen wir uns im nächsten Video. Tschüss für jetzt. 10. Hour 3 – Verknüpfung anderer Seiten: In diesem Video werden wir die Navigationsleiste Link-Elemente nehmen , die wir im vorherigen Video erstellt haben. Und wir werden sie tatsächlich verknüpfen. Aber bevor wir das tun, machen wir zuerst die neuen Seiten. Sie werden in der oberen rechten Ecke sehen, dass wir derzeit an einer Seite mit dem Namen index.html arbeiten. Index.html ist das, was wir die Homepage nennen. Klicken Sie auf den Pfeil neben index.html und klicken Sie auf neue Seite, eine neue Seite mit dem Namen untitled dot HTML erscheint. Wechseln Sie zum Entwurfsbereich in der unteren rechten Spalte, und suchen Sie die Webseite unter der Überschrift der Seite. Klicken Sie mit der rechten Maustaste oder drücken Sie F2, um die Datei umzubenennen Ich werde meinen in über mich umbenennen, diesen HTML. Ich werde den Vorgang wiederholen, um eine Reihe von neuen Webseiten zu erstellen. Eine für jedes Navigationsbalkenelement. Ich werde Galerie erstellen, dass HTML. Laden Sie Software, die HTML, und Downloads Ressourcen, die HTML. Als nächstes gehen wir zurück zu index.html. Wählen Sie den Link in einem der Navigationsleistenelemente aus und gehen Sie auf die Registerkarte Optionen in der Spalte auf der rechten Seite. Unter der Überschrift Link-Optionen können wir die URL einstellen. Url ist ein weiterer Begriff für Link. Insbesondere ist es die Abkürzung für universelle Ressourcenverbindung. Sie können hier jede Webadresse hinzufügen, einschließlich externer Websites wie Ihre Brüder oder Schwestern Website oder Ihre Geschäftspartner-Website oder was auch immer. In diesem Fall möchten wir von internen Webseiten auswählen. Wir wählen sie aus, indem wir hier auf unser Dreieck klicken, und dann können wir sie aus dieser Dropdown-Liste auswählen. Lassen Sie uns einen Link für jedes der Navigationsleistenelemente hinzufügen. Als nächstes werden wir diese Navigationsleiste an den Anfang jeder Seite unserer Website kopieren. Gehen Sie dazu zum Übersichtsfenster und wählen Sie eine Navbar-Komponente dann mit der rechten Maustaste und wählen Sie Kopieren und Einfügen. Kopieren. Wechseln Sie als Nächstes zu jeder Seite, klicken Sie mit der rechten Maustaste auf eine Arbeitsfläche, und wählen Sie Kopieren und Einfügen, Verknüpft einfügen. Auf diese Weise, wenn wir später eine Änderung an der Navigationsleiste vornehmen wollen, können wir die Änderung nur an einer der Kopien vornehmen und es wird in allen von ihnen aktualisiert. Schließlich möchten wir testen, um sicherzustellen, dass wir keine Fehler gemacht haben. Oder fügen Sie die Verknüpfungen hinzu. Immerhin macht jeder Fehler. Deshalb ist das Testen ein sehr wichtiger Teil einer Web-Entwicklung. Die einfachste Möglichkeit, diese Links jetzt zu testen, besteht darin, eine Vorschau zu erstellen. Klicken Sie oben rechts auf die Vorschauschaltfläche, ein Fenster erscheint, klicken Sie auf Toggle, um die Vorschau zu aktivieren. Klicken Sie auf „Im Browser öffnen“, um es anzuzeigen. Und das ist alles für den Moment. Danke fürs Zuschauen. Im nächsten Video werden wir lernen, wie man das Format der Navigationsleiste anpasst. 11. Hour 4 – Karussell: Hallo an alle und herzlich willkommen zum nächsten Kapitel. In diesem Kapitel werden wir vier erweiterte Komponenten auf unserer Website hinzufügen. Diese Komponenten sind Karussell, Galerie, Google Map und Artikelliste. Also in diesem Video, Lassen Sie uns mit dem Karussell beginnen. Karussell ist im Wesentlichen eine Diashow, die verwendet werden kann, um durch eine Reihe von Fotos, Dias oder Infografiken zu fahren. Das Hinzufügen eines Karussell in Bootstrap Studio ist eine einfache Angelegenheit. Schließlich, Karussell zwischen den Komponenten und ziehen Sie es in das Übersichtsfenster. Das Karussell besteht aus Dias und Bedienelementen. Wie üblich können Sie diese Elemente einfach hinzufügen und entfernen, indem Sie duplizieren oder löschen. Steuerelementen gehören die Schaltflächen „Nächste“ und „Vorherige sowie der Indikator, um zu veranschaulichen, welches Bild gerade angezeigt wird. Wir möchten Bilder zu diesem Karussell hinzufügen, aber zuerst müssen wir sie importieren. Um zu demonstrieren, werde ich einige Bilder von Paxos auswählen und ich werde sie in Bootstrap Studio importieren, indem ich auf die Dateien klicke und in das Design-Panel ziehe. Sie werden unter der Überschrift Bilder angezeigt. Wählen Sie als Nächstes das Bild in einer der Folien aus, und doppelklicken Sie auf. ist es am einfachsten, das Übersichtsfenster zu verwenden. öffnet sich ein Fenster mit einer Liste importierter Bilder. Wählen Sie das gewünschte Bild aus, und drücken Sie, OK, wiederholen Sie die vorherigen Schritte, um die anderen Bilder zum Karussell hinzuzufügen automatisch erweitern, um die gesamte Breite der Seite zu übernehmen. Um dies zu ändern, legen Sie im Darstellungsfenster den linken und rechten Rand auf 50 Pixel fest. Der Cursor kommt mit einigen Optionen. Wir können diese Optionen über das Optionsfeld ändern. Hier können wir alle Arten von Optionen wie das Intervall, Pause auf Hover, Übergangstyp, et cetera. Und das ist wirklich alles, was es dazu gibt. Als nächstes lasst uns etwas über die Galerie lernen. 12. Hour 4 – Galerie: Eine Galerie ist ein nützlicher Weg, um Ihr Portfolio zu präsentieren. Es besteht aus einem Gitter von Bildern, auf die der Benutzer klicken kann, um es in einer größeren Ansicht zu sehen. Führen Sie diese einfachen Schritte aus, um Ihrer Webseite eine Galerie hinzuzufügen. Fügen wir der Seite eine Leuchtturm-Galerie-Komponente hinzu. Wir können den gesamten Text auf die übliche Weise bearbeiten. Mit Blick auf das Übersichtsfenster sehen wir, dass die Galerie Block ist , der einen Container enthält. Der Container enthält ein div und eine Zeile. Ein div ist kurz für Division, und es kann verwendet werden, um verschiedene Elemente zusammen zu gruppieren. Ein Container ist einfach ein div mit dem Container-Klassenattribut. Wir werden in Zukunft mehr über Container-Klasse erfahren. Wir haben auch eine Zeile, die eine Anzahl von Spalten enthält. Zeilen und Spalten sind sehr nützlich, um Responsive Raster wie folgt zu erstellen, werden wir darüber lernen, wie Zeilen und Spalten in einem zukünftigen Kapitel arbeiten. Um eines der Bilder zu ändern, doppelklicken Sie einfach darauf und wählen Sie das Bild aus. Stellen Sie sicher, dass Sie das Bild importiert haben, das Sie zuerst importieren möchten Klicken Sie einfach auf das Bild und ziehen Sie es aus Ihrem Dateimanager in das Designfenster im Bootstrap Studio. Lassen Sie uns einen Tooltip für jedes Bild hinzufügen. Wählen Sie ein Bild aus, wechseln Sie zum Optionenbedienfeld und wechseln Sie zu QuickInfos. Aktivieren Sie QuickInfos. Lassen Sie uns abschließend eine Animation hinzufügen. Wechseln Sie zum Animationsbedienfeld in der oberen rechten Spalte. Wählen Sie unter Trigger den Hover aus. Auf diese Weise wird die Animation ausgelöst, wenn der Benutzer mit einer Maus darüber schwebt Sie können den Animationstyp auswählen. Wählen wir zum Beispiel Swing aus. Das ist ein ziemlich lustiger. Sie können eine Vorschau der Animation über die Schaltfläche „Wiedergabe“ erhalten und sie in der Vorschau testen. Wie Sie sehen können, ist das Hinzufügen einer Galerie in Bootstrap Studio super einfach. Als nächstes fügen wir eine Artikelliste hinzu. 13. Hour 4 – Karten: Also willkommen zurück. In diesem Video werden wir eine weitere erweiterte Komponente erkunden, die wir mit Bootstrap Studio auf unsere Website ziehen und ablegen können. Wir werden Google Maps erkunden. Dies ist super nützlich, wenn wir versuchen, Kunden zu helfen, uns zu finden. Lassen Sie uns beginnen, indem Sie einfach die Map-Komponente auf unsere Leinwand ziehen und ablegen. Wir sehen, dass wir, bevor wir diese Komponente aktivieren können, müssen wir den API-Schlüssel setzen. Ein API-Schlüssel ist einfach eine Identifikationsnummer. Google Maps verwendet diese Identifikationsnummer nur, um zu verfolgen, wie oft Sie ihren Dienst nutzen. Mit einem kostenlosen API-Schlüssel kann Ihr Projekt 25 Tausend Karten pro Tag laden. Wenn du mehr brauchst, dann musst du bezahlen. Aber für 99 Prozent der normalen Menschen ist das reichlich, oder? Einen Schlüssel zu erstellen, ist ziemlich einfach. Stellen Sie einfach sicher, dass Sie die Karte ausgewählt haben und dann ein beliebiges Optionsfeld, klicken Sie auf API-Schlüssel erstellen. Wir werden auf die Google Cloud Platform weitergeleitet. Sie müssen sich mit Ihrem Google-Konto anmelden, wenn Sie nicht bereits eingeloggt sind, müssen wir zuerst ein Projekt erstellen oder auswählen. Dies ist einfach so, dass Google weiß, welches Projekt versucht, auf Google Maps zuzugreifen. Da ich nur einen Schlüssel habe, ist es irgendwie irrelevant, in welchem Produkt ich es speichern werde. Und in der Tat habe ich keine ernsthaften Projekte, die in Google Cloud Platform laufen, also werde ich nur eins nach dem Zufallsprinzip auswählen. Wir können den Namen des Schlüssels hier setzen und wir können einige Einschränkungen hinzufügen. Es besteht immer ein geringfügiges Risiko, dass jemand den Seriencode auf Ihren Schlüssel bekommt und dann alle Kartenladungen verbraucht. Daher ist es am besten, es auf Ihre Website zu beschränken. Ich werde diesen Schlüssel einfach verwenden, um Google Maps zu demonstrieren, aber danach werde ich ihn sofort löschen. Also für mich kann ich den Schlüssel einfach als uneingeschränkt behalten. Tu mir einfach einen Gefallen und erinnere mich daran, ihn später zu löschen. Danke. Ok, weitermachen. Lassen Sie uns auf Erstellen klicken. Und wenn wir das tun, generiert es die Details unseres Schlüssels. Klicken Sie hier kopieren, um die Seriennummer eines Schlüssels zu kopieren und in dieses Feld einzufügen. Und wie Sie sehen können, erhalten wir automatisch ein Live-Update in unserem Canvas. Es ist derzeit auf Pariser Marken eingestellt, aber ich werde es an meinen tatsächlichen Standort verkaufen, nämlich Timbuktu, Mali. Wir können die Art der Karte hier ändern, zum Beispiel, Roadmap oder Satellit. Wir können hier die Breite und die Höhe Begriff einstellen. Wir können hier den Standard-Zoom-Hebel einstellen. Im Moment habe ich keine genaue Adresse in der Karte. In den meisten Orten unterstützt Google Maps das Hinzufügen exakter Adressen, aber an Orten wie Timbuktu funktioniert es nicht immer. Oder zum Beispiel, wenn Sie eine Veranstaltung mitten in einem Feld veranstalten, können Sie auch nicht Ihre genaue Adresse eingeben. Es ist besser, Koordinaten einzugeben. Sie können die Koordinaten auf Google Maps einfach nachschlagen und kopieren Sie sie in Bootstrap Studio einfügen. Und jetzt haben wir diesen kleinen roten Marker mit meinem genauen Standort. Gut verstanden. Übrigens, ich habe kein Leben in Timbuktu. Okay, lassen Sie uns etwas aufräumen. Sieht ganz schön aus. Möglicherweise kann es ziemlich professionell auf Ihrer Website aussehen. Aber was mich betrifft, werde ich es entfernen, weil ich keine Kunden habe, die meine Adresse finden müssen. Also darf ich nicht vergessen, meinen API-Schlüssel zu löschen. Danke, dass du mich daran erinnerst. Ich melde mich wieder in meine Konsolen-Cloud ein. Und ich werde auf diese Schaltfläche klicken, um sie zu löschen. Also, das war's vorerst von mir. Wir sehen uns im nächsten Video. 14. Hour 4 – Artikelliste: Eine Artikelliste ist eine gute Möglichkeit, Surfer auf spezifischere Inhalte in Ihrer Website zu lenken . Es kombiniert Miniaturansichten, Beschreibungen und Links in einem ansprechenden Raster. Wie üblich finden Sie einfach die Artikelliste im Bedienfeld „Komponenten“ und ziehen Sie sie auf die Seite oder in das Übersichtsfenster. Genau wie bei der Galerie erhalten wir ein flexibles Layout, wobei das Raster der Bilder je nach Seitenbreite neu anordnet. Aber in diesem Fall haben wir auch eine Beschreibung und einen Link. Mit Blick auf das Übersichtsfenster sehen wir, dass die Artikelliste aus einem div und einer Zeile besteht. Das div enthält die Überschrift und die Einleitung. Die Zeile enthält Spalten. Jede Spalte enthält eine Verknüpfung mit einem Bild, einem Überschriftenstrich, einem Absatz und einer Verknüpfung mit einem Symbol. Um das Bild zu ändern, doppelklicken Sie einfach auf das Bild, wählen Sie das gewünschte Bild aus, aber stellen Sie sicher, dass das Bild zuerst in Bootstrap Studio importiert wurde. Lassen Sie uns diesen Text bearbeiten. Und wir können die URL-Links einstellen, indem Sie den Link auswählen und zum Optionenbedienfeld gehen. Lassen Sie uns schließlich diese Symbole ändern. Doppelklicken Sie einfach auf das Symbol. Wir sehen, dass alle Arten von Symbolen in verschiedenen Kategorien verfügbar sind. Ich werde die Pre-Symbole festlegen, indem ich nach Maske, Flugzeug und Herz suche Maske, . Das ist also alles für dieses Kapitel. Ich hoffe, dass dieses Kapitel Ihnen gezeigt hat, wie einfach es ist, einige ziemlich fortschrittliche Komponenten zu Ihrer Website hinzuzufügen. Im nächsten Kapitel werden wir ein wenig mehr darüber lernen, wie sie funktionieren. Beginnend mit Zeilen und Spalten erklärt. Wenn Sie ein grobes Verständnis davon haben, wie sie funktionieren, können Sie diese Komponenten leicht anpassen und sogar eigene Komponenten erstellen. 15. Hour 5 – Linien und Spalten: Der Standardweg in Bootstrap zum Erstellen eines ansprechenden Rasters besteht darin, Zeilen und Spalten zu verwenden. Das Raster ist so eingestellt, dass es reagiert, da das Layout davon abhängt, wie breit der Bildschirm ist, bevor er anfängt Eine Erklärung der Führer wäre hier sehr hilfreich. Die Begriffe Zeile und Spalte sind in diesem Fall etwas irreführend, da sie darauf hindeuten würde, dass die Anzahl der Spalten im Raster statisch ist und die Zeilen und Spalten gleich und äquivalent sind. Das ist eigentlich nicht der Fall. Und es kann eine Spur nach oben sein, verwirrend, Dinge in Bezug auf Zeilen und Spalten zu vertuschen. In der Tat können Sie sich eine Reihe mehr wie eine Box vorstellen. Und Sie können sich eine Spalte vorstellen, die eher wie ein Element ist, das innerhalb dieser Box angeordnet ist. Eine Zeile ist also wie eine Box, die eine Reihe von Elementen enthält. Jeder Artikel hat eine bestimmte Breite und bevorzugt, horizontal von links nach rechts angeordnet zu werden. Solange genügend Platz vorhanden ist, werden alle diese Elemente in einer einzigen Zeile angeordnet. Wenn nicht genügend Speicherplatz vorhanden ist, werden spätere Elemente in die nächste Zeile verschoben. Wenn Sie beispielsweise eine Box haben, die ein Element enthält , das eine Breite von 25 Prozent der Seite hat, würde es leicht passen. In der Tat könnten Sie vier solcher Elemente passen und sie würden alle in einer einzigen Zeile angeordnet sein. Aber wenn wir einen fünften Punkt hinzufügen würden, gäbe es nicht genug Platz in der Zeile, so dass der Artikel in die nächste Zeile gepumpt werden müsste. Im Bootstrap-Framework kann dieser Entwickler auswählen wie breit jedes Element ist, abhängig von der Breite des Bildschirms. So kann der Entwickler beispielsweise die Breite jeder Spalte auf 100% für kleine Bildschirme, auf 33 Prozent für mittelgroße Bildschirme und auf 25 Prozent für große und extra große Schreie festlegen jeder Spalte auf 100% für kleine Bildschirme, auf 33 Prozent für mittelgroße Bildschirme . Das bedeutet, dass nur eine Proline in kleine Bildschirme passen würde. Kostenlose Gegenstände passen nebeneinander in mittelgroße Grüns. Und vier würden nebeneinander in extra große Bildschirme spucken. Als nächstes lassen Sie uns ein einfaches Beispiel erstellen, um die Erklärung ein wenig intuitiver und etwas weniger abstrakt zu machen. In diesem Beispiel werden wir Zeilen und Spalten verwenden, um ein einfaches ansprechendes Raster auf der Seite „Über mich“ zu erstellen . Gehen wir zunächst zur Seite und ziehen Sie eine Zeile auf die Arbeitsfläche. Als nächstes fügen wir der Regel drei Spalten hinzu. Wir können sehen, dass die drei Spalten nebeneinander angeordnet sind. Wenn wir das generierte HTML erwarten, sehen wir, dass die Zeilen und Spalten einfache divs sind, aber mit den Klassenattributen row und col hinzugefügt. Wählen Sie die erste Spalte unter Optionen, Sie können die Breite der Spalte festlegen. Wenn Sie die Breite auf eins setzen, wird die Breite auf 1 12. der verfügbaren Breite festgelegt. Dies lässt mehr Platz für die anderen beiden Spalten. Und sie werden sich ausdehnen. Wenn Sie die Breite auf 12 setzen, wird die Breite auf 100% der verfügbaren festgelegt. Mit. Dadurch werden die anderen beiden Spalten nach unten gedrückt. Wenn Sie die Breite auf sechs setzen, wird die verfügbare Breite auf 50 Prozent festgelegt. Dies lässt für die anderen beiden Spalten viel weniger übrig. Übrigens ist es ziemlich interessant zu sehen, wie sich das Ändern der Breite der Spalte auf den HTML-Code auswirkt. Als nächstes stellen wir die Breite für verschiedene Bildschirmgrößen ein. Legen Sie zunächst die Spaltenbreite auf „none“ fest. Wenn wir diese Optionen erweitern, sehen wir, dass wir die Spaltenbreite für verschiedene Bildschirmgrößen einstellen können. Für kleine Bildschirmgrößen, Lassen Sie uns die Breite jeder Spalte auf 12 setzen. Das bedeutet, dass jede Spalte 100% des verfügbaren Speicherplatzes beansprucht. Mittlere Bildschirme Wir möchten die ersten beiden Spalten nebeneinander anordnen. Und wir möchten die dritte Spalte nach unten schieben. Lassen Sie uns also die Breite auf 66 und 12 setzen. Und schließlich, für große und extra große Bildschirme, möchten wir die Pre-Säulen nebeneinander angeordnet. Aber wir möchten, dass die Breite der dritten Spalte breiter ist als die Breite der ersten beiden. Also lassen Sie uns die Breite auf Bree, Bree und sechs setzen. Jetzt haben wir ein grundlegendes Responsive Grid, das je nachdem, auf welchem Gerät Sie sich befinden, eine andere Ebene hat. Als nächstes fügen wir etwas Inhalt und Styling hinzu. Beginnen wir mit dem Hinzufügen einer Überschrift und eines Absatzes zu jeder Spalte. Als nächstes fügen wir jeder Spalte einen Rahmen hinzu. Sie können die Strg-Taste gedrückt halten, um mehrere Elemente gleichzeitig auszuwählen. Wie Sie sehen können, sind die Säulen so nah beieinander, dass sie sich berühren. Wir könnten etwas Raum zwischen ihnen hinzufügen, indem wir die Marge erhöhen, aber das verursacht ein Problem. Der zusätzliche Platz, der von den Rändern belegt wird, verschiebt die zweite Spalte in die nächste Zeile. Und das vermasselt die Schicht, die wir beabsichtigt haben. Eine bessere Lösung wäre, den Inhalt der Spalte in ein div zu gruppieren und stattdessen einen Rahmen zum div hinzuzufügen. Auf diese Weise können wir die Marge leicht ändern, ohne sich Gedanken darüber zu machen, dass das Layout vermasselt wird. Wir möchten auch etwas Abstand zwischen den Rändern der Seite und dem Inhalt der Spalten hinzufügen . Ein einfacher Weg, dies zu erreichen, ist die Verwendung eines Containers. Ein Container ist ein sehr nützliches Element. Es ist ein einfaches div-Element mit speziellen Eigenschaften. Der Container ist immer in der Mitte der Seite zentriert. Lassen Sie uns einen Container per Drag & Drop in den Körper ziehen. Und dann ziehen Sie die Zeile einfach per Drag & Drop in den Container. Lassen Sie uns schließlich jede Spalte anpassen, um den letzten Schliff hinzuzufügen. Zuerst werde ich jedem div etwas Polsterung hinzufügen. Und wir haben einen Grenzradius von 20 Pixeln eingerichtet. Schließlich denke ich, dass ich die Grenze von diesen Divs entfernen und eher die Hintergrundfarbe ändern werde. Stattdessen. Ich werde der ersten Spalte anstelle des Textes ein Profilbild hinzufügen. Ich werde den Text und die Spalten bearbeiten. Sie können die UMSCHALTTASTE drücken, um innerhalb eines Absatzelements eine neue Zeile hinzuzufügen. Schließlich werde ich die Höhe jedes div manuell einstellen , um sicherzustellen, dass die Höhe für jede Spalte gleich bleibt. Und so kann man eine grundlegende Responsive erstellen, die mit Zeilen und Spalten in Bootstrap erstellt wird. Als nächstes werde ich ein anderes Beispiel machen, in dem ich eine Fußzeile wie diese erstelle. 16. Hour 5 – Rows und Spalten Beispielbeispiel (Eine Footer): Als zweites Beispiel werden wir Zeilen und Spalten verwenden, um eine einfache Fußzeile zu erstellen. Die Fußzeile enthält zwei Spalten, die immer nebeneinander angeordnet werden. Die zweite Spalte enthält ein eigenes ansprechendes Raster. Es wird vertikal angeordnet, wenn die Breite der Seite klein genug ist und die Symbole nebeneinander angeordnet werden, wenn die Breite der Seite breit genug ist. Fügen Sie zuerst die folgenden Elemente hinzu. Fügen Sie eine Fußzeile hinzu. Fügen Sie einen Container innerhalb der Fußzeile und eine Zeile innerhalb des Containers hinzu. Und fügen Sie zwei Spalten innerhalb einer Zeile von Fußzeilenelement ist nur eine Beschriftung. Wir könnten es auslassen und stattdessen ein div verwenden, aber es zu behalten, macht den HTML-Code einfach zu lesen. Wir haben den Container schon mal gesehen. Es fügt dem Flattern automatisch entsprechende Ränder hinzu. Neben der ersten Spalte fügen wir zwei Symbole und zwei Absätze hinzu. Nabr klicken Sie auf das erste Symbol und ändern Sie es in Karte, die wir in Font Awesome Five finden können. Doppelklicken Sie auf das zweite Symbol und ändern Sie es zu männlich, die wir finden sie CSS-Elemente. Ändern Sie den Text der Absätze. Übrigens können Sie die UMSCHALTTASTE drücken, um zu einer neuen Zeile innerhalb desselben Absatzes zu gelangen. Nun fügen wir einige Inhalte zur zweiten Spalte hinzu. Fügen Sie eine Zeile und eine Spalte hinzu. Fügen Sie einen Link zu der Spalte hinzu. Legen Sie ein Symbol in, löschen Sie den Text im Link. Duplizieren Sie die Spalte zweimal. Wir können das Symbol auf einige Social Media Symbole wie Twitter, Snapchat oder was auch immer Sie wollen ändern. Ich würde meine auf YouTube, Facebook und LinkedIn umstellen. Sie können die URL der einzelnen Links im Optionenbedienfeld festlegen. Diese Symbole sind ein wenig auf der kleinen Seite. Wir können sie vergrößern, indem wir die Schriftgröße vergrößern. Als nächstes legen wir die Breite der Spalten fest. Ich möchte die Social-Media-Symbole ein wenig nach rechts schieben. Also werde ich die Breite der ersten Spalte 29 einstellen, um sicherzustellen , dass die Social-Media-Symbole auf der rechten Seite der Seite bleiben und nie in die nächste Zeile gestoßen werden. Ich würde die Breite der zweiten Spalte 2 festlegen. Wir wollen die Social-Media-Icons vertikal für kleine Bildschirme stapeln. Und wir wollen sie nebeneinander für mittlere und größere Bildschirme anordnen. also für alle drei Spalten den d-Teil mit 212 ein. Als nächstes legen Sie die MD-Breite 24 fest. Schließlich haben wir bemerkt, dass die Symbole auf der rechten Seite und nach oben ein wenig niedriger als der Text auf der linken Seite. Wir können dies beheben, indem Sie die erste Zeile auswählen und die y-Ausrichtung im Optionsfenster auf die Mitte einstellen. Und so haben wir ein nettes ansprechendes Raster erstellt, das als Fußzeile verwendet werden kann. Es ist eine einfache Angelegenheit, es auf die anderen Seiten zu kopieren. Denken Sie daran, die Verknüpfung einfügen zu verwenden, damit alle Änderungen an einer der Kopien automatisch auf die anderen angewendet werden. Und das ist alles für dieses Kapitel. Im nächsten Kapitel werden wir einige benutzerdefinierte Styling erstellen, um diese Fußzeile sowie andere Elemente auf der Seite zu formatieren. Wir sehen uns im nächsten Kapitel. Tschüss. 17. Hour 6 – Themen importieren: Bisher haben wir die Standard-Bootstrap-Farben, Schriftarten, et cetera verwendet. Und wir haben das Format einzelner Elemente manuell geändert. Es ist jedoch möglich, das Gesamtbild und den Stil der Website als Ganzes zu ändern , ohne jedes einzelne Element manuell ändern zu müssen. Wir können dies erreichen, indem wir das Thema ändern oder wir können den Stil mit CSS ändern. Designs sind die vordefinierten Stile, Layouts und Formate einer Seite. Verwendung bereits vorhandener Themen kann eine schnelle Möglichkeit sein, das allgemeine Erscheinungsbild der Website zu verändern. Um zu demonstrieren, zuerst unsere ausgewählte navbar. Im Optionsfeld sehen wir, dass wir eine Reihe von verschiedenen Optionen für die Hintergrundfarbe haben. Ich werde es auf primär setzen. Als nächstes werde ich den Absatz auswählen und zum Erscheinungsbild Hintergrund gehen. Ich habe derzeit ein nicht standardmäßiges Grün ausgewählt. Klicken Sie auf das farbige Quadrat neben dem Eingabefeld und wählen Sie das Tab-Design aus. Mauszeiger über diese Farben zeigen, wird der Variablenname angezeigt. Ich werde das Grün mit dem Variablennamen Erfolg auswählen. Nun, da wir die Farbe der Navigationsleiste und die Farbe des Absatzes mit dem Thema verknüpft haben , das das Design ändern. Klicken Sie auf Einstellungen. Und unter Bootstrap-Themen können Sie eine beliebige Anzahl von Balken aus der Liste auswählen. Ich werde dunkel wählen und speichern. Wie Sie sehen können, haben sich die Navigationsleiste und ein Absatz sowie die Textfarbe entsprechend dem neuen Design geändert. Beachten Sie, dass die Farbe des Hintergrunds der Seite manuell festgelegt wurde und nicht mit einer Designfarbe verknüpft ist. Es sei denn, wir setzen die Farbe des Hintergrunds zurück, es wird sich nicht ändern, egal was. Du wählst aus. 18. Hour 6 – Benutzerdefinierte Stile: Wie wir gesehen haben, ist es eine einfache Angelegenheit, die Farben der Schriftart, Ränder usw. jedes Elements über das Erscheinungsbild Panel einzustellen . Aber das bedeutet, dass, wenn wir das allgemeine Aussehen und Stil ändern wollen, würden wir zurückgehen müssen und sagte die Formatierung für jedes einzelne Element. Dies kann natürlich sehr zufällig und zeitaufwändig sein. Ein besserer Weg wäre, einen CSS-Stil zu erstellen und den Stil den relevanten Elementen mithilfe von Klassenattributen zu verknüpfen. Im Folgenden werden wir einen CSS-Stil Blog erstellen , die die Hintergrundfarbe zu patchen setzt. Wir werden diesen Stil dann auf alle relevanten Elemente anwenden. Gehen Sie zu index.html, wählen Sie den Körper aus und rufen Sie den Code-Inspektor auf. Im CSS-Panel VERWENDEN Sie eine Reihe von CSS-Blöcken. Der erste Block ist ein Elementpunktstil. Diese Show zur direkten Formatierung haben wir mit dem Erscheinungsbild Panel getan. Einige der Blöcke haben ein Vorhängeschloss, das anzeigt, dass sie nicht bearbeitet werden können. Klicken Sie im HTML-Bedienfeld. Rufen Sie die Registerkarte Attribute auf und fügen Sie eine neue Klasse mit dem Namen Hintergrundelement hinzu. In dieser Klasse werden wir alle Elemente identifizieren, in denen wir die Hintergrundfarbe einstellen möchten. Lassen Sie uns die Datei styles.css öffnen. Gehen Sie zum Entwurfsbereich, doppelklicken Sie auf styles.css, um die Datei zu öffnen. Im Bedienfeld doppelklicken Sie auf styles.css, um die Datei zu öffnen „Stile“ wird eine Registerkarte mit dem Namen „styles.css“ angezeigt. Klicken Sie auf Erstellen, ein neuer CSS-Block erscheint. Ich werde hier die gleiche Hintergrundfarbe hinzufügen. So ist jetzt die direkte Wahl, die wir über das Erscheinungsbild Panel angewendet haben, irrelevant geworden. Dies ist der Code, den wir ein Element sehen können, das Stil. Wir können es entfernen, indem Sie auf die drei Punkte in der oberen rechten Ecke des Blocks klicken und Löschen wählen. Als nächstes gehen Sie auf die Seite über mich, dass HTML. Wählen Sie den Textkörper aus, und fügen Sie das Texthintergrundelement zu Klassennamen hinzu. Wie Sie sehen können, wird die Hintergrundfarbe auf diese Seite angewendet 2. Fügen wir den gleichen Klassennamen zu den Körpern aller anderen Seiten hinzu. Wenn wir es auf der Seite hinzufügen, herunterladen Ressourcen dot HTML, sehen wir ein kleines Problem. Wir sehen, dass ein großer Teil der Seite weiß bleibt. Dies liegt daran, dass die Artikelliste standardmäßig einen weißen Hintergrund hat. Wir können dies lösen, indem wir den Block auswählen und dann das Klassenhintergrundelement zu diesem Tier hinzufügen. Wie Sie in diesem Fall sehen können, hat der Block mehr als eine Klasse. Zusammenfassend habe ich in diesem Fall einfach einen CSS-Block namens Hintergrundelement erstellt, einfach die Hintergrundfarbe oder Tiere setzt , die dieses Hintergrundelementattribut enthalten. Wir haben die Hintergrundfarbe gesetzt. Wenn ich jemals die Farbe des Hintergrunds ändern möchte, muss ich nur die Farbe hier ändern und sie wird für alle relevanten Elemente geändert. Als Geldstrafe zu zahlen. Ich möchte nur erwähnen, dass, obwohl ich den gesamten CSS-Code in diesem Beispiel eingegeben habe, wir nicht eingeben müssen, aber wir können auch das Erscheinungsbild Panel verwenden. Um das zu tun. Stellen Sie zunächst sicher, dass Sie ein Element ausgewählt haben, das dieses Attribut enthält. Und dann können Sie es in dieser Dropdown-Liste oben im Darstellungsfenster auswählen. Von dort aus können wir den CSS-Block in irgendeiner Weise ändern, die wir für richtig halten. Also, das war's vorerst. Danke fürs Zuschauen. Im nächsten Video werden wir über Responsive Styling sprechen. Das heißt, wir werden verschiedene Stile für verschiedene Geräte erstellen. Mit anderen Worten. 19. Hour 6 – Responsive Stile: Wir können auch Styling hinzufügen, das von der Größe des Bildschirms abhängt. Beispielsweise können wir kleine Ränder anwenden, wenn die Website auf einem Telefon angezeigt wird, und große Ränder, wenn die Website auf einem Desktop-Computer angezeigt wird. Dies erreichen wir mit einer Medienabfrage. Beginnen wir mit dem Hinzufügen des Standardstylings. Fügen Sie der ersten Zeile innerhalb des Fotos ein Klassenattribut mit dem Namen footer hinzu. Stellt sicher, dass die Datei styles.css geöffnet ist. Erstellen Sie einen neuen Block, indem Sie auf Erstellen klicken und ihn in Punktfußzeile umbenennen. Hier werden wir das Standard-Styling hinzufügen. Geben wir ihm eine solide Grenze. Radius von 10 Pixeln, ein Abstand von 20 Pixeln und ein Rand von fünf Pixeln. Mit dieser Standardeinstellung sieht das Styling für mittlere und große Bildschirme gut aus, aber auf kleineren Bildschirmen sieht es etwas gequetscht aus. Und unsere größten Bildschirme, es ist ein wenig zu weit entfernt. Lassen Sie uns also die Polsterung für die größten Krypten erhöhen. Duplizieren Sie zunächst den Stylingblock für die Punktfußzeile, indem Sie auf die roten Punkte klicken und Duplizieren auswählen. als Nächstes in einem duplizierten Startblock eine Medienabfrage hinzu, indem Sie auf die drei Punkte klicken und eine Medienabfrage hinzufügen auswählen. Der Text fügen Sie Medien, min-width, hundert, zweihundert Pixel erscheint. Dies bedeutet, dass das Styling nur angewendet wird, wenn die Fensterbreite mindestens einhundertzweihundert Pixel breit ist. Bootstrap Studio hat eine Person ausgewählt, 200 Pixel, weil wir derzeit den Bildschirm bei einer Person zu einem 100 Pixel. Ändern wir den Stylingblock, um die Polsterung, links, Polsterung, rechte Polsterung oben und Polsterung unten zu ändern . Denken Sie daran, dass Sie dies auch mit dem Darstellungsfenster tun können, wenn Sie es bevorzugen. Als nächstes entfernen wir den Rahmen und verringern den Rand und die Polsterung für kleinere Bildschirme. Duplizieren Sie den CSS-Block noch einmal und ändern Sie die Abfrage zu lesen. Fügen Sie Medien mit max. Breite 768 hinzu. Ändern Sie den duplizierten Stil, um den Rand und die Polsterung auf 0 festzulegen und den Rahmen zu entfernen. Und da haben wir es. Jetzt haben wir eine Fußzeile, die keinen Rahmen und sehr wenig Polsterung hat, wenn sie auf kleinen Bildschirmen betrachtet werden. Und das hat viel Polsterung, wenn es auf großen Bildschirmen angezeigt wird. In unserem nächsten Video werden wir Variablen verwenden, um eine neue Farbpalette für unsere Website zu definieren und anzuwenden. Bis bald. Tschüss. 20. Hour 6 – Stile definieren: Wenn wir die Hintergrundfarbe einstellen, haben wir sie direkt ausgewählt. Wenn wir diese Farbe öfter verwenden möchten, ist es eine gute Idee, die Farbe und leicht zu merken Namen zu geben. In diesem Video werden wir eine Reihe von Farben definieren, die wir auf unserer Website verwenden werden. Und wir werden sie mit den verschiedenen Elementen verknüpfen. Die wichtigsten Farben unserer Website an einem Ort zu haben, macht es einfacher, rosa Farben zu wählen und später das Gesamtdesign der Website zu ändern. zunächst sicher, dass die Datei styles.css geöffnet ist. Erstellen Sie einen neuen Block, indem Sie auf Erstellen klicken und ihn in Doppelpunkt root umbenennen. Und dieser Wurzelblock definieren wir eine neue Farbe namens Hintergrundfarbe. Nun, da wir die Farbe definiert haben, lassen Sie uns es im CSS-Block mit dem Namen Punkt Hintergrundelemente verwenden. Ändern Sie den Code, um eine var, offene Klammern, Hintergrundfarbe, schließen Klammern. Auf diese Weise wenden wir die Farbe, die wir definiert in Route auf alle Elemente, die das Klassenhintergrundelement enthalten, können wir eine beliebige Anzahl von Farben auf diese Weise definieren. Also lassen Sie uns zum Beispiel einige der Farben setzen, die wir in späteren Kapiteln verwenden werden. Fügen wir nun die folgenden Farben hinzu. Hatte Fußfarbe, die Hintergrundfarbe der Kopfzeile und die Fußzeile, Kopf Fuß Hover Farbe. Dies wird die Farbe der Kopf- und Fußzeilenelemente sein. Wenn die Maus darüber schwebt. Hatte Textfarbe gesetzt. Die Farbe des Textes der Kopf- und Fußzeile hatte Fußtext Hover-Farbe, die Farbe des Textes der Kopfzeile. Wenn wir den Mauszeiger über sie, hatte Schatten gesetzt, dies wird die Farbe des Schatteneffekts werden wir verwenden. Wir können diese Farbwerte hier manuell einstellen, oder wir können auf dieses farbige Quadrat klicken, um die Farbe auszuwählen. Nun, da wir unsere Farbpalette definiert haben, Lassen Sie uns die neuen Farben auf die Navigationsleiste und die Fußzeile anwenden. Erstellen Sie einen neuen Stilblock mit dem Namen dot head foot. Dieser Block enthält unser benutzerdefiniertes Styling für die Navigationsleiste und das Foto. Legen Sie die Hintergrundfarbe auf Kopffußfarbe fest, legen Sie die Textfarbe auf Kopffuß-Textfarbe fest, und legen Sie die Steuerunterkunft so fest, dass p x dx, Kopffußschatten gelesen wird. Auch hier können wir es entweder manuell eingeben oder wir können das Erscheinungsbild Panel verwenden, um das Styling hinzuzufügen. Nun, da wir diesen CSS-Block erstellt haben, können wir ihn mit der Navigationsleiste und mit der Fußzeile verknüpfen, indem wir den CSS BlockName im Attributfenster hinzufügen. Sie haben wahrscheinlich bemerkt, dass die Textfarbe in der Navigationsleiste und die Symbole und die Fußzeile immer noch ihre Standardfarbe haben. Dies liegt daran, dass diese Farben bereits in einem anderen CSS-Block definiert wurden. Wir können dies lösen, indem wir diese CSS-Blöcke überschreiben. Aber das ist ein Thema für das nächste Kapitel. Für jetzt, lassen Sie uns dieses Kapitel beenden, indem Sie ein wenig schnell in der Fußzeile aufräumen. Ich mag das Aussehen dieser Grenze nicht wirklich, wenn sie gelb ist. Lassen Sie uns es also vollständig entfernen und ersetzen Sie es durch einen Schlagschatten. Lassen Sie uns das Fußzeilenattribut im Darstellungsfenster auswählen und verwenden Sie dann das Darstellungsfenster, um die erforderlichen Änderungen vorzunehmen. Wir können die Veränderungen sehen, wie sie hier unten auf ernsthafte Weise geschehen. Wir müssen auch ein wenig mehr Platz in der Fußzeile schaffen. Wählen wir also die Fußzeile aus und erhöhen Sie die untere Polsterung sowie die obere Polsterung. Das war's also für dieses Kapitel. Ich hoffe, du hattest Spaß und ich werde dich im nächsten Kapitel sehen. Tschüss. 21. Hour 7 – Übergeordnete: Hallo alle, wie läuft's? In diesem Video werden wir über das Überschreiben sprechen. Sie werden zweifellos bemerkt haben, dass viele der Stylingblöcke gesperrt sind. Theoretisch ist es möglich, diese zu bearbeiten, aber das ist keine gute Idee. Das liegt daran, wenn das Bootstrap-Framework aktualisiert wird, würden Sie alle Änderungen verlieren, die Sie an diesen Bootstrap-Dateien vorgenommen haben. Besser wäre es, sie zu überschreiben. Um uns hier zu überschreiben sagt Plug, wir müssen zuerst bestimmen, welche CSS-Block zu überschreiben. Lassen Sie uns also damit beginnen, die navbar Marke zu überschreiben, die die Formatierung dieses Elements bestimmt. Ausgewählt. Rufen Sie den HTML-Inspektor auf und rufen Sie die Registerkarte Attribute auf. Wir sehen, dass die navbar Marke ein Klassenattribut namens navbar Marke hat. Durch diese Diode Registerkarte erhalten wir einen Überblick über alle CSS-Blöcke, die die navbar Marke beeinflussen. Wir suchen diejenige, die die Schriftfarbe eingestellt hat. durch scrollen, sehen wir, dass es dieser ist. Wir können diesen Block nicht bearbeiten, daher müssen wir ihn stattdessen überschreiben. Klicken Sie auf die drei Punkte in der oberen rechten Ecke und wählen Sie In styles.css kopieren. In der Datei styles.css wird ein Duplikat angezeigt. Lassen Sie uns das Duplikat bearbeiten. Lassen Sie uns dies mit den restlichen Elementen wiederholen. Der aktive Link hat einen ClassName, nav Link aktiv. Auch hier suchen wir nach dem CSS-Block, der eine Farbe definiert. Dies ist diejenige, die wir überschreiben möchten. Auswirkungen auf den aktiven Link, Lassen Sie uns nicht nur die Schriftfarbe geändert, sondern lassen Sie uns auch die Hintergrundfarbe ändern. Wir möchten auch die nav Links überschreiben. Wir möchten auch das Dropdown-Element außer Kraft setzen. Und wir möchten die Hintergrundfarbe des Dropdown-Menüs ändern. Sie fragen sich vielleicht, warum es so viele Attribute in diesen CSS-Blöcken gibt. Dies liegt daran, dass nicht nur die hier erwähnten Attribute, sondern auch die Attribute der Eltern und der Großeltern, et cetera. Sie könnten also versucht sein, diese Zeile zu ändern, um sie ein bisschen einfacher zu machen. Aber es gibt eine sehr große Chance, dass, Das wird das Styling vermasseln, das Sie angewendet. Dies liegt daran, was Spezifität genannt wird. Es geht etwas über den Rahmen dieses Kurses hinaus, Sie über Spezifität zu informieren. Aber wenn Sie interessiert sind, können Sie einige zusätzliche Lektüre auf dieser Website überprüfen. Wenn Sie interessiert sind. Wenn nicht, folgen Sie einfach mit mir. Als nächstes sehen wir, dass wir immer noch diese blaue Farbe in den Symbolen und Fußzeilen überschreiben müssen. Wenn wir durch die Stile mit diesem Element verknüpft scrollen, sehen wir, dass die Farbe durch einen CSS-Block namens a gesetzt wird. In CSS ist dies tatsächlich das Styling, das auf alle Links angewendet wird. Und das Symbol erbt dieses Attribut, weil das übergeordnete Symbol eine Verknüpfung ist. Wenn wir diesen CSS-Block überschreiben würden, würde es die Formatierung aller Links auf der Seite ändern. Das ist offensichtlich nicht das, was wir wollen. In diesem Fall ist es also eine bessere Idee, ein weiteres Klassenattribut mit dem Namen Kopf-Fuß-Symbol hinzuzufügen und die Schriftfarbe dort festzulegen. Und lassen Sie uns dieses Attribut zu jedem der Symbole hinzufügen. In dieser Lektion haben wir gelernt, die gesperrten CSS-Elemente zu überschreiben, die mit dem Bootstrap-Framework kommen. Im nächsten Video werden wir das Styling für diese Elemente festlegen , wenn wir mit einer Maus über sie bewegen. Und wir werden auch das Styling dieses Menü-Symbols ändern, das sehr stur zu sein scheint und besondere Aufmerksamkeit erfordert. 22. Hour 7 – Überreife des Hover: Okay, als Nächstes wollen wir unseren Hover-Stil festlegen. Dieser Stil wird immer dann angewendet, wenn der Mauszeiger über das betreffende Element schwebt. Festlegen eines Harvard-Stils entspricht genau dem Festlegen eines normalen Stils. Die einzige Sache ist, dass wir einen Doppelpunkt am Ende des Attributnamens hinzufügen müssen. So haben wir zum Beispiel im vorherigen Video einige Styling für diese Symbole und die Fußzeile erstellt. Lassen Sie uns einfach diesen Wählblock kopieren. Und am Ende des Attributnamens, fügen Sie Double Dot Hover hinzu. Und für den Hover setzen wir die Farbe des Symbols auf Weiß. Wenn wir uns die anderen Elemente ansehen, wie die Navbar-Marke, sehen wir, dass das Hover-Styling bereits festgelegt wurde. Um diese Hovers Tilings zu aktualisieren, müssen wir diese CSS-Box überschreiben, wie wir aus dem vorherigen Video wissen. Um dies zu tun, müssen wir sie nur in den Block styles.css kopieren und sie mit der Formatierung aktualisieren, die wir brauchen. Schließlich sehen wir, dass dieser Menüpunkt immer noch nicht die Farbe ist, die wir wollen. Um dies zu lösen, entfernen wir das Bild und ersetzen es durch ein Symbol. Wenn wir uns das CSS ansehen, sehen wir, dass das Hintergrundbild URL SVG, diesen Block überschreiben, indem Sie es in styles.css kopieren und URL SVG durch keine ersetzen, um das Bild zu entfernen. Als nächstes fügen wir ein Symbol an seiner Stelle hinzu. Ziehen Sie ein Symbol per Drag & Drop in die Spanne. Doppelklicken Sie auf das Symbol und finden Sie die einen benannten Balken in Font Awesome 4. Lassen Sie uns den richtigen Block finden, um die Schriftfarbe in Gelb zu überschreiben und zu ändern. Und schließlich, lassen Sie uns die Größe des Symbols erhöhen, indem Sie die Schriftgröße erhöhen. Also das ist alles für Styling und Formatierung. Ich hoffe, es war interessant für Sie und ich hoffe, Sie hatten Spaß darüber zu lernen. Im nächsten Kapitel werden wir mit etwas ganz anderem weitermachen. Wir werden über Flexbox reden. Also sehen wir uns im nächsten Kapitel. Tschüss für jetzt. Tschüss. 23. Hour 8 – Flexbox erklärt: Hallo an alle und willkommen zum nächsten Kapitel von Bootstrap Studio. In diesem Kapitel werden wir alles über Flexbox lernen. Flexbox ist eine einfache Möglichkeit, den Abstand zwischen verschiedenen Elementen in einem Raster festzulegen. In diesem ersten Video werden wir eine kurze Erklärung haben. Und dann im nächsten Video werden wir dieses Wissen gut nutzen, indem ein Beispiel erarbeiten, in dem wir freie Symbole über eine Spalte verteilen. Im dritten Video werden wir Flexbox verwenden, um sicherzustellen, dass wir die Fußzeile an den unteren Rand der Seite verschoben haben. Also lasst uns anfangen. Zunächst einmal lassen Sie uns die Dinge aufstellen. Beginnen wir mit dem Hinzufügen eines einfachen div zur Seite. Und innerhalb dieses div, Lassen Sie uns drei Absätze hinzufügen. Und lassen Sie uns den Text bearbeiten, um sie Absatz 1, 2 und 3 zu nennen. Um Dinge zu visualisieren, fügen wir dem div einen kleinen Rand hinzu. Erhöhen Sie die Höhe des div, und fügen Sie einen Rahmen hinzu. Lassen Sie uns auch den Hintergrund der Absätze auf rot, grün und blau setzen. Wechseln Sie zu Optionen. Hier sehen wir diesen Titel, Flexbox. Und wir sehen eine Reihe von Dropdown-Listen. Wir können diese Dropdown-Listen verwenden, um beide Eigenschaften der Box festzulegen, die in diesem Fall das div ist. Oder wir können Eigenschaften der Elemente innerhalb der Box, das ist, in diesem Fall die drei Absätze. Werfen wir einen Blick auf einige der Eigenschaften der Box, die wir einstellen können. also zunächst sicher, dass das div ausgewählt ist. Und suchen Sie die Überschriften-Flexbox im Optionenbedienfeld. Beginnen wir mit dem Setzen des Flex-Containers auf Flex. Als nächstes legen wir die Richtung auf Zeile fest. Wie Sie sehen können, sind die Absätze jetzt nebeneinander und nicht vertikal angeordnet. Wir können auch die Richtung auf Zeile rückwärts setzen. Also alle Spalte umgekehrt, um die Reihenfolge der Absätze zu ändern. Mit der Dropdown-Liste rechtfertigen Inhalte, können wir die Anordnung dieser Absätze innerhalb des Containers ändern. Wir können start und unzentriert verwenden, um die Absätze an den Anfang, das Ende und die Mitte der Zeile zu setzen . Wir können zwischen verwenden, was den ersten Absatz ganz am Anfang und den letzten Absatz am Ende setzt. Und dazwischen Absätze gleichmäßig zwischen ihnen verteilt. Und wir können herum mit Räumen oder Elementen gleichermaßen verwenden. Beachten Sie, dass justify auch funktioniert, wenn wir die Richtung auf Spalte setzen. Aber in diesem Fall funktioniert die Begründung vertikal und nicht horizontal. Es kann Spaß machen, mit diesen herumzuspielen, nur um ein Gefühl dafür zu bekommen. Wir können auch die Ausrichtung einstellen. Ausrichtung funktioniert genauso wie gerechtfertigt, aber es funktioniert in der Richtung senkrecht zu der Richtung, die wir hier eingerichtet haben. Zum Beispiel, wenn wir es auf die Mitte setzen, werden die Absätze in die Mitte des div gesendet. Einige dieser Dropdown-Listen gelten nicht für den Container, sondern auf die Elemente innerhalb des Containers angewendet, die Absätze in diesem Fall können wir beispielsweise festlegen, ob das Element wachsen soll oder nicht, um den verfügbaren Platz zu füllen. Das ist ein kurzer Überblick über die Flexbox-Einstellung. Es gibt noch mehr über Flexbox zu erfahren. Aber um dieses Kurses willen, denke ich, wir werden es vorerst bei diesem Kurs belassen. Wenn Sie daran interessiert sind, mehr zu erfahren, empfehle ich die folgende Seite. Aber für mich werde ich mich vorerst verabschieden. Im nächsten Video werden wir das Gelernte auf dieses einfache Beispiel anwenden, in dem wir Flexbox verwenden , um einen konsistenten Abstand zwischen diesen Pre-Symbolen in jeder Spalte anzuwenden. So sehen wir uns im nächsten Video. Tschüss für jetzt. 24. Hour 8 – Flexbox – Beispielbilder – Arrangieren: Hallo, jeder hat einen Ausflug. Ich hoffe, Sie haben einen tollen Tag und willkommen zum nächsten Video. In diesem Video werden wir das, was wir über Flexbox im vorherigen Video gelernt haben, anwenden , um einen gleichen Abstand zwischen diesen drei Symbolen in jeder dieser Spalten zu gewährleisten . Also lasst loslegen. Gehen Sie auf die Seite, laden Sie Software, die HTML, Drag & Drop der Artikel ist auf der Seite zwischen der Kopf- und Fußzeile. Löschen Sie die Einführung, und löschen Sie zwei der Artikel. Drag & Drop und div in den verbleibenden Artikel direkt nach dem Absatz. Löschen Sie den Link, der das Symbol enthält. Ziehen Sie einen neuen Link per Drag & Drop in das div. Bearbeiten Sie den Text, ziehen Sie ein neues Symbol per Drag & Drop in den Link. Lassen Sie uns die Schriftgröße des Links auf 32 Pixel einstellen. Und lassen Sie uns den Link zweimal duplizieren. Unsere setzen meine Icons auf den Linux-Pinguin, das Windows-Logo. Und um zu programmieren. Lassen Sie uns schließlich das Flexbox-ausgewählte div einrichten und zum Optionenbedienfeld gehen. Setzen Sie den Flex-Container auf Flex, setzen Sie, richten Sie den Inhalt auf um. Jetzt haben wir eine Vorlage für unseren Artikel. Wir können dies leicht duplizieren, um die Artikelliste zu füllen. Und als nächstes können wir die Angaben zu jedem Eintrag bearbeiten. In diesem Beispiel verwenden wir flexbox, um zu zeigen, wie wir leicht einen reaktionsschnellen Abstand zwischen diesen drei Symbolen hinzufügen können , sodass die Symbole unabhängig von der verwendeten Bildschirmgröße gleichmäßig verteilt werden. Im nächsten Beispiel werden wir flexbox verwenden, um diese Fußzeile ganz nach unten auf der Seitezu schieben diese Fußzeile ganz nach unten auf der Seite , unabhängig von der Fenstergröße. So sehen wir uns im nächsten Video. Tschüss für jetzt. 25. Hour 8 – Flexbox Beispiel – Drücke den Fußgänger: Hallo an alle und willkommen zum nächsten Video. Möglicherweise haben Sie bemerkt, dass die Fußzeile nicht immer den unteren Rand der Seite erreicht. Eine einfache Möglichkeit, dies zu lösen, ist die Verwendung von Flexbox. Lassen Sie uns zunächst die Höhe des Körperelements auf hundert setzen. Einhundert vh bedeutet eigentlich 100% der verfügbaren vertikalen Höhe. Dadurch wird sichergestellt, dass das body-Element so groß ist wie der verfügbare Speicherplatz auf einer Webseite. Als nächstes setzen Sie die Flexbox-Eigenschaften des Körpers wurden die Flex-Container zu flex wird die Richtung auf Spalte gesetzt und wir sind zwischen gerechtfertigt gesetzt. Und jetzt haben wir die Fußzeile fest an den unteren Rand der Seite gesendet. Ziemlich einfach, richtig? Wenden wir dies auch auf die Körperelemente der anderen Seiten an. Manchmal vermasselt es das Layout der anderen Elemente auf der Seite. Zum Beispiel, und die Indexseite, sieht es ein wenig zu gerade aus. In diesem Fall können wir die Überschrift und einen Absatz in einem div zusammenfügen, so dass sie zusammengefasst werden. Und die Flexbox behandelt sie als ein einzelnes Element. Wir können sie sogar zusammen mit der Navigationsleiste gruppieren , um sie ganz nach oben auf der Seite zu schieben, direkt unter der Navigationsleiste. Also, das ist alles von mir für jetzt. Im nächsten Video werden wir über die Erstellung unserer eigenen benutzerdefinierten Komponenten sprechen. Wir sehen uns dann, Tschüss. 26. Hour 9 – Hinzufügen von benutzerdefinierten Komponenten zur Bibliothek: Hallo alle, wie läuft's? Ich hoffe, du amüsierst dich gut. Bisher haben wir eine Reihe von einfachen und aufwendigen Elementen in der Studiobibliothek gesehen. Aber wir müssen uns nicht auf die Komponenten beschränken, die wir in einer Bibliothek finden können. In diesem Kapitel werden wir alles über die Herstellung unserer eigenen benutzerdefinierten Komponenten lernen und benutzerdefinierte Komponenten online finden. Wir lernten auch bei benutzerdefinierten HTML-Code auf der Website. Aber beginnen wir, indem wir eine unserer eigenen vorhandenen benutzerdefinierten Komponenten zur Bibliothek hinzufügen. Vielleicht haben wir eine Komponente erstellt, die wir wirklich mögen und wir wollen sie auch in anderen Projekten verwenden. Der einfachste Weg, dies zu tun, ist, indem Sie es zur Bibliothek hinzufügen. Nehmen wir als Beispiel die Fußzeile, die wir erstellt und der Bibliothek hinzugefügt haben. im Übersichtsfenster mit der rechten Maustaste auf die Fußzeile, und wählen Sie Zur Bibliothek hinzufügen. Es öffnet sich ein Fenster. Wir können den Namen der Komponente festlegen, und wir können auch die Ressourcen auswählen, die berücksichtigt werden müssen. Bootstrap Studio kann einige der Ressourcen herausfinden, die einbezogen werden müssen. Zum Beispiel werden die CSS-Blöcke, die direkt mit den Elementen in der Fußzeile verknüpft sind, hier automatisch einbezogen. Wir können auch zusätzliche Blöcke und JavaScript hinzufügen, die verknüpft werden müssen. In diesem Fall gab es einen Block, den wir nicht direkt verlinkt haben, nämlich den Doppelpunkt Wurzelblock. Das ist ein Block, in dem wir die Gaumenfarben definiert haben. Also müssen wir diesen Block speziell sammeln . In der Bibliothek. Wir finden unsere neue Komponente im Ordner Benutzer. Lassen Sie uns es testen, um zu sehen, ob es bei anderen Projekten funktioniert. So erstellen Sie ein neues leeres Projekt. Ziehen Sie die neue Fußzeile per Drag & Drop auf die Seite. Es funktioniert großartig. Wir können auch nett sein und diese Komponente hochladen. Hoffentlich wird es auch für einige andere Menschen nützlich sein. Wir können auch viele sehr nützliche Komponenten finden , die die Benutzer hier hochgeladen haben. So können wir einiges tun, indem wir Komponenten im Übersichtsfenster kombinieren. Aber manchmal kann es nützlich sein, unseren eigenen HTML-Code hinzuzufügen und Bootstrap Studio ermöglicht es uns, das auch zu tun. Wir verwenden den benutzerdefinierten Codeblock. Der benutzerdefinierte Codeblock ist ein sehr nützlicher Block. Es ist einfach ein leerer Block, in den Sie Ihren eigenen Code eingeben oder einfügen können. Dies kann sehr nützlich sein, weil viele Websites und Plattformen Ihnen die Möglichkeit bieten , Code zu generieren, den Sie dann in Ihre eigene Website einbetten können. Als nächstes servieren wir YouTube. Ich möchte ein Video finden, das ich auf meiner Website einbetten möchte. Ein weiteres Video, Sie haben die Freigabe-Schaltfläche abgebaut, klicken Sie darauf, und klicken Sie dann auf Einbetten. Ein Fenster mit etwas Code, erscheint, wählen Sie den Code und kopieren Sie ihn in die Zwischenablage. Zurück und Bootstrap Studio, doppelklicken Sie auf ein benutzerdefiniertes Codeelement und fügen Sie den Code in den verfügbaren Speicherplatz ein. Leider wird der benutzerdefinierte Code nicht auf einer Leinwand angezeigt. Um das Ergebnis zu testen, müssen wir eine Vorschau erstellen. Um die Dinge ein bisschen statischer zu machen. Lassen Sie uns Mitte des Videos. Wie Sie sehen können, ist es ziemlich einfach, einen benutzerdefinierten Code in unsere Bootstrap Studio-Website einzubetten. Wir können auch Inline-SVG-Code auf die gleiche Weise hinzufügen. Für diejenigen unter Ihnen, die es nicht wissen, steht SVG für Scalable Vector Graphics. Und es ist eine sehr gute Möglichkeit, Grafiken auf Ihrer Website aufzunehmen. Wir werden mehr darüber im nächsten Video erfahren. Also werde ich die bipolare Zelle sehen. 27. Hour 9 – Inline SVG: Hallo an alle, wie läuft's? Willkommen zurück. In diesem Video werden wir alles über Inline SVG lernen. Inline SVG gibt uns die Möglichkeit, Vektorgrafiken direkt in unsere Website einzubetten. Svg ist ein Beispiel für ein Grafikformat. Wenn es um Grafiken geht, können Sie beispielsweise Rastergrafiken wie PNG oder JPEG oder Bitmap auswählen. Vektorgrafiken Rasterbilder sind im Wesentlichen nur ein Pixelraster und jedes Pixel hat einen Farbwert. Vektorgrafiken hingegen sind eine Reihe von Form- und Farbanweisungen. Die gängigste Art von Vektorgrafikdateiformat heißt SVG. Svg steht für Scalable Vector Graphics. Im Allgemeinen ist es besser, Vektorgrafiken anstelle von Rastergrafiken zu verwenden. Dies liegt daran, dass Vektorgrafiken im Allgemeinen eine kleinere Dateigröße haben. Sie sind auflösungsunabhängig, so dass Sie sich keine Gedanken über die Größe des Bildschirms machen müssen, die Sie verwenden. Außerdem wird jeder Text, der im Bild enthalten ist, als Text identifiziert, was bedeutet, dass er leicht von der Suchmaschine aufgenommen werden kann, zum Beispiel. Und ein letzter Vorteil des SVG-Dateityps ist, dass es für einen Menschen ziemlich einfach ist, ihn zu lesen. Wie HTML. Es besteht aus Elementen und Tags und Eigenschaften. So kann es von Menschen mehr oder weniger verstanden werden und kann auch eindeutig von einem Computer interpretiert werden. Für die Zwecke dieses Tutorials habe ich ein einfaches Logo in Inkscape erstellt. Inkscape ist eine freie und Open-Source-Software-Anwendung , die verwendet werden kann, um Vektorgrafiken zu erstellen. Es ist eines meiner absolut liebsten Stücke von Software. Und es passiert auch so, dass ich Kurse über Inkscape habe , zu denen Sie auf Udemy Skillshare finden können. Oder Sie finden einige meiner kostenlosen Tutorials auf YouTube. Wenn es darum geht, SVG-Bilder zu importieren, können wir es wie bei anderen Bildern per Drag & Drop ablegen. Ein besserer Weg wäre jedoch, den SVG-Code in einen benutzerdefinierten Block zu kopieren. Auf diese Weise haben wir direkten Zugriff auf den Inhalt des Bildes. Um dies zu tun, öffnen wir zuerst die SVG-Datei in einem einfachen Texteditor. Nachdem wir die SVG-Datei geöffnet haben, sehen wir, dass es viel gibt, was wir verstehen. Ich meine, versteh mich nicht falsch. Es gibt eine Menge wie Abracadabra in den Haaren. Aber wir können auf den ersten Blick ziemlich viel sehen, was für jedermann klar ist. Sobald Sie einen Texteditor öffnen, lassen Sie uns den gesamten Text auswählen, indem Sie Control a drücken und ihn in die Zwischenablage kopieren, indem Sie Control C drücken. Dann gehen Sie zurück zum Bootstraps Studio und fügen Sie ihn in eine benutzerdefinierte Codekomponente ein, wie wir gelernt, in einem vorherigen Video zu tun. Jetzt haben wir diesen SVG-Code in unserem HTML eingebettet. Dies wird als Inline-SVG bezeichnet. Leider kann Bootstrap Studio diesen Code momentan nicht live interpretieren, daher müssen wir eine Vorschau erstellen, um zu sehen, wie er aussieht. Eine gute Sache bei der Verwendung von Inline-SVG ist also, dass der Text in die Website eingebettet ist. Wenn es zum Beispiel um Suchmaschinenoptimierung geht, ist dies der große Vorteil. Und ein weiterer großer Vorteil ist, dass wir einfache Änderungen am Text ganz einfach manuell vornehmen können. Zum Beispiel ändern wir den Text auf dem Logo, nur gesucht, um einen Text zu finden und bearbeitet. Es ist auch ziemlich einfach, die Farbe eines der Objekte im Logo zu ändern. Wir müssen nur die Fülleigenschaft ändern. Wir können diese Farben sogar mit den variablen Farben verknüpfen, die wir in einem vorherigen Video definiert haben. Auf diese Weise, wenn wir uns entscheiden, unseren Gaumen zu ändern, wird das Logo aktualisiert. Und eine weitere wirklich coole Zahlung über Inline-SVG ist, dass wir sogar JavaScript verwenden können , um die Eigenschaften der SVG-Elemente zu steuern. Falls Sie Interesse an JavaScript haben, werden wir in einem zukünftigen Kapitel mehr über JavaScript erfahren. Eine Sache, die wir uns jedoch bewusst sein sollten, ist, dass wir, da dies ein benutzerdefinierter Code ist, nicht das Erscheinungsbild Panel verwenden können, um Styling festzulegen. Aber es gibt einen schnellen Weg, um das zu umgehen. Wir können die Klasse einfach manuell einstellen und dann mit dem Styling beginnen. Also, das ist alles für den Moment. Danke fürs Zuschauen. Im nächsten Kapitel werden wir alles über das Hinzufügen von Formularen lernen. Und wir werden über das Hinzufügen von intelligenten Formularen lernen, wobei der Benutzer in der Lage ist, das ausgefüllte Formular direkt an unsere E-Mail-Adresse zu senden. Also, das ist alles für den Moment. Danke fürs Zuschauen. Ich seh dich dort. Haben Sie einen guten Tag. Tschüss. 28. Hour 10 – Formulare: Hallo an alle. Ich hoffe, du amüsierst dich gut. Willkommen zum nächsten Video. In diesem Video werden wir ein einfaches Formular mit den Formularelementen aus Bootstrap Studio erstellen. Also lasst uns anfangen. Ziehen wir zunächst einen Container auf die Seite. Und ziehen wir ein Formular in den Container. Wir legen eine Überschrift hinein und benennen den Hering in Bestellformular um. Beginnen wir damit, diesen Formularen eine grundlegende Formatierung zu geben. Fügen wir zum Beispiel einen Rand und einen Schlagschatten hinzu, um ihn ein wenig angenehmer anzusehen. Das ist auch einige Zeilen und Spalten verwenden, um ein einfaches Layout zu erstellen. Und wir werden unsere Zeilen und Spalten Breite, Optionsfelder und Beschriftungen füllen . Am Ende haben wir also zwei Spalten mit jeweils vier Optionsfeldern. Die erste ist Größe, und die zweite ist Farbe. Okay, wir haben eine sehr, sehr einfache Form. Mal sehen, ob es funktioniert. Starten der Vorschau. Es funktioniert mehr oder weniger, aber wir haben ein Problem. Wir können eine beliebige Anzahl von Optionsfeldern auswählen, die wir wollen. Normalerweise funktionieren Optionsfelder so, dass bei der Auswahl eines automatisch die Auswahl eines anderen aufgehoben wird. Wir können dies im Optionsfenster tun, indem Sie den Optionsfeldern einen Namen geben. Optionsfelder mit dem gleichen Namen würden zur gleichen Gruppe gehören. Und Sie können immer nur einen innerhalb einer Gruppe auswählen. Also jetzt haben wir zwei Gruppen, eine für Größe und eine für Farbe. Lassen Sie es uns testen. Ja, viel besser. Okay, als nächstes fügen wir eine weitere Zeile und zwei Spalten hinzu. Und füllen wir die Spalten mit einem Label und einer E-Mail-Eingabe. Wir können auch die relative Breite 2, 3 und 9 einstellen. Da wir eine E-Mail-Eingabe in das Formular hinzugefügt haben, akzeptiert nur eine Eingabe in Form einer E-Mail-Adresse. Mit anderen Worten, es muss dieses Symbol hinzugefügt werden. Lassen Sie uns die Zeile duplizieren. In dieser Zeile geben wir dem Benutzer die Möglichkeit, ein benutzerdefiniertes Logo hinzuzufügen. Lassen Sie uns die E-Mail-Eingabe durch Dateieingabefeld ersetzen. Jetzt hat der Benutzer die Möglichkeit, eine Datei anzuhängen. Fügen wir ein div hinzu und machen Sie dieses div am unteren Rand. Wir können die Ausrichtung einstellen, um auszurichten, zu schreiben, um sicherzustellen, dass die Taste nach rechts gedrückt wird. Und lassen Sie uns den Text der Schaltfläche ändern, die gesendet werden soll. Okay, jetzt haben wir einen funktionierenden Knopf. Wir können darauf klicken, aber es tut nichts. Aber hey, wir können drauf klicken. Das ist also die Hauptsache, richtig? Und nur ein Scherz, nur ein Scherz. Nein, wir werden es so machen, dass, wenn der Benutzer auf diesen Button klickt, alle Daten, die der Benutzer hier ausgefüllt hat, an unsere E-Mail-Adresse gesendet werden. Wir werden intelligente Formulare verwenden, um das zu erreichen, was ziemlich einfach ist, aber wir werden es jetzt nicht tun. Das werden wir im nächsten Video machen. In der Zwischenzeit lassen wir das Formular einfach ein bisschen schöner aussehen , indem wir nur ein wenig mit dem Erscheinungsbild Panel aufräumen. Also dort haben wir eine Grundform. Wir haben einen Blick auf Optionsfelder und E-Mail-Eingabe und eine Dateieingabe, aber es gibt mehr Formularelemente zur Verfügung. Schauen Sie sich einfach unter der Überschrift des Formulars in der Bibliothek an. Wir haben auch eine Reihe von vorgefertigten Formularen zur Verfügung, die Sie unter UI-Formulare finden können. Wie ich im nächsten Video erwähnt habe, werden wir dieses Formular in eine aktive Form verwandeln. Also danke fürs Ansehen, und ich sehe dich im nächsten Video. 29. Hour 10 – Smart Form: Hallo an alle. Wie läuft's? Im vorherigen Video haben wir eine schönere Form wie diese erstellt, die schön aussieht, aber es macht nichts. In diesem Video werden wir intelligente Formulare verwenden , damit der Benutzer dieses Formular ausfüllen und auf die Schaltfläche Absenden klicken kann. Wenn der Nutzer auf diesen Senden-Button klickt, wird eine E-Mail mit allen Daten an unsere E-Mail-Adresse gesendet. In Bootstrap Studio. Es ist eigentlich ziemlich einfach, dies zu implementieren. Also lasst uns anfangen. Gehen Sie zunächst zum Übersichtsfenster und wählen Sie ein Formular aus. Wechseln Sie dann zum Optionenbedienfeld. Und Togas intelligente Formulare. Hier können wir die E-Mail-Adresse auswählen, an die die Formulardaten gesendet werden. Ich habe hier bereits eine E-Mail Adresse. Aber wenn Sie keines haben, müssen Sie auf Verwalten klicken, um eine hinzuzufügen. Geben Sie hier die Adresse und klicken Sie auf Erstellen. Sie müssen die E-Mail-Adresse mit dem Bestätigungscode überprüfen , den Bootstrap Studio Ihnen zusendet. Da ich bereits einen Empfänger hinzugefügt habe, unser einen Schritt übersprungen. Nachdem Sie den Empfänger hinzugefügt haben, kehren Sie zum Optionsfeld zurück und wählen ihn aus dieser Dropdown-Liste aus. Um sicherzustellen, dass der Benutzer keines der Felder leer lässt. Wir können dieses Validierungsfeld verwenden. Wenn wir es auf erforderlich setzen, wird der Benutzer eine Fehlermeldung erhalten. Wenn sie es leer lassen. Lassen Sie uns alle diese Optionsfelder mit der Steuerungstaste auswählen, um mehr als eine zu einem Zeitpunkt auszuwählen, gehen Sie zur Validierung und wählen Sie erforderlich. Und lassen Sie uns dasselbe mit dem E-Mail-Eingabefeld machen. Schließlich ist es wichtig für uns, den Mustertyp festzulegen, der übermittelt werden soll. Okay, jetzt sind wir bereit. Lassen Sie uns das Smartphone Untätigkeit sehen, indem Sie eine Vorschau erstellen. Wie Sie sehen können, wenn wir versuchten, ohne die entsprechenden Felder auszufüllen, erhalten wir eine Fehlermeldung. Wir müssen sogar sicherstellen, dass es sich um eine gültige E-Mail-Adresse handelt. Wir können eine Datei hochladen. Wenn wir auf Absenden klicken, erhalten wir diese Erfassung zu beweisen, dass wir keine Roboter versuchen, die Welt natürlich zu übernehmen. Ok, unsere E-Mail ist angekommen. Lassen Sie uns unseren Posteingang überprüfen, um genauer zu sehen, was es sagt. Die E-Mail enthält drei Informationen und den Anhang. Wir sagten, die Namen dieser Optionsfelder auf Größe und Farbe. Deshalb sehen wir hier Größe und Farbe. Wenn wir jedoch Wert betrachten, sehen wir, dass es nicht wirklich Sinn ergibt. Wir haben S für die Größe und auf für die Farbe. Außerdem ergibt der Name der E-Mail-Adresse keinen Sinn. Gehen wir also zurück zum Bootstrap Studio, um das zu beheben. Lassen Sie uns einen entsprechenden Wert für jedes Optionsfeld festlegen. Und für die E-Mail-Adresse. Lassen Sie uns den Namen setzen. Okay, lassen Sie es uns in einer Vorschau testen. Großartig, wie Sie sehen können, ist es jetzt viel einfacher, die neue Formulareinreichung zu verstehen. Wie Sie sehen können, macht Bootstrap Studio es ganz einfach, ein intelligentes Formular auf unserer Website hinzuzufügen. Wir können dies verwenden, um unsere eigenen Kontaktformulare sind auf mündlichen Formen, et cetera, et cetera. Aber wenn wir eine erweiterte Funktionalität erstellen möchten, müssen wir JavaScript verwenden. Und darum geht es im nächsten Kapitel. Wir werden mit der Deaktivierung dieser E-Mail-Adresse beginnen und ein Opt-In-Kontrollkästchen hinzufügen. Viele Leute fühlen sich durch Codierung eingeschüchtert, aber ich versichere Ihnen, dass es absolut keine Notwendigkeit gibt. Codierung macht eigentlich viel Spaß, aber wir werden es für den Rest des Kurses nicht brauchen. Wenn Sie also denken, dass JavaScript für Sie nicht nützlich sein wird, oder wenn Sie bereits Java-Skript kennen, oder selbst wenn Sie einfach nicht das Gefühl haben, dass es oder aus welchem Grund epi das nächste Kapitel überspringen möchte, dann gehen Sie weiter und überspringe es. Und ich werde Sie im letzten Kapitel über den Export und die Veröffentlichung sehen. Wenn Sie auf der anderen Seite begeistert sind, ein wenig über JavaScript zu lernen, dann werde ich Sie im nächsten Kapitel sehen. So lange für jetzt, Tschüss. 30. (Optional) Hour 11 – Javascript: Tipps für Noobs: In diesem Video werden wir ein wenig über JavaScript lernen. In diesem Kapitel werden Sie in der Lage, zusammen mit den Schritten folgen , um dieses Opt-in-Kontrollkästchen zu erstellen, die diese E-Mail-Eingabe aktivieren und deaktivieren können. In diesem Kapitel gehe ich davon aus, dass Sie ein kompletter Anfänger sind. Also werden wir ziemlich akribisch sein. Aber bevor wir anfangen, würde ich gerne schnell Tipps für Anfänger coder abdecken. Tipp Nummer eins ist präzise, sehr präzise. Es stellt sich heraus, dass Computer nicht sehr schlau sind. Selbst was wie ein unbedeutender Tippfehler aussehen würde, könnte Ihren Code möglicherweise brechen. Wenn Ihr Code also nicht tut, was Sie erwarten, ist es sehr möglich, dass es einfach, weil Sie einen Tippfehler gemacht haben, für Anfänger sehr frustrierend sein kann. Aber ich fürchte, das ist nur eine der Realitäten des Codierens. Und wenn Sie mehr Erfahrung machen, werden Sie sich immer mehr daran gewöhnen, präzise zu sein. Tipp Nummer zwei, testen Sie den Code. Sehr, sehr oft für Anfänger, ist es keine Übertreibung, den Code für jede einzelne Zeile zu testen, die Sie hinzufügen. Schließlich ist es viel einfacher, einen Tippfehler in einer einzigen Codezeile zu finden , anstatt in 100 Codezeilen. Und Tipp Nummer drei, denken Sie wie ein Roboter. Mit anderen Worten, versuchen Sie sehr logisch und systematisch zu denken. Codierung ist eine große Übung für das Gehirn. Je mehr Sie programmieren, desto mehr üben Sie logisch und systematisch zu denken. Denn das ist der beste Weg, um herauszufinden, warum Ihr Code nicht tut, was Sie tun wollten. Und Tipp Nummer 4, die ganze Zeit online sein. Codierung ist nicht so, als würde man eine Sprache lernen, in der man im Grunde viel auswendig lernen muss. Es geht mehr darum, Kleidung und Strukturen zu verstehen. Und es geht mehr darum, nachschlagen zu können, wie man Sachen macht. Und der beste Ort, um nach Sachen zu suchen, ist Internet. Okay, also mit diesen vier Tipps im Hinterkopf, lasst uns anfangen. 31. (Optional) Hour 11 – Javascript: onclick: Willkommen zurück alle. In diesem Video werden wir dieses Kontrollkästchen hinzufügen und wir werden JavaScript verwenden, um zu erkennen, wenn jemand auf ein Kontrollkästchen klickt. Sie ein Kontrollkästchen mit einem Etikett ein, und passen Sie die Arbeit an, um zu lesen. Bitte senden Sie mir Newsletter und Werbematerial und all das Zeug. Wählen Sie als Nächstes die E-Mail-Eingabe aus. Und unter dem Status im Optionenfenster. Umschalten deaktiviert. Dumb, um die JavaScript-Datei im Design-Panel hinzuzufügen, gehen Sie zu der Überschrift JavaScript. Klicken Sie mit der rechten Maustaste auf die Überschrift und wählen Sie Neu und JS-Datei Planen Sie nur eine JavaScript-Datei zu verwenden. Lassen Sie uns also sehr phantasievoll sein und nennen Sie es java script.js. Das Ziel für jetzt ist es, eine einfache Funktion zu erstellen , die ausgeführt wird, wenn der Benutzer auf ein Kontrollkästchen klickt, doppelklicken Sie auf eine JavaScript-Datei, um es zu bearbeiten. Und die folgende Funktion, Funktion Checkbox geklickt offene Klammer, schließen Klammern, geschweifte Klammern, Alarm, offene Klammern, hallo, schließen Klammern. Lassen Sie mich das einfach kurz erklären. Wir haben gerade eine Funktion definiert und der Name dieser Funktion heißt Checkbox angeklickt jeden Ping zwischen den geschweiften Klammern ist, was die Funktion tut. In diesem Fall haben wir nur eine Zeile in unserer Funktion. Es erstellt ein Warnfeld mit dem Text Hallo. Also haben wir eine Funktion erstellt, die etwas tut, aber wir nennen diese Funktion nie. Was wir also tun möchten, ist, dass wir diese Funktion manchmal auslösen möchten, sagen wir, jedes Mal, wenn jemand auf ein Kontrollkästchen klickt, löst es eine Dysfunktion aus. dazu das Kontrollkästchen und öffnen Sie das Attributfenster. Lassen Sie uns einen Onclick hinzufügen, mit dem Wert Kontrollkästchen angeklickt. Also, wenn wir auf dieses Kontrollkästchen klicken, wird es das Funktions-Kontrollkästchen auslösen angeklickt. Beachten Sie, dass der Wert dieses Schlüssels genau mit dem Namen der Funktion übereinstimmen muss. Wenn es nur einen kleinen Tippfehler gibt, wird es nicht funktionieren. Lassen Sie uns eine Vorschau erstellen, um es zu testen. Es funktioniert, großartig. Jetzt, wo wir wissen, dass es funktioniert, können wir mit dem nächsten Schritt fortfahren. Der nächste Schritt besteht darin, herauszufinden, ob dieses Kontrollkästchen aktiviert ist oder nicht. werden wir im nächsten Video machen. Wir sehen uns dort. 32. (Optional) Hour 11 – Javascript: Elemente, falls und sonst: Hallo an alle und willkommen zurück. Im vorherigen Video haben wir eine einfache Funktion erstellt und wir verwenden das Attribut beim Klicken, um die Funktion jedes Mal auszulösen, wenn jemand auf ein Kontrollkästchen klickt. In diesem Video werden wir diese Funktion erweitern, so dass die Funktion uns mitteilen wird, ob das Kontrollkästchen nicht in der JavaScript-Datei angeklickt wurde. Erstellen Sie eine neue Variable mit dem Namen check. Verwenden Sie document.getElementById, um das Kontrollkästchen mit der Variablen zu verknüpfen. Diese Funktion getElementById bindet das Element mit dieser ID und speichert alle Informationen in dieser Prüfvariable. Lassen Sie uns eine Warnung hinzufügen, um zu sehen, ob das Kontrollkästchen aktiviert ist oder nicht. In diesem Fall ist geprüft eine der Eigenschaften der Variablenprüfung. Und es kann entweder wahr oder falsch sein. Lassen Sie uns eine Vorschau erstellen. Und wie Sie sehen, wenn wir auf das Kontrollkästchen klicken, ist das Ergebnis wahr. Und wenn wir das Kontrollkästchen deaktivieren, ist das Ergebnis falsch. Als nächstes fügen wir eine einfache Bedingung hinzu. Wir werden eine sogenannte IF-Klausel verwenden. Übrigens können wir zwei umgekehrte Schrägstriche wie diesen verwenden, um den Code auszukommentieren. Dies bedeutet, dass der Browser den Code einfach ignoriert. Wir können diese Kommentare verwenden, um einige Hinweise und Erläuterungen für uns selbst zu behalten, wenn wir diesen Code später noch einmal betrachten oder für andere Leute, wenn sie unseren Code untersuchen, ich werde diese Codezeile nur als Kommentar beibehalten, weil ich vergessen, wie man eine Alert-Box einstellt und ich möchte es später nicht mehr online nachschlagen müssen. Also werde ich es nur als Erinnerung hier lassen. Beginnen Sie mit dem Schlüsselwort if, gefolgt von ein paar Klammern. Zwischen diesen beiden Gruppenklammern haben wir einen Ausdruck, der entweder wahr oder falsch sein kann. In diesem Fall kann aktiviert oder deaktiviert entweder wahr oder falsch sein. Und lassen Sie uns eine Warnung hinzufügen. Warnung wird nur angezeigt, wenn der Prüfpunkt für den Ausdruck „true“ markiert ist. Mit anderen Worten, wenn das Kontrollkästchen tatsächlich aktiviert wurde, und lassen Sie es uns testen. Also jetzt haben wir die Situation, in der das Kontrollkästchen aktiviert ist abgedeckt. Was ist, wenn das Kontrollkästchen nicht aktiviert ist? Dafür können wir das Schlüsselwort else verwenden. Else wird immer in Kombination mit if verwendet. In diesem Fall haben wir, wenn das Kontrollkästchen aktiviert ist, dann tun Sie dies in allen anderen Fällen dazu. Und lassen Sie uns es testen, um zu sehen, ob es funktioniert. So haben wir jetzt eine klare Struktur, die bestimmen kann , ob das Kontrollkästchen angeklickt wurde oder nicht. Aber wir möchten nicht nur Alerts senden, auch das E-Mail-Eingabefeld aktivieren und deaktivieren. Und das werden wir im nächsten Video machen. Aber für uns ist es Zeit, eine Pause zu machen. Also gehen Sie weiter und machen Sie eine kurze oder lange Pause. Und ich werde dich im nächsten Video sehen. Tschüss. 33. (Optional) Hour 11 – Javascript: Deaktiviere das -: Hallo an alle. Im vorherigen Video haben wir ein einfaches JavaScript hinzugefügt, das jedes Mal erkennt, wenn jemand auf ein Kontrollkästchen klickt und auch bestimmt, ob das Kontrollkästchen gerade angeklickt wird oder nicht. Wir haben gelernt, Funktionen zu schreiben und sie mit dem Schlüsselwort onclick auszulösen. Wir haben gelernt, ein Element durch seine ID mit einer Funktion namens get Element nach ID zu finden. Und wir haben gelernt, einfache Bedingungen mit den Schlüsselwörtern if und else zu erstellen. In diesem Video werden wir das Skript erweitern, um das E-Mail-Eingabefeld in Abhängigkeit vom Wert des Kontrollkästchens zu aktivieren und zu deaktivieren. Also lasst uns anfangen. Wir müssen zuerst alle Informationen dieses Eingabefeld in eine Variable setzen sollte genauer sein. Wir brauchen eine Variable, die auf das E-Mail-Eingabefeld zeigt. Lassen Sie uns also das E-Mail-Eingabefeld und die ID geben und document.getElementById verwenden , um eine Variable zu erstellen, die auf dieses E-Mail-Eingabefeld zeigt. Und jetzt, da wir eine Variable haben, die auf dieses spezifische Eingabefeld zeigt, können wir seine Eigenschaften einstellen. Wir sagten, die behinderte Eigenschaft zu erzwingen, falls das Kontrollkästchen aktiv ist. Und wir setzen es auf true, wenn das Kontrollkästchen nicht aktiviert wurde. Und da haben wir es. Wir haben diesem Formular eine einfache Funktionalität hinzugefügt. Wenn ich das Kontrollkästchen ankreuze, aktiviert es die EMA-Eingabe. Und wenn ich das Kontrollkästchen deaktiviere, wird es deaktiviert. Also sollten wir stolz auf uns selbst sein. Wir haben jedoch eine unbeabsichtigte Nebenwirkung. Das Formular setzt das Kontrollkästchen automatisch nach dem Senden zurück, aber es wird das E-Mail-Eingabefeld nicht zu deaktiviert zurückgesetzt. Um dies zu beheben, können wir ein Skript schreiben, das das Formular so zurücksetzt, wie wir wollen. Und wir können dieses Skript auslösen, wenn jemand auf die Schaltfläche „Senden“ klickt, eine neue Funktion namens „eingereicht“ erstellen und sie mit der Schaltfläche „Senden“ verknüpfen , indem Sie ein onclick Attribut hinzufügen. Denken Sie daran, dass es genau das gleiche wie der Funktionsname sein muss. Lassen Sie es uns testen. Okay, es funktioniert, aber leider führt es zu einem weiteren unbeabsichtigten Problem. Wenn wir das Feld deaktivieren, haben wir auch die Validierung deaktiviert. Das bedeutet, dass wir eine Situation geschaffen haben, in der jemand eine ungültige E-Mail-Adresse eingeben könnte. Um dies zu lösen, werden wir unsere eigene E-Mail-Prüffunktion schreiben. Es klingt schwierig, aber mach dir keine Sorgen mit ein wenig Hilfe aus dem Internet, es ist eigentlich ganz einfach. Also ich hoffe, Sie kommen mir in das nächste Video, wo wir unser Formular beenden werden. Bis bald. Tschüss. 34. (optional) Hour 11 – Javascript: Überprüfe die gültige E-Mail-Adresse: Hallo an alle und willkommen zurück. In den letzten paar Videos haben wir dieses Formular erstellt und wir haben dieses Kontrollkästchen erstellt , das dieses Eingabefeld aktiviert oder deaktiviert. Wir haben aber ein kleines Problem. Kurz gesagt, wir müssen ein kurzes Skript schreiben , das prüft, ob es sich um eine gültige E-Mail handelt oder nicht. Das einzige Problem ist, dass ich keine Ahnung habe, wie ich das machen soll. Aber das ist okay niedrig, dafür ist das Internet. Also lassen Sie uns eine schnelle Suche online machen und nach Java Script suchen, überprüfen Sie gültige E-Mail. Ziemlich schnell. Wir finden die folgende Website. Abschaum durch. Wir sehen dieses Code-Snippet, das wir brauchen. Wenn Sie interessiert sind, können Sie den ganzen Artikel lesen. Es ist ziemlich kurz und es ist auch informativ. Aber für jetzt, lassen Sie uns einfach kopieren und fügen Sie dieses Code-Snippet in unsere JavaScript-Datei. Lassen Sie uns schnell den Code untersuchen und die wichtigsten Dinge überprüfen. Zunächst einmal ist es eine Funktion mit dem Namen e-mail gültig ist. Zweitens sehen wir hier, dass wir ihm eine Eingabe geben müssen. Wir müssen eine E-Mail-Adresse angeben. Und schließlich sehen wir, dass die Funktion etwas zurückgibt. Mit anderen Worten, es gibt eine Ausgabe für diese Funktion. Die Ausgabe ist entweder true oder false, true, wenn es sich um eine gültige E-Mail handelt, und false, wenn es sich nicht um eine gültige E-Mail handelt. So können Sie diese Funktion verwenden, um festzustellen, ob es eine gültige E-Mail gibt. Und in unserer eigenen übermittelten Funktion werden wir dies mit einer if -Klausel kombinieren. Wir deaktivieren das E-Mail-Feld nur, wenn es sich bei der angegebenen E-Mail um eine gültige E-Mail handelt. Schauen wir uns mal an, was wir hier getan haben. Zuallererst haben wir das Schlüsselwort if. Um die Bedingung des if Schlüsselworts auszuwerten, rufen wir zuerst die Funktion E-Mail gültig ist. Denken Sie daran, dass die Funktion E-Mail gültig ist, erfordert eine Eingabe. In diesem Fall verwenden wir eine der Eigenschaften des E-Mail-Eingabefeldes. Konkret verwenden wir die Value-Eigenschaft. E-Mail ist gültig Funktion gibt true zurück, wenn die Eingabe eine gültige E-Mail ist , und es gibt false zurück, wenn die Eingabe keine gültige E-Mail ist. Wenn wir also entdeckt haben, dass es sich um eine gültige E-Mail handelt, können wir das E-Mail-Eingabefeld deaktivieren. Wenn es sich nicht um eine gültige E-Mail handelt. In diesem Fall wird nichts passieren. Und seitdem ist das E-Mail-Eingabefeld nicht deaktiviert. Der Bootstrap-Verifizierungsprozess wurde in Kraft bleiben. Und da haben wir es. Lassen Sie es uns testen. Ja, es funktioniert endlich. Also, das ist alles von mir über Codierung. Wenn Sie daran interessiert sind, mehr Programmierung zu lernen, empfehle ich diese Website. uns betrifft, so werden wir mit dem letzten Kapitel fortfahren, in dem es um den Export und die Veröffentlichung geht. Wir sehen uns bald. Tschüss. 35. Hour 12 – Einstellungen exportieren und veröffentlichen: Gut gemacht. Wir haben es bis zum letzten Kapitel geschafft. In diesem Kapitel werden wir über das Veröffentlichen und Exportieren lernen. Wir werden mit einigen Veröffentlichungs- und Exporteinstellungen beginnen. Beginnen wir mit einem Blick auf einige der Einstellungen. Klicken Sie in der oberen Leiste auf das Settings Icon. Unter der Überschrift SEO sehen wir, dass wir den Titel und die Beschreibung festlegen können. Der Titel und die Beschreibung sind auf der Suchergebnisseite zu sehen. Daher ist es sehr wichtig, einen nützlichen Titel und eine Beschreibung zu schreiben , um Ihre Zielgruppe dazu zu bringen, auf Ihre Website zu klicken. Wir können eine Sitemap zu erstellen. Die Sitemap hilft der Suchmaschine, sich einen Überblick über die Struktur Ihrer Website zu verschaffen. Wir können fav Icons verwenden, um ein Icon für unsere Website zu erstellen. In der Vorschau sehen wir, wie das Symbol und der Titel zum Browser-Tab hinzugefügt wurden. im HTML-Code suchen, können wir dies wieder im Kopf des Dokuments finden. Und wir können auch Meta-Tags hinzufügen. Meta-Tags geben einfach Informationen über die Website und diese Informationen sind sehr nützlich für die Suchmaschinen. Wir sehen, dass wir bereits die Beschreibung unter unseren Meta-Tags haben. Lassen Sie uns einige Schlüsselwörter hinzufügen. Und ich werde auch ein Autoren-Tag hinzufügen. Wir können auch andere Arten von Meta-Tags hinzufügen, zum Beispiel die Sprache der Webseite und andere. Wenn Sie mehr über die verschiedenen Arten von Meta-Tags erfahren möchten, die existieren, empfehle ich diese Website. Wenn es um den generierten HTML-Code geht, können wir all diese Informationen im Kopf unseres HTML finden. Okay, als nächstes veröffentlichen wir die Website. 36. Hour 12 – Veröffentlichung: Okay, als nächstes veröffentlichen wir die Website. Wir werden es über Bootstrap Studio veröffentlichen. Das ist ziemlich gut, denn auf diese Weise müssen wir uns überhaupt nicht um Hosting kümmern. Um zu veröffentlichen, müssen wir zuerst einen Domain-Namen einrichten. Klicken Sie auf Veröffentlichen, klicken Sie auf die Schaltfläche, verwalten Website, und klicken Sie auf Website hinzufügen. Wir können entweder eine Bootstrap Studio Sub-Domain verwenden, oder wir können eine bestehende Domain verknüpfen. Wenn wir uns für eine Sub-Domain entscheiden, endet unsere Website mit dot bss dot design. Wir müssen auch wählen, wie lange die Domain beibehalten werden soll. Wenn wir es auf unbestimmte Zeit weitermachen wollen, können wir nie abholen. Aber vielleicht haben Sie bereits eine Domain, um die Website mit einer vorhandenen Domain hochzuladen, können Sie entweder zuerst alles exportieren, was wir im nächsten Video lernen werden. Oder Sie können Cloudflare verwenden, um einen neuen DNS-Eintrag zu erstellen. Klicken Sie auf die Schaltfläche „Überprüfen“ und folgen Sie den Anweisungen. Ausführlichere Anweisungen finden Sie auf dieser Website. Also, ob Sie Bootstrap Studio-Sub-Domain verwenden oder ob Sie eine bestehende Domain verwendet haben. Danach. Klicken Sie auf Schließen. Nachdem wir nun eine Domain im Dropdown-Menü eingerichtet haben, wählen Sie die Domain, die wir gerade erstellt haben, und klicken Sie auf „Veröffentlichen“. Da haben wir es. Unsere Website ist ab sofort online verfügbar. Ziemlich einfach, richtig? Manche Leute exportieren die Website jedoch lieber zuerst und laden sie dann auf einen Server hoch, wenn Sie dies vorziehen. Das ist, was wir im nächsten Video erfahren werden. Wir sehen uns dort. Tschüss für jetzt. 37. Stunde 12 – Exportieren: Exportieren Sie das Projekt in HTML, CSS und JavaScript in Bootstrap Studio ist eine einfache Angelegenheit. Klicken Sie einfach auf Exportieren. Falls Sie eine Sitemap hinzufügen möchten, stellen Sie sicher, dass Sie die URL Ihrer Website angeben. Wählen Sie das Zielverzeichnis aus, und klicken Sie auf die Schaltfläche Exportieren. Gehen wir zum Exportordner, um unsere Ergebnisse zu überprüfen. Wir können alle unsere HTML-Dateien sehen und wir können die HTML-Dateien testen, indem wir sie in einem Browser öffnen. Oder wir können den generierten HTML-Code überprüfen, indem wir ihn in einem einfachen Texteditor öffnen. Wir haben auch einen Asset-Ordner. Der Ordner „Assets“ enthält alle Ressourcen der Website, einschließlich Bilder, CSS-Dateien, JavaScript, et cetera. Aber jetzt möchten wir diese Website online stellen. Um das zu tun, brauchen wir einen Webhost. Ich selbst habe einen Webhost namens BAA Cloud. Andere beliebte Web-Hosts sind Host, Gator, Bluehost und viele mehr. Stellen Sie sicher, dass der Host Sie wählen enthält mindestens sehen Panel C para ist, was wir verwenden, um die exportierte Website auf den Server hochladen ein Cloud bietet FTP. Wir können FTP mit einem Client wie FileZilla verwenden , um Dateien einfach zwischen einem Server und Ihrem Computer zu teilen. Aber nicht alle Hosts bieten FTP an. In diesem Video werde ich zeigen, wie wir unsere Website mit C-Panels oder Datei-Manager hochladen können . Cpanel ist ein ziemlich einfacher Dateimanager. Es ist ein bisschen kompliziert, mehrere Ordnerstrukturen hochzuladen. Um dies zu vereinfachen, werde ich zuerst meine exportierte Website zippen. Und dann muss ich nur eine Datei hochladen. Und einmal hochgeladen, extrahieren Sie die Dateien hier drüben. Und jetzt ist unsere Website online. Das war's vorerst. Wir sehen uns im nächsten und letzten Video, mein Tschüss. 38. Schlussbemerkung und abschließende Gedanken: Gute Arbeit für alle. Wir haben es bis zum Ende dieses Kurses geschafft. Ich hoffe, es hat dir gefallen. Denken Sie daran, wenn Sie einen neuen Ping lernen, ist es normalerweise eine gute Idee, praktische Erfahrungen zu sammeln, um das Gelernte zu festigen. Erstellen Sie als Projekt Ihre eigene Website oder Webseite und veröffentlichen Sie sie. Alternativ können Sie auch eine eigene erweiterte Komponente erstellen. Wenn Sie fertig sind, posten Sie einen Link, um ihn zu zeigen. Auf diese Weise kann ich Ihnen Feedback geben und Sie können Ihre Kreation mit anderen teilen. In diesem Kurs haben wir einiges gelernt. Wir haben fast alles gelernt, was Bootstrap Studio zu bieten hat. Aber denken Sie daran, es gibt immer noch eine Menge nützlicher und lustiger Dinge, die Sie da draußen lernen können. Da lebenslange Lernende wahrscheinlich nie die nützlichen und interessanten Sachen für LA ausgehen werden. Das ist jetzt alles von mir. Viel Glück und gutes Lernen. Tschüss.