Bootstrap reszponzív méretezés

Bootstrap reszponzív méretezés
2015-12-08T19:17:23+01:00
2015-12-09T10:57:45+01:00
2022-12-03T02:41:55+01:00
WarmUp
Próbálok reszponzív css-t rakni a bootstrap.css segítségével erre az oldalra úgy, hogy mobilon kitöltse a teljes szélességet, desktopnál meg valami értelmes szélességet vegyen fel.
Azzal vagyok zavarban, hogy ezt most a bootstrap osztályain keresztül kell beállítani, vagy a saját css-en.
Na meg, hogy hogyan.
Mutasd a teljes hozzászólást!
A képek egyszerűbb responsive kezeléséhez az <img class="img img-responsive"> megoldása ajánlott.

Egyébként egy ennyire agyondokumentált és példakódókkal is sűrűn tüzdelt keretrendszerhez, mint a Bootstrap, normális esetben elég lenne csupán a dokumentációjába és a szintén nyilvánosan elérhető demóiba (illetve azok forráskódjaiba) belenézni szerintem az összes eddigi kérdésed megválaszolásához - valamint a jövőbeni kérdéseid kb 90%-ához.

Kísérletezésre kifejezetten ajánlom pedig a Bootstrap Editor and Playground for JavaScript, CSS, HTML5 and jQuery. eszközt.

A táblázatok használatát pedig semmi esetre se az oldal elrendezése indokolja. Táblázatot akkor használunk, ha olyan adatokat jelenítünk meg, amelyek táblázatot igényelnek, tehát például statisztikai adatsorok, egy bevásárló kosár összes tételei, árai, részösszegei és végösszege, stb. Minden más esetre pedig a BS gridjének row, col-xs-*, col-sm-*, col-md-*, col-lg-*, valamint a col-*-offset-* CSS osztályainak használata ajánlott. Tanulmányozd a grid-et (felfelé görgetni is ér a jobb megértés érdekében).

És tartsd észben felvenni a viewport szabályozó meta elemeket is a <html> <head> tag-je alatt, ahogyan az szintén szerepel a leírásban, különben az oldal mobilon is a desktop nézet szerint fog megjelenni.

Azért pedig, hogy az indító kérdést is megválaszoljam teljesen:
- A row osztály block-ként kerül megjelenítésre, ami alapértelmezés szerint width: auto módon szabályozott szélességű (tehát ha a float-ja nem változik, akkor 100%, egyébként pedig a benne lévő elem[ek] szélességéhez idomul)
- A container-fluid osztályra ugyanez igaz
- A col-*-12 osztályok már width: 100%, viszont float: left is, ezért csak horizontális elrendező elemben (container, row, form-group, input-group, stb) használjuk
A margin-ok és padding-ok értékeire ügyelni kell és azért, hogy az elrendezés ne essen szét, be kell tartani az elrendezési szabályokat az egyes elemszerkezetek használatakor - azaz pl. container és container-fluid jellemzően csak egy legyen az oldalon (ez a legmagasabb szintű befoglaló elem), ha pedig egy col-on belül további tagozás szükséges, akkor előtte egy row is kell, tehát így:

<div class="col-sm-6"> <div class="row"> <div class="col-sm-4">...</div> <div class="col-sm-8">...</div> </div> </div>
A jövőben pedig, ha kérdést teszel fel a tudástárban, picit jobban ügyelj rá a saját érdekedben is, hogy pontosan megválaszolható legyen, ne ennyire általános, és egy kérdés alatt ne tegyél fel egy másik, a tárgytól eltérőt (mint most például a képek responsive kezelésével kapcsolatban IS kérdeztél, ami nem kapcsolódik az eredeti kérdésedhez).
Mutasd a teljes hozzászólást!

  • RTFM megvolt? Mi az pontosan, ami nem nyilvánvaló?
    Mutasd a teljes hozzászólást!
  • Ami nem nyilvánvaló az az, hogy a "width: 100%" valami bootsrtap osztállyal szabályozandó-e vagy pedig azt saját osztállyal érdemes /kell csinálni.
    Mutasd a teljes hozzászólást!
  • Ami nem nyilvánvaló az az, hogy a "width: 100%" valami bootsrtap osztállyal szabályozandó-e vagy pedig azt saját osztállyal érdemes/kell csinálni.
    Mutasd a teljes hozzászólást!
  • 1. Kell egy container, aminek a méretét media query szabályozza az egyes device-okon (mindegy, hogy saját vagy bootstrap default értékeket használsz).
    2. El kell valahogy rendezned a konténeren belül az elemeket. Ez lehet 100% kitöltés is, vagy több hasáb, vagy akármi.

    Nem értem a kérdést. 
    Mutasd a teljes hozzászólást!
  • Lehet, hogy én a bootstrap responsive designet nem értem.
    Azaz igazából alakul a kép.

    A boostrap grid igazából csak azt tudja szabályozni, hogy az egymást követő col-md-x divjeim egymás mellé vagy egymás alá kerüljenek az adott eszközön.
    Minden más a saját css dolga.

    Ez így fedi a valóságot ?
    Mutasd a teljes hozzászólást!
  • Nem, a Bootstap Grid minden megcsinál helyeted.
    De az a való igaz, hogy egyik col-XY-12... sem 100% széles(hanem csak 95% vagy 90%), mert általában szokás egy kis szegélyt hagyni, szóval ha neked igazi 100% széles Div kell akkor kell egy sajátot csinálni.
    Mutasd a teljes hozzászólást!
  • Van olyan container, ami 100% széles és van, ami van egy kis margó. A váltáshoz a @médiát kell felülírnod. (Mint a katonaságban: ) Mindig az utolsó parancs számít. Elvileg csak linkelsz egy saját css-t a bootstrap.css után és ha van ütközés a te css-eset fogja nézni, mert az van utoljára. (Fentről-lefelé olvassa be őket.)

    Van már egy w3s.css is. Ha nem kell a bootstrap.js-e szerintem ismerkedj azzal, mert a w3s csinálja a webes szabványokat és ha van saját kódjuk... Mondjuk ott csak negyedek vannak a bootstrapben pedig tizenkettedek...
    Mutasd a teljes hozzászólást!
  • A boostrapot a szép gombjai miatt kezdtem el használni. Most próbálok olyan html-t írni, ami mobilon is jól néz ki.
    Hát ez eddig még nem lett igazán szép :(
    A különböző elemek nagyon picik a mobil kijelzőjén.
    Arra gyanakszom, hogy talán a táblázat keverhet be. Azon a táblázaton, ugyanis png. képek vannak elhelyezve eredeti pixelmérettel. Esetleg ez vicceli meg a megjelenést.

    A boostrapot most sikerült valami értelmes módra állítanom néhány plusz div beszúrásával, de biztosan nem ez a legszebb megoldás.
    Mutasd a teljes hozzászólást!
  • bootstrap hasznalata:
    container div
    benne
    row div-ek
    benne
    col- dive-ek

    a forrasodban keveredik az egesz
    nincs div class="row" es container-t ne keverj col-al

    pld:

    <div class="container"> <div class="row"> <div class="col-md-6">...</div> <div class="col-md-6">...</div> </div> </div>


    a ket col-md-6 az a te col-md-6-od tartalmat kell, hogy tartalmazza
    Mutasd a teljes hozzászólást!
  • Köszönöm szépen.
    Pedig ez egyszer már megvolt. 

    Azt nem tudod, hogy hogyan lehetne mobilon nagyobbá/kezelhetővé tenni a képeket tartalmazó táblázatot ?
    Mutasd a teljes hozzászólást!
  • helyedben hanyagolnam a tablazatot es canvas-t hasznalnek
    Mutasd a teljes hozzászólást!
  • A mediafüggő nagyítást találtam, ami speciel bootstrap független megoldás:

    @media (min-width: 700px) { img { width: 40px; height: 40px; } td { width: 40px; height: 40px; } }

    A canvas tényleg szebb :)
    Mutasd a teljes hozzászólást!
  • A képek egyszerűbb responsive kezeléséhez az <img class="img img-responsive"> megoldása ajánlott.

    Egyébként egy ennyire agyondokumentált és példakódókkal is sűrűn tüzdelt keretrendszerhez, mint a Bootstrap, normális esetben elég lenne csupán a dokumentációjába és a szintén nyilvánosan elérhető demóiba (illetve azok forráskódjaiba) belenézni szerintem az összes eddigi kérdésed megválaszolásához - valamint a jövőbeni kérdéseid kb 90%-ához.

    Kísérletezésre kifejezetten ajánlom pedig a Bootstrap Editor and Playground for JavaScript, CSS, HTML5 and jQuery. eszközt.

    A táblázatok használatát pedig semmi esetre se az oldal elrendezése indokolja. Táblázatot akkor használunk, ha olyan adatokat jelenítünk meg, amelyek táblázatot igényelnek, tehát például statisztikai adatsorok, egy bevásárló kosár összes tételei, árai, részösszegei és végösszege, stb. Minden más esetre pedig a BS gridjének row, col-xs-*, col-sm-*, col-md-*, col-lg-*, valamint a col-*-offset-* CSS osztályainak használata ajánlott. Tanulmányozd a grid-et (felfelé görgetni is ér a jobb megértés érdekében).

    És tartsd észben felvenni a viewport szabályozó meta elemeket is a <html> <head> tag-je alatt, ahogyan az szintén szerepel a leírásban, különben az oldal mobilon is a desktop nézet szerint fog megjelenni.

    Azért pedig, hogy az indító kérdést is megválaszoljam teljesen:
    - A row osztály block-ként kerül megjelenítésre, ami alapértelmezés szerint width: auto módon szabályozott szélességű (tehát ha a float-ja nem változik, akkor 100%, egyébként pedig a benne lévő elem[ek] szélességéhez idomul)
    - A container-fluid osztályra ugyanez igaz
    - A col-*-12 osztályok már width: 100%, viszont float: left is, ezért csak horizontális elrendező elemben (container, row, form-group, input-group, stb) használjuk
    A margin-ok és padding-ok értékeire ügyelni kell és azért, hogy az elrendezés ne essen szét, be kell tartani az elrendezési szabályokat az egyes elemszerkezetek használatakor - azaz pl. container és container-fluid jellemzően csak egy legyen az oldalon (ez a legmagasabb szintű befoglaló elem), ha pedig egy col-on belül további tagozás szükséges, akkor előtte egy row is kell, tehát így:

    <div class="col-sm-6"> <div class="row"> <div class="col-sm-4">...</div> <div class="col-sm-8">...</div> </div> </div>
    A jövőben pedig, ha kérdést teszel fel a tudástárban, picit jobban ügyelj rá a saját érdekedben is, hogy pontosan megválaszolható legyen, ne ennyire általános, és egy kérdés alatt ne tegyél fel egy másik, a tárgytól eltérőt (mint most például a képek responsive kezelésével kapcsolatban IS kérdeztél, ami nem kapcsolódik az eredeti kérdésedhez).
    Mutasd a teljes hozzászólást!
  • Sokadik válaszként egy Bootstrap-teszt, melyben találsz - galériát, formot, táblázat-megoldást, slidert, panoráma progrest... - és a nyitó oldalt olvasd végig, keresd fel az ott található linket és tanulj, tanulj, tanulj...   
    És esetleg egy másik táblázat-megoldás is érdekelhet...
    Mutasd a teljes hozzászólást!
  • Köszönöm a válaszod.

    Az igazat megvallva ezekkel a fórumos kérdésekkel pont az a baj, hogy ha kellőképpen pontosan meg tudná az ember fogalmazni a kérdését, akkor a google megadná a választ és így nem is kellene kérdezni, amikor meg kérdezni kell, akkor pont nem konkrét a kérdés, hiszen a kérdező valamit nem tud.
    A bootstrap agyondokumentáltsága is nagyon hasonló, hiszen szinte minden le van írva a doksiban, csak éppen tudni kell, hogy milyen kifejezés alatt lehet megtalálni a választ.

    A reszponzív html egy gyönyörű dolog lenne, de az igazat megvallva 8-10 éve a blackberry-men megjelenő GUI esztétikai élménye még mindig fényévekkel előtte jár annak, amit akkor látok, ha egy átlagos weboldalt megnyitok a mostani androidos okos telefonomon, kétszer akkora képernyőn.
    Azt hittem, hogy néhány beállítással majd én is olyan csodaszép dolgokat fogok html-en az androidra varázsolni, főleg ha a bootstrap szép widgetjeit használom.


    Még egy kicsit ezen csiszolnom kell.
    Sokat tanultam most is.
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd