Also das muss man sich zumindest erstmal alles in ruhe durchlesen und die beispiele (inklusive quelltext/aufbau/verwendete css klassen) ansehen, damit man weiss wo man es sinnvoll einsetzt bevorm an mit einer neuen bootstrap seite anfaengt.
Das ist genau das Problem, denke ist. Bei meinen reinen Content-Seiten, links Navi, rechts Content mit Text, umflossenen Bilder, Listen, Galerien, sicherlich kein Problem. Da ist auch alles sehr flexibel und kann quasi machen was es will bis zu bestimmten Größen.
Bei meinen Reiseportalen ist das anders. Das ist auch alles irgendwie "flexibel", aber nicht unbedingt "liquid", bekomme ich aber ohne Probleme runter bis auf 300px Breite. Da sind bestimmte Bereich "fest", fest im Sinne, dass die nur in bestimmten Breiten springen dürfen. Also z.B. Navi. 300px, 200px, umschalten auf Mobil. Sidebar das gleiche. Der Content selbst darf machen was er will, so lange es nicht zu eng wird.
Bild ist schwierig, da verzeichne ich mich wahrscheinlich 100 mal und eben auch da, es gibt feste Bereiche und "liquid".
Im Grunde ist das Gerüst außen rum also ein 4-8. 4 die Navi, 8 der Main-Bereich. Die Navi darf aber nur in festen Abständen springen, nicht einfach so jedes Pixel ihre Breite ändern. Die 8, also der Main darf das an sich. Aber.
Im Main ist dann der eigentliche Content und die Sidebar, jeweils mehrfach vorhanden, damit die Sidebar sich bei kleineren Auflösungen an bestimmten Stellen einsortiert und nicht am Ende der Seite. Z.B. Sidebar rückt in den "Contentbereich" nach Unterkunft 3, 7, und 10. Also im Grunde drei Rows im Main-Bereich (können auch mehr oder weniger sein, aber als Beispiel). Das erste Row enthält Unterkunft 1, 2 und 3, sowie eine Sidebar daneben. Die anderen eben analog dazu.
So, und nun das, was ich oben meinte. War eigentlich gar keine Frage, sondern nur ein geschriebener Gedanke. Die Unterkünfte selbst sind wieder jeweils 4 Bereiche. Oben Titel, darunter "Bild + Beschreibung", darunter Info. Im Grunde Also was wie
<div aussenrum>
<h3 Überschrift>
<div mit Bild, 216px breit> daneben <div floatend mit Text, liquid>
<div Info 100% breit>
<div aussenrum Ende>
dieses Gebilde habe ich mir mit Bootstrap auch zusammengebaut, hat an sich funktioniert, also optisch, was die Verschachtelung angeht. Nur das waren letztendlich gut 50% mehr Quellcode als vorher
Und das Bild muss eben seine 216px einhalten. Der Text daneben darf schmäler werden, das Bild aber nicht. Bis dann ein Punkt erreicht wird, wo sich die beiden "trennen". Bild ist dann oben "100% von "aussenrum" und der "text" darunter auch. Im Grunde wird da also nur das "floaten" beendet und alles geht auf 100%.
So, und das "<div Info 100% breit>" enthält eine weitere Verschachtelung von drei Bereichen. Aktuell schlicht ein flex:0 0 33%. Bei Bootstrap also ein 4-4-4
Also ein <div>1</div><div>2</div><div>3</div> Bei kleinen Auflösungen muss sich das aber komplett ändern. Optisch muss es ein
<div>1</div><div>3</div>
<div>2</div>
werden. Wobei 1 und 3 auf 50% gehen, 2 auf 100%.
Von meiner Preistabelle rede ich mal gar nicht. Die besteht in der Regel aus 12 Spalten und unbekannt vielen Zeilen (Eine Tabelle ist eine Saison, es kann aber eine geben, 5, 10 oder auch 30). Spalten und Zeilen haben aber teils Col- und Rowspans von 3-8 drauf, damit alles kompakter wird. Aktuell sortiere ich die einfach mit CSS um und 5 Zellen, die dann auch ganz wo anders hin müssen mit "::after {content:"xxx"}"
Das alles aber nur als Info, dass das hier eben nicht so einfach ist, ohne was groß am Außen der Seite zu ändern. Als ich Bootstrap damals testete, hatte ich keinen Generator, nur die Doku und baute mir das per Hand zusammen. War auch in Zugzwang, denn meine Seiten waren damals nicht responsiv. Daher der Versuch. Aber mit etwas zu beginnen bei einer Seite, die solche Anforderungen stellt, das ist der falsche Startversuch. Daher gescheitert und dann mein eigenes System aufgebaut.
Jetzt aktuell arbeite ich an dem Thema "CSS, welche Richtung" und stelle eine Seite auf "klein nach groß" um. Das ist schon die Hölle, aber es wird, sehe immer mehr Erfolge.