Autor Zpráva
rohlenzi
Profil
Dobrý den,
Potřebuji udělat toto a aby to bylo responzivní. Akorát nevím co použít. Jestli Bootstrap, flexbox, grid a nebo něco úplně jiného.
Má někdo nějaký nápad?

Děkuji za pomoc.
pcmanik
Profil
rohlenzi:
Máš "vysoký level" CSS3 a Bootstrap tak nechápem tvojej otázke.
Z obrázku sa radiť nedá, ale v tomto prípade nevidím dôvod použiť ani jednu z uvedených technológii. Stačí ti predsa klasické štýlovanie CSS podľa adekvátnych breakpointov.
Keeehi
Profil
rohlenzi:
Trochu to mícháš. Obecně na vytvoření responzivního webu ti stačí media queries, obtékání a vhodné nastavení šířek. Bootstrap je framework který ulehčuje tvorbu stránek tím, že má předpřipravené třídy které se dají jednoduše použít. jednou z oblastí s kterou také pomáhá je tvorba responzivního layoutu. Flexbox a grid jsou css vlastnosti (resp. jde o rodiny vlastností) které slouží k pokročilému nastavování velikostí a pozic elementů na stránce. Pokročilé znamená, že například pro výpočet velikosti jsou schopny brát do úvahy velikosti ostatních elementů, což předtím moc nešlo.
Bootstrap ve verzi 3 používá pro tvorbu layoutu obtékání a vhodné nastavení šířek. Bootsrap 4 pro tvorbu layoutu využívá flexbox.

Jelikož je z příspěvku patrné, že tomu zatím moc nerozumíš, bude určitě lepší když použiješ nějaký framework jelikož sám by ses asi trápil. Můžeš použít třeba bootstrap, pokud ti vyhovuje. Nebo si najdi nějaký jiný, je jich opravdu mnoho. Velký (a určitě nekompletní) seznam najdeš třeba na github.com/troxler/awesome-css-frameworks.
Pokud se rozhodneš pro bootstrap a budeš z něj chtít použít jen tu responzivní část, tak je zbytečné, aby jsi ho přidával celý, protože je zbytečně veliký. Existuje konfigurátor, ve kterém si můžeš naklikat co všechno z bootstrapu chceš a on ti vytvoří css soubor jen s tím co požaduješ.

Ještě k těm obrázkům. Máš vytvořené dva extrémy, ten nejširší a ten nejužší. ještě by to chtělo nadesignovat tak 1-2 kroky v šířkách mezi. Protože tam nebude ani jeden z nich nebude vypadat dobře (ten široký se tam nevejde a úzký bude moc malý).
rohlenzi
Profil
Okay. Já nikde neřekl, že to je myšleno for real. (Rýpavé poznámky si prosím příště nech)

Přes framework jsem to už jednou udělal. Teď mě zajímá jak se to dá udělat jinak a lépe. Já si to CSS nechci usnadňovat, ale chci se to naučit.
Za nepřesný název příspěvku se omlouvám, ale nevěděl jsem co jiného tam dát a to byly způsoby co mě prvně napadly.
Keeehi
Profil
rohlenzi:
Teď mě zajímá jak se to dá udělat jinak a lépe.
Co znamená to lépe? Ono to totiž frameworky mají většinou velmi dobře zpracované. Pokud ti to vyhovovalo, můžeš se podívat, jak to daný framework řešil. Pokud jsi s tím měl nějaký problém a chtěl by jsi to udělat lépe, pak je potřeba popsat (a lépe k tomu přidat ukázku) kde je ten problém a říct, jak by se to podle tvého přání mělo chovat lépe. Pak bychom měli být schopni ti poradit, jak to udělat aby to fungovalo lépe.
rohlenzi
Profil
Okay. Prvně jsem to vyřešil přes Bootstrap. Sice to fungovalo, ale jak říkám je to dle mě špatně a mohlo by to být lepší.

Zde je živá ukázka.
Keeehi
Profil
rohlenzi:
Výborně, a teď nám ještě řekni, jak se to špatně projevuje a jak si představuješ, že by se to mělo chovat lépe.
rohlenzi
Profil
S výslednými styly (zapomněl jsem do živé ukázky dát styly pro text) to vypadá neúhledně při rozlišení cca 1200px.
A taky další věc, že bych se i rád naučil jak to udělat jiným způsobem než frameworkem.


Špatný odkaz. Tady je správný.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: