Bootstrap 5 Layout/Gridsystem| Tutorial - Deutsch #2
HTML-код
- Опубликовано: 2 июн 2024
- "Bootstrap ist ein freies Frontend-CSS-Framework. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-Systeme, Navigations- und andere Oberflächengestaltungselemente sowie zusätzliche, optionale JavaScript-Erweiterungen."
In diesem Tutorial betrachten wir das Layout-/Gridsystem von Bootstrap.
---------Links---------
Visual Studio Code:
code.visualstudio.com/
Bootstrap 5:
getbootstrap.com/docs/5.1/lay...
------TimeLine-----
0:00 Intro
0:33 Definition Container/Container-fluid
1:38 Verwendung von Containern
9:23 Definition Gridsystem
11:37 Verwendung des Gridsystems
21:38 Spacing mit Bootstrap
26:44 Beispiele einer Website
29:37 Ratschlag
30:45 Outro
----------------------------
►Website: futuric.io
►GitHub: github.com/Futuric
►Instagram: / futuric.io
Vielen Dank fürs zuhören!
Über einen Like und/oder ein Abo würde ich mich sehr freuen :D
Richtig gutes Video ❤ herzlichen Dank fürs Erstellen, ich freue mich auf alles was da noch kommt 🎉
So geil erklärt!
Super Video ,
Gut Erklärt ich konnte dir bei jedem punkt folgen ! Hat viel mehr Aufmerksamkeit verdient weiter so !
danke für dein erstklassiges Erklären. Gibt viele Tutorials hier zu dem Thema, aber nur du konntest mir helfen. Weiter so :)
Sehr gut erklärt! Danke
Geiles Video, supergeil erklärt, gerne mehr davon :)
Super Gemacht!
Sehr nice, wann kommt das Thema responsive Design? Da bin ich hyped ...
Ich versuche es für nächste Woche fertig zu bekommen, habe momentan viele Projekte
hey aber wenn ich jetzt zb ein Logo oben in die mitte setzen möchte wie läuft das den dann ab weil die einzelnen col. setzten sich ja immer lins oben an und gehen dann weiter. wird dann mit bootstrap überhaupt noch eine css datei gebraucht oder wie läuft das?
Gutes video Super erklärt weiter so
Hi, ja das funktioniert auch. Dafür musst du die row oder das column zu einer flexbox machen, und den Inhalt in die Mitte setzen. Dafür erstmal eine Row erstellen und innerhalb dieser row kannst du eine column erstellen die 12 groß ist. Diese machen wir zu einer Flexbox, indem wir die Klasse „d-flex“ hinzufügen. Damit der Inhalt dann in der Mitte ist verwenden wir die Klasse „justify-content-center“, sieht dann so aus: In diese Column kannst du dann dein Logo einfügen Beim logo aber bitte die Größe beachten. Wenn du die Breite auf 100% machst, dann wird das Logo so so groß wie dein Bildschirm, also da muss man geeignete Breite und Höhe ausprobieren. Grundsätzlich könnte man ohne zusätzliches css mit Bootstrap etwas bauen aber dann kann man wenig individualisieren. Eigene Farben oder Größen von Bildern und mehr will man vielleicht doch noch anpassen und dafür braucht man dann schon eigenes css. Stell dir Bootstrap als Baukasten vor mit vielen fertigen Bausteinen, welche du verwenden und anpassen kannst. Konnte ich damit weiter helfen?
@@YouKnowIT_Coding super danke für die infos hoffe du machst noch paar gute videos dazu ;)
Klasse Tutorial, ich stolper immer noch über die Höhe einer row bzw. col, hab schon alles versucht - klappt nicht!
Erstmal vielen Dank :D Ich glaub ich weis was du meinst, du möchtest vermutlich das alle Columns die gleiche höhe haben oder ? Nun das haben sie bereits. Wenn du mal mit F12 das Entwicklertool im Browser öffnest und über die Cards drüber hoverst, wirst du feststellen, dass die cards nicht die gleiche Höhe haben, aber die Columns schon. Dafür gibt es eine ganz einfach Lösung. Änder einfach zu . Das h-100 setzt die Höhe auf 100%. Somit wird die Card auf 100% höhe gestreckt, was der höher der Columns entspricht und die sind immer gleich hoch in einer Reihe
hey hey ich mache genau das was du sagst aber das bild was cih einfüge (lokal) streckt sich über den bildschirm hinaus. und wenn ich ein zweites card element hinzufüge reiht sich das untereinander und nicht nebeneinander. bin am verzweifeln
Wenn du ein Bild verwendest sind die css eigenschaften des Bildes wichtig. Wenn das Bild so groß wie das Card sein soll, dann müsstest du dem ein style attribute style=„width:100%“ setzen
@@YouKnowIT_Coding bei mir bleibt es immernoch untereinander ..
@@zLoris_7 Schick mir gerne mal deinen HTML Code an meine E-Mail Adresse (connect@you-know.it), dann schaue ich mir das an :D