Einsteiger Bootstrap 4: Schnell schöne interaktive Webseiten programmieren

1. Einführung: Beim Erstellen von Websites oder Anwendungen ist Bootstrap eines jener Tools, die wirklich helfen können, nicht nur Anfänger, sondern auch Entwickler aller Geschicklichkeitsstufen, um wirklich schnell aufzustehen und zu laufen. Wir haben nur ein wenig CSS und HTML gekannt. Sie können wirklich ein erstaunlich aussehendes Projekt erstellen indem Sie einfach einige einfache Klassen zu Ihrem HTML hinzufügen. Nicht nur werden Ihre Websites gut aussehen, es wird auch voll reaktionsfähig sein, was bedeutet, dass es für alle verschiedenen Bildschirmgrößen optimiert wird. Wer bin ich? Mein Name ist Chris und ich bin Webentwickler und ich bin seit 20 Jahren mit dem Aufbau von Websites beschäftigt. Ich lehre diese Fähigkeiten auch seit über fünf Jahren und engagiere mich aktiv mit Bootstrap seit den frühen Versionen. Bootstrap ist ein großartiges Tool für Anfänger, die den Boden laufen wollen, so dass Sie eine gut aussehende Websites, die auch wirklich anpassbar sind zu bauen . Bootstrap ist nicht nur über das Aussehen und Feel jetzt, wir können auch Funktionen wie Drop-Down-Menüs, Bild-Karussells, auch die Möglichkeit, Inhalte ein- und auszublenden und vieles mehr hinzufügen , ohne etwas über JavaScript wissen zu müssen. In diesem Kurs lernen Sie alle wichtigen Konzepte kennen, die für die Verwendung von Bootstrap benötigt werden. Wir beginnen mit der Entscheidung für Ihren Projekt-Strahl. So können wir etwas bauen, das ganz auf Sie zugeschnitten ist und Ihre Hobbys oder Interessen widerspiegelt. Dann gehen Sie zu Blick auf alle wesentlichen Funktionen von Bootstrap, die das Grid-System, Haltepunkte, Dienstprogramme, Komponenten und die Arbeit mit Bibliotheken von Drittanbietern, die Add-Icons. Sie müssen kein Experte in HTML, CSS oder JavaScript sein , um loszulegen. Alles, was Sie brauchen, ist ein grundlegendes Verständnis von HTML und CSS, um loszulegen. Am Ende dieser Klasse haben Sie alle Fähigkeiten und Kenntnisse, die Sie benötigen, um großartig aussehende und reaktionsschnelle Websites zu erstellen. Vielen Dank für Ihr Interesse und lasst uns mit diesem Kurs beginnen. 2. Warum sollte man Bootstrap verwenden?: Vielleicht haben Sie diesen Kurs genommen und nicht 100 Prozent sicher, was Bootstrap ist. Oder vielleicht haben Sie schon einmal davon gehört, verstehen aber nicht vollständig, welche Rolle es in einem Webprojekt spielt. Nun, ich werde Ihnen jetzt einen Überblick geben, was Bootstrap tun kann. Wir werden im Moment nicht zu tief gehen, da ich denke, dass einige Dinge besser demonstriert werden, wenn wir gehen. Aber wir können wenigstens ein grundlegendes Verständnis bekommen. Wenn wir mit etwas Neuem beginnen, wollen wir im Allgemeinen zuerst wissen, was genau ist es und wie kann es unseren Projekten zugute kommen? Mit Bootstrap, das derzeit auf Version vier ist. Sie können sich dies als Toolkit zum Erstellen von HTML-, CSS- und JavaScript-Projekten vorstellen . Wir können Websites und Anwendungen mit unseren vorhandenen HTML- und CSS-Fähigkeiten erstellen. In der Tat müssen wir JavaScript nicht einmal im Voraus kennen , um zu beginnen und die Vorteile der Bootstrap-Funktionen zu nutzen. Mit Bootstrap müssen wir keine neue Programmiersprache lernen. Es ist kein kompliziertes Framework oder so etwas. Es baut einfach auf unseren vorhandenen Fähigkeiten auf und fügt einige nette Funktionen hinzu, in der Regel durch Hinzufügen einiger CSS-Klassen. So könnten wir uns Bootstrap als eine helfende Hand für unsere Websites oder Anwendungen vorstellen. Wir können es einfach in unsere Projekte legen und wir werden sehr bald herausfinden, wie das geht. Ein weiteres großartiges Feature von Bootstrap ist, dass es standardmäßig voll reaktionsfähig ist. Das bedeutet, dass es auf allen Bildschirmgrößen gut aussehen wird. Wenn wir also ein kleines Gerät in mobiler Größe verwenden, wie wir hier sehen, werden wir den Inhalt in der Regel von oben nach unten oder vertikal auf der vollen Breite des Bildschirms gestapelt haben. Sobald wir mehr Platz auf dem Bildschirm haben, wie ein Tablet oder einen Desktop, können wir den Inhalt nebeneinander gestapelt haben, da Sie mehr verfügbare Breite haben. Ein weiteres großartiges Feature von Bootstrap ist es uns erlaubt, mit einer viel schnelleren Geschwindigkeit zu entwickeln. Es tut dies, indem wir uns mit einer Basis CSS und JavaScript, die wir in unser Projekt fallen und als einen guten Ausgangspunkt verwenden können. Das Basis-CSS bietet einige sinnvolle Standardwerte, die wir benötigen, wie einige Abstände, einige Füllstände und Ränder und einige Standardfarben und Schriftarten. Alles, was wir von den Basis-CSS- und JavaScript-Dateien verwenden , kann auch vollständig angepasst werden. Dies liegt daran, dass wir nicht wollen, dass jedes einzelne Bootstrap-Projekt, das wir erstellen oder auch andere Leute erstellen, genau gleich aussieht. Bootstrap gibt uns also die Flexibilität, jeden einzelnen Stil oder jede Klasse, die wir für unser Projekt anwenden, zu modifizieren und es komplett zu unserem eigenen zu machen. Eine weitere gute Sache an Bootstrap ist, dass es anfängerfreundlich ist. Alles, was wir im Voraus wissen müssen, ist ein grundlegendes HTML und CSS. Wir können dann nach und nach Bootstrap in unser Projekt implementieren, wenn wir es brauchen. In der Tat müssen wir kein JavaScript kennen, um mit Bootstrap, dem Mobile First Styling in zu beginnen , und Dinge wie ein Dropdown-Menü, Karussells , Modals oder Fortschrittsspinner sind alle wirklich einfach in unser Projekt hinzuzufügen . Wir müssen kein JavaScript kennen, bevor wir es verwenden. Dies ist also ein grundlegender Überblick darüber, was Bootstrap ist. Natürlich wird viel tiefer in diesem Kurs tauchen. Ich bin derzeit auf der Bootstrap-Homepage, die getbootstrap.com ist. Innerhalb der Navigationsleiste oben, können wir sehen, dass wir derzeit auf Version vier sind und es gibt auch Verweise auf Version zwei und drei. Mit Version drei wird noch immer aktiv gepflegt und an vielen Orten verwendet. Aber für diesen Kurs werden wir uns auf Version vier konzentrieren. Wenn Sie jedoch eine Hauptversion kennen, um ehrlich zu sein, ist es nicht allzu schwierig, eine neuere Version zu verwenden, wenn Sie an einem älteren Projekt arbeiten müssen. Die meisten Kernkonzepte sind die gleichen und die Dokumentation ist auch ziemlich gut. Auch in der Navigation befindet sich ein Beispiellink. Wenn wir hier gehen, können wir viele Beispiele sehen, wie ein Album, Preise, eine Kasse Seite, eine Produktseite und ein Karussell zum Beispiel, und wenn wir die Vorteile einer dieser Starter-Vorlagen, Alles, was wir tun müssen, ist auf das Beispiel zu klicken. Wir können dann mit der rechten Maustaste klicken und dann auf Seitenquelle anzeigen gehen und dies wird in einer neuen Registerkarte geöffnet. Wir können dann den ganzen Code von hier abrufen, indem wir kopieren und einfügen und diesen in unser eigenes Projekt übernehmen. Dies ist ein nützlicher Starter für viele Arten von Seiten und Sie können auch frei bearbeiten, wie erforderlich. Wenn wir zurück zu den Vorlagen gehen, können wir ein Beispiel für einige der Bootstrap-Komponenten sehen. Wir haben eine Top-Navigation mit unseren Links und auch unser Suchfeld oben. Dies ist eine vorgefertigte Komponenten mit Bootstrap und es gibt auch viele unserer Sorten. Darunter haben wir ein rotierendes Karussell, wo wir verschiedene Bilder und auch Text hinzufügen können. Wir können zwischen ihnen mit diesen linken und rechten Tasten scrollen. Auf der vorherigen Seite zeigt viele Beispiele, was Bootstrap tun kann. Ich werde auch viele dieser Komponenten verwenden, während wir durch den Kurs gehen. Dies ist also ein visueller Blick darauf, was Bootstrap tun kann. Aber wie funktioniert Bootstrap? Wir beginnen mit regulärem HTML. Es gibt also keine neuen Sprachen oder Fähigkeiten zu lernen. meiste davon ist nur ein Fall, einige CSS-Klassen hinzuzufügen. Hier auf dieser Folie ist nur eine normale HTML-ungeordnete Liste mit einigen Listenelementen im Inneren. Selbst bei der Verwendung von Bootstrap beginnen wir mit dem gleichen regulären HTML. Unten unten sehen wir, was im Browser standardmäßig durch diesen HTML-Code angezeigt wird. Wir haben fünf Listenelemente, die ziemlich schlicht aussehen und mit einigen Aufzählungszeichen für jeden Artikel. Hier ist der gleiche HTML-Code. Aber dieses Mal, wenn einige Bootstrap-Klassen hinzugefügt wurden, hat die ungeordnete Liste zwei Klassen von list-group und list-group-flush zusammen mit den Listenelementen, die eine Klasse von list-group-item haben. Wieder sehen wir unten, was die Ausgabe im Browser sein wird. Das sieht sofort besser aus. Wir haben einige schöne Abstände, eine Linie dazwischen, und auch die Kugeln werden entfernt. Dies ist jedoch nur ein Ausgangspunkt, wenn wir also etwas über das Design nicht mögen, können wir immer noch alle Teile davon mit unserem eigenen benutzerdefinierten Styling überschreiben. Bootstrap bringt uns nur mit einigen Standardstilen und Best Practices in Gang, die in der Regel auf allen Bildschirmgrößen gut aussehen. Aber was machen diese Klassen genau? Nun, die Antwort ist überhaupt nichts Besonderes. Genau wie wenn wir eine Klasse von uns selbst schreiben, zeigt dies nur auf einen CSS-Code. Unten links auf dieser Folie befindet sich das Bootstrap CSS oder die list-group-item Klasse. Es fügen Sie nur einige Werte für die Position, die Anzeige, Hinzufügen, Hintergrundfarbe und Rahmen. Auch hier können wir immer alles überschreiben, was uns nicht gefällt. Wir sehen auch die Wirkung, die Bootstrap hat, dies ist die endgültige Version meines Projekts. Wenn wir mit der rechten Maustaste klicken und inspizieren, wird dies die Entwickler-Tools öffnen. Wir können sehen, wenn wir den Browser dehnen und ihn auch verkleinern. Das ohne die Box Bootstrap ist voll reaktionsschnell. Wenn wir jedoch in den Kopfbereich gehen und den Link zum Bootstrap CSS entfernen. Ich werde dieses Element löschen. Wir können sofort sehen, dass Bootstrap entfernt wird, wir verlieren das gesamte Styling und Layout und auch die Reaktionsfähigkeit, die mit Bootstrap kommt, und wenn wir neu laden, können wir sehen, dass Bootstrap jetzt erneut angewendet wird. Das ist also, was Bootstrap ist und warum wir es verwenden. Als nächstes werden wir mit unserem Projekt beginnen, indem Sie Ihr Thema auswählen. 3. Dein Projektthema auswählen: Dieses Projekt deckt viele der wesentlichen Funktionen und Komponenten ab, die Bootstrap zu bieten hat , wie Navigationsleisten, Listen, Formulare , Karten, Bilder und vieles mehr, während wir uns mit dem Bootstrap Grid System auseinandersetzen und wie wir legen Sie unsere Inhalte so an, dass sie vollständig reaktionsfähig sind und auf allen Bildschirmgrößen gut aussehen. Dies ist also die Homepage für die endgültige Version, die ich einbauen werde. Oben oben haben wir auch eine Preisseite, die Bootstrap-Karten nutzen wird, zusammen mit einer Kontaktseite, um zu entdecken, wie wir Formulare in Bootstrap verwenden können. Dies ist nur meine Version der Website. Sie können entweder mit genau dem gleichen Projekt folgen, das ich baue, was vollkommen in Ordnung ist, wenn Sie nur lernen wollen, was Bootstrap zu bieten hat, oder stattdessen, wenn Sie eine bestimmte Idee haben oder sich einfach ein wenig kreativ fühlen, Sie können das Thema komplett ändern und es zu Ihrem eigenen machen, wie wir gehen. Alles, was Sie zusätzlich zu Ihren Ideen benötigen, sind einige Bilder zu verwenden. Wenn wir nach unten zu dem Abschnitt scrollen, hier jetzt die vier Bilder, die ich verwenden werde. Diese wurden auch für diesen Kurs zur Verfügung gestellt. Wenn Sie Ihr eigenes Design oder Design auswählen, können Sie auch voran gehen und einige Bilder finden, die Sie verwenden möchten, um diese vier zu ersetzen. Wenn wir nach oben scrollen, haben wir auch einige Symbole in einem Abschnitt und diese werden von der Font Awesome Icon-Bibliothek zur Verfügung gestellt, die wir bald hinzufügen werden. Sie können diese Symbole auch ganz einfach in jedes dieser Symbole ändern, das Ihren Projekten entspricht. Sie können auch alles andere auf dieser Website ändern, indem Sie eine andere Komponente oder ein anderes Dienstprogramm verwenden, und wir werden uns ansehen, wie dies bald zu tun ist. Sobald Sie also Ihr Thema ausgewählt haben und irgendwelche Bilder haben, die Sie verwenden möchten, können wir dann zum nächsten Video übergehen , wo wir beginnen, ein Bootstrap in unserem Texteditor zu setzen. 4. Ein Bootstrap-4-Projekt einrichten: Wie bei allen Website-Projekten benötigen Sie einen Texteditor, um loszulegen. Ich werde Visual Studio Code verwenden, ein großartiger Editor ist und den, den ich täglich verwende. Es steht zum Download für Mac, Windows und Linux zur Verfügung und ist auch kostenlos zu verwenden. Sie können es von diesem Link hier herunterladen, wenn Sie benötigen , oder Sie können eine der Alternativen verwenden, wenn Sie es bevorzugen. Um mit Bootstrap in unser Projekt zu beginnen, gibt es verschiedene Möglichkeiten, die wir verschmelzen können. Wir haben ein CDN, wir können Dateien innerhalb unserer Projekte selbst hosten, oder wir können einen Paketmanager wie Garn oder mpm verwenden. Dies ist wahrscheinlich der Weg zu gehen, wenn Sie ein Knotenprojekt oder Ruby on Rails verwenden, oder etwas, das einen Paketmanager nutzt. Dies wird jedoch nicht etwas sein, das wir in diesem Anfangskurs abdecken werden. Stattdessen konzentrieren wir uns auf die CDN-Option, die für Content Delivery Network steht. Bootstrap hat uns dafür abgedeckt, dies wirklich einfach zu verwenden. Es Provider auf der Bootstrap-Website mit einem Link für das JavaScript und die CSS-Dateien, die wir ganz einfach in unser Projekt einfügen können. Es hat verschiedene Vorteile für unsere Endbenutzer, vor allem in Bezug auf Geschwindigkeit. Da das Bootstrap CDN in verschiedenen Rechenzentren auf der ganzen Welt befindet. Dies bedeutet, dass unsere Dateien und Ordner schneller für den Endbenutzer bereitgestellt werden , da mehr als wahrscheinlich ein Rechenzentrum irgendwo in der Nähe sein wird. Dies hat auch den Vorteil, dass das Rechenzentrum kann auch eine zwischengespeicherte Version der Dateien zu haben , was zu einer noch schnelleren und Leistung führt. Mehrere Rechenzentren bedeuten auch, dass unsere Dateien im Allgemeinen mehr verfügbar sind, da bei einem Ausfall eines Rechenzentrums mehrere Speicherorte zum Zurückgreifen vorhanden sind. Content-Delivery Provider werden auch oft einige Sicherheitsmaßnahmen hinzufügen, zusammen mit möglicherweise auch einige Lastausgleich für hochleistungsfähige Websites hinzufügen. Eine andere Möglichkeit ist es, selbst gehostet zu werden. Dies bedeutet im Grunde, dass wir eine Kopie aller benötigten Bootstrap JavaScript- und CSS-Dateien herunterladen . Dann können wir sie in unserem eigenen Projekt aufnehmen. Wir tun dies genauso wie mit anderen JavaScript- oder CSS-Dateien, wir laden sie herunter, fügen sie in unser Projektverzeichnis und verknüpfen sie dann innerhalb unserer HTML-Dateien. Dies hat den Vorteil, dass wir die volle Kontrolle unsere Dateien und Ordner haben und wie wir sie strukturieren möchten, wo wir sie speichern und in unseren eigenen Rechenzentren oder Diensten speichern möchten. Dies ist ein wirklich schneller und einfacher Weg, um zu beginnen. Bootstrap bietet dies auch als einfache Download-Verwendung, um innerhalb unserer Projekte zu fallen. Ein weiterer Vorteil ist auch, wenn unsere Anwendung offline verwendet werden soll, haben wir immer noch Zugriff auf diese Dateien, wenn wir sie brauchen. Zurück auf der Bootstrap-Homepage, die Bootstrapped.com erhalten wird. Ich werde jetzt mit Bootstrap beginnen, indem ich auf den Link „Dokumentation“ klicke, in die Navigation und dann bis zum Abschnitt „Einführung“. Dieser Schnellstart beinhaltet die CDN-Links sowohl für die CSS als auch für die JavaScript-Dateien, die benötigt werden. Alternativ können wir Bootstrap auch selbst herunterladen und auch in unser Projekt einfügen, genau wie wir es vorher nachgeschaut haben. Dazu gehören die CSS- und JavaScript-Dateien, platzieren sie in unseren Projektordner und verknüpfen sie dann mit netten Style- und Skript-Tags , so wie wir es tun würden, wenn wir es mit unseren eigenen CSS- und JavaScript-Dateien verknüpfen würden. Es wird nur eine CSS-Datei benötigt, aber wie Sie sehen können, gibt es drei verschiedene JavaScript-Dateien, die wir einschließen müssen. Bootstrap verwendet JavaScript für bestimmte Komponenten und wenn Sie auf dieses Dropdown-Menü klicken, das gerade hier ist, können wir genau sehen, welche Komponenten diese JavaScript-Dateien benötigen. Dadurch können wir bestimmte JavaScript-Dateien auslassen , wenn wir keine dieser Komponenten hier verwenden, können wir nun alle Dateien einschließen. Irgendwie volle Nutzung aller Komponenten. Wir können unsere eigene Index-Seite erstellen und über alle diese Links kopieren oder wenn wir nach unten scrollen, können wir die gestartete Vorlage von unten kopieren. Klicken Sie also auf diese. Dies ist nur eine grundlegende Index-Seite, wo wir unsere Links zu unserem CSS und auch unsere kostenlose letzte erstaunte unten unten unser JavaScript enthalten. Also werden wir einfach kopiert. Ich gehe jetzt auf den Desktop und erstelle einen neuen Ordner für alle Projekte und natürlich können Sie diesen überall auf Ihrem System speichern. Ich werde mein Projekt „Bootstrap Productivity“ nennen. Öffnen Sie es dann in Visual Studio Code, indem Sie über den Ordner ziehen. Die erste Datei, die wir brauchen, wird unsere index.html sein. Lassen Sie uns einen neuen Dateinamen erstellen diese index.html und dann können wir in diesen Daten von vor einfügen. Das erste, was wir tun möchten, ist, den Titel auf Bootstrap Produktivität oder den Titel Ihrer Wahl zu ändern Bootstrap Produktivität oder den Titel und dann können wir dies innerhalb des Browsers öffnen. Die Art und Weise, wie wir dies tun können, ist entweder in unseren Projektordner zu gehen und doppelklicken Sie auf die Indexseite oder in Visual Studio Code, wir können mit der rechten Maustaste auf den Titel klicken und dann auf „ Pfad kopieren“ gehen und dann als neue Registerkarte in den Browser einfügen. Alles, was wir hier haben, ist eine reguläre HTML-Überschrift setzen unser Projekt ist jetzt eingerichtet und bereit zu gehen. Im nächsten Video, wo wir entdecken, wie Bootstrap Container und Zeilen verwendet. 5. Container und Breakpoints: Bevor wir uns Container und Zeilen ansehen, möchte ich sicherstellen, dass Sie Haltepunkte verstehen und wie sie das Layout und das Styling für Geräte unterschiedlicher Größe ändern können. Dies wird nicht nur wichtig sein, um Bootstrap zu lernen, sondern auch, um die Container zu verstehen, die wir betrachten werden. Sehen Sie sie in Aktion, wir können auf die Bootstrap-Homepage gehen, die wir hier geöffnet haben, und dann den Browser auf eine kleine Breite reduzieren. Simulieren Sie, wie die Website auf einem kleinen mobilen Gerät aussehen würde. Wie wir hier sehen, ist der Inhalt in der Regel vertikal gestapelt. Nur Abschnitte nehmen die volle Breite des Bildschirms ein. Wenn wir jedoch voran gehen und den Browser ein wenig breiter machen und so ändert sich der Inhalt, genau wie wir sie dort haben, wird dieser plötzliche Sprung in den Inhalt als Breakpoints bezeichnet. Ein Teil der Inhalte, die wir sehen, ist jetzt Seite an Seite. Wir haben den Text auf der linken Seite, auf dem Symbol auf der rechten Seite, haben jetzt mehr verfügbaren Bildschirmplatz. Wenn wir den Browser noch weiter dehnen, simulieren Sie eine Desktop-Ansicht. und wieder werden wir einen Sprung in den Inhalt sehen und diese Haltepunkte ermöglichen es uns, verschiedene Styling und Layout auf verschiedene Bildschirmgeräte anzuwenden. Breakpoints werden in CSS mit einer Medienabfrage erstellt. Eine Medienabfrage ist im Grunde eine Möglichkeit, CSS-Regeln zusammenzufassen. Bootstrap wendet dann diese Styling-Regeln an, wenn der Browser eine bestimmte Breite hat. Bootstrap nimmt auch einen mobilen ersten Ansatz, was bedeutet, dass es in der Regel für kleine Bildschirme zuerst konzipiert ist. Wir können dann die CSS-Regeln ändern, wenn die Gerätebreite zunimmt. Bootstrap hat auch Übergrößen, auf die es als Haltepunkte verwendet , und es diese Standard-Haltepunkte machen Bootstrap reaktionsschnell aus der Box. Wie wir hier sehen können, wird Bootstrap CSS-Regeln für verschiedene Geräte anwenden , da sie eine Mindestbreite von 576 Pixeln, 768, 992 und 1200 Pixeln und höher werden. Wir sind auch frei, Antodies oder erstellen unsere eigenen Breakpoints Größen zu. Beachten Sie, dass es keine Medienabfrage für die Gerätegrößen von Null bis 576 Pixel gibt. Diese Größe ist nicht erforderlich, da dies sowieso der Bootstraps Standard ist und wir dann mit größeren Medienabfragen darauf aufbauen können, daher der Name mobile zuerst. Das Verständnis dieser Haltepunkte wird uns auch helfen zu verstehen, dass das Grid-System, das wir verwenden werden, beginnend mit Containern. Als eine Anforderung, wenn es mit Gittern verwendet wird, fügen wir einen Inhalt innerhalb eines Containers hinzu. Ein Container kann ein beliebiges HTML-Element wie ein div oder ein Abschnitt sein, würde es aber Container-Klasse nennen. Wir können diesen Container als Haupt-Wrapper verwenden, so dass wir den Inhalt im Inneren steuern können, indem wir Dinge wie Padding und Alignment hinzufügen. Bei der Arbeit mit Bootstrap Version vier gibt es drei verschiedene Arten von Containern, die wir verwenden können. Wir können einen Container als Klassennamen zu jedem HTML-Element wie einem umgebenden div oder einem Abschnitt-Tag hinzufügen . Der erste Klassenname, den wir betrachten werden, ist einfach Container, und ein Container wird verwendet, um einen Wrapper mit fester Breite zu unserem Inhalt hinzuzufügen. Zum Beispiel, wenn wir eine Webseite haben, die so aussieht, würden wir in der Regel unsere Webseite in mehrere Abschnitte aufteilen wollen, so dass wir vielleicht einen Header-Abschnitt oben und dann einige Inhaltsaktionen direkt darunter wollen. Wir verwenden die Container-Klasse, um eine feste Breite für alle Inhalte hinzuzufügen, genau wie wir hier sehen. Auf dieser festen Breite ist abhängig von den aktuellen Haltepunkten, so dass einige Leerräume auf der linken und rechten Seite. Wenn wir nun jedoch einen Container hinzufügen wollten, der die volle Breite der Seite hat, würden wir dann eine Klasse namens Container-Fluid verwenden, also ist dies ein Container-Fluid. Dann, unabhängig von der Bildschirmgröße, wenn es sich um ein mobiles Gerät oder einen Desktop oder ein Tablet handelte, würde der Container immer die volle Breite des Bildschirms sich auf alle grünen Größen auf 100 Prozent dehnen. Es gibt auch einen dritten Typ von Container, den wir auch in Bootstrap verwenden können, und dies ist eine Mischung zwischen diesen beiden. Wir können dies tun, indem wir eine Container-Klasse mit einem Haltepunkt kombiniert hinzufügen, so dass wir Container und dann Bindestrich haben, und dann werden wir einen Haltepunkt wie sm oder md hinzufügen. Zum Beispiel würde mit container-md eine Webseite wie zuvor haben. Für die kleinste verfügbare Bildschirmgröße, d. h. Zugriff, wäre der Container 100 Prozent der Gesamtbreite. Grundsätzlich würde es zunächst so aussehen wie dieses hier, es wäre die volle Breite. Sobald der Bildschirm die mittleren Gerätehaltepunkte getroffen hat, würde er sich dann ändern, um auf beiden Seiten Platz zu haben, so dass es wie der normale Container aussehen würde. So funktionieren Container theoretisch, und jetzt werden wir einen Blick darauf werfen, wie wir diese zu unseren Projekten hinzufügen können. Wenn wir zurück in unseren Texteditor gehen, wo wir unsere Indexseite einrichten, werde ich die Ebene 1 Überschrift von Hallo, Welt löschen und dann einige anfängliche Inhalte hinzufügen, mit denen zu arbeiten. Ich werde einen Abschnitt als unseren Wrapper hinzufügen. Hier können wir eine Überschrift der Ebene eins hinzufügen und ich werde der Liste sagen, dass sie der Inhalt für meine endgültige Version sein soll. Der Text werde ich die Rundum-Produktivitätslösung hinzufügen und, natürlich, Sie können es ändern, um Ihre speziellen Projekte. Dann werde ich unten einen Text der Rückgewinn-Kontrolle mit unseren effektiven Tools hinzufügen, in einer einfach zu bedienenden, anpassbaren Benutzeroberfläche. Schließlich können wir diesen Abschnitt mit einem Link zu einer Schaltfläche „Erste Schritte“ beenden. Wenn wir nun dieser Datei ein Speichern geben und gehen über zum Projekt im Browser, wenn wir neu laden, können wir jetzt den Inhalt sehen, den wir einfach hinzufügen können. Das erste, was ich tun werde, ist, einen Container zu unserem Wrapper-Abschnitt hinzuzufügen , und wir können dies tun, indem wir eine reguläre Klasse hinzufügen. Der Klassenname ist eine warme, die auf unsere Bootstrap CSS verlinkt, und dies ist der Klassenname des Containers. Wenn wir dieser Datei ein Speichern geben und dies nun im Browser durch Neuladen auschecken, haben wir immer noch den Text, der vorher hinzugefügt wurde, aber es ist schwierig zu sehen, welche Wirkung der Container im Moment hat, also werde ich einen Temporäre Hintergrundfarbe. Wir können dies wieder mit einer Bootstrap-Klasse von bg-dark tun, und dies wird uns eine dunkle Hintergrundfarbe geben. Dieser dunkle Hintergrund gibt uns die Möglichkeit, den Hintergrundcontainer genauer zu sehen. Wir sehen auf der linken und rechten Seite haben wir dieses weiße Tempo, so dass dieser Behälter eine feste Breite hat. Wenn wir den Browser nach unten verkleinern, werden wir sehen, dass die Haltepunkte die Containergröße ändern, um den verfügbaren Speicherplatz anzupassen. Wir können auch die Behälterflüssigkeit hinzufügen und sehen, wie das auch in der Praxis aussieht. Laden Sie den Browser neu, und wie wir zuvor auf dem Whiteboard gesehen haben, dehnt sich dies unabhängig von der Bildschirmgröße auf die volle verfügbare Breite aus. Der dritte Typ von Containern, den wir uns angesehen haben, ist ein Link zu Breakpoints. Wenn wir einen container-md haben, wird dies unseren Containertyp auf mittleren Geräten ändern , der 768 Pixel und höher ist. Schlamm schrumpfen Sie den Browser auf die geringe Größe. Wir können sehen, dass wir einen Container in voller Breite haben, und sobald wir zu den mittelgroßen Geräten kommen, wird dies zulassen, dass es zu einem normalen Container wird. Ich werde dies wieder einführen, um eine Container-Flüssigkeit zu sein , da dies eine ist, die ich für mein Projekt verwenden werde , aber Sie können wählen, welcher Container am besten zu Ihrem Projekt passt. Außerdem verstehen wir jetzt, was der Container tut. Ich werde auch die Hintergrundfarben ändern, um hell zu sein. Alles, was wir tun müssen, ist, es zu ändern, um bg-light zu sein, uns mit einer hellen Hintergrundfarbe wie erwartet zu lassen. Die nächste, um zwei weitere wichtige Teile des Rasters zu entdecken, und so verwenden Sie Zeilen und Spalten. 6. Zeilen und Spalten: Die nächsten Teile des Bootstrap-Grid-Systems, um Rasterbreite zu gelangen, ist die Verwendung der Zeilen und Spalten. Sowohl Zeilen als auch Spalten werden innerhalb unserer Container hinzugefügt, die wir gerade angesehen und verwendet haben, um ein Layout eines Inhalts. Lassen Sie uns beginnen, indem wir einen Blick darauf werfen, wie wir Zeilen innerhalb unserer Container verwenden können. Im letzten Video haben wir uns die wichtigsten Arten von Containern angesehen, die wir verwenden können. Hier haben wir eine Container-Klasse und dann unterhalb dieser, eine Container-Flüssigkeit, die in diesen Containern verschachtelt ist, können wir unseren Inhalt in Zeilen aufteilen. Dies sind Inhaltsbereiche, die sich über die Seite erstrecken. Wir können so viele Zeilen innerhalb verschachtelt haben, wie wir wollen. Wir können dies sowohl auf dem Behälter und auch dem Behälter Armaturenflüssigkeit zusammen mit dem Behälter mit einem Standard-Haltepunkte tun. Wenn wir uns unsere Zeilen genauer ansehen, auf der rechten Seite, können wir dann unsere Zeilen in Spalten aufteilen. Dies ist eine Möglichkeit, zu erklären, wie breit wir wollen, dass unsere Inhalte innerhalb unserer Reihe liegen. Bootstrap verwendet ein 12-spaltiges Rastersystem, was bedeutet, dass die Breite der Seite in 12 Abschnitte aufgeteilt ist. Wenn wir möchten, dass der Inhalt die volle verfügbare Breite erzeugt, erklären wir, dass wir wollen, dass dies 12 Spalten breit sein. Wenn wir unsere Zeile in zwei gleiche Abschnitte aufteilen wollten, so wie wir dies tun würden, wenn wir einen Inhaltsbereich auf der linken Seite hätten. Es hat ein div und dann ein auf der rechten Seite. Wir können diese beiden auf sechs Spalten breit einstellen, was 12 Teile entspricht. Wenn wir eine Blasenreihe in drei gleiche Teile aufteilen wollten, würden wir dies auf vier Spalten breit einstellen. Fügen Sie eine separate Zeile direkt darunter hinzu. Zum Beispiel ein div auf der linken Seite, eines in der Mitte und dann eines auf der rechten Seite. Wir werden dies auf jeweils vier Spalten festlegen. Denken Sie daran, früh im Kurs, wir sagten, dass Bootstrap standardmäßig mobil ist und dies auch für Spalten gilt. Beim Umgang mit einem mobilen Gerät, das einen schmalen Bildschirm wie diesen hat. Zu Beginn sind die Spalten immer die volle Breite der Seite. Sie erstrecken sich immer über die volle Breite des Ansichtsports. Dann müssen wir Bootstrap nach bestimmten Breakpoints sagen, wann wir ausbrechen und dann in diese Spalten genau so aufteilen. Die Art und Weise, wie wir dies tun, besteht darin, einige Bootstrap-Klassen auf Ihre HTML-Elemente anzuwenden, genau wie wir es mit den Containern getan haben. Was wir das jetzt tun werden, indem wir dies innerhalb unserer Projekte in die Praxis umsetzen. Wenn wir einen Blick auf den Container werfen, den wir im letzten Video erstellt haben, haben wir unseren Inhalt im Inneren, aber wir haben keine Zeilen oder Spalten, um diese Inhalte zu strukturieren. Wenn wir dies aus unserem Abschnitt entfernen, werde ich jetzt in unserer ersten Zeile hinzufügen. Wir können dies als eine Klasse zu jedem Element hinzufügen, wie ein div. Wir können die Klasse der Zeile fragen, und dies wird ein Wrapper für unsere Spalten sein , um allen unseren Abschnitten einen gewissen Abstand dazwischen zu geben, so dass sie sich nicht über die Seite berühren. Innerhalb dieser Zeile verschachtelt, können wir jetzt mehrere Abschnitte erstellen, die Teile unseres 12-Säulen-Rasters aufnehmen. Wenn wir wollten, dass dies die Hälfte der Breite der Seite ist, könnten wir eine Klasse hinzufügen, die wir col beginnen, da wir Spalten verwenden, haben wir dann eine Medienabfrage deklariert, die Sie dies anwenden möchten, z. B. mittelgroßes Gerät. Dann die Anzahl der Spalten wollen wir die Abschnitte aufnehmen. Wir haben vorher gesagt, dass Bootstrap entworfen wurde, um mobile-first zu sein, was bedeutet, dass alle unsere Abschnitte standardmäßig die vollen 12 Spalten breit sind. Was wir hier sagen, indem wir diese Klasse hinzufügen, ist im Grunde der 1c-Bildschirm versteckt ist. Ein mittelständisches Gerät [unhörbar] ändert sich, um nur sechs Säulen breit zu sein. Dann im Inneren verschachtelt, können wir den Inhalt addieren, den wir gerade entfernt haben. Speichern Sie dies, und über in den Browser. Wir sehen nun, dass unser Inhalt die Hälfte der Breite der Seite einnimmt. Wenn wir dies auf eine mobile Größe verkleinern, wird es jetzt die volle Breite des Bildschirms. Zurück zum mittelgroßen Gerät. Dies nimmt nun sechs Spalten des Bildschirms in Anspruch. Im Allgemeinen beginnt der Inhalt als volle Breite. Da Bootstrap zuerst mobil ist, bis wir es anders verkaufen, könnten wir natürlich diesen MD im Klassennamen in ein kleines oder großes Gerät ändern , wenn wir zu sechs Spalten zu einem anderen Zeitpunkt wechseln wollten. Jetzt oben hier ist, wie wir unseren Abschnitt derzeit haben. Es ist nach links ausgerichtet. Ich lasse Platz auf der rechten Seite für sechs weitere Spalten. Aber einmal wollten wir, dass dieser Inhalt die Hälfte der Breite des Bildschirms bleibt , in die Mitte gedrückt. Es gibt mehrere Möglichkeiten, dies in Bootstrap zu tun. Einige gängige Möglichkeiten, die Sie die CSS Flexbox verwenden, oder wir können einen Offset verwenden, wie wir unten sehen. Wenn Sie dies um drei Spalten drücken, wird der Inhalt zentriert. Auch hier können wir den Haltepunkt fein abstimmen. Lassen Sie uns zum Texteditor und davor gehen. Wir können einen Offset hinzufügen. Wieder auf mittelgroßen Geräten, die viel von drei Säulen. Dies bedeutet, dass unser Inhalt immer noch die Hälfte des Platzes in Anspruch nimmt, und die anderen drei Spalten, eine vor und nach verteilt. Speichern und neu laden. Jetzt ist unser Inhalt auf der Mitte der Seite zentriert. Auch wenn wir den Browser unter mittelgroße Geräte verkleinern, wird dies immer die volle Breite der Seite sein. Es gibt noch etwas mehr Feinabstimmung, um mit diesem Abschnitt umzugehen. Wir werden wieder dorthin zurückkehren, wo wir Utility-Klassen betrachten werden. Dies ist eine Einführung in die Verwendung von Zeilen und Spalten innerhalb unserer Bootstrap-Projekte. Wir werden viel mehr Übung durch diesen Kurs bekommen. Als Nächstes gehen wir zu einem Blick auf die Verwendung von Listen und Listengruppen. 7. Listen und Listengruppen: Jetzt haben wir eine bessere Vorstellung davon, wie wir das Bootstrap-Grid-System nutzen können, wir werden jetzt weitergehen, um einige weitere Inhalte zu unseren Projekten hinzuzufügen, und genauer gesagt, wir werden einen Blick darauf werfen, wie wir Listen verwenden können. Hinzufügen einer Liste ist genau das gleiche wie jedes andere reguläre HTML-Element, wir fügen einfach unsere Elemente hinzu, wie wir es normalerweise tun würden, und dann können wir es verbessern, indem wir einige Bootstrap-Klassen hinzufügen. Ich gehe auf die fertige Version, die hier offen ist. Dies ist der Bereich, den wir kurz zuvor hinzugefügt haben, und wir werden es ein wenig schöner aussehen lassen, genau so , indem wir später einige Bootstrap-Dienstprogramme hinzufügen. Aber jetzt werden wir nach unten zum nächsten Abschnitt scrollen, der dieser Teil gerade hier ist. Auf der linken Seite haben wir einen Text und dann eine Liste auf der rechten Seite. Wir wissen bereits, wie man dieses Layout erstellt, es wird zwei gleiche Abschnitte sein, beide sechs Spalten breit und wie immer wird es innerhalb einer Zeile und eines umgebenden Containers verschachtelt werden. Natürlich, wenn Sie eine eigene Version davon erstellen, können Sie verschiedene Inhalte oder Abschnitte unterschiedlicher Größe hinzufügen, wenn Sie es bevorzugen. Wir werden weitermachen und diese Listengruppe erstellen, wenn Sie mehr über Listen mit Bootstrap und die verschiedenen Typen erfahren möchten , können wir in die Dokumentation gehen und dies ist innerhalb der Komponenten verfügbar. Wenn wir dann die Listengruppe auswählen, wird dies uns einige Beispiele geben, wie Listen mit Rahmen, Liste mit verschiedenen Farben, Liste ohne Rahmen, Sie können auch horizontale erhalten und diese sind nützlich für Nav-Bars. Aber jetzt gehe ich zum Projekt und beginne mit dem Erstellen eines neuen Abschnitts direkt unter dem letzten. Dieser Abschnitt wird die Klasse des Containers haben, also ist es eine feste Größe. Dann werde ich hier ein div erstellen, das unsere Zeile sein wird, die der Wrapper für unsere Spalten ist. Dies wird zwei Abschnitte haben, die beide mit einer Klasse, die gleich Col-MD-6 Kreativität wird . Sie erscheinen nebeneinander, also wieder, nur um zusammenzufassen, wären beide Abschnitte die volle Breite der Seite auf einem kleinen Gerät. Dann, wenn dies das mittlere Gerät erreicht, wird es dann fallen, um sechs Säulen breit sein. Beginnend mit dem ersten Abschnitt, dem Text auf der linken Seite. Ich werde dies innerhalb eines p-Elements mit der Klasse von Lead hinzufügen. Lead ist eine Bootstrap-Klasse, die einfach den Absatz auffällig macht, was ich hinzufügen werde, sind alle diese Funktionen, allen Plänen enthalten sind. Dies ist ein ziemlich einfacher Abschnitt. Der nächste auf der rechten Seite der Seite wird der Abschnitt für unsere Liste sein. Wie immer, mit Bootstrap, beginnen wir mit der Erstellung unseres Standard-HTML-Markups. Unsere ungeordnete Liste und dann innerhalb können wir unsere Listenelemente erstellen. Für den Wrapper, der die ungeordnete Liste ist, wird eine Klasse von Listengruppe erhalten, die wir unsere ungeordnete Liste setzen, um Anzeigetyp von flex, flex-direction Spalte zu sein. Diese sind vertikal gestapelt und es werden auch alle Padding und Rand zurückgesetzt, bis hin zu unserem Listenelement. Wir werden eine Klasse innerhalb von hier für jedes einzelne Element hinzufügen und dies ist Listengruppen-Element. Dies wird einige Rahmen und Leerzeichen in für jeden unserer Listenelemente hinzufügen. Der erste wird den Text von Hunderten von vorgefertigten Vorlagen haben. Natürlich, passen Sie dies auch an Ihre Bedürfnisse an und ich werde dies kopieren und in früheren Zeiten einfügen. Die zweite haben wir den Text des Kalenders und der Terminplanung. Der dritte wird für Erinnerungen und Warnungen sein. Das vierte Listenelement, das ich wählen werde, ist unbegrenzte Listen und Seiten zu tun, und schließlich wird der letzte Text von ungeraden benutzerdefinierten Etiketten für Ihre Aufgaben sein. Bevor wir noch weiter gehen, lassen Sie uns dies speichern und überprüfen Sie dies im Browser, gibt uns eine Aktualisierung. Auf der linken Seite haben wir unseren Text mit der Klasse der Lead und dann den rechten Abschnitt, der unsere Listengruppe ist. Wenn wir mit der rechten Maustaste klicken und überprüfen, um in die Entwickler-Tools zu gehen, können wir die Klassen, die auf unsere Liste angewendet wurden überprüfen. Lassen Sie uns zunächst den Inspektor verwenden, um den Mauszeiger über unsere Liste zu bewegen, gehen Sie, um die ungeordnete Liste mit der Klasse der Listengruppe auszuwählen. Wie bereits erwähnt, setzt dieser ANSI-Anzeigetyp von Flex die Flex-Richtung und auch unsere Polsterung und Marge. Wenn wir zu unserem Listengruppen-Element gehen, wird durch Klicken auf diese alle CSS angezeigt, die es auf unsere Listenelemente angewendet wurde. Wir können den Effekt sehen, wenn wir alle diese Boxen deaktivieren und wir können den Effekt sehen, der hat, wie wir auch zuvor in der Bootstrap-Dokumentation gesehen haben, die Richtung der Spalte kann auch in eine Zeile geändert werden , wenn wir wollen, dass dies eine horizontale -Menü. Gehen wir zurück zu unserer ungeordneten Liste, wo wir das direkt nach dieser Gruppe anwenden können. Wir können dies auch ändern, um Listengruppe horizontal zu sein , und dies ist nützlich für Dinge wie Navigationsleisten. Es sieht ein wenig seltsam aus, weil wir hier einige lange Listenelemente haben, aber so können wir horizontal über die Seite aktualisieren. Wenn wir die Ränder und auch diese abgerundeten Ecken entfernen möchten, können wir dies ändern, um gruppenbündig aufgeführt werden. Aktualisieren und ich werde diese Klasse für mein Projekt an Ort und Stelle lassen , da dies etwas ist, das ich persönlich vor. Aber denken Sie daran, dass es an Ihnen liegt, wie Sie Ihr Projekt gestalten möchten. Als nächstes füge ich ein Häkchen neben jedem Listenelement hinzu. Genau wie wir sehen, wenn wir zur endgültigen Version gehen nur auf der linken Seite hier, werden wir dies in unsere Listenelemente hinzufügen, indem wir eine Spanne verwenden. Die Spanier wird einen HTML-Entitätscode enthalten, so dass es nichts spezifisches für Bootstrap ist, es nur normales HTML. Innerhalb unseres Listenelements, kurz vor unserer Steuer, gehen, um eine Spanne und der HTML-Entitätscode hinzuzufügen, ist das kaufmännische Und-Zeichen, das harte als ein Wert von eins, dreifach Null vier und dann ein Semikolon. Ich werde das packen und es in den Rest unserer Listenelemente einfügen. Wir haben das Häkchen neben jedem unserer Listenelemente im Browser. Wenn Sie Änderungen an einem anderen Symbol möchten, oder Sie tun müssen, ist eine Suche nach HTML-Entitätscodes und Sie werden nicht sicher sein, dass Sie Optionen zur Auswahl haben. Um zu stoppen bietet uns auch einige Hintergrundfarben, aus denen Sie wählen können , um diese Listenelemente hervorzuheben. Zum Beispiel könnten wir eine zweite Klasse zu unserem Listenelement von list-group-item primary hinzufügen. Dies ist einer der Ökonomen, die von Bootstrap zur Verfügung gestellt werden, und das ist ein blauer Farbton. Wenn wir den Browser aktualisieren, und dies ist eine der vordefinierten Farben, die von Bootstrap festgelegt werden. Es gibt auch über nah an, wie Gefahr für Rot, Erfolg für Grün, und schauen Sie sich die Bootstrap-Dokumentation für mehr verfügbare Farben an. Include benötigen helle und dunkle Hintergrundfarben, die früher bei der Arbeit mit Containern betrachtet wurden. Ich werde jetzt diese Farben entfernen, da dies von Projekten nicht benötigt wird. Wir können dies natürlich einbeziehen, wenn Sie es vorziehen. Also würde ich Sie ermutigen, mit diesen Bootstrap-Klassen zu spielen, indem verschiedene hinzufügen und entfernen, um genau zu sehen, was mit Bootstrap möglich ist. Sie können auch die Bootstrap-Dokumentation überprüfen und die breite Palette aller verfügbaren Klassen sehen. Ich würde Sie auch ermutigen, in die Entwicklertools einzutauchen, wenn Sie Klassen hinzufügen und entfernen, und dann können Sie genau sehen, was hinter den Kulissen passiert. Mit CSS-Klassen wurden hinzugefügt oder entfernt, um das gewünschte und aussehen und fühlen anzuwenden. Als nächstes werden wir einen Blick auf die Verwendung von Dienstprogrammklassen werfen, so dass ich Sie dort sehen werde. 8. Einführung in die Dienstprogramme: Wir gehen jetzt zu Bootstrap-Dienstprogrammen, die uns im Grunde hilft, CSS schnell zu unseren Elementen hinzuzufügen. Hier, wenn wir auf die Dokumentation auf Bootstrap Homepage klicken und dann zu den Dienstprogrammen in der Seitenleiste gehen. Dies ist der Abschnitt, in dem wir alle Utility-Klassen finden, die Bootstrap zu bieten hat. Diese werden verwendet, um gängige CSS-Styling leicht hinzuzufügen. Wenn wir uns die Seitenleiste ansehen, können wir sie verwenden, um Dinge wie Rahmen, Flex-Box, Positionierung, Schatten, Abstand und vieles mehr hinzuzufügen Flex-Box, Positionierung, Schatten . Die meisten davon sind selbsterklärend, wenn Sie bereits einige CSS kennen. Zum Beispiel, wenn wir zu den Grenzen gehen, müssen wir nur einige der Bootstrap-Klassen hinzufügen, wie die Grenze, setzen Sie eine Grenze um unsere Elemente. Wir können Ränder zu einer bestimmten Seite hinzufügen, wie die obere oder untere. Wir können Ränder von bestimmten Seiten entfernen und auch mit den Farben und dem Radius spielen. Wie Sie sehen können, stellt Bootstrap uns in der Regel einige Bilder zur Verfügung. Sehen Sie genau, was diese Klassen tun. Wir können auch auf die Farben klicken, und das ist genau das, was wir im letzten Video angesehen haben. Wir haben die Primärfarbe verwendet, und dies ist auch für die Verwendung mit Text verfügbar. Wir haben auch die helle und dunkle Farbe, die wir früher für unsere Container-Hintergründe angesehen haben . Viele dieser Dienstprogramme können auch auf verschiedenen Elementen verwendet werden. Wir sind also nicht darauf beschränkt, verschiedene Dinge oder verschiedene Elemente zu lernen. Wir können auch die CSS Flexbox in Bootstrap verwenden. Wir können leicht Flexbox zu unseren Elementen mit dem Klassennamen des Flex hinzufügen, der für Display-Typ von Flexbox steht. Scrollen wir nach unten, können wir die Richtungen festlegen. Wir haben die üblichen Spalten und Zeilen sowie die umgekehrte. Wir können auch unsere Inhalte rechtfertigen. Richten Sie unsere Elemente aus und greifen Sie auf eine der Flex-Box-Eigenschaften zu, die wir mit regulärem CSS haben, oder indem Sie einen Klassennamen zu allen Elementen hinzufügen. Wir haben auch Dimensionierung, wenn wir darauf klicken, wo wir die Höhe und die Breite unserer Elemente einstellen können. Also zum Beispiel, wenn wir wollten, dass unser Element 50 Prozent breit ist, würde die Klasse von W-50 verwenden. Wir können das W durch ein H für die Höhe ersetzen, und dies wird die Höhe des Elements auf 50 Prozent zu setzen. Wir haben auch andere Optionen, wie auch 100 Prozent und 25 Prozent, und wir werden mehr von diesen während dieses Kurses nutzen. Wie Sie sehen können, beziehen sich die meisten dieser Namen auf das CSS, das sie anwenden und sind ziemlich selbsterklärend, wie Text links und Rand oben. Aber es gibt eine, die ich Ihnen detaillierter zeigen möchte, und das ist der Raum und Nutzen. Space und Utilities sind Marge und Padding, und wir müssen einen Klassennamen in drei oder vier Teilen erstellen. Werfen wir einen Blick darauf, wie wir das jetzt tun können. Wir können Abstands-Dienstprogramme mit Bootstrap anwenden, indem wir undurchsichtige Klassennamen erstellen. Wir tun dies mit bis zu vier verschiedenen Eigenschaften, die wir kombinieren können , um undurchsichtige Klassennamen zu unseren Elementen hinzuzufügen. Also das erste, was wir tun müssen, ist zu entscheiden, ob wir Abstand durch einen Rand oder Padding hinzufügen möchten . Wir tun dies, indem wir am Anfang unseres Klassennamens ein M für Marge oder P hinzufügen. Das nächste, was wir tun müssen, ist zu entscheiden, auf welche Seite des Elements wir den Raum anwenden möchten. Wir können es auf die Oberseite des Elements anwenden, die Unterseite, die linke, die rechte, wie wir hier sehen können. Oder wir haben auch das x auf der y-Achse. Wenn wir es auf das x anwenden, wird dies den Abstand auf der linken Seite auf der rechten Seite anwenden. Die Y-Achse ist vertikal, so dass wir diesen Raum darin nach oben und unten anwenden. Denken Sie daran, Bootstrap wurde gebaut und entwickelt, um zuerst mobil zu sein. Also jeder Rand oder Padding, den wir standardmäßig hinzufügen, wird automatisch auf die extra kleinen Geräte unter beiden angewendet. Wir können dann einen optionalen Bruchpunkt wie klein, mittel, groß oder extra groß hinzufügen , wo wir die Einstellung für den Rand oder Padding ändern möchten. Standardteil ist, um eine Größe von 0, 1, 2, 3, 4 oder 5 oder Auto hinzuzufügen . Zero wird jeden Rand und Polsterung zurücksetzen und diesen von unseren Elementen entfernen. Wir haben die Nummer 3, die in der Mitte ist. Dadurch wird ein Abstand von einem RAM angewendet. Wenn wir niedriger als das gehen, ist dies ein halber RAM, und dann wendet Nummer 1 ein Viertel unseres RAM an. Der Wert von vier ist gleich 1,5 RAMs, und dann ist der Wert von fünf gleich drei RAM. Wir haben auch die Möglichkeit, auto 2. Genau wie bei normalem CSS können wir zum Beispiel eine Marge Null auto anwenden, und wir können dies nutzen. Also für das erste Beispiel oben hier haben wir einen hübschen Standardabschnitt mit einem div, das innen verschachtelt ist. Der orangefarbene Teil der Oberseite stellt einen gewissen Rand dar. Also, wie wir hier sehen, wenn wir dem obersten Div einige Marge hinzufügen wollten, könnten wir dies tun, indem wir eine undurchsichtige Klasse bauen. Wir können mit der Auswahl M beginnen, weil wir wollen, dass die Marge gelten. Danach wählen wir draußen aus. Man ist also, es auf die Spitze unserer Elemente anzuwenden, und dann können wir die optionalen Haltepunkte auswählen, oder wir können dies leer lassen, wenn Sie möchten, dass dies für alle Bildschirmgrößen gelten. Danach wählen wir dann den Abstand, den wir am Ende wollen. Wenn wir einen RAM wollen, werden wir für einen Wert von drei gehen. Für das nächste Beispiel haben wir ein dasselbe div, ich werde auch etwas Marge nach oben und unten anwenden. Genau wie zuvor ist dies Marge, also wenden wir den Wert von M an. Wir möchten, dass dies sowohl auf den oberen als auch auf den unteren Bereich angewendet wird. Also kann ich hier die Y-Achse nutzen. Auch hier werden wir keine spezifischen Haltepunkte verwenden. Stattdessen können wir einen Wert hinzufügen, Sie Sachen dazu. Für das weitere Beispiel haben wir einige Polsterung, die durch das Grün dargestellt wird. Da nun das Padding zum Inneren der Elemente hinzugefügt wird, würden wir dies dem Haupt-Wrapper anstatt dem div hinzufügen, da dies dann das Innere unserer div-Elemente anwenden würde. Also für dieses Beispiel werden wir P. wählen, da wir es jetzt mit Padding zu tun haben. Wir werden diese dann auf der rechten Seite hinzufügen, um uns hier zu decken. Dann jeder Wert, den Sie auswählen möchten. Gehen wir für fünf in diesem Fall. darunter haben wir etwas Polsterung, aber wir wollen dies auch auf der linken und rechten Seite anwenden. Anstatt also zwei separate Regeln auszuschreiben, können wir die Polsterung auf der X-Achse verwenden. Also würde dieses Beispiel Padding auf dem x sein. Auch hier können wir einen beliebigen Wert hinzufügen. Wir könnten dies auch ändern, um einen Haltepunkt einzuschließen. Wenn wir also wollten, dass das Padding nur auf mittelgroßen Geräten und höher angewendet wird, könnten wir dies tun, indem wir ein optionales drittes Argument hinzufügen. So kann es Auffüllung auf der X-Achse hinzufügen und dann an einem Bruchpunkt von MD und dann den Wert von vier stricheln . Unten unten haben wir unser viertes Beispiel, das zu zentrieren und Elemente in der Mitte unseres div ist. Die Art und Weise, wie wir dies tun können, besteht darin, die Auto-Eigenschaft zu nutzen, genau wie wir es zum Beispiel in regulärem CSS tun würden. Wenn wir Marge Null Auto anwenden. Wie wir dies tun können, können wir dies in der Mitte der x-Achse mit dem Wert von M und dann x zentrieren . Genau wie bei normalem CSS bei der Verwendung der auto -Eigenschaft müssen wir uns bewusst sein, dass der Anzeigetyp auf Block gesetzt werden muss, und wir müssen eine Breite bereits festgelegt haben, sonst gilt dies nicht. Dies ist also die Theorie hinter der Verwendung von Name-Space und Dienstprogrammen. Als nächstes gehen wir zu unserem Projekt und setzen dies in die Praxis um. 9. Dienstprograme in der Praxis: Zurück zu unserem Projekt, das erste, was ich im ersten Abschnitt oben tun werde , ist, den ganzen Text in der Mitte zu zentrieren. Wir können dies mit einer einfachen Klasse tun. Wenn wir zurück zu unserem ersten Abschnitt, innerhalb des Wrappers, alles, was wir hier tun müssen, ist die Klasse alle text-center hinzuzufügen. Dadurch wird der gesamte Text in die Mitte unseres Abschnitts verschoben. Wenn Sie sich von früher erinnern, haben wir den Abschnitt in der Mitte ausgerichtet, indem Sie einen Versatz von drei Spalten auf der linken Seite bereitstellen. Das ist in Ordnung und völlig in Ordnung zu verwenden, aber ich werde Ihnen jetzt eine Alternative zeigen, mit Flexbox. Wenn wir den Offset von früher entfernen, bedeutet dies, dass unser Abschnitt immer noch der gleiche ist, sechs Spalten breit, aber wir haben dies jetzt auf der linken Seite. Wenn wir dies auf die kleinere Größe dehnen, wird dies natürlich die volle Breite auf kleineren Geräten oder Medium sein. Wir werden dies zurück in die Mitte schieben, indem wir die Flexbox zu einem Container hinzufügen. Der Container ist die Zeile. Wir können den Anzeigetyp auf Flex setzen und auch die Eigenschaft von Begründungsinhalt in der Mitte hinzufügen. Speichern Sie dies, und wie erwartet sehen wir keine Änderungen auf dem kleinen Bildschirm. Aber wenn wir das auf die mittelgroßen Geräte ausdehnen, ist dies jetzt in der Mitte unseres Abschnitts, um ihm einige Abstände zu geben. Wir können auch etwas Rand und Polsterung hinzufügen, die wir gerade angesehen haben. Beginnend mit dem Rand bauen wir dies mit m für Marge auf, die Y-Achse verschwindet nur oben und unten und der Wert von fünf, über den Browser. Dies gilt für alle Bildschirmgrößen. Sobald wir zu der größeren Bildschirmansicht kommen, genau wie hier, werden wir meistens etwas Polsterung hinzufügen, um dies ein wenig größer zu machen. Dies gilt nur für die größeren Haltepunkte auf der Y-Achse. Also lg, der Wert von fünf. Jetzt bis hin zu unserem Text, der das p-Element ist. Wir werden die Klasse von Lead verwenden, die Sie sich bereits angesehen haben. Dies macht den Absatztext auffällig, wo Sie nur Schriftgröße und auch das Schriftgewicht benötigen. Bootstrap hat auch viele Utility-Klassen für Schaltflächen. Wir können dies zu unserem Link hinzufügen. Die Basisklasse, die wir zu allen Schaltflächen hinzugefügt haben, ist btn. Dann können wir definieren, welche Art von Taste wir verwenden möchten, zusammen mit der Farbe. Die Farbe wird mit den Farb-Dienstprogrammen festgelegt, die wir uns zuvor angesehen haben, wie primär, sekundär, Gefahr und Erfolg. Ich werde die Klasse von Informationen verwenden, die für eine blaue Farbe ist. Wir können diese Farbe als einfarbige Hintergrundfarbe oder als Schaltflächenumriss anwenden. Zunächst einmal haben wir die einfarbige Farbe, die btn ist, gefolgt von dem Farbnamen von info, so dass wir mit der einfarbigen Hintergrundfarbe. Wenn wir wollten, dass dies nur die Farbe auf dem Umriss ist, müssen Sie dies nur ändern, um btn Umriss zu sein, gefolgt von der Farbe kurz danach. Wir können diese Schaltfläche dann mit unserer Preisseite verknüpfen, die wir in Kürze erstellen werden. Scrollen Sie nach unten zu unserem nächsten Abschnitt. Wir können auch einige Dienstprogramme zu diesem Abschnitt hinzufügen. Das ist genug mit dem Container, wir können den Rand oben und unten als Wert von vier und dann einen Füllwert von zwei hinzufügen . Dies wird unserem Abschnitt mit der Liste ein wenig Abstand geben. Das nächste, was ich tun möchte, ist, diese Texte vertikal innerhalb dieses Abschnitts auszurichten. Wir können dies tun, indem wir die CSS Flexbox, den Container, hinzufügen. Wir können den Anzeigetyp von Flex hinzufügen, genau wie wir oben getan haben. Dann die CSS-Eigenschaft von align-item-center, und dies sollte jetzt unseren Text in die Mitte des div schieben. Überprüfen Sie dies, sieht auch auf dem kleinen Bildschirm in Ordnung. Jetzt wurde der Abstand angewendet. Dies ist nur ein erster Blick auf die Verwendung der Bootstrap-Dienstprogramme und wie wir sie verwenden können, um unsere Website wirklich gut aussehen und auch voll reagieren zu lassen. Wir werden auch viel mehr von den Bootstrap-Dienstprogrammen verwenden, während wir mit unserem Projekt vorankommen. 10. Hinzufügen von Symbolen mit Fontawesome: Irgendwann, wenn Sie ein Projekt, eine Website oder Anwendung erstellen , haben Sie möglicherweise die Notwendigkeit, einige Symbole hinzuzufügen , um es visuell ansprechender zu machen. In der Vergangenheit habe ich meine eigenen Icons für Projekte erstellt, aber ich bin kein Designer. Also für mich und es kann viel bequemer sein, nach einer Bibliothek von Drittanbietern zu suchen , um diese Symbole für uns zur Verfügung zu stellen. Bootstrap hat keine eigene integrierte Schriftart-Symbolbibliothek in Version 4. Ich werde Ihnen jetzt zeigen, wie wir unser Projekt mit Font Awesome integrieren können. Für mein Projekt werde ich Font Awesome verwenden, das von fontawesome.com erhältlich ist. Dies hat Tausende von verfügbaren Icons für uns zu verwenden und ist auch ein kostenloser Plan , den ich verwenden werde. Wir können loslegen, indem Sie auf „Kostenlos starten“ klicken. Sie benötigen ein Konto, um loszulegen Daher müssen Sie in diesem Feld Ihre E-Mail-Adresse hinzufügen und dann auf der rechten Seite auf „Erstellen“ klicken. Ich bin bereits registriert, also werde ich den Prozess nicht durchlaufen. Alles, was Sie tun müssen, ist Ihre E-Mail hinzuzufügen und Sie erhalten auch eine E-Mail-Bestätigung. Nachdem Sie diese E-Mail bestätigt und Ihr Konto eingerichtet haben, werden Sie dann zu einer Seite weitergeleitet, die so aussieht. Einmal eingerichtet, erhalten wir Zugriff auf ein Skript, das wir kopieren und in unser eigenes Projekt hinzufügen können. Lasst uns das packen und zu unserer index.html gehen. Betrachtet man dies oben auf der Seite im Kopfbereich, also werde ich dies nur über dem Bootstrap-CSS hinzufügen und das ist alles Setup, das wir tun müssen. Jetzt fügen wir Symbole in unser Projekt ein, wir fügen dies als HTML-Element hinzu. Wir gehen zurück zur Font Awesome Website und klicken dann auf „Icons“ in der Navigation. Wir können einige der verfügbaren Symbole überprüfen und auch auf sie klicken, um herauszufinden, wie Sie sie einschließen können. Mit den kostenlosen Plänen gibt es die solide und die regulären Versionen jedes Icons zusammen mit dem HTML-Code, den wir in unsere Projekte aufnehmen müssen. Wenn wir eine Schriftart sehen, die wir mögen, müssen wir nur den HTML-Code kopieren und dann in unsere Index-Seite einfügen. Alles, was wir hier haben, ist AI-Element mit einem Klassennamen. Zuallererst haben wir FAR, was für Font Awesome Regular ist. Wenn wir diese solide Option wählen, wird dies FAS gefolgt von unserem Icon-Namen, die derzeit Adressbuch ist. Dies ist der Name, den wir für jedes Symbol ändern müssen. Jetzt wissen wir, wie man das benutzt, ich werde zu unserem Projekt gehen und loslegen. Dies ist der Abschnitt, den ich jetzt mit Font Awesome erstellen werde. Natürlich können Sie diese Symbole an Ihr bestimmtes Thema anpassen. Wir beginnen mit einem Container und richten dann unsere Zeilen und Spalten ein. Ganz unten direkt über unserem JavaScript, lassen Sie uns unseren Abschnitt erstellen. Wir werden eine Behälterflüssigkeit haben. Wir werden auch den Text so einstellen, dass er in der Mitte ist. Wenn wir sagen, helle Hintergrundfarbe mit bg-light und auch einige Marge auf der Ober- und Unterseite, und auch einige Podium. Beginnen wir mit einer Überschrift der Stufe drei, die der Text von Power up mit einem bezahlten Plan sein wird. Der nächste Schritt besteht darin, ein div mit der Klassenzeile zu erstellen, die der Container für unsere Abschnitte sein wird, auch einige Marge oben und unten mit einem Wert von vier. Dann können wir weitermachen und unsere einzelnen Abschnitte erstellen. Auf meiner fertigen Version werde ich fünf Abschnitte nebeneinander haben. Anstatt unsere Abschnitte mit der Anzahl der Spalten einzubeziehen, können wir auch einfach die Klasse von col hinzufügen. Dies ist eine einfache Alternative, die wir verwenden werden, wenn wir möchten, dass alle Abschnitte auf allen Geräten der Größe gleich sind. Hier drinnen können wir das i-Element hinzufügen, das wir gerade auf Font Awesome gesehen haben. Wir können mit dem Klassennamen beginnen, um den Volumenkörper von FAS zu machen. Das Symbol, das ich verwenden werde, um zu beginnen, ist fa_users. Eine andere Klasse, die mit Font Awesome verfügbar ist, ist die Dimensionierung. Wir können auf die Dimensionierung mit fa zugreifen und diese dann mit fünf mit 5x multiplizieren. Dies ist gleich 5m und auch diese Größe ist bis zu 10x verfügbar. Jeder meiner Abschnitte hat auch einige Texte direkt unten. Der erste ist Mehrere Benutzer, die ich in einem p-Element hinzufügen werde. Dann etwas Leerzeichen in oder etwas Polsterung oben und unten auf unserem Symbol, um dies von unserem Text zu trennen. Jetzt ist dieser erste Abschnitt abgeschlossen. Gehen wir zum Browser und laden Sie es neu. Jetzt, da wir nur einen Col Abschnitt haben, wird dieser jetzt in der Mitte platziert. Wenn wir weitere Abschnitte hinzufügen, nehmen sie alle den gleichen verfügbaren Speicherplatz ein. Lass uns das machen. Jetzt haben wir vier weitere Abschnitte hinzuzufügen. Ich werde diesen Col-Abschnitt kopieren, fügen Sie dies direkt unten ein. Das Symbol, das ich verwenden werde, ist Palette mit dem Text des erweiterten Themens. Dies sollte nun die gleiche Menge an Speicherplatz wie der erste beanspruchen. Jetzt müssen wir nur noch drei hinzufügen. Fügen Sie ein weiteres in ein. Das dritte Symbol wird für den Globus sein und der Text, der direkt darunter ist, wird mehrsprachige Unterstützung sein. Das nächste Symbol wird für die Synchronisierung sein. Dies ist S-Y-N-C und der Text der Synchronisierung auf allen Geräten. Dann schließlich wird das letzte für anpassbare Vorlagen sein. Dieser wird das Symbol der Datei Alt haben. Schauen wir uns das im Browser an. Wir haben unsere fünf gleichen Säulen. Wenn wir dies verkleinern, versuchen gleiche Abschnitte, einen gleichen Abstand auf allen Bildschirmgeräten zu halten, es sei denn, es ist nicht genügend Platz auf dem Bildschirm verfügbar, wo sie auf eine neue Zeile fallen. Sie können auch einen Unterschied in der Symbolfarbe für meine finale Version bemerken und das ist etwas, was wir in unserem eigenen Stylesheet einstellen können. Genau wie bei jedem Finale in Bootstrap können wir unser eigenes Stylesheet anwenden, um jede der Klassen zu überschreiben. In unserem Projekt werde ich eine neue Datei namens styles.css erstellen. Dann können wir dies auf unserer Indexseite im Kopfbereich verlinken. Fügen Sie unseren Link unterhalb des Bootstrap CSS. Der Dateipfad ist einfach styles.css. Dann können wir das aufmachen. Dann müssen wir nur unsere Symbole anvisieren, die das i-Element ist, und dann die Farbe einstellen. Die Farbe, die ich wählen werde, ist 40b7ad und gibt uns die grüne Farbe genau wie die endgültige Version. Das Hinzufügen von Symbolen für ein Projekt oder eine Anwendung kann visuell einen großen Einfluss haben, und wir müssen weder ein Designer sein noch viel Geld ausgeben, damit sie gut aussehen. Als nächstes im nächsten Video werden wir mit unserem Projekt fortfahren, indem wir uns Bilder und Bildprogramme hinzufügen. 11. Mit Bildern arbeiten: Wenn Sie alles verstanden haben, was wir bisher in diesem Kurs getan haben, sollte dieses Video Sie nicht schockieren oder Ihnen Probleme bereiten. Wir werden einen neuen Abschnitt erstellen, aber dieses Mal konzentrierte sich auf das Hinzufügen von Bildern. Genau wie bei den restlichen Bootstrap-Abschnitten, die wir uns angesehen haben. Wir werden beginnen, indem wir in unserem HTML hinzufügen und dann können wir Bootstrap integrieren, indem wir einige CSS-Klassen hinzufügen. Auf Bootstrap können wir auch etwas JavaScript im Hintergrund hinzufügen. Bevor wir anfangen, Bilder zu betrachten, müssen wir ein kleines Projekt hinzufügen, mit dem wir arbeiten können. Bei diesem Kurs steht ein Bilderordner zur Verfügung , den Sie kostenlos nutzen können. Oder Sie können Ihre eigenen herunterladen, wenn Sie es bevorzugen. Dieser Bilderordner befindet sich auf meinem Desktop und ich möchte dies in unseren Projektordner ziehen. Wenn wir auf die fertige Version gehen und einen Blick darauf werfen. Dies ist der Icon-Abschnitt, den wir gerade erstellt haben. Unmittelbar darunter ist dies der Abschnitt, den wir jetzt erstellen werden. Alle diese vier Bilder werden mit dem Kurs zusammen mit einem tatsächlichen Bereitschaftsdienst sample.jpg zur Verfügung gestellt . Dies wird nicht im endgültigen Projekt enthalten sein, sondern um einige neue Klassen auszuprobieren, die wir auf Bildern verwenden können und wir können jetzt einen Blick darauf werfen. Also zum Projekt, vor allem im Cyber haben wir unsere vier Bilder und dann haben wir unsere sample.jpg. Wir können dies in unserer index.html überprüfen. Also lassen Sie uns dies an einer beliebigen Stelle am unteren Rand der Seite einfügen. Wir können ein Standard-HTML-Tag einschließen, so dass dies im Ordner Images und dann in der sample.jpg gespeichert wird. Wenn wir jetzt zu unserem Projekt gehen, neu laden, ist dies das Beispielbild. Wenn wir den Browser auf eine kleinere Größe verkleinern, werden Sie feststellen, dass das Bild vom Rand des Browsers verschwindet. Das ist in der Regel nicht etwas, was wir sehen wollen. Wir möchten, dass das Bild 100 Prozent der verfügbaren Breite entspricht. Wir können dies tun, indem wir eine Bootstrap-Klasse namens Image Fluid hinzufügen, die uns helfen wird. Also lassen Sie dies zu unseren Bildelementen hinzufügen. Also img-fluids und jetzt, wenn wir den Browser neu laden, sollte das Bild jetzt reduziert werden, passen Sie die verfügbare Bildschirmgröße. Wir sehen nicht mehr, dass das Bild vom Rand des Browsers verschwindet und es gibt auch ein paar weitere Klassen, die ich Ihnen zeigen möchte. Viele von ihnen sind nicht einmal spezifisch für Bilder mit der Arbeit schön mit Bildern sowieso, wie die Einstellung der Breite eines Elements als Prozentsatz und das ist etwas, das wir vorher in den Dienstprogrammen betrachtet haben. So können wir die Bildbreite, Breite w und dann Strich und als Prozentsatz hinzufügen und wir wollen Nummer 25 ausprobieren. Laden Sie den Browser neu und dies ist jetzt 25 Prozent breit. Wir können dies auch ändern, um Überwert wie 50,75.100, und Auto. Zusammen mit dem Ändern der w ein h2 zu sein, und dies wird die Höhe eines Elements beeinflussen. Als nächstes werde ich diese Zeile kopieren und einfügen und dann einen Blick auf die abgerundete Klasse werfen. Diese abgerundete Klasse wird abgerundete Ecken auf unser Bild anwenden und lassen Sie uns dies einfach ein wenig größer machen, damit wir klarer sehen können. Hierdurch wird der Radius auf allen vier Seiten angewendet. Wenn wir dies nur oben, rechts, unten oder links anwenden wollten . Wir könnten auch unsere Klasse ändern, um abgerundet oben, rechts abgerundet, und so weiter. Wenn wir wollen, dass die Ecken vollständig abgerundet sind, eher wie ein Kreis, könnten wir dies ändern, um abgerundet, -Kreis. Dies ist eher wie ein Kreis, wenn das Bild die gleiche Breite und Höhe hat , aber weil das Bild breiter ist, scheint es gestreckt zu sein. Eine weitere Option, die wir haben, die dem Kreis ähnlich ist, ist die Pille. Dies wird abgerundete Ecken anwenden und auch eine flache Ober- und Unterseite hinterlassen. Also werfen wir einen Blick auf das in Aktion, aktualisieren und das gibt uns die Form einer Pille. Ein weiteres Bilddienstprogramm, das wir verwenden können, ist das Bild Thumbnail. Dies ist also img-thumbnail und dies wird einen Rahmen um das Bild herum anwenden. Machen wir dies ein wenig größer, es kann schwer zu sehen sein. Wenn wir vergrößern, können wir sehen, dass das Bild einen Rahmen hat alle vier Seiten umgibt, zusammen mit einer abgerundeten Ecke. Wir können auch float mit Bildern verwenden und dies gilt auch für andere Elemente. Also zum Beispiel, wenn wir gesagt Float-rechts. Dieses Bild fließt nun rechts neben dem restlichen Inhalt. Das ist also nur ein Vorgeschmack darauf, was wir mit Bildern machen können. Wie bereits erwähnt, gelten einige dieser Klassen zusammen mit anderen für viele verschiedene Elemente, daher sind wir nicht darauf beschränkt, sie nur mit Bildern zu verwenden. Lassen Sie uns dies nun innerhalb unserer Projekte in die Praxis umsetzen, indem wir einen neuen Abschnitt erstellen. Lassen Sie uns diese Beispielbilder entfernen und wie immer werden wir mit einem Abschnitt beginnen, der eine Klasse haben wird. Dieses Mal werde ich nur die Container-Klasse verwenden, also ist es nicht die Flüssigkeitsgröße und richte dann auch den Text in der Mitte aus. Auch, wie bei den anderen Abschnitten, fühlen Sie sich frei, dies zu besitzen und fügen Sie verschiedene Bilder oder Texte, die Sie bevorzugen. Innern verschachtelt haben wir unsere Reihe. Diese Zeile wird in zwei gleiche Abschnitte auf mittleren Geräten aufgeteilt werden. Lassen Sie uns voran gehen und fügen Sie unsere Klassennamen col-md-6 und wir können dies innerhalb unserer ersten Zeile duplizieren. Lassen Sie uns mit dem ersten Abschnitt arbeiten. Dies wird also auf der linken Seite bei mittleren Geräten und höher sein. Eine Überschrift der Ebene 2, die für den Text des MV-Kalenders ist. Dies wird also die Überschrift für unser erstes Bild von auf der fertigen Seite sein. Dies ist der Text, den Sie hier sehen, gefolgt von AP-Elementen und dann unserem Bild. Dies ist auch auf den breiteren Bildschirmgrößen gleich. Aber stattdessen haben wir diese Seite an Seite. Also nach unserer Überschrift können wir ein p-Element mit einer Klasse hinzufügen, die wir vorher von lead verwendet haben. Dies wird unseren Text auffällig machen und einen Text von nie wieder verpassen ein Datum. Am unteren Rand können wir unser Bild hinzufügen, das in Bildern Ordner gespeichert ist. Auf der ersten, die ich verwenden werde, ist die calendar.png, der alte Text des Kalendersymbols und dann wird der Klassenname w 50 sein, um 50 Prozent breit zu machen. Das ist also unser erster Abschnitt, also werde ich unsere Überschrift, unseren Absatz und auch unser Bild kopieren und dann zu unserem zweiten Abschnitt gehen, an diesem Ende. Der Text in diesem ist flexibel zu tun Listen und ich mache dies einfach zu einem Kapital, das Lead-Tag wird sein: klare Aufgaben wie ein Profi. Das Bild, dieses Mal wird für unsere Liste sein und vergessen Sie nicht, den alten Text zu ändern. Bevor wir also weiter mit unserer Reihe gehen, lassen Sie uns überprüfen, dass alles gut aussieht und das ist unsere erste Reihe, jetzt abgeschlossen. Zurück zu unserem Texteditor, werden wir eine zweite Zeile erstellen. Beginnen wir damit, unseren ersten zu greifen, da die Struktur die gleiche sein wird. Wir können dies in einfügen, immer noch in unserem Abschnitt und genau wie zuvor, alles, was wir tun müssen, ist, unseren Text und das Bild zu ändern. So wird der Text zusammenarbeiten und dann mit allen Teammitgliedern arbeiten. Das Bild ist für den Chat und auch den alten Text zu ändern, die Klassen können gleich bleiben und die für Telefon, Ebene zwei Überschrift ist Notiz nehmen. Der Lead-Text ist Notizen auf dem Sprung und das Bild ist Notiz zusammen mit den alten Texten auch. Also das alles sieht gut aus, jetzt haben wir unsere zwei Abschnitte in unseren Reihen. Lassen Sie uns zum Browser gehen und sehen, wie das aussieht. So sieht das auf den größeren Bildschirmen gut aus. Lassen Sie uns das verkleinern. Das sieht gut aus, vielleicht nur eine Polsterung oben und unten in unseren Abschnitten. Wir können dies in unseren umliegenden divs direkt nach dem Call-md-6 pudding y tun. Lassen Sie uns für einen Wert von vier gehen und wir können dies auf allen vier unserer Abschnitte gleich machen. pudding y4 und auch der letzte auch, aktualisieren und das sind unsere Bilder jetzt zu unserem Projekt hinzugefügt. Großartig, so dass Sie jetzt wissen, wie Sie Styling auf Bilder mit Bootstrap anwenden. Eines der großartigen Dinge, sowie viele der Klassen, die wir gerade gelernt haben , werden auch auf andere Elemente zutreffen. Wir sind nicht darauf beschränkt, diese nur mit Bildern zu verwenden. Schließlich, fühlen Sie sich nicht so, als müssten Sie alle diese Klassen auswendig lernen, während wir weitergehen. Wenn Sie stecken bleiben, müssen Sie nur die Bootstrap-Dokumentation als Referenz verwenden . 12. Verschachtelte Zeilen und Blockzitate: Bei der Arbeit mit unseren Projekten haben wir uns eine Struktur genau wie diese angesehen. Wir haben Zeilen innerhalb unserer Projekte hinzugefügt. Dann haben wir unsere Zeilen in Anzahl von Spalten aufgeteilt. Zum Beispiel hatten wir einen sechsteiligen Abschnitt auf der linken Seite und auch sechs Spalten auf der rechten Seite. Wir teilen unsere Reihe in zwei gleiche Teile auf. Was wäre, wenn wir eine Situation hätten, in der wir auch einen dieser Abschnitte aufteilen wollten? Wenn wir so eine Reihe hätten. Dann unsere sechsspaltige Sektion auf der linken Seite. Wir haben manchmal einen Fall, in dem wir diesen Abschnitt aufteilen wollen und auch unser Gittersystem hier im Inneren nutzen wollen. Die ersten vier wären im Wesentlichen fast genau das gleiche wie zuvor. Wir könnten sechs Spalten auf der rechten Seite und dann sechs Spalten auf der linken Innenseite eines div hinzufügen. Nun, das ist nicht die Art und Weise, wie wir das in Bootstrap tun sollten. Dies liegt daran, dass Bootstrap unsere Spalten nur ein direktes Kind einer Zeile sein müssen. Der richtige Weg, dies zu erreichen, wäre, eine neue verschachtelte Zeile innerhalb unserer Spalten zu erstellen . Zum Beispiel würden wir es so haben. Wo werden wir ein neues div oder neue Elemente mit der Klasse der Zeile erstellen. Dann wird es uns ermöglichen, das 12-Säulen-Gittersystem wieder zu nutzen. Wir können diese Zeile nun in so viele Abschnitte aufteilen, wie wir möchten. Wenn wir drei verschiedene Abschnitte auf unsere Zeile anwenden wollten, könnten wir unsere Spalten anwenden. Dies könnte vier Teile, vier Teile in der Mitte und dann vier Teile auf der rechten Seite sein. Dies ist der richtige Weg, um verschachtelte Zeilen und Spalten innerhalb von Bootstrap zu nähern. Auf die fertige Version können wir dieses verschachtelte Zeilen-Setup hier ganz unten nutzen. Ich habe diesen äußeren Abschnitt auf nur acht Spalten beschränkt , anstatt die volle Breite von 12 Spalten. Da wir Spalten verwenden, um dies zu erreichen, können wir diese Zeugnisse nicht direkt innerhalb von gleichen Spaltenräumen verschachteln. Aber stattdessen ist es so, wie wir vorher entdeckt haben, können wir eine zweite Zeile erstellen, die innen verschachtelt ist, und dann haben wir Zugriff auf unser vollständiges 12-Säulen-Gittersystem, wieder innerhalb dieser Zeile. Obwohl dieser äußere Wrapper acht Spalten breit ist, die innere verschachtelte Zeile immer noch die vollen 12 Spalten zur Verfügung. Gehen wir zum Projekt und erstellen Sie dies ganz unten auf unserer Indexseite. Also kurz vor unserem JavaScript, erstellen wir unseren Abschnitt. Ich werde diesem eine Container-Flüssigkeit geben, etwas Marge oben und unten, etwas Polsterung oben und unten zu. Ich brauche eine helle Hintergrundfarbe. Der nächste Schritt besteht darin, hier eine Zeile hinzuzufügen. Dies wird unsere erste Zeile sein, die das anfängliche div enthält, das acht Spalten breit ist. Dies wird auf den mittelgroßen Geräten sein. Also verwenden wir die Klasse von col-md-8, um dies in der Mitte zu halten. Wir können auch für mittlere Geräte einen Offset auf den Wert von 2 bereitstellen. Schließlich das Text-Center, um unseren Text in der Mitte unseres Abschnitts auszurichten. All dies wird hier drin sein, ist eine Ebene drei Überschrift und dies wird die Klasse von Py Dash 3 haben, um Ihnen einige Abstände oben und unten zu geben. Der Text, wie wir sehen können, wenn wir zur endgültigen Version gehen, wird das sein, was unsere Benutzer zu sagen haben. Lassen Sie uns dies in unsere Überschrift hinzufügen, speichern Sie diese und überprüfen Sie dies im Browser. Am unteren Rand unserer Seite kann ein niedrigerer dies aufgrund des Hintergrunds derzeit nicht sehen. Dieser Abschnitt ist acht Säulen breit. Um nun unsere beiden Abschnitte innerhalb zu erstellen, müssen wir eine verschachtelte Zeile erstellen. Gehen wir zurück zu unserem Projekt. Wir werden das direkt nach unserer Level-3-Überschrift hinzufügen. Also ein div mit der Klasse der Zeile. Im Inneren von hier können wir auf das volle 12-Säulen-Gittersystem zugreifen. Lassen Sie uns das jedoch schmaler halten. Ich werde zwei Abschnitte erstellen, die jeweils fünf Spalten sind. Wir können dies tun und dann den Rest des Inhalts mit der Flexbox versetzen. Also zuerst können wir ein div hinzufügen und wir können eine Klasse von einfach col-5 hinzufügen. Dadurch wird der Abschnitt unabhängig von den Haltepunkten immer fünf Spalten breit. Ich werde dies duplizieren, um unsere zwei Abschnitte innerhalb unserer verschachtelten Zeile hinzuzufügen , und dann können wir diese platzieren, wir rechtfertigen Inhalte herum. Dies wird den gleichen Abstand um beide unserer Abschnitte hinzufügen. Da wir eine hellgraue Hintergrundfarbe haben, werde ich diese auch mit einer anderen Farbe versetzen. Wir können bg white oder unsere zwei verschachtelten Abschnitte verwenden, und auch einige Polsterungen rundum, was ein Wert von 4 sein wird. Ich werde diese beiden kopieren und diese auch zu unserem zweiten Abschnitt hinzufügen. Innerhalb des ersten Abschnitts auf der linken Seite, werden wir einige Bewertungen oder einige Zitate hinzufügen. Genau wie wir hier sehen können, werden wir einige Beispieltext hinzufügen und dann können wir einen Benutzer hinzufügen, der es direkt unten zitiert hat. Wir können dies mit einem Blockquote tun, das ein Standard-HTML-Element ist. Aber wir können auch eine Bootstrap-Klasse von blockquote innerhalb von hier hinzufügen. Innen als p-Element verschachtelt. Ich werde auch einige Lorem Ipsum Text hinzufügen, indem Sie lorem eingeben und dann Tab drücken. Wir können dies in Visual Studio Code tun. Wenn Sie diese nicht zur Verfügung haben, geben Sie einfach einen Beispieltext oder ein Zitat Ihrer Wahl ein. Dennoch, wenn wir blockquote verwenden, können wir auch eine Fußzeile hinzufügen, die das Ende unseres Angebotsabschnitts sein wird und Bootstrap hat auch eine Klasse, die dafür verfügbar ist, die einfach Blockquote-Fußzeile ist. Dies wird die Quelle unserer Zitate sein. Ich werde sagen „Free plan user“ und dann können wir die Elemente der Website verwenden, die HTML ist, um einen Benutzer zu zitieren. Ich werde sagen: „Captain anonym“. Gehen wir zum Browser und schauen Sie sich das an. Da gehen wir. Da sind unsere zwei verschachtelten Abschnitte innerhalb unserer Reihe. Wir müssen das nur für die rechte Seite duplizieren. Also haben wir bereits unser umgebendes div für diesen Abschnitt. Lasst uns das Blockquote packen und diese gleichen Klassen verwenden. Ich werde dies nur ändern, um ein Pro-Plan-Benutzer zu sein. In diesem Fußzeilenabschnitt haben wir eine neue Klasse von Blockquote Fußzeile. Dies wird in der Regel zur Identifizierung der Quelle des Angebots verwendet und oft mit den Website-Elementen kombiniert, die als Wrapper für den Quellnamen verwendet wird. Jetzt speichern wir das und sehen, wie das aussieht. Wir haben jetzt unsere zwei Zitate, nebeneinander. So können wir Zeilen mit Bootstrap verschachteln. Wir können so viele Spalten oder so viele verschachtelte Zeilen erstellen, wie wir möchten. Aber denken Sie immer daran, dass wir beim Erstellen neuer Spalten immer einen übergeordneten Rapper als Zeile benötigen. Als nächstes werden wir uns darauf konzentrieren, wie eine responsive Navigation zu erstellen, die wir an der Spitze unseres Projekts aufnehmen werden. 13. Navbars und Toggles: Wir werden uns jetzt auf einen der wichtigsten Faktoren auf allen Websites konzentrieren, und das ist die Navigation. Um unsere Website im Umgang mit Navigationen voll reaktionsfähig zu machen, brauchen wir eine Möglichkeit, sicherzustellen, dass unsere Navigationslinks nicht nur gut aussehen, sondern auch Bücher vollständig zugänglich und reaktionsschnell sind. Darauf konzentrieren wir uns in diesem Video, lasst uns eintauchen und werfen einen Blick. Wenn es um Navigationen auf allgemeinen Websites geht, wäre ein gemeinsamer Ansatz, den Sie vielleicht sehen können, etwa so. Auf der linken Seite haben wir eine typische Desktop-Ansicht, wo wir eine Navigation haben, ein Logo auf der einen Seite und dann unsere Navigationslinks auf der anderen Seite. Wenn wir mit seinen kleineren mobilen Bildschirmgröße umgehen, brauchen wir oft einen anderen Ansatz, da weniger Platz auf dem Bildschirm zur Verfügung steht. Was wir normalerweise oben sehen, ist eine Navigation, wo wir eine Schaltfläche haben, die wir einige Links zur Verfügung stellen, wenn wir darauf klicken, oft die gleichen Links, die wir auf der gesamten Desktop-Ansicht haben, aber nur ausgeblendet, bis wir auf den unteren . Wie nähern wir uns dem mit Bootstrap an? Nun, die Art, wie das funktioniert, ist, dass wir im Grunde zwei Abschnitte erstellen. Wir haben einen Abschnitt für alle Listenelemente, und dann haben wir einen zweiten Abschnitt für unsere Schaltfläche. Wir erstellen dann eine Verbindung zwischen diesen über eine ID, und wir werden einen Blick darauf werfen, wie dies als nächstes zu tun ist. Wir stellen diesen Link mit unserer ID zur Verfügung, hinter den Kulissen, Bootstrap wird auch das JavaScript behandeln, damit alle separaten Punkte arbeiten. Lassen Sie uns jetzt zu unserem Projekt gehen, wo wir jetzt unsere Navigation anwenden können. Machen Sie gute Fortschritte mit unseren Projekten und jetzt gehen wir zurück an die Spitze unseres Projekts und erstellt die Navigation. Wenn Sie zur endgültigen Version gehen, werden wir etwas schaffen, das so aussieht. Wir haben das Logo auf der linken Seite, wir haben auch unsere kostenlosen Links auf der rechten Seite für die Navigation. Wenn wir zu einem kleinen Bildschirm scrollen, erhalten wir eine Dropdown-Schaltfläche, die, wenn Sie darauf klicken, um unsere Links auf den kleineren Mobil- und Tablet-Größen anzuzeigen, so dass es auf kleineren Bildschirmen viel besser aussieht. Lassen Sie uns nun SNR-Projekt von der Spitze unseres Körperabschnitts erstellen. Zurück zur Indexseite, scrollen Sie nach oben zu unserem Körper. Schauen wir uns das offene Innere an, das gerade hier ist. Wir werden mit einem Navigationsleiste Wrapper beginnen, der einen Website-Titel und ein Logo haben wird. Ich werde das nav-Element verwenden, um dies zu tun. Diese Falle bietet uns auch einige Klassen, die wir für die Navigation verwenden können, die erste ist einfach navbar, die wir Flexbox hinzufügen werden, ich positioniere zusammen mit etwas Padding. Als nächstes werde ich navbar hinzufügen, erweitert, - LG. Dies ist der Inhalt BD Vollbreitenansicht auf unseren großen Bildschirmen. Natürlich können wir den Bruchpunkt ändern, um alles andere wie MD Wenn wir es vorziehen und dann schließlich etwas Chlor hinzufügen, indem Sie die navbar Lichter besuchen. Innerhalb unserer Navigationselemente verschachtelt, werden wir einen Link hinzufügen, für unseren Website-Titel ist, oder wir können ein Logo innerhalb der haben, wenn Sie es vorziehen. Ich werde mit einem Klassennamen beginnen. Die Klasse, die wir hinzufügen müssen, ist navbar Marke, die Sie unser CSS für Abstand und Größe in unserem Website-Titel hinzufügen werden. Wir können den Namen der Bootstrap-Produktivität oder den Namen Ihrer Wahl hinzufügen. Jetzt unter unserem Website-Titel, können wir unsere zwei Abschnitte, die wir zuvor erwähnt, hinzufügen , die Links und auch die Schaltfläche, die Togglese Links öffnen und geschlossen. Beginnen wir mit unserer grundlegenden Schaltfläche, die eine Art von Schaltfläche haben wird. Dies wird unsere Links kontrollieren, die wir innerhalb dieses div hinzufügen können. Lassen Sie uns einfach eine ungeordnete Liste für jetzt erstellen. Dann können wir Bootstrap sagen, dass diese Schaltfläche ist, um diese Listenelemente zu steuern, indem Sie zuerst eine ID hinzufügen. Lassen Sie uns die ID zu allen Links hinzufügen. Innerhalb von hier werde ich die ID als navbar-nav hinzufügen, und dann können wir dies an die Schaltfläche als Datenzielattribute übergeben. Innerhalb des öffnenden Tags fügen wir die Datenziele hinzu und setzen dies auf unsere ID, also verwenden wir dies genau wie ein CSS-Selektor. Wir verwenden den Hash, da dies eine ID und dann der ID-Name von navbar-nav ist. Diese Schaltfläche steuert jetzt unsere Listenelemente, und wir können ihm mitteilen, dass der Inhalt ein- und ausgeblendet wird, indem Sie Datenumschalten, reduzieren. Wieder innerhalb der Schaltfläche richten wir unseren Daten-Toggle ein und setzen dies gleich kollabieren. Mit diesem jetzt verknüpft ist, besteht der nächste Schritt im Grunde darin, die erforderlichen Bootstrap-Klassen und auch einige Barrierefreiheitsattribute hinzuzufügen die erforderlichen Bootstrap-Klassen und auch , um die Dinge zu beenden. Beginnend mit dem Button können wir diese auch auf das Online hinzufügen, damit es besser lesbar ist. Das nächste Attribut wird für unsere Klasse sein, und der Klassenname wird navbar-toggle sein, was etwas Padding, Dimensionierung und auch einen Rahmen hinzufügen wird . Das nächste Mal werden wir einige Attribute hinzufügen, um unsere Website zugänglicher zu machen. Dies ist für Menschen, die Bildschirmlesegeräte oder mit Behinderungen verwenden. Machen Sie unsere Website so zugänglich wie möglich. Das erste Attribut, das wir hinzufügen werden, sind die Arien-Steuerelemente, und setzen Sie dies gleich unserer ID, die navbar-nav ist. Stellen Sie sicher, dass dies der gleiche Name ist, den wir der ID direkt unten geben, so dass es mit unseren Links übereinstimmt. Wir müssen verstehen, wo die Schaltfläche auf ein zusammenklappbares Element abzielt, dh unsere Liste. Als nächstes haben wir Arie erweitert. Ich werde dies auf den Wert false setzen. Dies wird Bildschirmlesegeräte mitteilen, ob unsere Liste zu einem bestimmten Zeitpunkt erweitert oder reduziert wird, und wir setzen dies auf false, wenn das zusammenklappbare Element standardmäßig geschlossen wird, weil unsere Links nicht erweitert werden , bis ein Benutzer auf diese Schaltfläche klickt. Der letzte, den wir hinzufügen müssen, ist das Arie-Label, das so eingestellt wird, dass die Navigation umgeschaltet wird. Dieses Label kann ein beliebiger Name unserer Wahl sein, und dies ist ein Text gibt dem Benutzer einen erkennbaren Namen. Das letzte Stück dieser Schaltfläche besteht darin, die drei Zeilen hinzuzufügen. All diese freien Symbole, die Sie auf dem kleinen Bildschirm sehen. Diese können mit einer Span-Elemente mit einer Bootstrap-Klasse hinzugefügt werden. Lassen Sie uns diese Span-Elemente zwischen der Schaltfläche öffnen und schließen Tag hinzufügen. Wir müssen keine Inhalte zwischen unserer Spanne hinzufügen. Alles, was wir tun müssen, ist die Klasse der navbar toggler Symbol hinzuzufügen. Nun, wenn wir dies ein Speichern geben und zum Browser zu allen Projekten gehen, wird es neu geladen, mit unserem Button und auch unserem Website-Titel. Als nächstes müssen wir in unseren Links hinzufügen. Gehen wir zurück zu unserer Navigation und suchen Sie nach unserer ungeordneten Liste, wo wir beginnen werden, indem wir eine Klasse zu diesem Wrapper hinzufügen. Klassenname wird navbar-nav sein, die alle Ränder und Begnadigung steuern und auch die Standardliste entfernen wird [unhörbar]. Dies nutzt auch die Flexbox. Als nächstes können wir unsere Listenelemente erstellen und wieder, diese werden eine Bootstrap-Klasse haben, und dies wird nav Element mit einem Element innerhalb verschachtelt sein. Dies hat auch eine Klasse, der Klassenname für die Links wird nav link sein, die jeden Standard-Link-Chlor entfernen wird, und setzt auch alle erforderlichen Rand und Padding. Dies wird nur zu unserer Indexseite verlinken, so dass wir in der index.html hinzufügen können. Da dies der Home-Link sein wird, lasst uns dieses Listenelement greifen, da wir dies noch zwei Mal einschließen werden. Der zweite Link wird für die Preisgestaltung sein. Wir haben diese Seite noch nicht erstellt. Dazu werden Sie auf die pricing.html verlinken. Blow das einfach, unser drittes und letztes Glied wird für Auftragnehmer sein. Auch hier haben wir keine contact.html Seite erstellt, aber wir werden diese sehr bald erstellen. Lassen Sie uns diese Datei jetzt speichern und überprüfen Sie dies im Browser, drücken Sie neu laden. Auf einem kleinen Bildschirm sehen wir den gesamten Inhalt. Wir sehen sowohl die Schaltfläche als auch die Links. Wenn wir auf die große Bildschirmansicht-Schaltfläche gehen wird entfernt, und wir sehen nur die Links. Wir können dies beheben und diese Links auf der kleinsten Bildschirmansicht ausblenden, indem wir Bedürfnisklassen von collapse und dass navbar kollabieren zum umgebenden div hinzufügen. Zurück zu unserer Navigation müssen wir nach unserem div suchen, das unsere Links mit der Idee von navbar-nav umgibt, und wir müssen eine Klasse von Zusammenbruch und auch navbar-collapse hinzufügen. Lassen Sie uns zum Browser gehen und sehen, ob dies unser Problem behebt. Dies sieht besser auf kleinen Bildschirmen aus. Wenn wir dies erweitern, sehen wir jetzt die Schaltfläche wurde entfernt und die Links erscheinen. Wir können versuchen, dies zu erweitern, indem wir auf die Schaltfläche klicken, und wir erhalten unsere Links auf der kleinen Bildschirmansicht. Das letzte, was zu tun ist, ist, unsere Links auf der großen Bildschirmansicht auf die rechte Seite zu bewegen . Anstatt gegen den Site-Titel zu sein, wollen wir sie auf der rechten Seite. Wir können dies leicht mit der CSS-Flex-Box tun, indem die Klasse der Begründung des Inhalts in demselben Deal wie zuvor hinzufügen, der die Links umgibt. Wir können das hier hinzufügen. Es ist jetzt schiebt unsere Links auf die rechte Seite der Navigation. Selbst Sie würden ein voll reaktionsfähiges und zugängliches Dropdown-Navigationsmenü. 14. Karten, Kartengruppen und Decks: Wir werden jetzt einen Blick auf die Verwendung von Karten in Bootstrap werfen, und Sie können sich eine Karte als Container für einige Informationen vorstellen. Ein typischer Anwendungsfall könnte eine Produktliste einem E-Commerce-Store sein, genau wie wir hier sehen. Wir können unsere öffentliche Auflistung mit einer Klasse von Code Wrapper beginnen und auch viele der Klassen nutzen, die Bootstrap bietet, um unsere Inhalte zu gestalten. Innerhalb unserer Verpackung könnten wir ein Kartenbild haben und dann darunter können wir auch einen Kartenkörper haben, um den gesamten Rest des Inhalts zu wickeln. Je nach Anwendungsfall auf den Kartenkörper, kann auch eine Kopf- und einen Fußzeilenabschnitt enthalten. Alle weiteren Informationen für unser Produkt wie ein Kartentitel, ein Untertitel und auch der Kontext für unsere Beschreibung. Zusammen mit diesem, wir auch frei, jede der HTML-Markup, die Sie benötigen, wie die „Jetzt kaufen“ -Button. Wir können das so aussehen lassen und fühlen, wie wir es wollen. Jetzt gehen wir zu unserem Projekt und wenden diese Kartenstruktur auf unsere Produktpreisseite an. Erwähnt für bei der Erstellung unserer Navigationslinks, jetzt müssen wir eine Preis- und Kontakt-Us-Seite erstellen. Wir werden jetzt auf der Preisseite arbeiten und Bootstrap-Karten eingeführt. So wird die endgültige Preisseite aussehen. Wir werden die Karten nutzen, um dieses Layout zu erstellen, das unsere kostenlosen Preisabschnitte enthalten wird , indem wir einige der Klassen verwenden, die wir gerade nachgeschaut haben. Wenn Sie auch mehr über Bootstrap-Karten erfahren möchten, können wir zu der Dokumentation gehen, und wir können dies im Komponenten-Link finden. Natürlich, fühlen Sie sich frei, einen Blick durch diese Kartendokumentation, die ich werde in das Projekt springen und mit diesen Preisabschnitten zu arbeiten. Beginnen wir mit der Erstellung unserer neuen Datei für unsere Preisseite innerhalb der Wurzeln unseres Verzeichnisses. Wir möchten diese Preisgestaltung HTML nennen, da dies eine HTML-Datei ist. Wieder einmal müssen wir über alle Boost-Up-Links bringen. Wir werden auch den gleichen Header verwenden, um auch konsistent zu sein. Ich werde einen Vorsprung bekommen, indem ich auf die Indexseite gehe, alles auswähle und dann in unsere Preisseite einfüge. Direkt über unserem JavaScript können wir die nicht benötigten Abschnitte entfernen, so dass wir den unteren Abschnitt mit der verschachtelten Zeile nicht benötigen. Wir brauchen die vier Bilder nicht, damit wir diese entfernen können, wir brauchen nicht den Abschnitt mit den Symbolen, das kann auch gehen, und schließlich brauchen wir keine Listengruppenelemente. Lassen Sie uns diese Datei ein Speichern geben, und wenn wir über den Browser gehen, klicken Sie auf den Preislink, und wir sind mit der gleichen Navigation und oberen Header Abschnitt links. Als nächstes ist es, den Website-Titel zu ändern, öffnen Sie den Kopf. Am Ende dieser werde ich die Preise hinzufügen, da dies die Preisseite ist. Jetzt scrollen wir nach unten und wir können unseren neuen Abschnitt für alle Karten erstellen. Am unteren Rand des Body-Abschnitts, direkt über unserem JavaScript, können wir unseren neuen Abschnitt hinzufügen. Dies wird die Klasse des Containers haben, also ist es eine feste Größe, die hier innen verschachtelt ist. Ich werde ein div erstellen, das ein Wrapper für die freien Kartenabschnitte sein wird. Dies wird eine Klasse haben, die gleich Kartendeck sein wird. Wir werden uns das genauer ansehen, wenn wir einige Karten haben, mit denen wir arbeiten können. Für jetzt können wir jedoch einen Randwert von drei oben und unten hinzufügen und auch den Text in der Mitte ausrichten. Jetzt können wir weitermachen und unsere erste Karte erstellen. Dies wird ein div als Wrapper mit der Klasse der Karte haben. Die Klasse der Karte wird die Position, der Anzeigetyp auf Flachs, das Wort Drop auf die allgemeinen Farben und Ränder. Dann werde ich hier ein paar neue Abschnitte erstellen. Wir werden den Kartenkopf und auch den Kartenkörper erstellen. Beginnen wir mit dem Header-Abschnitt oben, dies ist der Kartenkopf. Im Inneren wird dies eine Ebene vier Überschrift haben, mit dem Preis des Plans. Die Stufe vier Überschrift und der erste Preis wird frei sein, dies nimmt auch in einer Bootstrap-Klasse von Schriftgewicht normal. Welche anderen Töne, werden wir die Telefone so einstellen, dass sie ein Gewicht von normal haben, und dies ist innerhalb unseres Header-Abschnitts verschachtelt. Diese Karte Header Klasse wird einen Radius an der Spitze der Karte hinzufügen, einige Abstände und auch alle Farben. Kurz nach diesem Header-Abschnitt können wir unseren Body Abschnitt erstellen. Wie erwartet, wird dies die Klasse des Kartenkörpers haben, die die Flexbox-Wachstums- und Schrumpfwerte zusammen mit Abstand und Dimensionierung festlegen wird. Drinnen hier unsere Ebene zwei Rubrik, die den Preis des Plans haben wird. Eine Klasse von Kartentitel, die einige Ränder in die Box unseres Titels. Dies ist ein kostenloser Plan, also wird der Preis Null sein, gefolgt von den kleinen Tags, wo wir den Schrägstrich und dann Monat haben werden. Dies hat auch eine Klasse, die von Bootstrap zur Verfügung gestellt wird und dies wird Text stumm geschaltet sein. Wenn wir das sagen, können wir genau sehen, was diese Klasse tut. Lassen Sie uns unsere Preisseite neu laden, und das macht sie kleiner und eine andere Farbe. Nach der Ebene zwei Überschrift, können wir den Kartentext innerhalb eines p Elemente hinzufügen. Diese Klasse von Kartentext, wenn Sie ein Bootstrap verwenden , wird für den Großteil unserer Texte auf der Karte verwendet, wie zum Beispiel eine Produktbeschreibung, und unsere Beschreibung lautet „Probieren Sie es für immer kostenlos aus“. Darunter können wir eine eigene Bestellliste erstellen. Die ungeordnete Liste wird einige Funktionen zu diesem Preisplan haben. Was genau in der ungeordneten Liste enthalten ist, hat eine Bootstrap-Klasse von Liste auf Stilen. Dadurch werden alle Stil-Zuflusslisten entfernt. Wir können einen Rand oben und unten als Wert von vier hinzufügen und dann unsere Listenelemente innerhalb erstellen. Die erste Funktion für den kostenlosen Plan, Ich werde ein Terabyte Speicher hinzufügen, und wir können diese noch fünf Mal duplizieren, reduzieren mehr Funktionen. Es ist x für die zweite wird Hunderte von vorgefertigten Themen sein. Wie ich voran gehen und jeden Text hinzufügen, den Sie in diesem möchten, um es zu Ihrem eigenen zu machen. Ich werde als nächstes den Kalender und die Planung hinzufügen. Wenn alle Punkt wird Erinnerungen und Warnungen sein, zweite bis letzte wird unbegrenzte Liste und Seiten sein. Dann schließlich benutzerdefinierte Etiketten. Denken Sie daran, dass wir vorher gesagt haben, dass wir bei der Verwendung einer Karte frei sind, jede andere benutzerdefinierte HTML hinzufügen, die wir mögen, wir sind nicht beschränkt auf die Kartenklassen und das Layout, das Bootstrap schlägt zu verwenden. Auf der ungeordneten Liste können wir auch Dinge wie Schaltflächen hinzufügen, und dies wird ein Link sein, um loszulegen. Diese Schaltfläche wird auch den Typ der Schaltfläche haben. Die Basis setzt in die Klasse von btn, dann btn Block, der dies zur vollen Breite der Seite macht. Wir können dies sehen, wenn wir dies speichern und aktualisieren, dies wird die Schaltfläche dehnen die volle Breite voller Karte. Wir können dies klarer sehen, wenn wir einen Schaltflächenumriss hinzufügen. Ich werde dies als die Schaltfläche Gliederungsinformationen hinzufügen, und da gehen wir. Da Bootstrap zuerst mobil ist, ist dies die volle Breite der Seite, da wir nur eine Karte haben. Aber jetzt werde ich voran gehen und wiederholen Sie dies für Karte Nummer 2, und 3 und wir können sehen, welche Wirkung das haben wird. Lasst uns unsere Karte schnappen, das umliegende div. Wir können das kopieren und sicherstellen, dass wir das umgebende div mit der Klasse des Kartendeckes behalten. Wir können das noch zwei Male darin einfügen. Für die mittlere werde ich dies ändern, um den Pro-Plan anstatt frei zu sein. Wir können es ändern, um Pro zu sein. Ihre Preise können $10 pro Monat betragen. Der Kartentext verbessert den Zugriff auf Pro-Funktionen. Ich werde nicht voran gehen und alle diese Listenelemente ändern , weil es für ein ziemlich langweiliges Video machen wird. Aber natürlich, gehen Sie weiter und ändern Sie diese, wenn Sie Ihre Projekte sehen möchten. Alles, was ich als nächstes tun werde, ist, die Schaltfläche von „Erste Schritte“ zu „Upgrade“ zu ändern. Der dritte, das kann für das Geschäft sein. Wir können den Preis noch einmal ändern, lassen Sie uns gehen für 29, den Text, unbegrenzte Benutzer, und zusätzlichen Speicher, und ändern Sie dann die Schaltfläche am Ende zu einem kleinen b-Upgrade. Da dies beide bezahlten Pläne auf dem zweiten und dritten sind, werde ich auch die Schaltfläche ändern, um etwas anders zu sein. Anstatt den Schaltflächenumriss zu verwenden, werde ich dies ändern, um einfach Schaltflächeninformationen zu sein. Hier war eine einfarbige Hintergrundfarbe. Dies wird auf der letzten sein, und auch der in der Mitte. Laden Sie neu und haben Sie jetzt unsere kostenlosen Karten nebeneinander auf der größeren Ansicht. Wenn wir dies auf ein mobiles Gerät skalieren, sind diese nun alle vertikal gestapelt. Sie werden in der Desktop-Ansicht feststellen, diese Karten etwas Platz dazwischen haben. Dies liegt an der Kartenverpackung. Früh haben wir diesen Karten-Wrapper und die Klasse von Kartendeck hinzugefügt. Wenn wir einen Blick darauf werfen, bietet diese Klasse den Rand um die Karten, die wir sehen. Wenn wir das entfernen wollten und keinen Platz dazwischen haben, könnten wir dies ändern, um eine Kartengruppe zu sein, und gehen Sie zum Browser. Dadurch wird nun der gesamte Abstand zwischen unseren Karten entfernt sie näher zusammenrücken. Dies ist eine weitere Option, aber ich werde das Kartendeck des Raumes zwischen diesen wieder einbauen, und dann diesen Abschnitt und auch diese Seite zu beenden, werde ich einen Header direkt über diesem Kartenabschnitt hinzufügen. Zurück zu allen Kartenbehältern, müssen wir dies direkt über unserem Container hinzufügen. Wir fügen es einfach hinzu. Fügen wir ein div, die padding-Klasse mit einem Wert von 3 hinzu, um einige Abstände aller Runden hinzuzufügen, und auch die Klasse des Tech Centers. Innerhalb dieses div, können wir eine Ebene 2 Überschrift der Preise hinzufügen, und auch einige Texte knapp unterhalb der kostenlos für die meisten Benutzer verwenden oder aktualisieren Sie Ihren Plan auf Pro-Funktionen zugreifen. Wir können dies auch hervorheben, indem wir eine beliebige Klasse von Lead zu unserem Text hinzufügen, die wir bereits zuvor in diesem Projekt betrachtet haben. Über zu unserer Preisseite, [unhörbar] sehr schön aussehende Preisabschnitt für unsere Projekte. So können wir Bootstrap-Karten verwenden, um unsere Inhalte schnell auslegen zu können. Das wirklich nützliche für Anwendungsfälle genau wie diese. [ unhörbar] Dinge wie Produktangebote, wie wir uns zuvor angesehen haben. Dies ist es jetzt für Karten und ich werde Sie im nächsten Video sehen , wo wir einen Blick auf die Verwendung der Bootstrap-Formulare werfen. 15. Formen und Eingaben: Formulare und Eingaben sind etwas, das wir ständig beim Besuch von Websites oder bei der Nutzung von Apps verwenden. Sie verwenden, um Informationen oder Daten wie unseren Namen, unsere E-Mail, Passwörter oder sogar eine Nachricht zu erfassen . Das ist, was wir uns in diesem Video ansehen werden. Wir sind jetzt mit unserer Preisseite fertig, wir haben jetzt diesen Kontakt-Link, um jetzt auf eine neue Seite zu verlinken. Wir werden etwas bauen, das so aussieht. Wenn wir zur endgültigen Version gehen, wird es die gleiche Navigation und Kopf Abschnitt teilen. Dann werden wir ein Formular direkt unten mit Bootstrap erstellen. Dies wird mit HTML-Markup und einem Server erstellt werden, wir werden einige Bootstrap-Klassen verwenden, um uns ein schönes Raum-Timing zu geben, mit dem wir arbeiten können. Nach dem Projekt können wir eine neue Datei in der Seitenleiste erstellen. Wieder einmal wird dies in den Wurzeln unserer Projekte liegen. Es ist der Kontakt unseres HTML. Da wir die gleiche Navigation und auch den Header-Abschnitt teilen werden, werde ich die Datei pricing.HTML kopieren. Lassen Sie uns das alles kopieren und fügen Sie es dann in unsere Kontakte ein. Natürlich brauchen wir diese Abschnitte, die wir gerade im letzten Video erstellt haben, nicht. Wir brauchen den Kartenabschnitt nicht. Ich scrolle noch weiter nach oben. Wir brauchen auch nicht den Preisbereich. Alles, was wir haben, ist das JavaScript unten unten. Dann header Abschnitt oben oben. Wir können den Seitentitel ändern und wir werden sagen, kontaktieren Sie uns. Jetzt lasst uns an unserem Formular arbeiten. Direkt unter unserem Header-Abschnitt. Über dem JavaScript wollen wir ein Formular Elemente erstellen. Dieses Formularelement wird eine Bootstrap-Klasse haben. Unter dieser Ebene können wir auf die Bootstrap-Dokumentation gehen. Dies befindet sich innerhalb der Komponenten. Dann gehen wir zum Formularabschnitt, um weitere Informationen zu erhalten. Es gibt viele verschiedene Arten von Formularen, die wir verwenden können, alle relativ zu den Eingaben, auf denen wir sie verwenden. Aber die meisten von ihnen haben im Allgemeinen eine Formulargruppe als Wrapper. Dann platzieren wir unsere Etiketten und Eingaben, zusammen mit einigen verschiedenen Optionen für die Gestaltung unserer Formulare, einschließlich eines In-Line-Layouts. Lassen Sie sich zu unseren Projekten zurückkehren. Wir können innerhalb unserer Form beginnen. Lassen Sie uns eine Klasse von Containern zu unserem Formular hinzufügen und geben Sie ihm dann einen gewissen Rand oben mit einem Wert von vier. Dann werden wir hier drinnen jedes Label und Eingaben innerhalb eines div umwickeln. Dieses div wird die Bootstrap-Klasse von form-group haben. Diese klassische Formgruppe wird uns den erforderlichen Platz zwischen jedem unserer Eingaben geben. Dann im Inneren werden wir beginnen, indem wir ein Etikett hinzufügen, das für unseren Namen sein wird, um innerhalb Ihres Namens zu erkennen. Danach, aber immer noch, wenn innerhalb unserer Formulargruppe, können wir unsere erste Eingabe hinzufügen. Auch hier ist dies nur reguläres HTML mit einigen Bootstrap-Klassen. Dies wird den Eingabetyp von Text haben. Die Bootstrap-Klasse des Formularsteuerelements, die die Größe in der Polsterung, die Farben auf dem Rand steuern wird . Zusammen mit einem schönen Übergang in und heraus. Lassen Sie mich auf die Eingaben klicken. Danach werden wir eine zweite Formulargruppe erstellen. Dieser wird sich ziemlich ähnlich sein. Nun, dieser hier wird für unsere E-Mail sein. Die umgebende Klasse oder Formulargruppe, ich werde es im Inneren beschriften. Dies ist das Etikett für die E-Mail und den Text der E-Mail-Adresse. Als nächstes wird die Eingabe mit dem Typ der E-Mail. Genauso wie beide zur Klasse des Formularsteuerelements zum Eingabeelement hinzugefügt werden, die ID von E-Mails. Das stimmt mit unserem Label überein. Dies ist so, wenn der Benutzer auf den Text der E-Mail-Adresse klickt, wird die Eingabe aktiv, so dass er sie eingeben kann. Wir müssen dies auch direkt oben tun. Die ID des Namens, so dass dies mit unserem Namen Label übereinstimmt. Danach können wir den Platzhaltertext der Eingabe Ihrer E-Mail hinzufügen, auf die Sie antworten möchten. Bevor wir weiter gehen, lassen Sie uns überprüfen, dass dies im Browser in Ordnung ist. Lassen Sie uns überprüfen, ob unsere Links da sind. Wir haben unseren Link auf der Preisseite zur contacts.html. Schauen wir uns die Indexseite an und öffnen Sie die obere Navigation. Wir haben auch unseren Kontaktlink funktioniert. Zum Browser und in das Projekt. Klicken Sie auf den Kontakt-Button. Wir haben jetzt unseren Namen und auch unsere Adresse. Sie können den Übergangseffekt sehen, wenn dieser angeklickt wird. Wir können auch Platzhaltertext zu unserem Namen hinzufügen. Gehen wir zurück zu unserem Kontaktformular. Wir können dies in unsere Eingabe hinzufügen. Lassen Sie uns Text von geben Sie Ihren Namen. Wir haben jetzt unsere beiden Formgruppen. Der nächste wird ein ausgewählter Eingaben sein. Dies wird so sein, dass wir darauf klicken und auswählen können, auf welchen Plan der Benutzer gerade ist. Dies hat noch einmal das div mit einer Klasse von Formulargruppe. Im Inneren verschachtelt, beginnen wir mit unserem Label. Das wird für die ID des Plans sein. Nur nimmt von welchem Plan Sie verwenden. Wir fügen dann unsere ausgewählten Eingaben hinzu. Dies wird auch die Klasse des Formularsteuerelements haben. Genau wie die anderen Eingänge. Die ID wird geplant. Dies entspricht unserem Label direkt oben. Dann innerhalb unserer ausgewählten Elemente verschachtelt, können wir unsere Optionen zur Auswahl bitten. Der erste wird frei sein. Wir können den Text hier kostenlos hinzufügen. Wir können Herbst-Optionen hinzufügen. Dieser zweite wird für Pro mit dem Text von Pro sein. Die dritte ist Geschäft und die letzte ist für eine allgemeine Anfrage, ob Sie nicht angemeldet sind. Wir werden sagen, nicht-allgemeine Frage. Mal sehen, wie das in unseren Projekten aussieht, aktualisieren. Es gibt auch ausgewählte Eingaben mit unseren vier Optionen. Die nächste Eingabe wird für den Nachrichtenbereich oder den Textbereich sein. Außerhalb unserer Formulargruppe fügen wir ein neues div hinzu. Diesmal wieder die Klasse oder Formulargruppe. Das Label, das für alle Nachrichten sein wird, nur SMS Nachricht auch. Dann können wir einen Textbereich mit mehreren Zeilen hinzufügen. Wir können unsere Textbereichselemente hinzufügen. Die Klasse wird Formular-Steuerung die ID der Nachricht sein, um unser Label zu entsprechen. Wir können die Anzahl der Spalten einstellen, wenn wir möchten. Aber ich werde nur die Anzahl der Zeilen auf fünf setzen. Der letzte Teil dieses Formulars besteht darin, eine Schaltfläche zum Senden hinzuzufügen. Sie müssen die Art der Übermittlung und dann einige Bootstrap-Klassen haben. Die grundlegende Schaltfläche Styling und dann die Farbe der Schaltfläche Info, und ein Text der Nachricht senden. Lassen Sie uns dies im Browser testen. Wir haben jetzt einen Nachrichtenbereich, den wir auch erweitern können. Ich werde auch die Nachrichten-Taste senden. Die Art von natürlich, zögern Sie nicht, dieses Formular an Ihre Bedürfnisse anzupassen. Wir können Inline-Formulare erstellen, wir können komplexere Setups genau so erstellen, wo wir Optionsfelder, Kontrollkästchen, Adressfelder und vieles mehr einschließen können Kontrollkästchen, Adressfelder . Wie Sie sehen können, haben Formulare viele verschiedene Optionen und Varianten und Bootstrap hat für die meisten unserer Bedürfnisse abgedeckt. Allerdings würden wir Formulare oder andere Komponenten, die wir in verwenden, was wäre, wenn wir sie an unser Projekt anpassen müssen. Nun, das werden wir uns im kommenden Video ansehen. 16. Bootstrap-Standard-Styling umgehen: Bootstrap standardmäßig soll uns eine schön aussehende Stile und Funktionen aus der Box geben. Aber es gibt manchmal, wenn wir diese Standardwerte überschreiben müssen, nicht nur um unsere Website mehr so aussehen zu lassen, wie wir es wollen, sondern auch, damit unsere Website nicht so aussieht wie alle Bootstrap-Projekte da draußen. Dies ist ziemlich einfach zu tun und nicht mehr schwierig. Jetzt werde ich mich in einem regulären CSS bewerben. Wenn wir zu unserem Projekt gehen, haben wir bereits unsere eigene benutzerdefinierte styles.css Datei, die wir früher erstellt haben. Ich werde auch mehrere Optionen haben, wenn es darum geht , die Bootstrap-Standardwerte anzupassen. Wenn wir zu unserer index.html gehen und dann bis zum oberen Kopfteil. Eine wichtige Sache, die Sie hier beachten müssen, ist unser Link zu unseren benutzerdefinierten Stylesheets. Dies muss immer als letzte CSS-Datei unter einer derBootstrap-Dateien und jeder der CSS-Dateienplatziert werden Bootstrap-Dateien und jeder der CSS-Dateien , die Sie möglicherweise aus Bibliotheken von Drittanbietern haben. Dadurch wird sichergestellt, dass der zuletzt geladene Inhalt jedes Styling aus den beiden Dateien überschreibt. Eine Möglichkeit, dies anzupassen, besteht darin, eine benutzerdefinierte Klasse zu verwenden. Zum Beispiel, wenn Sie die navbar ändern möchten, könnten wir einfach unsere eigene benutzerdefinierte Klasse innerhalb von hier hinzufügen. Lassen Sie uns für Produktivität nav gehen. Wir können diese Klasse packen und wir können dies zu unseren benutzerdefinierten Stilen übernehmen. Speichern Sie also unsere Indexdatei. Öffnen Sie unsere styles.css. Da es sich um eine Klasse handelt, brauchen wir den Punkt. Wir können dann unsere benutzerdefinierte Klasse mit beliebigen CSS-Eigenschaften abzielen, die wir möchten. Als Beispiel können wir einfach den Hintergrund ändern, um einen Wert zu sein. Gehen wir für DDD. Speichern Sie dies, fügen Sie den Browser hinzu, gehen Sie auf die Homepage und jetzt können wir unsere benutzerdefinierte Hintergrundfarbe sehen. Eine andere Möglichkeit, jedes Bootstraps-Styling zu überschreiben, besteht darin, einfach auf den Elementnamen oder einen allgemeineren Ansatz zu zielen . Anstatt beispielsweise eine Klasse hinzuzufügen, können wir einige reguläre CSS verwenden, indem wir eines dieser HTML-Elemente abzielen. Wenn wir einen benutzerdefinierten Hintergrund auf einen unserer Entwickler auf der Seite anwenden wollten. Wir könnten einfach einen Dev-Selektor für ein benutzerdefiniertes Feld hinzufügen, den Browser neu laden, und dies wird jetzt auf alle Entwickler auf unserer Website angewendet. Dies ist also kein großartiges Beispiel, aber es ist eine Möglichkeit, alle Standardwerte außer Kraft zu setzen, und eine andere Möglichkeit, dies zu tun, besteht darin, eine der vorhandenen Bootstrap-Klassen zu verwenden und dann können wir hinzufügen oder überschreiben. Wenn wir zum Beispiel zu unserer contacts.html gehen, alle Eingaben, die wir hinzugefügt haben, diese Klasse der Formularsteuerung. Dann schnappen Sie sich das und verwenden Sie dies in unserer eigenen styles.css. Lassen Sie uns dies entfernen, wir zielen dann in Form Control-Klasse von Bootstrap. Dabei werden alle vorhandenen Formularsteuerelementstile weiterhin angewendet, da wir die Bootstrap-Stylesheets verwenden. Aber da unser Stylesheet zuletzt enthalten ist, wird alles, was wir hier hinzufügen, entweder zu diesen Bootstrap-Standardeinstellungen hinzufügen oder überschreiben. Wenn zum Beispiel alle unsere Formulareingaben etwas zusätzliches Padding benötigten, könnten wir 30 Pixel oben und unten und Null auf der linken und rechten Seite hinzufügen, und wir können auch alle Grenzradien auf unserer -Site und wir könnten dies leicht tun, indem wir dies auf einen Wert von Null setzen. Speichern Sie diesen Add auf unserer Seite „Kontakt“. Wir haben jetzt die scharfen quadratischen Ecken an unseren Eingängen und kleine Polsterung oben und unten. Wenn wir in die Entwickler-Tools gehen, würden wir mit der rechten Maustaste klicken und überprüfen. Das ist wie einer unserer Eingaben. Wir können sehen, unsere benutzerdefinierte styles.css hat unsere Polsterung und Border-Radius an der Spitze angewendet. Auch das Formular-Steuerelement, das von Bootstrap-Stylesheets angewendet wird, hat immer noch alle diese Eigenschaften wirksam. Wenn wir uns jedoch die Polsterung und auch den Grenzradius ansehen, wurden beide Eigenschaften durchgestrichen da wir jetzt eine benutzerdefinierte Stile gerade oben verwenden. Dies bedeutet, dass, obwohl wir Bootstrap als Basis für unser Projekt verwenden, wir nicht darauf beschränkt sind. Wir können auch alle benutzerdefinierten Funktionen und auch ein vollständig individuelles Aussehen und Gefühl erstellen. 17. Letzte Gedanken: Herzlichen Glückwunsch zum Erreichen des Endes dieser Klasse. Ich hoffe, Sie haben diesen Kurs so sehr genossen, wie ich es auch genossen habe. Ich kann es kaum erwarten zu sehen, was ihr erschafft. Hoffentlich teilen Sie Ihr Projekt im Projektbereich für alle anderen. Hoffentlich können Sie Ihre neu gefundenen Bootstrap-Fähigkeiten nutzen. Setzen Sie dies in die Praxis um, bauen Sie einige zukünftige Projekte. Vielen Dank für die Teilnahme an dieser Klasse und hoffentlich werde ich Sie in Zukunft wieder sehen.