Riešené úlohy k 1.-6. lekcii CSS frameworku Bootstrap

V minulej lekcii, Bootstrap - Grid systém Bootstrapu, sme si predstavili grid systém Bootstrapu.

Nasledujúce 3 cvičenia vám pomôžu precvičiť si znalosti z Bootstrapu z minulých lekcií. Vo vlastnom záujme sa ich pokúste vyriešiť sami. Pod článkom máte na kontrolu riešenie na stiahnutie. Ale pozor, akonáhle sa naň pozriete bez vyriešenia príkladov, stráca pre vás cvičenie zmysel a nič sa nenaučíte

Ak si naozaj nebudete vedieť rady, pozrite sa radšej znova do minulého tutoriálu a pokúste sa na to prísť.

Jednoduchý príklad

Na začiatok skúste vytvoriť čierny okrúhly rámček okolo obrázka a pod neho vycentrovaný text. Použite obrázok nákladiaku nižšie:

Všimnite si, že nákladiak má okolo seba v obrázku dostatok voľného miesta, aby mohol byť orezaný do kruhu a nedošlo k odseknutiu nejakej jeho časti.

Obrázok si skúste cvične vložiť do kontajnera, riadku a stĺpca. Obrázok v čiernom okrúhlom rámčeku vložte do jedného riadku a tučný text "Free shipping" do druhého. Obsah vycentrujte, aby sa zobrazoval pod sebou.

Ukážka dokumentu:

Všetky triedy .border musia byť pri obrázku, inak by sa vám rámček začal vykresľovať úplne mimo.

Pokročilý príklad

V druhom príklade sa pokúste umiestniť obrázok vedľa textu, tak aby obrázok zaberal jednu štvrtinu a text zvyšok priestoru. Použite nasledujúci obrázok:

A nasledujúci text:

The Eurasian golden oriole (Oriolus oriolus), also called the common golden oriole, is the only member of the Old World oriole family of passerine birds breeding in Northern Hemisphere temperate regions. It is a summer migrant in Europe and Palearctic and spends the winter season in central and southern Africa.

[Zdroj: Wikipedia]

Ukážka dokumentu:

Počet stĺpcov v gride je 12, stĺpec zaberajúci 1/4 teda nie je .col-4.

Príklad pre náročných - BONUS

Nakoniec skúste umiestniť 7 ikon významných klientov do jedného riadku a dajte im pozadie #eff2f7. Nezabudnite použiť grid Obrázok si môžete stiahnuť nižšie:

Pozadie nastavte do elementu <div>, v ktorom máte kontajner, a prideľte mu margin hore aj dole, aby bol výsledok lepšie vidieť. Do jedného riadka dajte tučný text Important clients s nadpisom <h3>. Do druhého riadka vložte obrázky, ktorým nastavte, aby sa veľkosťou prispôsobovali (raz konkrétnou triedou) a dajte im padding hore a dole.

Pre nastavenie margin môžete použiť vstavanú Bootstrap triedu .my-5 a pre padding triedu .py-3. Tieto triedy budú popísané ďalej v kurze. Alebo môžete samozrejme hodnoty nastaviť len cez vlastný CSS, ako sme to robili doteraz.

Ukážka dokumentu:

Obrázkov má byť naozaj 7, aj keď počet stĺpcov v gride je štandardne 12 alebo je zložený z deliteľov tohto čísla. A ako ďalšie sa zamyslite nad tým, ako by ste zistili farbu pozadia, keby ste ju mali zadanú iba v obrázku (= bez hexu).

V nasledujúcom kvíze, Kvíz - Grid systémy v Bootstrap, si vyskúšame nadobudnuté skúsenosti z predchádzajúcich lekcií.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Na absolvovanie tohto cvičenia prosím splň všetky príklady tým, že ich úspešne odovzdáš na otestovanie.