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

V minulej lekcii, Bootstrap - Grid systém Bootstrapu, sme dokončili grid systém Bootstrapu.

Nasledujúce 3 cvičenia vám pomôžu precvičiť znalosti 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

Pre začiatok skúste vytvoriť čierny okrúhly rámček okolo obrázku a pod neho vystredený 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čni 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 vystreďte, 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 posadiť 7 ikon významných klientov do jedného riadku a dajte im pozadie #eff2f7. Nezabudnite použiť grid Obrázok je nižšie na stiahnutie:

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 nadpisom <h3>. Do druhého riadku 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 marginu 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ší sa zamyslite nad tým, ako by ste zistili farbu pozadia, keby ste ju dostali 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.