Introdução ao CSS Tailwind

1. Willkommen beim Kurs!: Wenn es darum geht, Websites zu erstellen, fallen die meisten von uns in zwei Gruppen, wir sind entweder ein Designer oder ein Entwickler. Persönlich bin ich nicht der beste Designer da draußen , aber ich brauche immer noch meine Websites, um gut auszusehen, und hier kommt Tailwind ins Spiel. Es sind auch andere Frameworks und Bibliotheken verfügbar aber viele von ihnen erzwingen ihre eigene strenge Art, Dinge zu tun. Wir können unser HTML schreiben, wie wir es normalerweise tun würden, und dann die sorgfältig entworfenen Klassennamen verwenden. Alle Utility-Klassen, um Ihrem gesamten Projekt ein sauberes und professionelles Aussehen zu bieten , während Sie in unserem HTML bleiben. Dies ist besonders nützlich, wenn ein Projekt wächst, anstatt konsequent an neue Klassennamen und ständig wachsende Stylesheets zu denken. Tailwind bietet ein konsistentes Designsystem, das Ihr gesamtes Team nutzen kann. Kauf einfacher Dienstprogramme für die Steuerung fast alles wie Abstände, Farben, Typografie, responsive Design und Layout. Als jemand, der zugegebenermaßen nicht der beste Designer da draußen ist, hat Tailwind wirklich dazu beigetragen, meiner Website eine professionelle Basis zu geben, auf der ich aufbauen kann. Es ist momentan mein Ziel, wenn ich ein neues Projekt beginne. Lassen Sie mich mich auf das konzentrieren, was ich am besten kann. Wie funktioniert es? Sobald Tailwind in Ihrem Projekt enthalten ist und wir erläutern, wie Sie dies in der Klasse tun, ist es einfach, es in Ihrem Projekt zu verwenden. Wir beginnen mit dem Hinzufügen unseres HTML genau wie wir es normalerweise tun würden, fügen Sie den Inhalt auf den Bildschirm. Dieses Beispiel zeigt einen Abschnitt, der Text enthält ohne dass in der unteren rechten Ecke ein Styling angezeigt wird. Das sieht ziemlich langweilig auf dem Bildschirm aus. Bleiben Sie hier in unserem HTML, Tailwind bietet uns diese Utility-Klassen, die wir anwenden können. Beginnend mit diesem Abschnitt Wrapper habe ich drei dieser Klassen hinzugefügt , die für jede ziemlich beschreibend sind. Jede Klasse macht eine einfache Sache, und die erste ist bg-gray-800. Dadurch wird der Hintergrund grau, und dann werden Sie 800 Schatten. Wir werden uns auch die Farbpaletten später im Kurs ansehen. P-six ist ein Musterwert von sechs und wir können diese Zahl mit mehr oder weniger Platz in erhöhen oder verringern. Textcenter wird verwendet, um den darin enthaltenen Text zu zentrieren. Natürlich ist der Text im Inneren jetzt schwer zu lesen, so dass wir mit dem Styling der p-Elemente fortfahren. Wieder fügen wir die Klassenattribute hinzu, die Elemente sind, und genau wie der äußere Wrapper verwenden wir wieder die Farbe von Grau. Aber dieses Mal wenden wir den helleren Farbton von 200 an. Text-LG ist für größeren Text und Schriftmedium ist das Schriftgewicht, das wir anwenden werden. Das Ergebnis ist ein sauber aussehender Abschnitt, ohne sogar einen CSS-Code zu schreiben. Außerdem möchten wir nicht, dass jede Seite, die wir erstellen, gleich aussieht, und wir können immer noch unsere eigenen Stile schreiben, wenn wir wollen. Tailwind hat viele Anpassungsoptionen zur Verfügung, um unsere Website einzigartiger zu machen. In dieser Klasse erfahren Sie mehr über diese Dienstprogramme und so viel mehr, dass Tailwind zu bieten hat. Während Sie ein Admin-Projekt im Dashboard-Stil erstellen, zeigen Sie eine Liste der Produkte an, die in unserem Shop verfügbar sind. Wie wir hier sehen, wird es reaktionsschnell sein und es wird sich um das große und das kleine Bildschirmlayout kümmern . Diese Klasse ist für Anfänger fokussiert, obwohl Sie mit HTML und CSS vertraut sein sollten , bevor Sie Tailwind lernen. Rückenwind ist eine große Fähigkeit zu lernen, und ich freue mich darauf, euch während dieser Klasse alles darüber beizubringen. 2. Voraussetzungen und erforderliche Tools: Tailwind ist ein CSS-Framework, und daher ist es wichtig, dass Sie zumindest die Grundlagen von HTML und CSS verstehen , bevor Sie diesen Kurs besuchen. Wenn Sie HTML und CSS in der Vergangenheit verwendet haben, entweder während eines bestehenden Kurses, eines meiner Kurse oder eines einfachen Projekts erstellt haben, sollten Sie gut gehen. Es gibt sehr wenig, was Sie brauchen, um diese Klasse zu nehmen. Wenn Sie irgendeine Art von Website in der Vergangenheit gebaut haben, haben Sie wahrscheinlich bereits diese Fähigkeiten, die Sie benötigen. Ein Texteditor ist wichtig, und ich werde Visual Studio Code verwenden. Sie können dies herunterladen, oder Sie können jede andere verwenden, die Sie bevorzugen. Wenn Sie herunterladen müssen, ist die Website auf der rechten Seite vorbei, die code.visualstudio.com ist. Es ist kostenlos auf Mac, Windows und Linux verfügbar. Wenn Sie noch keine haben, gehen Sie weiter und laden Sie diese herunter. Ein Terminal ist ebenfalls erforderlich. Mach dir keine Sorgen, wenn du noch nie einen benutzt hast. Wir brauchen nur ein paar einfache Befehle. Visual Studio Code kommt mit einem bereits vorinstallierten Terminal, oder wenn Sie bereits ein eigenständiges Terminal haben, das Sie lieber verwenden möchten, ist dies auch in Ordnung. Es gibt keine zusätzlichen Tools, die wir abonnieren oder kaufen müssen. Alle anderen Tools oder Software, die wir benötigen, werden wir herunterladen, während wir durch den Kurs gehen. 3. Teile deine Arbeit auf Skillshare!: Wenn Sie an einem Kurs teilnehmen, ist es wirklich wichtig, dass Sie sich nicht angewöhnen diesen Kurs zu verfolgen , nur um eine weitere Vorlesung abzuhaken. Nehmen Sie sich die Zeit, jede Lektion zu bearbeiten, den von Ihnen geschriebenen Code zu überprüfen und darüber nachzudenken, wie Sie diese Lösungen selbst angehen könnten . Vor diesem Hintergrund ist dieser Kurs projektbezogen und bietet Ihnen die Möglichkeit, wirklich etwas Persönliches und Einzigartiges zu schaffen. Sie müssen sich nicht zu sehr verirren und vom Unterricht ablenken . Sie können sogar einen Schritt zurücktreten, nachdem Sie den Kurs beendet haben, und danach zurückkommen und einige Projektänderungen vornehmen. Das gibt dir wirklich eine gute Gelegenheit, das, was du im Unterricht gelernt hast, praktisch anzuwenden. Denke auch daran, dein Projekt hier auf Skillshare zu teilen und nur ich werde es mir ansehen, aber es wird auch Kommilitonen inspirieren. Weitere Informationen zum Klassenprojekt findest du auf der Registerkarte Projekt und Ressourcen, wo du nicht nur dein Projekt hochladen kannst, sondern auch andere Klassenprojekte sehen kannst. In diesem Sinne freue ich mich darauf zu sehen, was Sie hier auf Skillshare erstellen und hochladen. 4. Wireframe-Übersicht: Um Ihnen zu helfen, besser zu verstehen, was wir durch diese Klasse erstellen werden, habe ich eine Drahtmodell-Skizze erstellt, die Sie herunterladen können. Wenn Sie möchten, kann es nützlich sein, herunterzuladen und neben Ihnen zu halten , als Referenz darauf, was wir während dieser Klasse bauen werden. Wireframe zeigt das grundlegende Gesamtbild, wie das gesamte Projekt angelegt werden soll. Auf der linken Seite haben wir die volle Größe, größere Bildschirmansicht, die eine Seitenleiste auf der linken Seite hat, und das Produktdetail neben auf der rechten Seite. Dann haben wir auf der rechten Seite dieses Bildes eine kleine Bildschirmansicht, die den Inhalt gestapelt hat, und auch für kleinere Bildschirme optimiert. Auch Rückenwind wird für dieses ansprechende Layout verwendet werden, zusammen mit dem allgemeinen Styling. Wenn Sie dies als Referenz verwenden möchten, können Sie es jetzt herunterladen. Außerdem habe ich die gleichen Bilder bereitgestellt, die ich verwendet habe, und diese können mit dieser Klasse heruntergeladen werden. Sie können diese nutzen oder wenn Sie es vorziehen, können Sie einige Ihrer eigenen verwenden. Erstellen Sie einen anderen Stil des Projekts. Wenn Sie möchten, gehen Sie weiter und laden Sie diese Bilder und auch das Drahtmodell herunter. Als nächstes werden wir einen Blick darauf werfen, wie Sie mit diesem Projekt beginnen und wie Sie auch Tail Up einrichten können. 5. Tailwind einrichten: Tailwind bietet uns mehrere Setup-Optionen, je nachdem, was wir für den Aufbau unserer Website verwenden und welche Funktionen wir unterstützen möchten. In diesem Video werden wir einen Blick auf einige der verschiedenen Setup-Optionen. Aber zuerst müssen wir ein neues Projekt erstellen. Das Projekt wird einen Projektordner benötigen und ich werde meinen auf dem Desktop erstellen. Klicken Sie mit der rechten Maustaste auf „Neuer Ordner“ und Sie können diesen überall auf Ihrem Computer platzieren , den Sie bevorzugen. Meiner würde „Healthy Juice Bar“ genannt werden. Auch hier ist dies optional, Sie können das Thema und den Stil Ihres Projekts ändern, aber meins wird auf einer Saftbar basieren, so dass dann verschiedene Arten von Smoothies. Auch aus dem letzten Video sollten Sie die Bilder und den Wireframe heruntergeladen haben, Sie möchten diese verwenden. Ich werde diese Bilder in das Projekt für die spätere Verwendung ziehen können. Wenn Sie Ihre eigenen verwenden möchten, erstellen Sie einen Image-Ordner, und dann können Sie die verschiedenen Bilder innerhalb von hier hinzufügen. Das einzige, das Sie nicht haben werden, ist dieses Bild von mir, aber Sie können ein Bild von sich selbst herunterladen, um in diesem Projekt zu verwenden. Öffnen Sie als Nächstes Ihren Texteditor oder Visual Studio Code. Ziehen Sie den Mauszeiger über den Projektordner, um ihn zu öffnen. Dann, wie immer erstellen wir eine neue Website, müssen wir eine neue Datei erstellen, die unsere index.html ist. Sie können die Tastenkombinationen Command oder Control N verwenden , um eine neue Seite zu erstellen, oder wenn Sie möchten, können Sie den Mauszeiger über den Titel und Seitenleiste bewegen und dieses Symbol verwenden, um eine neue Seite zu erstellen. Geben Sie dies ein Speichern, und das ist die index.html. Kurz bevor wir anfangen, Code zu schreiben, wenn wir einen Blick auf den Wireframe werfen, was wir tun müssen, ist zuerst zu entscheiden, was wir zuerst erstellen werden. Wir können durch diese Bilder sehen wir haben zwei verschiedene Abschnitte. Wir haben diesen Sidebar-Bereich, und wir haben auch diesen Hauptinhaltsbereich auf der rechten Seite. Das gleiche mit dem kleineren Bildschirm haben wir die Sidebar, die oben ist und dann den Hauptinhaltsbereich direkt darunter. Wir haben zwei verschiedene Abschnitte, die wir erstellen müssen. Zurück zu unserer Indexseite, wenn Sie Visual Studio Code verwenden, können Sie den integrierten Emmet-Befehl verwenden, der eine Verknüpfung ist , um unsere HTML Boilerplate zu erstellen. Dies ist HTML:5, drücken Sie „Enter“, dies wird uns die grundlegende Struktur geben, die wir brauchen. Der Dokumenttitel lautet Healthy Juice Bar. Wie wir zuvor innerhalb des Körperabschnitts gesehen hatten, haben wir unsere beiden Hauptabschnitte, und der erste ist die beiseite Elemente. Daneben befinden sich auch der Hauptinhaltsbereich. Beginnen wir mit der Arbeit innerhalb des beiseite Abschnitts, wir werden ein wenig Inhalt hinzufügen, mit dem wir arbeiten können. Wie Sie in der Seitenleiste auf dem Drahtmodell sehen können, haben wir ein Logo oder ein Bild ganz oben in der Seitenleiste und dann den Titel direkt darunter. Dies ist für beide Layouts gleich. Die beiseite, erstellen Sie die Bildelemente, und innerhalb des mitgelieferten Images Ordner, wir haben ein Bild, das die logo.png ist, der alte Text. Dann direkt unter unserem Bild, wie wir gerade gesehen haben, erstellen wir eine Überschrift der Ebene eins für den beiseite Titel. Dies ist die Healthy Juice Bar, oder der Name Ihrer Wahl. Lassen Sie uns dies im Browser öffnen. Speichern Sie zuerst diese Datei, und dann kopiere ich den Pfad dazu, öffne Google Chrome und füge diese dann hinein. Ein ziemlich Standard-Look wie erwartet, wir haben das Bild und unseren Titel. Nun, was wir tun werden, ist, zur Tailwind Dokumentation zu gehen und zu sehen, wie wir das in unserem Projekt einrichten können. Für die Tailwind Installation müssen wir zu „TailwindCSS.com“ gehen, und von der Homepage haben wir hier einen Link zur Dokumentation. Aus der Dokumentation ist die Seite, die wir brauchen, dieser Installationslink nur hier. Diese Installationsseite enthält einige verschiedene Anleitungen, wie wir Tailwind mit verschiedenen Frameworks und Bibliotheken einrichten können. Zum Beispiel, wenn Sie in einem Vue oder React oder Gatsby verwenden, haben Sie einige spezielle Installationsanleitungen für diese. Wir werden es einfach halten und einfach Tailwind in ein normales HTML-Projekt einbinden . Beginnend mit der einfachsten Möglichkeit, einen CDN-Link zu verwenden. Auf der rechten Seite geht es runter zum Link, der Tailwind via CDN benutzt. Dies wird uns einen Stylesheet-Link geben, den wir verwenden können , um direkt in unser Projekt zu fallen. CDN ist ein Content-Delivery Network und es ist eine Möglichkeit, unseren Inhalt, in unserem Fall die Tailwind CSS-Datei,weltweit in mehreren Servern oder Rechenzentren verfügbar zu haben die Tailwind CSS-Datei, . Wenn wir nur diesen Link kopieren und diesen in eine neue Registerkarte einfügen, ist dies die CSS-Datei, mit der wir verknüpfen. Natürlich sieht es im Moment ein bisschen Chaos aus, weil es nicht formatiert ist. Wir werden uns das in Kürze im Texteditor besser ansehen. Aber das Wichtigste, was man hier beachten muss, ist, dass wir eine Verknüpfung zu einer Tailwind CSS-Datei herstellen, die auf einem externen Server gehostet wird, anstatt diese Datei herunterzuladen und in unser Projekt aufzunehmen. Für jetzt lassen Sie uns diesen vollständigen Link aus der Dokumentation kopieren und dann können wir diesen innerhalb des Kopfabschnitts unserer Index-Seite einfügen. Geben Sie dem einen Sparen. Wenn wir nun zu unserem Projekt gehen, aktualisieren Sie den Browser, sofort sehen wir eine leichte Änderung unserer Inhalte. Dies ist eine gute Sache, weil es jetzt bedeutet, dass die Tailwind CSS-Datei jetzt wirksam ist. Der Grund, warum wir eine Änderung zunächst sehen, ist aufgrund einer Reihe von Basisstilen, die Tailwind anwenden wird. Diese Basisstile sind nicht wirklich dazu gedacht, Stil in unserem Projekt hinzuzufügen, sondern sie sind eine Reihe von Stilen, um unsere Website konsistenter über verschiedene Browser zu rendern. Wenn Sie in der Vergangenheit eine normalisierte CSS-Datei verwendet haben, basiert ein Großteil davon darauf. Was ist mit Tailwind Utility-Klassen? Nun, diese sind auch mit dem CDN-Link verfügbar. Wir werden nun einen Blick auf einige einfache Beispiele in hier werfen. Zunächst werden wir an dem beiseite Abschnitt arbeiten und alles, was wir tun müssen, ist eine reguläre Klasse Attribute hinzuzufügen. Dann fügen Sie unsere erste Dienstprogrammklasse hinzu, die p-4 ist. Wenn wir nun den Browser aktualisieren, können wir einen Füllwert von vier sehen, der auf diese Elemente angewendet wird. Einfach genug, das nächste, was man sich ansehen sollte, ist, einen Hintergrund hinzuzufügen, und wir können dies mit bg tun, gefolgt von der Farbe, die ich als grau verwenden werde. Dann ist der Grauton, der 800 ist. Wir werden einen tieferen Blick in alle Schattierungen und Farben in einem zukünftigen Video werfen, aber vorerst sollte dies auf unseren Seitenbereich anwenden, da dies dunkelgraue Hintergrundfarbe ist. Das Bild, bewegen Sie sich nach unten zu den Bildelementen und fügen Sie unsere Klasse in. Das Bild benötigt eine Höhe und eine Breite. Mit Tailwind ist dies relativ einfach. Verwenden Sie h für Höhe, den Wert von 32. Wir werden sehr bald einen Blick darauf werfen, was all diese Werte bedeuten. Die Breite, können wir auch mit w tun und das Quadrat machen. Wir behalten das als den gleichen Wert. Aktualisieren. Die Größe ist nun wirksam. Da wir diese dunkle graue Hintergrundfarbe haben, müssen wir auch einige Klassen zu unserem H1 hinzufügen, um dies auf diesem dunklen Hintergrund hervorzuheben. Die weiße Farbe, können wir Text, Bindestrich, weiß hinzufügen. Aktualisieren, und dies tritt sofort in Kraft. Wir können dies auch in Großbuchstaben mit diesem Dienstprogramm umwandeln. Wir werden Dienstprogrammklassen für fast jede Art von CSS-Eigenschaft zur Verfügung haben, die Sie hinzufügen möchten. Wir können die Schriftart einstellen und in diesem Fall gehen wir für unser Schriftmedium. Sparen. Sie sollten etwas mutiger sein, als es zuvor war. Wir haben viele verschiedene Textgrößen und Optionen. Für diese Überschrift werde ich für Text gehen, um Excel zu erhalten. letzte für die Level-1-Überschrift wird weiter verfolgt. Dies wird etwas zusätzlichen Platz zwischen unseren Buchstaben hinzufügen. Wir können bereits beginnen zu sehen, indem wir einige einfache Dienstprogrammklassennamen hinzufügen, wir können wirklich einen großen Unterschied für das Styling unserer Website machen. Der CDN-Link, den wir oben eingerichtet haben, eignet sich hervorragend zum Erlernen von Rückenwind, und es wird für die Mehrheit dieses Kurses und auch für einige einfachere Projekte gut sein . Es gibt auch einige Nachteile der Verwendung. Wir können einige davon sehen, wenn wir zur Tailwind Dokumentation zurückkehren Wir können hier einige der Nachteile sehen, die wir haben, wenn wir den CDN Link verwenden, wie wir keine Direktiven wie apply verwenden können, die wir einen Blick auf später im Kurs. Außerdem können wir etwas namens Baumschütteln nicht tun, was eine Möglichkeit ist, ungenutzte Stile aus allen endgültigen Builds zu entfernen, was bedeutet, dass die Dateigröße größer ist. Um dabei zu helfen, installieren wir Rückenwind über die CLI. Klicken Sie auf den Link Tailwind CLI auf der rechten Seite. Um dies zu tun, müssen wir node.js installieren, und wir müssen auch ein paar Terminal-Befehle verwenden. Dies kann die Leute oft abschrecken, aber es sind wirklich nur ein paar einfache Schritte, durch die ich Sie führen werde. Beginnen wir mit der Installation von node.js, die von nodejs.org verfügbar ist. Ich habe bereits node.js Setup auf meinem Computer, aber wenn Sie dies nicht bereits installiert haben, gehen Sie weiter und laden Sie jetzt die neueste Version herunter und kommen Sie zurück, sobald dies geschehen ist. Sobald dies erledigt ist, können Sie entweder Ihr eigenes Terminal öffnen , das Sie verwenden möchten, oder in meinem Fall werde ich es einfach halten. in Visual Studio Code Wenn wirin Visual Studio Codezur Terminal-Option gehen, öffnen Sie von hier aus ein neues Terminal. Sobald Sie das Terminal innerhalb von Visual Studio-Code öffnen, sollte es automatisch innerhalb Ihres Projektverzeichnisses geöffnet werden. Schritt 1, müssen Sie zuerst sicherstellen, dass wir node.js erfolgreich installiert haben. Der Weg, dies innerhalb des Terminals zu tun, ist schreiben Sie den Befehl, der node-v ist. Wenn dies eine Versionsnummer zurückgibt, bedeutet dies, dass wir node.js erfolgreich installiert haben. Das nächste, was wir tun müssen, ist die Tailwind CLI auszuführen. dies zu tun, gehen wir zurück zu den Dokumenten. Wir können hier sehen, wir haben einen Befehl, und müssen dies kopieren und diese innerhalb des Terminals hinzufügen. Dieses MPX-Tool ist verfügbar, da wir gerade node.js heruntergeladen haben, die auch mit MPM auf diesem MPX-Tool gebündelt ist. Lasst uns diesen vollen Befehl schnappen. Kopieren Sie das, und fügen Sie es in das Terminal ein. Drücken Sie „Enter“. Wir können zustimmen, im Tailwind Paket zu installieren. Gib dem einfach ein paar Augenblicke, um die Dinge einzurichten. Sobald dies beendet ist, können wir in die Sidebar gehen. Wir können sehen, wir haben jetzt diese tailwind.css Datei. Dies ist die gleiche CSS-Datei, die wir früher verwendet haben. Nun, ich werde das mit dem CDN verknüpfen. Wir können es jetzt klarer sehen, da dies innerhalb des Editors formatiert ist. Das erste, was wir ganz oben sehen, ist die Reihe von Basisstilen, die verwendet wird, um unsere Website konsistenter über verschiedene Browser zu rendern. Es tut Dinge wie das Zurücksetzen von Füll- und Randwerten, es wird Standardschriftfamilien einrichten und unseren HTML-Elementen im Allgemeinen ein konsistentes Aussehen geben. Aber was ist mit den Utility-Klassen, die wir gerade verwendet haben? Nun, lassen Sie uns eine Suche machen. Einer der, die wir zuvor verwendet haben, ist diese Hintergrundfarbe von Grau. Lassen Sie uns zu unserer CSS-Datei gehen. Verwenden Sie Befehl oder Steuerelement F, um den Finder zu verwenden. Suchen wir nach unserem LBG grau 800. Weiter unten die CSS-Datei oder 15.000 Zeilen hinein, können wir sehen, dass wir einen Verweis auf diese Klasse haben. Dies ist die Einstellung unserer grauen Hintergrundfarbe. Gerade oben haben wir den Farbton von 700, die eine leichtere Version ist. Wir können sehen, wenn wir ein wenig weiter nach oben scrollen, haben wir alle diese Optionen, die vom Grauton 50 bis zu 900, das ist die dunkelste. Wir haben dann die roten Versionen mit den gleichen Farbwerten. Sie werden auch viele andere Farben zu finden. Wenn ein anderes, das wir bereits verwendet haben, die Höhenklasse ist, suchen wir nach h-32 und werfen einen Blick auf das allererste Vorkommen. Für jeden dieser Werte, z. B. 32 oder 28, entsprechen diese alle einem einzelnen Höhenwert, der in Gramm ist. In unserem Fall wird die h-32, die wir auf unser Bild angewendet haben, acht Höhenränder anwenden. Wir können diese Werte erhöhen oder verringern, um uns einen anderen RAM-Wert zu geben. Schauen wir uns noch einen an. Wir hatten auch vier Medium nur hören. Wenn wir suchen und wir können sehen, die Schriftgewicht von 500 angewendet wurde. Wir haben auch extra Licht, wir haben Licht, normal, halb fett, fett und auch extra fett. Jetzt haben wir unsere eigene Kopie unserer Tailwind-Datei im Projekt. Was wir tun müssen, ist, diesen CDN-Link zu ersetzen. Entfernen Sie diese und da unsere Tailwind-Datei direkt neben unserem Index steht, können wir mit dem Namen tailwind.css darauf verlinken. Sagen Sie das. Aktualisieren Sie den Browser. Alle unsere gleichen Rückenwind Stile werden immer noch angewendet. Aber dieses Mal werden wir den CDN-Link durch unsere eigene lokale Version ersetzen. 6. Live Server-Setup: Ständig neue Dinge zu unserem Projekt hinzufügen, die Datei speichern, den Browser gehen und dann aktualisieren, um Updates zu sehen, kann im Laufe der Zeit wirklich zeitaufwendig werden. Deshalb wollte ich Ihnen schnell durch Plugin zeigen, das von Visual Studio Code verfügbar ist , mit dem wir uns etwas Zeit sparen können. Dieses Plugin ermöglicht es uns, Änderungen an unserem Editor vorzunehmen, drücken Sie „Speichern“ und dann wird ein Live-Server ständig unser Projekt innerhalb des Browsers auf dem neuesten Stand halten. Installation dieser Option ist optional und Sie müssen dies nicht einrichten, wenn Sie dies nicht möchten. Stattdessen können Sie den Browser nach Änderungen des Editors einfach weiter aktualisieren. Wenn Sie dies installieren möchten, um ein wenig Zeit zu sparen, was Sie tun können, ist, in den Erweiterungs-Button einfach hier zu gehen. Ich habe dieses Plug-in bereits eingerichtet, das Sie hier sehen können. Wenn Sie dies nicht tun, führen Sie eine Suche oben nach Live-Server, und klicken Sie dann auf diese Option, nur hier. Da meins bereits eingerichtet und aktiviert ist, können Sie oben die Schaltfläche Deaktivieren sehen. Dies ist der erste Besuch dieses Plugins. Sie sollten die Schaltfläche „Aktivieren“ nur hier sehen. Führen Sie dann diese Erweiterung aus und richten Sie unser Projekt mit dem Live-Server ein. Alles, was wir tun müssen, ist auf diesen „Go Live“ -Button am unteren Rand zu klicken. Dies sollte diese dann im Standardbrowser öffnen und dann alle Änderungen an unserer Website verfolgen. Zum Beispiel, wenn wir fortfahren und unseren Hintergrund in rot ändern, wird er gespeichert und dies wird automatisch im Browser aktualisiert, ohne dass Sie aktualisieren müssen. Lassen Sie uns einfach diese graue Farbe aus dem Projekt wiederherstellen. Dies ist Ihr Zustandstool, das ich gerne benutze, und ich hoffe, dass Sie es auch nützlich finden. 7. Design fürs Handy und Farbpalette: Genau wie bei vielen der modernen Frameworks hat Tailwind auch das Konzept des mobilen First Designs. Dies bedeutet, dass wir beginnen, mit der Gestaltung für die kleine Bildschirmansicht beginnen, und dann, wenn wir mehr Platz auf dem Bildschirm zur Verfügung, können wir einen der vorhandenen Stile hinzufügen oder überschreiben. Dies kann sinnvoll sein, weil ein Großteil des Kursstylings für alle Bildschirmgrößen, wie die Farben und Schriftarten, verbleibt und wir können nur einige Layout- oder Größenänderungen vornehmen, wenn wir mehr Platz auf dem Bildschirm zur Verfügung haben. Zurück zum Drahtmodell. Wenn wir uns den kleinen Bildschirm auf der rechten Seite ansehen, werden wir damit beginnen. Das Layout dafür braucht nicht wirklich viel Arbeit, da viele Website-Elemente dazu neigen, auf diese Weise natürlich zu fließen. Wir haben bereits ein Logo an der Spitze und auch den Titel. Als nächstes gehen wir nach unten zum Menü. Zurück zum Projekt. Da wir es mit der kleinen Bildschirmansicht zu tun haben, können wir den Browser verkleinern nur die minimale Breite aufnehmen. Was wir tun werden, ist zum beiseite Abschnitt gehen, knapp unter der Rubrik Level 1. Hier können wir unsere Links innerhalb der ungeordneten Liste erstellen. Aber jetzt werden wir unsere Listenelemente erstellen. Wir haben sechs verschiedene Links und diese werden für den Moment einfach unstylt sein. Die erste, wieder ohne Utility-Klassen, die in der Verbindung übergeben werden. Moment haben wir keine zusätzlichen Seiten, um diese beiden zu verknüpfen, so dass eine leere href in Ordnung ist. Der erste Link ist für Produkte. Der zweite Listeneintrag, dieser wird den Inhalt der Bestellungen haben. Nummer 3, dieser ist für das Inventar, und als nächstes haben wir die Kunden. Nummer 5 ist für die Analyse. Der letzte wird für Coupons sein. Speichern Sie diese und Sie können sogar aktualisieren. Ich werde den Live-Server starten. Wir können oben sehen, ich habe sechs Links. Wie bereits erwähnt, wenn wir HTML alleine verwenden, kann es im Allgemeinen für die kleine Bildschirmansicht in Bezug auf das Layout ziemlich gut sein, würde nur etwas Styling hinzufügen müssen, um es gut aussehen zu lassen. Um es gut aussehen zu lassen, brauchen wir einige Tailwind Utilities. Um eine Liste aller Utilities zu sehen, auf die wir Zugriff haben, gehen Sie auf die Tailwind Homepage und klicken Sie dann auf den Dokumentationslink. Die Tailwind Docs ist eine großartige Referenz für alle Utility-Klassen. Ich benutze Tailwind seit einiger Zeit und benutze es immer noch als Referenz. Auf der linken Seite haben wir eine Liste aller Utility-Abschnitte, die wir zur Verfügung haben , z. B. wenn Sie die Flexbox verwenden möchten, die Sie bald sein werden, können wir Abstände Dienstprogramme, Dimensionierung Dienstprogramme, verschiedene Typografie wie die Schriftart Größen, verschiedene Farben, die Schriftfamilie, und auch viele verschiedene Effekte und Ränder, die wir hinzufügen können. Natürlich gibt es hier viele verschiedene Abschnitte, aber der, auf den wir uns konzentrieren werden, ist die Farbpalette. Lassen Sie uns oben nach der Farbpalette suchen. Das ist die, die wir gerade hier brauchen. Dann scrollen Sie nach unten, können wir eine Liste aller Farben sehen, die wir zur Verfügung haben. Einige davon haben wir bereits in unserem Projekt verwendet, wie die graue Farbe, und wir können sehen, dass diese einen Farbton von 50 bis 900 haben, genau wie wir es innerhalb des Rückenwind CSS gesehen haben. Sie können alle verschiedenen Farben sehen, die wir zur Verfügung haben, um zu beginnen. Diese passen zu vielen verschiedenen Anwendungsfällen. Alle diese Farben, die gleich sind, können auf viele verschiedene Dinge angewendet werden. Zuerst wählen wir eine Farbe wie Rot und den Farbton von 400. Dann auf der rechten Seite haben wir einige Anwendungen für diese Farbe. Wir haben das BG-Präfix, dem wir die Hintergrundfarbe eingestellt haben. Wir haben auch die Textpräfixe an der Textfarbe, und auch wenn wir einen Rahmen wollen, können wir auch eine Farbe dafür verwenden. Dies ist eine nette Art, die Dinge in unseren Projekten konsistent zu halten. Wir haben immer Zugriff auf alle diese Farben und Schattierungen, und wir können dann einfach ein anderes Präfix verwenden, um es auf verschiedene Abschnitte anzuwenden. Zurück zum Projekt, lassen Sie uns einige Farben auf unsere Links anwenden und dies verkleinern. Zuerst legen wir die Textfarbe für jeden dieser Links fest. Wir müssen in das a-Element am Klassenattribut springen. Der erste, wir beginnen mit dem Präfix des Textes, der Farbe, alles über den Farbton. Es gibt unseren ersten, und oft wollen wir mit dieser Art von Links einen anderen Stil oder einen anderen Effekt erstellen , wenn der Benutzer den Mauszeiger über den Text bewegt. Dafür werde ich einen Hover-Effekt anwenden. Die Möglichkeit, dies zu tun, besteht darin, eine dieser Dienstprogrammklassen anzuwenden, genau wie wir es normalerweise tun würden, aber wir fügen das Hover-Präfix gefolgt vom Doppelpunkt hinzu. Wenn wir zum Beispiel den Hintergrund ändern wollten, würden wir BG verwenden und die Farbe festlegen, die wir anwenden möchten. Ich werde für die Klasse 700 gehen, sparen. Wenn wir nun den Mauszeiger über die Produkte bewegen, können wir nun sehen, wie sich die Hintergrundfarbe ändert. Wir könnten auch so viele Hover-Status hinzufügen, wie wir möchten. Da wir die Hintergrundfarbe geändert haben, werde ich auch die Textfarbe ändern. Platzieren Sie erneut in den Hover-Zustand gefolgt vom Doppelpunkt, ändern Sie ihn in den Text weiß. Wir können dies im Browser ausprobieren. Sobald Sie den Mauszeiger darüber bewegen, können wir eine subtile Änderung der Textfarbe sehen. Zufrieden mit diesem für jetzt, so können wir dies auf alle unsere Links anwenden. Lassen Sie uns einfach diesen Klassenabschnitt kopieren. Nun, zuerst Link und platzieren Sie dies in all den Rest dieser Links. Stellen Sie sicher, dass das in allen sechs ist. Wir können sehen, dies gilt jetzt innerhalb des Browsers, sowie dieses Hover-Präfix. Genau wie bei regulärem CSS können wir auch andere Zustände ansprechen. Anstatt den Mauszeiger zu bewegen, könnten wir zu einem anderen Zustand wie aktiv oder fokussiert wechseln. Wir machen das genau auf die gleiche Weise. Kurz bevor wir zum nächsten Video gehen, um einige Abstände zu betrachten, gibt es ein paar Elemente, die wir zuerst zu diesem Abschnitt hinzufügen müssen. Innerhalb des Drahtmodells. Wenn Sie sich die Links ganz oben ansehen, die Sie gerade hinzugefügt haben, neben dem Link Bestellungen sehen wir eine Nummer 5. Dies zeigt an, wie viele Bestellungen wir derzeit zur Verfügung haben. Es hat auch diesen Kreishintergrund. Dann nach dem letzten Link können wir auch dieses Zahnradsymbol sehen, das ein Link zu den Einstellungen ist. Beginnen wir mit dem Zahlen-Symbol, das direkt nach unserem Bestellungslink geht. Platzieren Sie diese in und noch innerhalb unseres Listenelements, und platzieren Sie dann den Inhalt als Nummer 5. Wir können das auf dem Bildschirm sehen, aber das ist ein bisschen zu dunkel, also müssen wir einige Utility-Klassen hinzufügen. Für den Text werde ich eine grüne Farbe mit dem Farbton von 900 anwenden, und auch eine grüne Hintergrundfarbe zu so bg grün, und diesmal den Farbton 100. Die Schriftgröße können wir mit Bindestrich sm anwenden, um ihm die kleine Größe zu geben. Dann, um die Hintergrundfarbe von Grün zu polstern. Fügen wir einen Füllwert hinzu , der gleich 1,5 sein wird. Wir fangen an, irgendwo im Browser zu kommen. Wenn wir uns das ansehen, haben wir eine quadratische Farbe. Außerdem müssen wir die Kanten mit den Dienstprogrammklassen „Tailwind“ abrunden. Wir haben vor allem die abgerundete Klasse, und dies ergibt eine kleine abgerundete Kante. Wir haben auch verschiedene abgerundete Größen. Zum Beispiel können wir eine große Rundung anwenden und dies ist ein bisschen größer, aber wir können auch diese komplett abgerundet machen, mit gerundeten voll. Das ist in Ordnung. Das letzte, was zu tun ist, ist, das Zahnradsymbol unten unten zu platzieren und dies ist direkt unter unserem Coupons Link. Sie außerdem sicher, dass dies außerhalb der ungeordneten Liste liegt. Auch dies kann innerhalb einer Spanne Elemente platziert werden. Für das Zahnradsymbol wird dies eine HTML-Entität sein. Eine HTML-Entität ist eine Möglichkeit, ein Symbol in unsere Projekte aufzunehmen, und wir können diese mit bestimmten Codes anwenden. Wenn Sie sich über die Verwendung von HTML-Entitäten nicht sicher sind, wird eine schnelle Google-Suche Ihnen viele Websites geben, auf denen Sie die verfügbaren Codes herausfinden können, die Sie verwenden können. Erstens ist der Code, den wir anwenden müssen, das kaufmännische Und-Zeichen, der Hash, der Wert von 9881, gefolgt von dem Semikolon. Wenn Sie jetzt unten ein Zahnradsymbol sehen und dies nur ein wenig größer machen, können wir eine Tailwind Dienstprogramm Klasse von Text verwenden und die Größe dieses Textes ist 2xl. Da gehen wir. Der Inhalt ist jetzt vorhanden, aber all dieser Inhalte, die wir gerade hinzugefügt haben, sieht ein wenig zu zusammengefügt aus. Hier kommen Abstands-Dienstprogramme ins Spiel. Das ist, was wir als nächstes genauer betrachten werden. 8. Abstandsprogramme: Beim Entwerfen oder Erstellen einer Website ist der Abstand immer eine wichtige Überlegung, und mit regulärem CSS haben wir sowohl Marge als auch Padding, um dies zu kontrollieren. Wie wir uns in den vorherigen Videos kurz angeschaut haben, Tailwind auch einige praktische Utility-Klassen an. Beginnend mit Polsterung, die der Abstand innerhalb eines Elements ist, können wir alle vier Seiten eines Elements mit P gefolgt von einem Wert auffüllen. Wir werden sehen, was diese Werte in nur einem Moment sind, aber darunter können wir auch sehen, dass wir Padding auf eine einzelne Site anwenden können, entweder oben, rechts , unten oder links. Als kleine Abkürzung können wir auch Polsterung auf zwei Seiten anwenden. Wenn Sie in der Vergangenheit eine beliebige Koordinate verwendet haben, sind Sie mit der X- und der Y-Achse vertraut. X ist horizontal, daher gilt dies die Polsterung links und rechts, und die Y-Achse fügt Polsterung sowohl oben als auch unten hinzu. Der Rand, das funktioniert genauso, aber wir verwenden das Präfix m anstelle des P. Wieder können wir Polsterung auf allen Seiten hinzufügen oder sie einzeln steuern. Auch nach links und rechts zusammen, oder wir können die oben und unten gruppieren. Nun, was ist mit diesen Werten wie vier? Sind das Pixel? M REM sind einige von der Einheit? Nun, das alles bezieht sich auf einen REM-Wert, den wir in der CSS-Datei sehen können. Wir können sehen, was diese Werte genau sind, wenn wir in die Seitenleiste gehen und dann die Rückenwind CSS-Datei öffnen. Lassen Sie uns von hier aus nach einigen unserer Spacing-Dienstprogramme suchen. Lassen Sie uns für P-0 gehen, und schauen wir uns das allererste Vorkommen an. Zyklus durch diese und was wir suchen, ist eine P-0-Klasse, die wir gerade in den Folien gesehen haben. Wie erwartet wendet dies einen Füllwert von Null an. Nach jeder zusätzlichen Größe haben wir eine, wir haben zwei, wir haben drei, jeder von ihnen fügt einen anderen Füllwert in REM hinzu. Ein Viertel REMs, die Hälfte REMs, drei Viertel und ein REM ist P-4. Diese gehen alle unter die Viertelinkremente und sie gehen den ganzen Weg nach oben. Wenn wir zum letzten scrollen, ist dies der Wert von 96, der Auffüllung von 24 REM anwendet. Wenn Sie genau wissen möchten, was einer dieser Werte ist, haben Sie einfach eine schnelle Suche in der Datei. Wir haben in der Tat bereits einige dieser Padding Werte innerhalb unserer Index-Seite verwendet. Wir haben einen Füllwert von vier mit den beiseite Elementen verwendet, und lassen Sie uns weiter gehen und einige weitere Abstände in dieses Projekt hinzufügen. Der Titel, einige Abstände oben und unten, die wir mit Rand y anwenden werden. Dies ist ein H1 und lassen Sie uns diese am Ende platzieren. Marge, die Y-Achse und dann der Wert von vier. Speichern, und einige Abstände gelten jetzt oben und unten in unserer Überschrift. Das Gleiche für jeden dieser Links. Diese Links, wir werden auch einen Füllwert anstelle von Marge verwenden. Dies liegt daran, wenn wir den Mauszeiger über einen dieser Links bewegen, können wir sehen, dass wir einen kleinen Hintergrund angewendet haben. Wir möchten, dass dieser Hintergrund ein wenig größer ist, um den Text zu umgeben, also lassen Sie uns einen Füllwert von zwei, p-2, anwenden. Wenn wir den Mauszeiger über diesen Link zeigen, können wir sehen, dass die Polsterung angewendet wurde. Ein paar Dinge, die hier vor allem zu beachten sind, wurde der Produkttext von links nach oben geschoben. Nun, das ist vorerst in Ordnung, weil wir den ganzen Text sehr bald in die Mitte dieses Abschnitts verschieben werden. Auch sehr bald werden wir etwas Platz zwischen jedem dieser Links anwenden. Wir können auch die gerundete Utility-Klasse auf diesen Link anwenden. Wir können das besser sehen, wenn wir den Mauszeiger über und wir können die abgerundeten Kanten auf diesem Hintergrund sehen. Wenn wir dies nun auf alle sechs unserer Links anwenden, kopieren Sie das Padding und die gerundete Klasse und fügen Sie dies zu unserem zweiten Link hinzu. Nur für die Spanne, so dass wir das verlassen, lassen Sie diesen Link, 4, 5 und 6. Wir werden das testen, bevor wir weitermachen. Großartig. Dies funktioniert alles und das nächste, was zu tun ist, ist den vertikalen Abstand zwischen jedem dieser Links hinzuzufügen. Eine Möglichkeit, dies zu tun, besteht darin, jedem dieser Links einen gewissen Rand hinzuzufügen, oder noch einfacher Tailwind bietet ein Dienstprogramm namens Leerzeichen zwischen. Wir haben viele untergeordnete Elemente wie diese, wie mehrere Links. Wir wollen in der Regel etwas Abstand zwischen jedem einzelnen. Aber einige der gängigsten Lösungen haben Probleme. Zum Beispiel könnten wir versuchen, etwas Rand am unteren Rand jedes Links hinzuzufügen. Dies funktioniert, aber beachten Sie auch die zusätzliche Marge ganz unten, die wir vielleicht nicht wollen. Rand oben verursacht das gleiche Problem, lässt aber den zusätzlichen Platz an der Spitze, was auch nicht gewünscht werden kann. Was ist mit der Verwendung der Marge? Warum Dienstprogramm? Nun, das ist wahrscheinlich noch schlimmer, weil es auch den zusätzlichen Platz am Anfang und am Ende hinzufügt, und auch der Abstand zwischen jeder Verbindung wird verdoppelt. Rückenwind Space Utility löst diese Probleme, indem nur eine gleiche Menge an Abstand zwischen den einzelnen Elementen hinzugefügt wird. Dieses Beispiel ist vertikal auf der Y-Achse angeordnet, aber wir können auch Platz über die Seite mit Leerzeichen x haben. Anstatt mehrere Klassen zu verwenden und diese auf jede der Links anzuwenden, können wir auch ein einzelnes Leerzeichen zwischen Klasse und Das geht auf die Eltern. In unserem Fall wird es die ungeordnete Liste sein. Lassen Sie uns das auf anderen Listen finden. Einfach oben oben, fügen Sie die Klasse hinzu, fügen Sie das Space Utility hinzu und da wir den Raum auf der Y-Achse wollen, fügen wir Raum y und den Wert, der vier ist. Dies gibt uns jetzt einen schönen gleichen Raum zwischen jedem dieser Links. Wie Sie sich vorstellen können, werden wir Abstands-Dienstprogramme sehr regelmäßig verwenden. Als nächstes werden wir sehen, wie wir die CSS Flexbox mit Tailwind verwenden können. 9. Verwenden der CSS-Flexbox: Dieses Drahtmodell zeigt, dass die große Änderung des Layouts mit der Seitenleiste und dem Hauptinhalt erfolgt. Kleine Bildschirme sind in der Regel vertikal gestapelt und die Großbildschirmansicht ist nebeneinander. Eine übliche Möglichkeit, dies zu tun, ist mit der CSS Flexbox, und Tailwind hat auch Utility-Klassen, um dies zu tun. Die beiden Abschnitte, die wir umschalten werden, sind die beiseite Abschnitt, und auch bauen neben diesem ist der Hauptabschnitt. Wir können sehen, dass diese beiden Abschnitte untergeordnete Elemente für den Körper sind, also lassen Sie uns die Flexbox auf diesen Abschnitt anwenden. Wir werden eine Klasse setzen, und das wird zwei Klassen enthalten. Die erste ist flex und die zweite ist flex-col. Die erste oder flex, dies wird den Anzeigetyp von flex und dann flex-col anwenden. Dies ist das gleiche wie die Einstellung der Flex-Richtung als Spalte, die wir für das kleine Bildschirmlayout benötigen. Dies gilt für die beiseite im Hauptabschnitt. Wenn wir das jetzt im Browser speichern, sehen wir im Moment keine große Änderung. Wir sehen keinen großen Unterschied, da der Inhalt bereits auf diese Weise angelegt ist, aber wir werden dies in einem späteren Video von flex-col zu flex-row ändern. Wie ich im vorherigen Video erwähnt habe, das nächste, was für die kleine Bildschirmansicht zu tun ist, den gesamten Inhalt in der Mitte zu platzieren. Weg, dies zu tun, ist, zum beiseite Abschnitt zu gehen. Es hat bereits die Klasse, also fügen wir am Ende einfach einige zusätzliche hinzu. Auch hier die Verwendung des Anzeigetyps von Flex. Wenn wir dies speichern, ist die Standardeinstellung für die Flexbox flex-row. Wenn wir also zum Browser gehen, können wir sehen, dass all dieser Inhalt auf der Seite platziert wird. Genau wie oben mit dem Körperteil können wir dies auch mit flex-col umdrehen und den Inhalt als Spalten platzieren. der Mitte des Textes können wir Text-Center verwenden, und dies gilt für unsere Überschrift und auch für unsere Links. Der Text ist zentriert, aber wir müssen auch das Bild zentrieren. Da das Bild übergeordnet ist, was die beiseite ist, verwendet derzeit die Flexbox. Wenn wir jetzt auf das Bild gehen, können wir auch eine Flex-Eigenschaft namens self-center verwenden. Self-Center ist genau das gleiche, als ob wir unsere eigene CSS-Datei hätten und wir das Bild so einstellen, dass es Align-self center ist. Wir können dies sehen, wenn wir in die Entwickler-Tools gehen, mit der rechten Maustaste und Inspect. Lassen Sie uns den Mauszeiger über die Bildelemente bewegen. Dies hat den Align-self-Wert auf Mittelpunkt angewendet. Dies lässt uns jetzt so ziemlich, wo wir für die kleine Bildschirmansicht und auch mit dem beiseite Abschnitt sein müssen . Gehen wir weiter nach unten auf den Hauptinhalt. Sie können sehen, wir haben einen Benutzernamen, einen Avatar, den Titel Alle Produkte, und dann zwei Schaltflächen, um mit den Produkten zu arbeiten. Flexbox wird auch für diesen Abschnitt nützlich sein. Ich kann direkt unter den beiseite Abschnitt gehen und nach dem Hauptelement suchen. Öffnen Sie das und wir können unsere neuen Inhalte darin platzieren. Für den Avatar benötigen Sie ein Bild von sich selbst, das Sie in den Bilderordner aufnehmen können. meinem Inneren habe ich ein Bild namens me.jpg. Wenn Sie kein persönliches Bild für den Avatar haben, können Sie stattdessen einfach eines dieser Smoothie-Bilder als Platzhalter verwenden. Lassen Sie uns nun den Avatarabschnitt erstellen, der in einem div umgeben wird. Dieses div enthält das Avatar-Bild. Springen zum Ordner Bilder, und der, wie erwähnt, war me.jpg, der alt-Text. Dann innerhalb dieser kleinen Tags, werden wir darin den Namen des Benutzers platzieren. Setzen Sie dies in, drücken Sie Speichern, und es gibt das Bild und auch den Text direkt darunter. Damit dieser Abschnitt mehr wie ein 1,2 aussieht, müssen wir auch einige Tailwind Utilities hinzufügen. Für den Wrapper innerhalb des div lassen Sie uns etwas Rand an die Spitze dieses Elements oder vier setzen. Dies gibt uns einige Abstände ganz oben, und auch wir können die Flexbox nutzen. Mit dieser Flexbox werden diese beiden Elemente sofort in einer Reihe angezeigt, da die Standard-Flexrichtung Zeile ist. Natürlich ist das Bild auch viel zu groß, so dass wir die Klasse hinzufügen können. Wir können wieder die Breite und die Höhe Dienstprogramme im Inneren von hier verwenden , also die Höhe, den Wert von acht, und auch das gleiche für die Breite, genau wie wir für die Anzahl der Aufträge verwendet. Wir können auch eine abgerundete Kante auf dieses Bild anwenden. Bei dem gerundeten Wert können Sie einen beliebigen gerundeten Wert innerhalb von hier hinzufügen. Ich werde das nur so voll halten, um einen Kreis hinzuzufügen. Neben dem Elternteil müssen wir diese in der Mitte des Inhalts ausrichten und diese auch vertikal ausrichten. Sie innerhalb des div und unmittelbar nach dem flex den Ausrichtungsinhalt so ein, dass er zentriert ist. Dadurch wird der gesamte Inhalt in der Mitte des Abschnitts platziert. Dann müssen wir uns auch um die vertikale Ausrichtung kümmern. Wir können dies tun, indem Sie items-center verwenden. Dadurch wird der Text in der Mitte unseres Bildes platziert. Schließlich fügen wir dem Text einfach eine Klasse innerhalb von hier hinzu, und dies wird sein, die Textfarbe festzulegen. Lassen Sie uns für grau-500 gehen, und auch, um etwas Platz in das Bild zu geben, setzen Sie den Rand auf der x-Achse auf den Wert vier. Gut. Wenn wir von diesem Avatar-Abschnitt nach unten gehen, werden wir einen neuen Abschnitt erstellen , der ein Haupt-Wrapper für den gesamten Rest des Inhalts sein wird. Innerhalb des Hauptabschnitts und kurz nach dem letzten div mit einem neuen div-Elemente, und dies wird der Container für den gesamten Inhalt einschließlich der Tabelle sein. Um die Dinge organisiert zu halten, werden wir einfach einen kurzen Kommentar direkt oben platzieren. Wir werden sagen, Container für den gesamten Hauptinhalt, einschließlich der Tabelle, und dann innerhalb dieses div, in einem neuen div innerhalb. Dies wird auch ein Container sein. Außerdem fügen wir oben einen Kommentar hinzu. Dieser Container wird verwendet, um den Titel „Alle Produkte“ neben allen Schaltflächen auszurichten. Der Kommentar wird sagen, Container, um die Schaltflächen und Überschrift auszurichten. Zuerst werden wir die Überschrift nach innen legen. Überschrift wird ein h2 sein, und der Text von Alle Produkte. Darunter befindet sich ein div, das die Schaltflächen enthalten wird. Die erste, platzieren Sie ein neues Schaltflächenelement, und dies wird der Text von Add sein. Als nächstes benötigen wir auch das Plus-Symbol. Wieder einmal können wir eine HTML-Entität verwenden. Das Plus-Symbol, können wir das kaufmännische Und-Zeichen, den Hash, den Wert 43, ein Semikolon verwenden, und dann wird dies dieses Plus-Symbol innerhalb der Schaltfläche hinzufügen. Wir haben diesen Titel „Alle Produkte“ ganz oben. Dann hat dieses div die erste Schaltfläche hinzufügen. Außerdem haben wir die Auswahloption. Direkt nach der Schaltfläche, platzieren Sie in unserer Auswahl, und die Auswahl bedeutet verschiedene Optionen. Die erste Option wird diejenige sein, die der Benutzer zuerst sieht, und diese wird Massenaktionen sein. Duplizieren Sie das. Der zweite wird für Bearbeiten sein, und der letzte wird sein, ein Produkt zu löschen. Versuchen wir es mal. Wir sehen das Drop-down-Menü und auch unsere Add-Schaltfläche daneben. Gehen wir nun zurück zu unserem HTML und wenden einige Utility-Klassen an, um dies besser aussehen zu lassen. Zunächst einmal der Hauptinhalt-Wrapper , der ganz oben ist, können wir einige Abstände auf der linken und rechten Seite mit px-2 hinzufügen. Dann auch, um etwas Platz auf diesen Avatarbereich anzuwenden, können wir auch einen gewissen Rand nach oben anwenden. Lass uns acht gehen. Als nächstes wird der div Wrapper, der die Überschrift und auch die Schaltflächen enthält. Um einige Ausrichtungen zu diesem Abschnitt zu fragen, können wir die Flexbox verwenden. Ändern Sie die Richtung Flex-Spalte sein, und dann können wir beginnen, unsere Inhalte auszurichten, sowie Element-Center. Dadurch wird der gesamte Inhalt in die Mitte Ihres Abschnitts verschoben , wenn die Richtung auf Spalte festgelegt ist. Um einige Abstände zwischen diesen hinzuzufügen, gehen wir auf die Überschrift der Ebene 2 und wenden einen Rand direkt am unteren Rand des Elements mit mb-4 an. Bis zum letzten Abschnitt und wir können beginnen, an unserer Taste und auch die ausgewählten Eingänge zu arbeiten. Zuallererst, die Schaltfläche, wird dies die Textfarbe von grau-100 haben. Diese hellgraue Farbe hebt sich nicht zu gut auf der weißen Hintergrundfarbe ab, aber wir werden die Hintergrundfarbe ändern, um Indigofarbe zu sein, einen Farbton von 500, und das macht es hervorzuheben. Außerdem ändert ein Hover-Zustand die Hintergrundfarbe erneut in einen helleren Indigo-Farbton. Gehen wir für 400. Gut. Wir brauchen auch eine Polsterung auf der Innenseite und auch um die Ecken zu runden. Die Polsterung links und rechts, Wert 4, verkleinert den Text auf eine kleine Größe. Dann schließlich an den abgerundeten Kanten. Gut, das sieht jetzt und auf die Auswahl viel besser aus. Bis zum öffnenden Tag. Der Name und die ID spielen in der Minute keine Rolle weil wir unser Formular nicht an einen Server senden, aber wir werden nur den Namen der Masse und auch die ID auf die gleiche setzen. Die Klassen, um unsere Schaltfläche entsprechen, werden wir den Text zu einer kleinen Größe halten. Wenden Sie einen Rand links an, um diesen Abstand von der Schaltfläche zu geben, einen Füllwert von vier auf der X-Achse, und dann werden wir auch den Rahmen festlegen, um dies hervorzuheben. Um einen Rahmen anzuwenden, verwenden wir nur die Grenze Utility-Klasse. Wir können auch mit der Farbe herumspielen. Wie wir uns zuvor mit den Farb-Dienstprogrammen angesehen haben, können wir das Randpräfix verwenden, und dann verwenden Sie eine unserer Farben, die Sie möchten. Gehen wir für grau-300. Dies ist die abgerundete Kante. Wir können den Fokuszustand nutzen. Wenn dieses Element im Fokus steht, entfernen wir den Umriss und ersetzen ihn stattdessen durch einen Fokusstatus , der einen Indigorahmen mit dem Wert 500 enthält. Wenn wir zum Browser gehen, sieht das jetzt viel besser aus. Wir werden nur kleinen Raum in ihm bis zur Y-Achse dieser Elemente beginnen. Lassen Sie uns dies innerhalb der Auswahl tun. Neben der Polsterung fügen wir einige Polsterung auf der Y-Achse hinzu. Versuchen wir es mit einem Wert von zwei. Gut. Wir werden auch dasselbe für die Schaltfläche tun. Das sieht jetzt viel besser aus. Nur um den Fokus zu testen, wenn wir auf den Browser klicken, und verwenden Sie dann die Tab-Taste, um durch alle unsere Elemente zu navigieren. Sobald wir zu dieser ausgewählten Eingabe gelangen, können wir den Fokus Umriss sehen, wir geändert haben, um die Indigo-Grenze zu sein, was dem Benutzer eine visuelle Anzeige gibt, welches Element ausgewählt ist. Wir machen jetzt gute Fortschritte mit dem Inhalt und auch mit der kleinen Bildschirmansicht. Als nächstes werden wir anfangen, innerhalb unseres Tisches zu arbeiten. 10. Tabellen und Überlauf: Das Drahtmodell für den kleinen Bildschirm auf der rechten Seite hat einen Tisch, an dem wir jetzt arbeiten werden. Datentabellen für diese Art von Produkt könnten auch viele weitere Spalten enthalten. Da die Breite des Bildschirms auf einem kleinen Gerät begrenzt ist, anstatt die Größe dieser Tabelle zu reduzieren und versuchen, alles auf einem kleinen Bildschirm zu drücken. Ich denke, das Beste, was in diesem Fall zu tun ist, ist es, dem Benutzer zu erlauben nach rechts zu wischen, um den Rest der Tabellendaten anzuzeigen. Im vorherigen Video haben wir diesen Kommentar oben um dieses div, das der Hauptcontainer war, hinzugefügt . Dies enthält den gesamten Inhalt, den wir erstellt haben, und auch die Tabelle. Was wir tun müssen, ist das schließende Tag zu lokalisieren, das sich direkt über dem Hauptteil befindet, und diesen Tabellenabschnitt im Inneren zu halten. Erstellen Sie dazu einen neuen Abschnitt und dann innerhalb unserer Tabelle. Der Grund, warum wir diesen umgebenden Abschnitt um unsere Tabelle herum hinzugefügt haben , besteht darin, eine Überlaufklasse hinzuzufügen. Wir werden das Ergebnis in nur einer Sekunde sehen, wenn wir die Klasse auf dem Dienstprogramm von Überlauf dash x, dash auto hinzufügen . Dieses Dienstprogramm ist das gleiche wie die reguläre CSS-Überlauf-x-Eigenschaft. Wir haben den Wert auf auto gesetzt. Dies bedeutet, wenn der Inhalt für den Bildschirm zu breit ist, was für unsere Tabelle der Fall ist, anstatt die Tabelle auszublenden oder abzuschneiden, wird dann eine Bildlaufleiste eingeführt. Fügen Sie in der Tabelle unser erstes Element hinzu, das T-Kopf ist. Dies wird der Wrapper für alle unsere Tabellenüberschriften in einer Klasse von bg-gray-100 sein. Dann im Inneren von hier fügen wir unsere erste Reihe hinzu. Bei Tabellen verwenden wir die tr für Tabellenzeile. Dann wird jede der Überschriften in das th Element umgeben sein. Der erste, wenn Sie sich von meinem Drahtmodell erinnern, ist der Gegenstand. Der zweite, der Status des Artikels und der dritte ist für die Kategorie, den Lagerbestand, den Preis. Dann endlich ein Editier-Button. Lassen Sie uns das speichern und sehen, was im Browser passiert. Ich werde den Live-Server einrichten, um zu öffnen, aktualisieren Sie die Änderungen. Es gibt unsere Tabellenüberschrift über die Seite. Wie erwartet müssen wir einige Utility-Klassen hinzufügen, damit dies viel besser aussieht. Für die th Elemente, für die Überschriften, in der Klasse platzieren. Zunächst einmal etwas Polsterung auf der X-Achse sechs. Ich brauche Texte auf der linken Seite. Wir können den Text auch extra klein oder mittel machen, um diesen hervorzuheben und etwas mutiger zu machen. Dann eine Farbe für den Text, der grau 500 sein wird, und drehen Sie dies in Großbuchstaben. Dann werden wir ganz am Ende eine weitere Utility-Klasse hinzufügen, die weiter verfolgt werden wird. Wenn Sie sich das Element genau ansehen, bevor wir es speichern, klicken Sie auf „Speichern“. Dadurch wird der Buchstabenabstand erhöht. diese jetzt vorhanden ist, werden wir das vollständige Klassenattribut und mindestens jede unserer Tabellenüberschriften kopieren. Die zweite, die Kategorie, die Aktie, der Preis und schließlich der Editierbereich. Wenn Sie sich aus dem Drahtmodell erinnern, hat die erste Zelle auf der linken Seite auch ein Kontrollkästchen, um alle unsere Elemente auszuwählen. Dies wird innerhalb der ersten Tabellenüberschrift sein. Sie kurz vor dem Elementtext PlatzierenSie kurz vor dem Elementtextin die Eingabe. Die Eingabe ist die Art der Checkbox und auch, um dem Text, der gerade nebenan ist, etwas Raum zu geben. Wir können auch die Klasse hinzufügen, um ihm eine gewisse Marge auf der rechten Seite und den Wert von vier zu geben. Was wir jetzt haben, ist eine Tabellenüberschrift mit zwei Informationen. Wir haben die Eingaben und auch den Text. Wir müssen auch einige Ausrichtungen machen, dies nebeneinander innerhalb der Zelle erscheinen lassen. Wir können dem Abschnitt etwas Polsterung und Ausrichtung hinzufügen. Ich werde es einfach in der Klasse tun. Wir werden einige Polsterung auf der Y-Achse hinzufügen. Der Wert von vier gibt uns nur ein wenig mehr vertikalen Raum in. Jetzt müssen wir einen Weg finden, um das Kontrollkästchen neben unserem Artikeltext zu platzieren. Nun, wir können dies tun, indem wir die Tabellenüberschrift ändern, um die Flexbox zu nutzen. Denken Sie daran, dass die Flexbox standardmäßig die Flexrichtung der Zeile hat. Dies bedeutet, dass beide untergeordneten Elemente nebeneinander platziert werden, so dass unser Kopfteil jetzt abgeschlossen ist und unsere Tabelle jetzt bereit ist, einige Daten in das kommende Video hinzuzufügen. 11. Tabellenkörper und Trennbereiche: Von der Tischkopfabschnitt nach unten auf die Karosserie, wo wir jede Produktlinie haben können. Sie können auch beliebig viele dieser Produkte hinzufügen. Über zum Editor, und wir können beginnen, den Abschnitt hinzuzufügen. Im letzten Abschnitt haben wir die Tabellenüberschrift erstellt. Wenn wir das schließende Tag für diese Elemente finden, können wir an der Körperabschnitt arbeiten. Direkt unter dem thead, fügen Sie den tbody hinzu. Dann platzieren Sie innerhalb einer Klasse, die uns die weiße Hintergrundfarbe geben wird. Innerhalb der ersten Zeile mit den tr-Elementen enthält das erste Stück Tabellendaten drei Dinge. Es enthält ein Kontrollkästchen, also fügen Sie die Eingaben mit dem Typ der Checkbox hinzu. Das wird direkt unter diesem hier sitzen. Neben unserem Kontrollkästchen fügen wir die Bildelemente hinzu, und das Bildelement wird das Bild sein, das wir neben jedem Smoothie platzieren möchten. Schließlich das p-Element, und lassen Sie uns für den Mangos-Smoothie gehen. Hoppla, das ist direkt über dem Tisch. Wir müssen den ganzen Ort abschneiden und diese in eine Zelle legen, die td ist, die Tabellendaten. Platzieren Sie das hier ist. Sie sollten jetzt unser Problem beheben. Die Zelle benötigt auch einige Klassen, um diese richtig auszurichten Da wir also möchten, dass alle drei Elemente über die Seite gehen, können wir wieder die Flexbox verwenden und diese dann auch vertikal mit item-center ausrichten. Einige Polsterung auf der X-Achse, und wir werden für den Wert von sechs gehen, und auch Polsterung y von vier. Das Kontrollkästchen ist in Ordnung, wie es ist, und wir gehen nach unten zum Bild und springen in den Ordner Bilder. Wir haben hier ein Bild, das die mango.jpg ist, und das ist das Bild, das ich neben diesem Element platzieren werde, den Alt-Text von Mangos-Smoothie und auch einige Klassen zu diesen Elementen. Für unser Bild müssen wir es ein wenig kleiner machen, also können wir dies mit h-10 für die Höhe tun, und auch das gleiche für die Breite auch, um dies gleich zu halten. Wenn wir dann unser Bild im Browser betrachten, brauchen wir auch einige Abstände auf beiden Seiten. Wir könnten dies mit der Margin-Eigenschaft auf der x-Achse und einem Wert von vier tun. Neben unseren Texten fügen wir auch einige Klassen in die p Elemente ein. Zuallererst machen wir den Text zu einer kleinen Größe, das Schriftgewicht des Mediums, die Textfarbe von grau 800. Aber lassen Sie uns auch das Tracking breitere Dienstprogramm verwenden, das wir uns vorher angesehen haben, und dann eine Klasse, die wir bisher nicht verwendet haben, was Whitespace-Nowrap ist. Sobald wir das speichern, wird der Mangos-Smoothie-Text in der gleichen Zeile angezeigt. Das bedeutet, dass der Textumbruch in eine neue Zeile gestoppt wird, wenn er zu lang für die eigentliche Zelle ist. Der nächste Teil der Daten befindet sich direkt unter dem Status. Dies wird ein grünes aktives Label sein. Lassen Sie uns direkt unter unsere td gehen, fügen Sie ein neues Stück Tabellendaten hinzu. Wir müssen auch einige Klassen in diesem Abschnitt hinzufügen. Wir werden die Klassen von der ersten nicht spiegeln, denn denken Sie daran, dass dies die Flexbox verwenden musste, um alle drei Elemente im Inneren auszurichten, also gehen wir zurück nach unten, und wir können unsere Klassen hinzufügen. Dieser wird text-links, text-klein sein, halten Sie es einfach konsistent, einige Polsterung links und rechts von sechs, tracking-breiter und auch whitespace-nowrap. Fügen Sie innerhalb der Zelle ein span-Element mit dem Text aktiv hinzu. Um dies eher wie eine Schaltfläche aussehen zu lassen, gehen wir in die Span-Elemente und fügen einige Klassen hinzu. Zuerst ändern wir die Textfarbe grün schattiert 900 und dann mit einem helleren Hintergrund versetzt. Dies ist auch grün, aber der Wert von 100, ein Füllwert von vier auf x und dann für y, Wert von zwei. Dann runden wir die Kanten ab, wir runden es so voll ab. Das sieht gut aus. Auch wenn wir den Browser kleiner als die tatsächliche Breite der Tabelle machen, werden Sie eine Bildlaufleiste am unteren Rand bemerken. Wie bereits erwähnt, ist dies die Bildlaufleiste, damit alle Inhalte zum Spiel kommen. Wir haben dies, weil, wenn wir an den Anfang unseres Tisches gehen. Scrollen wir nach oben. Denken Sie daran, dass wir einen Abschnitt Wrapper hinzugefügt haben, der die Klasse von overflow-x-auto hat. Nächster Abschnitt, wir werden die Kategorie haben, also zurück nach unten. Sie direkt unter dem letzten Teil der Tabellendaten eine neue Zelle hinzu. Von hier aus können wir anfangen, das Styling konsistenter zu halten. Wir können die Klassen aus den letzten Tabellendaten greifen. Fügen Sie diese in ein. Dann zwischen den Tags können wir den Text von Smoothies hinzufügen. Das ist ziemlich einfach. Es enthält nur den Text im Inneren. Jetzt gehen wir über und wir fügen den Abschnitt für dieses Dokument hinzu. Halten Sie eine konsistente, kopieren Sie die vollständigen td Elemente von oben, fügen Sie dies unten, und fügen Sie dann ein A innen von hier, da wir nicht die Stielstufen für diese Smoothies verfolgen. Was kommt als Nächstes? Wir gehen rüber und schauen uns an. Dies ist der Preis, der in einem neuen td Elemente mit den gleichen Klassen basiert. Fügen Sie einen Preis für unseren Smoothie hinzu. Dann schließlich, oben rechts direkt unter dem Editierbereich, wird dies ein Editier-Button sein. Dies kann auch die gleichen Klassen verwenden, also fügen Sie ein td ein. Aber diesmal braucht dies auch eine Verbindung. Da wir keine Seiten haben, auf die wir verlinken können, können wir die href einfach leer lassen. Aber wir müssen einige Klassen hinzufügen, um den Text von Bearbeitungen zu stylen. Dann zurück zu unseren Klassen, können wir beginnen, eine andere Textfarbe hinzufügen, Text indigo 500, und auch einen dunkleren Farbton, sobald Sie einen Hovers über diesen Abschnitt verwenden. Text indigo, und dieses Mal werden wir für einen Wert von 900 gehen. Gut. Das funktioniert alles, und das ist unser erster Punkt. Sie können jetzt so viele Elemente hinzufügen, wie Sie möchten. Wir haben mehrere Bilder in den Bilderordner geliefert. Wenn Sie üben möchten, können Sie entweder den gesamten Abschnitt erneut eingeben, oder Sie können diesen vollständigen Zeilenabschnitt kopieren und einfügen und dann die Details im Inneren ändern. Der einfachste Weg, dies zu tun, wenn wir zu dem Tabellenkörperabschnitt gehen, den wir gerade erstellt haben. Dann innerhalb müssen wir diese Tabellenzeile direkt kopieren, also kopieren Sie den gesamten Inhalt, das schließende Tabellenzeilen-Tag. Kopieren Sie das. Unmittelbar unten befindet sich ein neues drinnen, und wir werden das noch einmal durchmachen. Das hier wird für den Erdbeer-Smoothie sein. Werfen Sie einen Blick. Anstatt Mango, ändern wir das in Erdbeere. Die aktive Schaltfläche ist in Ordnung. Dies muss es immer noch in seine Kategorie zu bewegen. Sie können den Preis ändern, wenn Sie wollen, aber ich werde das nur so lassen, wie es ist. Alles, was wir jetzt tun müssen, ist nur dieses Bild zu ändern, also scrollen Sie nach oben. Dieses Mal möchten wir die Bildquelle in die strawberry.jpg ändern und auch den alten Text ändern. Wir machen dieses Video nicht wirklich lange und gehen durch alle diese Optionen, aber Sie können jetzt gehen und so viele von ihnen hinzufügen, wie Sie wollen, und nutzen Sie die Bilder innerhalb des Ordners. Aber kurz bevor wir dieses Video beenden, können wir auch eine Trennlinie zwischen jedem unserer Artikel hinzufügen. Wir können dies tun, wenn wir den Table-Body Abschnitt , den wir zu Beginn dieses Videos neben dem Hintergrund erstellt, finden , fügen Sie eine Klasse, die geteilt ist. Sofort, wenn wir das speichern, sehen wir, dass die Linie zwischen jedem dieser Elemente platziert wird. Wir können auch die Farbe dieser Kluft ändern. Alles, was wir tun müssen, ist das Divid-Präfix zu verwenden und dann eine beliebige Farbe hinzuzufügen. Ich werde grau-200 benutzen. Diese Unterteilung ist wirklich nützlich, um eine Trennlinie zwischen jedem der untergeordneten Elemente innerhalb von hier hinzuzufügen . Wie Sie sehen können, können wir die horizontalen oder vertikalen Teilungen verwenden , indem Sie y oder x verwenden. Eine praktische Sache an dieser Kluft ist, dass es nur eine Linie zwischen jedem der Elemente hinzufügen wird. Es würde keine Zeile am Anfang oder am Ende hinzufügen, was passieren würde, wenn wir so etwas wie einen Rand unten verwenden. Wenn wir auch eine Trennlinie zwischen dem Tabellenkopf und dem Tabellenkörper wünschen, könnten wir dasselbe auch zu Dienstprogrammklassen hinzufügen, diesmal aber zum übergeordneten Element. In diesem Fall ist das übergeordnete Element die Tabelle, also kopieren Sie beide Dienstprogramme. Die Eltern unser Kopf und unser Körperteil ist der Tisch. Ich werde das bei den Klassenattributen lokalisieren, und dann können wir unsere Dienstprogramme einfügen. Dann über auf der rechten Seite, können wir jetzt sehen, dieses Dienstprogramm ist die Trennung zwischen dem Kopf und dem Körperteil platziert. Gut, wir kommen jetzt irgendwo hin. Es gibt nur ein wenig mehr Inhalte, die direkt unter dieser Tabelle hinzugefügt werden können. Wir können nicht weiter mit dem Hinzufügen weiterer Produkte fortfahren, wenn Sie möchten. Dann, wenn Sie fertig sind, sehe ich Sie im kommenden Video. 12. Paginierungsabschnitt: Das letzte Stück Inhalt auf dieser mobilen Ansicht oben auf der rechten Seite wird der kleine Abschnitt unten unten sein. Wir haben einen Text, der besagt, wie viele Produkte wir zeigen, wie viele Produkte wir insgesamt haben, und auch den Abschnitt, um zwischen jeder dieser Seiten zu blättern. Auf der kleinen Bildschirmansicht ist dies vertikal gestapelt, so dass wir den Text oben und dann die Paginierung unten haben. Wir müssen diesen Abschnitt unten einfügen, also wenn wir einen Blick auf das schließende Haupt-Tag werfen und dann knapp über diesem letzten div. Wir können dann in einem neuen Abschnitt für all diesen Inhalt platzieren, beginnend mit den p-Elementen, das ist der Text. Wir werden sagen, zeigen 10 von 108 Produkten. Denken Sie daran, das ist völlig fiktiv, so dass Sie die Zahlen ändern können. Als nächstes kann die ungeordnete Liste, unser erstes Listenelement und dann jede Seite als Link eingefügt werden. Wir haben keine Seiten, auf die wir verlinken können, also können wir diese leer halten, und die erste ist die Nummer 1. Kopieren wir das und fügen Sie es ein, um vier verschiedene Links zu erstellen. Auf Seite Nummer 2, Seite 3 und auch 4. Sparen. Es gibt alle Inhalte unten. Denken Sie daran, aus dem Drahtmodell, das links von dieser Nummer 1 ist, haben wir die linke Winkelhalterung, und dann rechts von der Zahl 4 haben wir die rechte Winkelhalterung. Was wir tun werden, um diese einzufügen, ist eine Spanne einzuschließen. Wir fügen dies in die Listenelemente und knapp über der Zahl 1 ein. Wir können dies mit einer HTML-Entität einfügen, kaufmännisches Und-Zeichen LT und ein Semikolon verwenden. Um dies unserer Nummer 1 etwas Platz zu geben, fügen Sie auch die Klasse hinzu, die margin-right ist, und den Wert davor. Gehen wir zum letzten Listenelement. Dieser wird nach unserer Nummer 4 gehen. Die Spanne, die Entität diesmal ist das kaufmännische Und-und GT größer als, das Semikolon. Dies wird auch einen gewissen Spielraum haben. Aber dieses Mal müssen wir es auf der linken Seite platzieren. Lassen Sie uns jetzt an dem Layout dieses Abschnitts arbeiten, und wenn wir mit dem Haupt-Wrapper beginnen, können wir die Flex-Box verwenden. Kontrollieren Sie dies auf der kleinen und der großen Bildschirmansicht. Für den kleinen Bildschirm, wie den Großteil des Inhalts, wird dies als Spalten angelegt. Die Elemente werden in der Mitte sein. Fügen Sie einige Abstände oben und unten an der Polsterung y-Wert von sechs. Ein Text wird etwas kleiner sein, also verwenden wir Text-SM und auch ein geringeres Gewicht. Der Text direkt unten ist in Ordnung, also gehen wir zur ungeordneten Liste über und die Zahlen müssen auf der Seite platziert werden. Dies wird auch die Flexbox verwenden. Die standardmäßige Flex-Richtung ist row, die diese auf der Seite platziert. Wir fügen dem obigen Text mit mt-4 etwas Leerzeichen hinzu. Es gibt nicht viel mehr für diesen Abschnitt zu tun, wir fügen einfach etwas Platz darin zu diesen Zahlen hinzu. Wir werden dies innerhalb der a-Elemente und der Klasse von p-2 tun. Wir können dies auch kopieren und diese zu jeder unserer Nummern hinzufügen. Gut, also als letzten Schliff für diesen Abschnitt, werden wir dies auf Nummer 1 hervorheben. Dies ist nur, um den Benutzer genau wissen zu lassen, auf welcher Seite er sich befinden wird. Wie immer tun wird, ist es, einige Dienstprogramme hinzuzufügen. Zuerst ändern wir die Textfarbe grau zu sein, einen Farbton von 100, der Hintergrund wäre bg-indigo-500. Die Hover-Effekte machen wir auch dies zu einem Indigo-Farbe. Nun, genau wie wir es mit dem Editier-Button getan haben, wird dies ein etwas anderer Farbton sein. Der Hover-Zustand für dieses Element, der Hintergrund, indigo-400, und laufen von den Kanten mit abgerundeten voll. Gut. Dies ist der letzte Abschnitt, den ich vervollständigen werde und auch alle Inhalte, die wir für dieses Projekt benötigen. In Zukunft, was wir tun werden, ist, diesen Inhalt besser geeignet für größere Bildschirme zu machen , und auch lernen, mehr von den Funktionen, die Tailwind zu bieten hat. Nur ein paar kleine Dinge, bevor wir weitermachen, beginnend mit dem Hintergrund für diesen Hauptabschnitt, lassen Sie uns das öffnende Haupt-Tag finden, das sich in der Nähe der Oberseite des Körpers befindet. Das ist diese Seite und der Hauptabschnitt. Platz in einer Klasse, die bg-grau-200 sein wird. Wir könnten es so einfach halten, wenn wir wollen und fügen Sie einen einzigen Grauton oder eine andere Farbe. Oder, wenn wir es wollten, könnten wir das auch als Gradienten aufstellen. Farbverläufe sind in regulärem CSS verfügbar und ermöglichen es uns, zwischen zwei oder mehr verschiedenen Farben zu mischen. Sie können extrem gehen und zwischen zwei entgegengesetzten Farben mischen, aber ich werde die Dinge schön und subtil halten und zwischen zwei ähnlichen Farbtönen wechseln. Die Art und Weise, wie wir dies tun könnten, besteht darin, den Hintergrund als Farbverlauf festzulegen, gefolgt von der Richtung des Farbverlaufs. Meiner wird zu-r sein. Dadurch ändert sich die Farbe von links nach rechts. Wenn du es auch wolltest, könntest du dies auch ändern, um oben, unten oder links zu sein , ein langer Weg, um sie zu kombinieren. Zum Beispiel wäre tr oben rechts, und tl wäre oben links mit einem Leerzeichen zwischen. Wir verwenden dann, die nach und von, um die Farben, die Sie verwenden möchten, zu setzen. Um sie alle sichtbar zu machen, lassen Sie uns zunächst einen roten und blauen Wert hinzufügen. Wir werden sagen, von rot-200, und dann gehen wir zu einem blauen Wert von 100. Dies macht es jetzt sichtbarer. Wir haben die rote Farbe, die wir von oben auf der linken Seite angefangen haben, und dann bewegen wir uns die richtige Richtung und verwandeln dies in die blaue Farbe, die wir hier sehen. Aber wie bereits erwähnt, werde ich dies ein wenig subtiler halten und beide zu grau ändern. Aber fühlen Sie sich frei, um mit einer dieser Farben oder anderen Stilrichtungen zu spielen , in denen Sie wollen. Weiter, wir müssen auch etwas Platz in knapp über dieser Tabelle hinzufügen. Wenn wir nur ein wenig nach unten scrollen, können wir sehen, dass wir den Container haben, den wir früher erstellt haben, und dies wird verwendet, um unsere Schaltflächen zu wickeln. Fügen Sie einige Abstände hinzu, wir können einen Rand am unteren Rand dieses Abschnitts mit einem Wert von sechs hinzufügen. Um dieses Video abzurunden, genau wie wir es mit dieser Nummer 1 unten getan haben, die Highlights des Benutzers, auf dem wir sind, Seite 1. Wir werden auch den Produktlink an der Spitze hervorheben. Dies liegt daran, dass wir auf der Seite „Alle Produkte“ sind, so dass es sinnvoll ist, den Benutzer wissen zu lassen, welche Seite aktiv ist. Setzen Sie dies zurück zum Editor und scrollen Sie ganz oben den Link des Produkts nach oben. Dann werden wir in den Klassen beginnen, indem wir den Hintergrund als grau-500 hinzufügen. Dadurch wird der Benutzer nun darüber informiert, dass die Produktseite jetzt aktiv ist. Das Setup für kleine Bildschirme ist jetzt abgeschlossen. nächsten Schritt erfahren Sie mehr über das, was Tailwind zu bieten hat , einschließlich Responsive Design. 13. Layout mit Bruchpunkten ändern: Responsive Design ist nicht nur eine schöne Sache auf modernen Websites zu haben. Es ist ein wesentlicher Bestandteil der Entwicklung. Wir müssen sicherstellen, dass unser Design auf kleinen Bildschirmen gut aussieht, bis hin zu einer großen Desktop-Größe. Zum Glück, da es Tausende von verschiedenen Bildschirmgrößen gibt, müssen wir nicht ein separates Design für jede dieser Größen erstellen. Was stattdessen müssen wir einige vernünftige Regeln anwenden, um zu decken ist für alle Bildschirmgrößen. Ohne regelmäßiges CSS haben wir Zugriff auf Medienabfragen. Eine häufige Verwendung für Medienabfragen besteht darin, bestimmte Stile abzuschneiden , um nur auf bestimmte Bildschirmgrößen anzuwenden. Und Tailwind hat auch eingebaute Dienstprogramme für diese beiden. Eine wichtige Sache zu verstehen ist, dass alle Utility-Klassen, die wir bereits angewendet haben, für jede Bildschirmgröße gelten. Sie können sich diese als allgemeine Basisstile vorstellen. Aufbauend auf diesen. Wir können dann bestimmte Stile für bestimmte Bildschirmgrößen hinzufügen. Betrachten Sie zum Beispiel diese oberste Reihe, denken Sie daran, dass alle aktuellen Stile, die wir haben, auf alle Größen angewendet werden. Sobald ein Browser eine Breite von 640 Pixeln oder höher erreicht, können wir neue Stile hinzufügen oder die, die wir bereits haben, überschreiben. Wir wollen vielleicht eine größere Schrift, mehr Abstand oder eine komplette Layout-Änderung. Damit diese Änderungen angewendet werden, verwenden wir die gleichen Utility-Klassen wie zuvor, jedoch mit dem SM-Präfix. Da wir mit mobile-first arbeiten, werden diese Stile bis hin zu größeren Bildschirmen angewendet. Es sei denn, wir überschreiben sie erneut mit einem anderen Präfix, wie LG für große Bildschirme. Jeder dieser Browsergrößen wird als Haltepunkt bezeichnet. Da dies der Punkt ist, könnten wir das Styling oder das Layout ändern. Wir wissen bereits aus diesem breiten Rahmen, wie die größte Bildschirmansicht aussehen wird. Wie entscheiden wir, wann das Layout geändert werden soll? Nun, das ist etwas, das Sie je nach Projekt selbst beurteilen müssen , aber eine einfache Regel besteht darin, mit einem kleinen Bildschirm zu beginnen und dann den Browser nach oben zu skalieren und Änderungen vorzunehmen, wenn das Layout zu gestreckt aussieht oder kaputt. Der Einfachheit halber werde ich mich nur mit einer einzigen Breakpoint-Änderung beschäftigen, die auf der großen Größe sein wird , wie Sie möchten. Seine Layouts werden im Grunde davon ausgehen, dass Inhalte vertikal gestapelt werden, wir haben unsere beiden wichtigsten Abschnitte nebeneinander. Von dieser kleinen Bildschirmansicht mache ich ein wenig mehr Platz, und wenn wir mit „Rechtsklick“ und „Inspect“ in die Entwickler-Tools gehen. Wenn Sie beginnen, den Browser groß oder klein innerhalb der DevTools zu machen, werden Sie in der oberen rechten Ecke sehen, können wir sehen, wie breit es in Pixeln ist. Derzeit sieht das Layout ziemlich gut aus, wenn wir etwa 600 Pixel sind. Wenn wir bis zu 700s, 800s sind , sieht alles noch gut aus auf einem weichen Tablet-Bildschirm-Ansicht. Aber wenn wir anfangen, vielleicht etwa 1.000 Pixel oder höher zu bekommen, einige hier herum, können wir sehen, wir beginnen, eine Layoutänderung zu benötigen. Es ist diese große Bildschirmgröße, die 1.024 Pixel beträgt, die ich verwenden werde, um eine Layoutänderung zu erstellen. Lassen Sie uns das schließen. Wenn wir in den Code gehen, in unsere Index-Seite, und erinnern Sie sich an den Hauptteil oben steuert das Layout unserer beiden Hauptabschnitte. Dies ist das Muster sowohl für die Seite, das ist dieser obere Bereich und auch der Hauptinhalt. Es steuert dies mit der Flex-Box und setzt sie derzeit, zu einem Spaltenlayout werden Änderungen, um eine Zeile auf größeren Bildschirmen zu sein. Der Weg, dies zu tun, besteht darin, das Breakpoint-Präfix zu verwenden, und in meinem Fall ist es mit einer großen Bildschirmansicht. Dann müssen wir nur unsere Utility-Klasse hinzufügen. Dies wird dies zu Flex-Zeile ändern und wenn wir diese speichern, aktualisieren Sie den Browser, diese beiden Abschnitte und werden in einer Reihe platziert. Wir können auch sehen, dass der Haltepunkt stattfindet, wenn wir den Browser auf die kleinste Größe verkleinern. Dies wird dann zurück auf das Spalten-Layout. Was wir jetzt tun müssen, ist die Größe unserer beiden Abschnitte, da dies nicht die volle Breite der Seite umfasst. Zur Größe der beiseite, und die Hauptabschnitte. Wir werden die Width-Eigenschaft nutzen. Wir wissen, dass wir festlegen können, wie breit diese Abschnitte in rems sind, oder eine noch bessere Option für diese Abschnitte ist die Verwendung von Brüchen. Was wir tun müssen, ist, zuerst die beiseite zu lokalisieren. Dann können wir für die große Bildschirmansicht einstellen, eine Breite gleich 1/4. Geh runter. Suchen wir den Hauptabschnitt. Danach auch Targeting auf die großen Bildschirmansichten. Dies wird die zusätzliche 3/4 des Raumes füllen. Jetzt 3/4 und 1/4. Lassen Sie uns live im Browser gehen. Wir müssen uns nicht mehr erfrischen. Wir können sehen, dass dies 1/4 des Bildschirmbereichs einnimmt, und diese Seite nimmt den verbleibenden Wert ein. Dies wird sich auch dehnen, wenn wir den Browser breiter oder kleiner machen , um immer proportional zu sein. Jetzt wissen wir, dass wir mit dem Desktopbildschirm in voller Größe arbeiten. Es wäre besser in dieser Ansicht, wenn der gesamte Inhalt vertikal auf die volle Höhe des Bildschirms gestreckt wird. Wir können dies tun, wenn wir zu Ihnen einen der Abschnitte gehen, wie die beiseite und zurück in die Klassen. Auch hier wird dies immer auf die große Bildschirmansicht ausgerichtet. Wir können die Höhe so einstellen, dass sie gleich der Bildschirmhöhe ist. Dadurch wird die Höhe auf 100vh festgelegt, was die volle Höhe des Ansichtsfensters darstellt. Das sieht viel besser aus. Wir haben jetzt eine Sidebar in voller Höhe. Auch da der Hauptabschnitt eine lange Seite ist, wird auch die volle Höhe verfolgt. Was die Hauptlayoutänderung betrifft, können Sie weitere Haltepunkte hinzufügen, wenn Sie möchten. Als Nächstes konzentrieren wir uns auf den Inhalt innerhalb dieser beiden Abschnitte. 14. Design für große Bildschirme: Der y-Rahmen zeigt auf dem großen Bildschirm, dass Links im Seitenleistenbereich auf der linken Seite ausgerichtet sind. Wir werden dort beginnen und dann durch den Rest der größeren Bildschirmstile nach unten gehen. Wie wir wissen, befinden sich diese Links innerhalb des UL-Bereichs unter den zugewiesenen Inhalten. Lassen Sie uns lokalisieren. Eine Menge auf der anderen Liste. Wir haben bereits das Klassenattribut an Ort und Stelle. Alles, was wir tun müssen, ist mit unserem großen Bildschirm-Styling zu beginnen. Der kleine Bildschirm, wir haben bereits etwas Platz auf der y-Achse zwischen jedem unserer Listenelemente. Wir werden nun mehr Platz zur Verfügung haben. Ich werde das erhöhen, um ein größerer Wert zu sein. Space y, der Wert von acht. Der Text wird links ausgerichtet sein, wie wir gerade im y-Rahmen gesehen haben. Nun habe ich etwas mehr Platz zwischen jedem dieser Gegenstände. Wir können auch ein wenig Rand oben und unten hinzufügen. Geben Sie mir etwas Platz aus dem Titel auf diesem Symbol. Wir tun dies mit einer Marge auf der Y-Achse und einem konsistenten Wert von acht. Das ist besser, aber wir müssen auch das Einstellungssymbol ausrichten. Lassen Sie uns zu unserer Spanne gehen, die diesen Abschnitt umschließt, der ganz unten auf die ungeordnete Liste innerhalb der Klassen oder nur auf den großen Bildschirm ist . Wir setzen den Text ausrichten, um links zu bleiben. Gut. Dies ist auf der linken Seite ausgerichtet, aber wenn Sie genau hinsehen, ist dies etwas weiter links als der eigentliche Text. Dies erfordert auch einige Polsterung zu Filmen in Übereinstimmung mit dem Rest des Links direkt oben. Dazu fügen wir einen Polsterungswert von zwei hinzu. Halten Sie dies jetzt im Einklang mit den restlichen Links oben. Ich denke, die Seitenleiste sieht ziemlich gut aus. Das ist alles, was es für diesen Abschnitt tun möchte. Lassen Sie uns nun zum Hauptinhalt von auf der rechten Seite übergehen. Da wir mehr Platz zur Verfügung haben, fangen wir mit etwas Polsterung um diesen ganzen Abschnitt an. Dieser vollständige Abschnitt ist der Hauptabschnitt, also lasst uns hier in die Cluster gehen und die großen Bildschirme mit einem Abstand von vier umschalten . Das sieht ein bisschen besser aus. Das nächste, was zu tun ist, ist, den Avatar in die obere rechte Ecke zu bewegen. Alle Avatar des Benutzers und auch der Name in der Ecke zu sein. Auch der Editor, können wir für diesen Abschnitt suchen. Wir müssen nur in den Hauptabschnitt gehen. Dies ist das erste div ganz oben. Es gibt nicht viel mit diesem Abschnitt zu tun, da wir bereits die Flex-Eigenschaft für diesen Abschnitt festgelegt haben. Alles, was wir tun müssen, ist das Layout für die große Bildschirmansicht zu überschreiben. Wir können dies tun, indem wir Rechtfertigungs-Ende hinzufügen. Lassen Sie uns das in die rechte obere Ecke bewegen. Dies ist das Äquivalent der Sicherheit rechtfertigen Content-Eigenschaft gleich Flex-End zu sein. Nach unten haben wir den Titel Alle Produkte und auch die Schaltflächen, die ich nebeneinander in der gleichen Zeile platzieren werde . Nur ein bisschen weiter unten. Haben Sie unseren Titel auf diesem Container für die Schaltflächen. Dies ist der umgebende div Abschnitt gerade hier. Wie wir bereits mit den Kommentaren gesagt haben, ist dies der Container zur Zeile, die Schaltflächen und auch die Überschrift. Lassen Sie uns einige Klassen innerhalb von hier hinzufügen. Das große Präfix auf und da es bereits die Flex-Box und die Flex-Spalte verwendet, müssen wir nur tun, um dies der Flex-Zeile gleich zu machen. Lassen Sie uns nun diese beiden Elemente in der gleichen Reihe platzieren. Aber wenn man genau hinschaut, ist die Überschrift etwas höher als es sein sollte. Dies liegt an einigen Polsterungen, die wir unten aus der kleinen Bildschirmansicht haben. Für diesen sauberen Ort in einer Überschreibung. Dies ist die ursprüngliche Marge auf der Unterseite, die wir hier haben. Wir müssen dies für die große Bildschirmansicht verschieben, indem Sie dies auf Null setzen. Sparen. Dies behebt die Ausrichtungen, und auch jetzt haben wir etwas mehr Platz auf dem Bildschirm zur Verfügung. Wir können den Text etwas größer machen. Der Text. Lasst uns extra groß gehen. Gut. Schließlich der Abstand zwischen diesen beiden Abschnitten. Da wir auch diese Flexbox für diesen Abschnitt verwenden, platzieren wir den Wert von justify zwischen. So ziemlich habe ich den oberen Abschnitt, wo ich sein wollte. Der nächste Punkt auf unserer Liste ist diese Tabelle. Der Tisch ist nicht allzu weit entfernt von dem, was wir brauchen. Allerdings wäre es schön, die volle Breite des Bildschirms zu sein. Gehen wir zu unserem Tabellenabschnitt, der gerade hier ist, und Tailwind bietet uns eine Klasse namens min-w-full. Machen Sie dies zur minimalen Breite des Bildschirms. Wenn Sie es wollten, könnten wir dies auch hinter der großen Medienabfrage platzieren. Aber da es immer die minimale Breite des Bildschirms auf allen Bildschirmgrößen geben muss, sieht dies auf der kleinen und der großen Bildschirmansicht gut aus. Wir sind jetzt fast da. Der letzte Abschnitt ist diese Anzahl von Produkten und die Links ganz unten. Alles, was ich für diesen Abschnitt tun werde, ist, beide Elemente in derselben Zeile zu platzieren. Gehen Sie zum Ende des Projekts. Dies ist der Wrapper-Abschnitt. Wie einige andere Abschnitte, da es auch die Flexbox und die Flexrichtung der Spalte verwendet, können wir dies in die Flexrichtung der Zeile ändern. Lassen Sie uns auf den gleichen Abschnitt gehen, aber wir müssen immer noch einige Abstände zwischen beiden dieser Elemente hinzufügen. Entfernen Sie auch einige der Standard-Rand, die wir oben auf unseren Links haben. Zuallererst beschäftigen wir uns mit der Marge oben auf unserer ungeordneten Liste, die gerade hier ist. Wir können das außer Kraft setzen. Um Marge Top Null für die große Ansicht zu sein, was bedeutet, alles, was wir jetzt tun müssen, ist, den Raum zu rechtfertigen, um zwischen beiden Elementen zu sein. Wir machen das auf dem Wrapper. Am Ende, kurz nachdem wir die Flex-Zeile auf dem großen Bildschirm Utility von justify zwischen gesetzt haben, und das ist jetzt genau, wie wir es wollen. Dies ist jetzt alles für die große Bildschirmansicht getan. Sie können sehen, wie einfach es ist, ein Layout und einen Inhalt mit nur wenigen Überschreibungen zu ändern. 15. Benutzerdefinierte CSS und Richtlinien verwenden: Sie Tailwind Utility-Klassen haben uns für die meisten Anwendungsfälle abgedeckt. Dies ist ziemlich flexibel, da im Allgemeinen eine Tailwind Utility-Klasse gleich einer CSS-Eigenschaft ist. Was ist, wenn wir auch unsere eigenen hinzufügen wollten? Dies ist auch völlig möglich. Wir können dies tun, indem wir unsere eigenen Stylesheets erstellen. In das Projekt und öffnen Sie die Seitenleiste. Sie dann neben unserer Index-Seite ErstellenSie dann neben unserer Index-Seiteeine neue Datei. Dies ist die custom.css. Stellen Sie sicher, dass dies neben den restlichen Dateien und Ordnern ist. Dann können wir hier jede Klasse als Beispiel hinzufügen. Lassen Sie uns dies die benutzerdefinierte nennen, die die Farbe auf orange gesetzt wird. Dies ist nur normales CSS, wie wir normalerweise schreiben würden, wenn wir Tailwind nicht verwenden, und dies wird die Textfarbe auf orange setzen. Dann, genau wie ein normales HTML- und CSS-Projekt, können wir dies in den Kopfbereich mit einem Link einfügen. Einfach unsere Tailwind CSS Datei blasen und einen neuen Link hinzufügen. Die href ist nur die custom.css Dies sollte jetzt unser Dateilink sein und wir können dies testen. Lassen Sie uns für unsere Ebene 1 Überschrift gehen und fügen Sie die Klasse der benutzerdefinierten. Geben Sie dies ein Speichern und über an den Browser. Jetzt können wir sofort sehen, dass diese benutzerdefinierte orangefarbene Klasse auf unseren Text angewendet hat. Dies funktioniert, und wenn Sie möchten, können Sie mehrere Stylesheets in ein Projekt einbinden. Manchmal haben bestimmte Plug-Ins oder Bibliotheken ein eigenes Stylesheet, das Sie hinzufügen müssen, und Sie können es genau auf diese Weise tun. Oder wenn Sie möchten, anstatt unsere separaten Dateien in der CSS-Datei des Kunden zu haben, könnten wir diese benutzerdefinierten Stile stattdessen in die Tailwind-Datei zusammenführen. Wir können dies mit einem Terminal-Befehl tun. Wenn Sie noch kein Terminal geöffnet haben, wechseln Sie zum Terminal und dann zu einem neuen Terminal in einem Visual Studio Code. Dann werden wir von hier aus einen Tailwind Befehl lernen, der npx tailwindcss ist. Denken Sie daran, dass wir dafür jede Rückenwind CLI verwenden. Was wir als nächstes tun müssen, ist -i und dann den Dateipfad für zwei verschiedene Stylesheets einfügen. Der erste wird sein. /, und dies ist die custom.css. Dies verweist auf unsere benutzerdefinierte CSS-Datei, die wir gerade erstellt haben. Dann verwenden wir -o, gefolgt von dem Dateipfad zu unserem Tailwind CSS. Was dies tun wird, wird dies unsere benutzerdefinierte Datei in die Tailwind Datei zusammenführen , so drücken Sie „Enter“ und wir können diesen Befehl innerhalb des Terminals ausführen. Suchen Sie das hier. Raus zu unserer benutzerdefinierten Datei und wir können immer noch sehen, dass unsere benutzerdefinierte Klasse an Ort und Stelle ist. Wenn wir jedoch zu unserer Datei tailwind.css gehen und nicht zu all den Tausenden von Klassen, die wir zuvor hatten, wird dies alles vollständig entfernt und durch unser benutzerdefiniertes CSS ersetzt. Wir können dies auch sehen, wenn wir zum Browser gehen, wir haben keine der Tailwind Stile. Wir haben nur unsere benutzerdefinierte orange Farbe für die Überschrift. Offensichtlich ist das nicht richtig. Wir brauchen eine Möglichkeit, unsere benutzerdefinierten Stile mit den ursprünglichen Tailwind Klassen zusammenzuführen. Was wir tun müssen, ist zu unserer benutzerdefinierten CSS-Datei zu gehen, und dann andere oben müssen wir Tailwind importieren. Um Tailwind zu importieren, haben wir verschiedene Tailwind Direktiven, die alle mit dem at Symbol beginnen. Wir haben @tailwind, gefolgt von welchem Teil von Tailwind wir importieren möchten. Rückenwind ist in verschiedene Abschnitte unterteilt. Denken Sie daran, dass wir gesagt haben, dass Tailwind eine Reihe von Basisstilen hat, die Dinge wie Resets und Stile enthält, um unsere Website in verschiedenen Browsern konsistenter aussehen zu lassen . Nun, um zu beginnen, können wir diese Basisstile mit Basis importieren. Danach werden wir auch die gleiche Tailwind Direktive einschließen, aber dieses Mal werden wir die Komponenten importieren. Wir werden uns die Komponenten sehr bald ansehen, aber als nächstes gehen wir für die Dienstprogramme, die gleiche Tailwind Direktive, und importieren die Versorgungsklassen. Schließlich können wir die Bildschirme importieren. Screens ist die zusätzlichen Heckwind-Dienstprogramme, die mit diesem Bildschirmpräfix beginnen. Zum Beispiel, wenn wir ein Präfix mit SM für die kleinen Bildschirme beginnen, oder LG für die großen Bildschirme. Screens Direktive ist optional. Wenn wir dies auslassen, wird es automatisch am Ende der Datei hinzugefügt. Wir müssen dies nur wirklich einschließen, wenn wir einen Anwendungsfall für die Neuordnung dieses CSS hatten. Nun, wenn wir zurück zum Terminal gehen und denselben Befehl ausführen, drücken Sie „Up“, es wird eingegeben, um dies auszuführen und dann in unsere Tailwind CSS-Datei, und dann bis zum Ende dieser Datei und wir sehen unsere benutzerdefinierte CSS unten unten. Es gibt nur 800 Zeilen, also dachte ich, wir haben ein Problem hier drinnen. Als unser benutzerdefinierter Stil am Ende haben wir die Bildschirme, diese sollten nur Dienstprogramme sein. Speichern Sie das und da ich einen Rechtschreibfehler gemacht habe, muss ich diesen Befehl auch im Terminal erneut ausführen. Das ist erledigt. Gehen wir zurück zu unserer Tailwind Akte. Sie können sehen, dass wir viel mehr Stile haben, die jetzt mehr im Einklang mit der ursprünglichen Tailwind Datei sind. Bis zum Ende dieser Datei ist unsere benutzerdefinierte Klasse am Ende platziert. Dies wurde in der gleichen Reihenfolge hinzugefügt, in der Sie alle diese in unserer benutzerdefinierten Datei hinzugefügt haben. Dann zurück zum Browser und die Tailwind Stile wurden jetzt erneut angewendet. Wir können auch unsere benutzerdefinierte CSS-Datei entfernen, sie im Browser speichern und unsere orange Farbe wird immer noch gelten, weil sie nicht mit unserem Tailwind CSS zusammengeführt wird. So können wir unsere eigenen benutzerdefinierten Stylesheets erstellen und mit Tailwind einbinden. Als nächstes werden wir weitere Anweisungen entdecken und helfen, unsere Stile zu organisieren. 16. Die @layer- und @apply-Richtlinien: Bisher in der von Tailwind generierten Datei. Unten unten haben wir unsere eigene benutzerdefinierte Klasse hinzugefügt, die erstellt wird. Das alles funktioniert völlig gut und es ist in Ordnung für viele Anwendungsfälle, aber wir fangen an, mit der Reihenfolge der katholischen Rückenwind Gruppen herumzulaufen. Innerhalb unserer benutzerdefinierten Datei hier haben wir all diese Rückenwind Gruppen gerade hier. Das Tailwind CSS wird im [unhörbaren] Ersetzen Sie diese in generiert und dann ist unsere benutzerdefinierte Klasse ganz unten unten. Eine Möglichkeit, die Reihenfolge der generierten Datei zu ändern , besteht darin, unsere Klassen so zu verschieben, damit wir unsere benutzerdefinierte Datei vielleicht knapp unter die Basisstile verschieben können. Wenn wir das speichern und zum Terminal gehen und dann unseren Generate-Befehl erneut ausführen, wird dies dann unsere Tailwind Datei basierend auf dieser neuen Reihenfolge neu generieren. Sobald dies getan ist, wenn wir zur Tailwind-Datei gehen und jetzt anstatt ganz unten zu sein, sehen wir unsere Brauch nicht. Also lassen Sie uns eine Suche machen. Dies ist nun auf Zeile 603 verschoben, die knapp unter all diesen Basisstilen liegt. Dies könnte uns helfen, wenn wir etwas CSS bewegen müssen, vielleicht um Überschreibungen zu vermeiden oder es einfach nur in der Reihenfolge zu platzieren, die Sie möchten. Eine Alternative dazu ist Tailwind bietet auch eine Direktive, um dabei zu helfen, können wir unsere benutzerdefinierte Klasse zuweisen, um mit jedem dieser Überabschnitte gruppiert zu werden. Wenn unsere benutzerdefinierte Klasse auf einem Dienstprogramm einer Komponente basiert oder wir nur einen Basisstil für unser Projekt wollten, könnten wir dies in einer dieser Gruppen zusammenführen. Der Weg, dies zu tun, ist mit der Layer-Direktive, also erstellen wir die Ebene mit dem at Symbol gefolgt vom Namen der Gruppe, in der Sie sie zusammenführen möchten. Lassen Sie uns für eine Basis für dieses Beispiel gehen und öffnen Sie dann eine Reihe von geschweiften Klammern, um unseren benutzerdefinierten Code einzufügen. Wir können unsere benutzerdefinierte Klasse von vorher greifen und dies innerhalb unserer Ebene hinzufügen. Dies kann so viele CSS-Regeln enthalten, wie wir einschließen möchten, so dass wir weitermachen können, indem wir verschiedene Klassen hinzufügen, und diese werden alle zusammengeführt werden. Nein, speichern Sie diese Datei und regenerieren Sie diese erneut in einem Terminal. Das war unsere Tailwind Datei, das ist auf Linie 603 mit unseren Basisstilen. Wenn wir versuchen, dies zu ändern, vielleicht Komponenten dann unsere Terminalbefehle erneut aus. Mal sehen, was passiert, nachdem wir das ausgeführt haben. Sobald dies getan ist und zurück zu unserer Tailwind-Datei, suchen Sie erneut nach einem benutzerdefinierten, und diese wurde jetzt nach unten auf Zeile 637 verschoben, mit den restlichen Komponenten zusammengeführt. Dies ist nützlich, um unsere benutzerdefinierten Klassen neu zu organisieren. Eine weitere nützliche Direktive ist anwendbar und wir verwenden diese, um unsere eigenen wiederverwendbaren Komponenten zu erstellen. Sehen Sie das, lassen Sie uns etwas Bereinigungsarbeit machen. Wir können diesen benutzerdefinierten Abschnitt vor und auch in unserer Indexseite entfernen, lassen Sie uns einen Blick für unsere benutzerdefinierte Klasse werfen. Dies befindet sich nur in der Überschrift der Stufe 1 und die orangefarbene Farbe wurde jetzt entfernt. Zurück zu dieser Anwenden-Direktive und dies wird verwendet, um ein Problem mit der Verwendung von Tailwind zu lösen. Das Problem ist, dass unsere HTML-Datei wirklich mit Daten und vielen verschiedenen Klassennamen gefüllt werden kann . Außerdem duplizieren wir oft die gleichen Klassen auf mehreren Elementen. Ein Beispiel dafür sind alle diese Links in der Seitenleiste. Werfen wir einen Blick auf unser Inventar, und wir heben alle Klassen hier hervor. Wir können sehen, dass wir es mehrmals benutzt haben. Wir haben sie für die Bestellungen verwendet, lassen Sie uns nach unten scrollen, wir haben sie für die Analyse verwendet , für die Kunden, für die Gutscheine, wir haben eine Menge doppelten Code innerhalb von hier. Die angewandte Direktive gibt uns die Möglichkeit, alle HTML-Klassen herauszuziehen und ein wiederverwendbares komponentenähnliches Setup zu erstellen. Der Weg, dies zu tun, wenn wir alle diese Klassen von einem unserer Links kopieren, kopieren Sie diese und gehen Sie dann zu unserer benutzerdefinierten CSS-Datei. Wir können damit beginnen, diesem einen Klassennamen unserer Wahl zu geben, also lasst uns für nav-link gehen. Dies sieht ein bisschen wie ein normales CSS-Setup aber was wir im Inneren tun müssen, ist die appen-Direktive hinzuzufügen. Fügen Sie danach die Dienstprogrammklassen ein, die Sie einschließen möchten, fügen Sie am Ende ein Semikolon und dann unten zu unserem Terminal, führen Sie den gleichen Befehl erneut aus, geben Sie diesem ein paar Sekunden zum Ausführen und dies sollte dies in unsere Tailwind Akte. Lassen Sie uns unsere nav-Link über in unsere Tailwind Datei kopieren, Befehl oder Kontrolle F2 Suchdatei Datei, fügen Sie diese in, und jetzt haben Sie unseren nav-Link unten unten. Wir haben den Grenzradius, wir sehen können , wenn wir hier in unsere Sektion gehen. Dies ist der abgerundete Abschnitt, wir haben Polsterung, wir haben Textfarben, und wir haben auch diese Hover-Effekte. Wir können innerhalb unserer Tailwind Datei sehen, dass diese Hover-Effekte als unsere Polsterung generiert wurden, als unsere Farben und auch die Farbe für den Hover-Effekt auch. Nun, was wir tun können, ist zu unserer Indexseite zu gehen und anstatt alle diese Klassen eingefügt zu haben, können wir dann unsere benutzerdefinierte Klasse verwenden, die wir gerade erstellt haben, die nav-Link war, und dann können wir dies anstelle aller der Rest der Klassen knapp darüber. Die Analysen, die Kunden, das Inventar, die Aufträge. Achten Sie darauf, dies nicht zu den Spannelementen hinzuzufügen und wir haben die Produkte. Ich denke, das sind alle Abschnitte, die wir ersetzen müssen und jetzt, wenn wir dies speichern und zum Projekt zurückkehren, stellen Sie sicher, dass der Browser neu geladen wird und alle gleichen Klassen noch gelten. Wir können dies bestätigen, wenn wir den nav-Link von einem dieser Elemente entfernen und dies hat nun das CSS entfernt. Lassen Sie uns dies einfach wiederherstellen und um dies zu reorganisieren, können wir dies auch in die Komponentengruppe hinzufügen, indem wir es in die Layer-Direktive umgeben. Genau wie wir uns vorher angesehen haben, gehen Sie zu unserer benutzerdefinierten Datei und setzen Sie dann unseren Platz, unseren Abschnitt von vorher, fügen Sie die Layer-Direktive hinzu, und wir werden dies innerhalb unserer Komponenten platzieren, schauen Sie sich die Klammern und dann können wir den vollständigen Abschnitt von vor zurück nach innen einfügen. Runter zum Terminal, führen Sie den Befehl Rebellen aus. Lassen Sie uns dies im Browser testen, aktualisieren. Wir sollten keine Änderungen sehen, da alles, was wir getan haben, ist, dies in den Komponentenabschnitt der Tailwind CSS-Datei zu verschieben . 17. Screenreader-Programme: Willkommen zurück. Dieses Video wird einen Blick auf ein paar nützliche Bildschirmleseprogramme werfen. Ich befinde mich momentan in der Tailwind Dokumentation und im Screen Reader-Bereich , den Sie auch unter Barrierefreiheit finden können. Bildschirmlesegeräte sind wichtig für die Barrierefreiheit und sie lesen alle Inhalte unserer Webseite, sehbehinderte Benutzer. Wenn also ein Nutzer sehbehindert ist und er unsere Website nicht wie beabsichtigt sehen kann, kann er einen Screenreader verwenden, um den Inhalt auszulesen. Wir haben zwei Screenreader Utility-Klassen, die Tailwind bietet. Die erste ist nur SR, und SR nur erhöhtes Element aus der Sicht. Aber es bleibt immer noch an Ort und Stelle, damit ein Bildschirmlesegerät den Inhalt auslesen kann. Wir können dann nicht nur SR verwenden und dieser wird im Grunde rückgängig machen, was wir gerade versteckt und wieder im Browser installiert haben. Also auf dem Projekt, wir werden einen Blick darauf werfen, wie dies innerhalb der Tabelle zu tun, lockig innerhalb unserer Zeilen, wir haben diese Schaltfläche Bearbeiten am Ende. Also brauchen wir vielleicht auch diesen Editier-Titel an der Spitze nicht. Dies liegt daran, dass für einen nicht sehbehinderten Benutzer diese Bearbeiten-Schaltflächen wahrscheinlich ausreichen, um ihnen mitzuteilen, was zu tun ist. Was wir tun können, ist, diese Überschrift oben zu verbergen, aber immer noch erlauben, eine Bildschirmlesegerät auszulesen, wenn nötig. Lassen Sie uns dies tun, indem Sie unseren Tisch suchen. Gehen Sie zum gewünschten Abschnitt und innerhalb des Tabellenkopfes, wir müssen bis zum Ende dieses Abschnitts gehen, um unseren Text zu bearbeiten nur hier zu finden. Innerhalb der Cluster können wir die SR latch-only Klasse verwenden. Speichern Sie diese und diese Überschrift wird jetzt nicht angezeigt, aber sie wird immer noch von Bildschirmlesegeräten ausgelesen. Denken Sie daran, dass wir auch die Nicht SR nur Klasse 2 haben, die dies rückgängig machen wird. Dies kann auch verwendet werden, um Inhalte auf verschiedenen Bildschirmgrößen ein- und auszublenden, aber wir brauchen dies nicht für unseren Anwendungsfall. Dies ist nur eine kleine Änderung, aber es könnte wirklich nützlich in Ihrer Website sein, wenn wir einen Abschnitt haben, den wir verstecken müssen, werden wir immer noch an Ort und Stelle für Bildschirmlesegeräte halten. 18. Bereitstellung: Sobald wir unsere Websites fertig sind und wir mit dem Inhalt zufrieden sind, können wir die Website dann mithilfe eines Dienstes wie Netlify bereitstellen. Wenn Sie möchten, können Sie weitere Änderungen und Anpassungen an diesem Projekt vornehmen. Zuerst werde ich es einfach so lassen, wie es ist. Netlify macht es wirklich einfach, unsere Projekte live im Internet zu machen. Um es zu benutzen, gehen Sie zu netlify.com, es ist kostenlos zu verwenden. Wenn Sie es noch nicht verwendet haben, müssen Sie fortfahren und ein neues kostenloses Konto mit diesem Anmelde-Link oben erstellen . Sobald Sie sich eingeloggt haben, werden Sie in einen Admin-Bereich geleitet , der genau so aussehen sollte. Wenn Sie eine aktuelle Website haben, die wir in der Vergangenheit verwendet haben, wird dies über diesen Link über die Spitze verfügbar sein. Um eine neue Website zu Netlify hinzuzufügen, haben wir ein paar verschiedene Optionen. Wenn Sie GitHub verwenden, können Sie diese Schaltfläche oben verwenden und diese mit Ihrem Repository verknüpfen. Dies hat den Vorteil, dass es automatisch jedes Mal aktualisiert wird , wenn wir Änderungen an diesem Repository Push. Oder eine wirklich einfache Möglichkeit, wenn Sie kein Repository-Setup haben , besteht darin, einfach über unseren Projektordner zu ziehen. Dies wird weiter gehen und bauen unsere Websites und dann geben Sie uns einen Link oben , auf den wir klicken können, um innerhalb einer neuen Registerkarte zu öffnen. Öffnet sich. Dies wird uns einen Live-Website-Link geben, den wir mit Freunden und Familie teilen können. Sie können sehen, wie schnell und einfach es ist, Ihre Website mithilfe von Netlify bereitzustellen. Wir können auch diese URL ändern. Wenn wir in die Domain-Einstellungen gehen, klicken Sie auf die „Optionen“, wir können unseren Website-Namen bearbeiten, sagen wir Mein Super-Projekt, und dann können wir dies speichern. Jetzt können wir darauf klicken, öffnen Sie dies in einem neuen Tab. Dies wird auch auf unser Projekt hinweisen. Wenn Sie eine benutzerdefinierte Domain verwenden möchten, damit wir die Netlify-App nicht ganz am Ende haben, können Sie auch die Schritte ausführen, um dies mit der Schaltfläche Benutzerdefinierte Domäne hinzufügen zu tun. Das war's. So einfach ist es, eine statische Site mithilfe von Netlify bereitzustellen.