Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

9. diel - Tvorba Bootstrap šablóny z PSD - Responzivita

V minulej lekcii, Tvorba Bootstrap šablóny z PSD - Dokončenie pre desktop , sme dokončili kódovanie našej bootstrapové šablóny podľa návrhu v PSD súbore. Všetky časti sú na svojich miestach, zostáva pridať responzivitu, aby sme ju mohli zobrazovať aj na menších zariadeniach.

Rekapitulácia

Ešte než sa pustíme do práce, poďme si v rýchlosti zopakovať skratky pre breakpoint y, ktoré už poznáme z kurzu Bootstrap. Sú to hraničné veľkosti rôznych zariadení:

  • xs (extra small)
  • sm (small)
  • md (medium)
  • lg (large)
  • xl (extra large)

Pri použití breakpointové skratky bude bootstrap trieda platiť pre danú veľkosť a pre všetky vyššie.

Príklady

Poďme si ukázať pár cvičných príkladu, nech je v tom poriadok :)

Ak nastavíme napr. .col-md-6, znamená to, že daný stĺpec bude zaberať polovicu gridu od šírky stránky medium (a vyššie).

V prípade, že napíšeme .col-sm-12, bude sa stĺpec zobrazovať


 

...koniec náhľadu článku...
Pokračuj ďalej

Vedomosti v hodnote stoviek tisíc získaš za pár korún

Minul si až sem a to je super! Veríme, že ti prvé lekcie ukázali niečo nového a užitočného.
Chceš v kurze pokračovať? Prejdi do prémiové sekcie.

Kúpiť tento kurz

Kúpiť všetky aktuálne dostupné lekcie s funkciou odovzdávanie úloh iba za 420 kreditov
Aktuálny stav konta 0 kreditov
Kúpou tohoto balíčku získaš prístup ku všetkým 9 článkom (9 lekcií) tohoto kurzu.

Pred kúpou tohto článku je potrebné kúpiť predchádzajúci diel

Obsah článku spadá pod licenciu Premium no-reselling, kúpou článku súhlasíš so zmluvnými podmienkami.

Komerčný článok (licencia no-reselling)

Komerčný článok (licencia no-reselling)

Tento článok vznikol na základe mnohoročných skúseností v odbore a opisuje vývoj profesionálneho komerčného produktu alebo jeho súčasti, ktorú možno priamo využiť za účelom zisku alebo k preniknutiu do komerčnej sféry IT odvetvia.

Tieto vrcholové znalosti sprístupňujeme samozrejme iba niektorým členom komunity, ktorí sa majú záujem vypracovať na profesionálov v odbore a preto sú k dispozícii len za kredity. Kód z článku môžete použiť pre jeden svoj komerčný projekt. Nie je ho však možné prepredávať (raz zakúpiť a následne predať ďalej v niekoľkých projektoch). Ak potrebujete širšie využitie kódu, radi sa s vami dohodneme na komerčnej licencii. Viac informácií nájdete v článku Licencia.

Ste pripravení stať sa profesionálmi v odbore? Stačí kliknúť.

Popis článku

Požadovaný článok má nasledujúci obsah:

V HTML a CSS tutoriálu pridáme bootstrapové šablóne responzivitu, aby sa zobrazovala korektne aj na mobilných zariadeniach.

Kredity získaš, keď podporíš našu sieť. To môžeš urobiť buď zaslaním symbolickej sumy na podporu prevádzky alebo pridaním obsahu na sieť.

Článok pre vás napísala Lucie Hartingerová
Avatar
Aktivity