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

Nasledujúce 3 cvičenie vám pomôžu precvičiť vedomosti Bootstrap z minulých lekcií. Vo vlastnom záujme sa je pokúste vyriešiť sami. Pod článkom máte pre kontrolu riešenie k stiahnutiu. Ale pozor, akonáhle sa na neho 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 znovu 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ázka 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 useknutiu 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 "Doprava zadarmo" 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.

Stredne 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:

Vlha obyčajná (Oriolus Oriolus) je stredne veľký druh spevný vtáka z čeľade žluvovitých (Oriolidae). Pestro sfarbený vták veľkosti kosa čierneho (dĺžka tela 24-25 cm). Hmotnosť sa pohybuje medzi 42-102 g. Samec je žiarivo žltý, s kontrastujúca čiernou uzdičkou, krídlami a chvostom.

Ukážka dokumentu:

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

Pokročilý príklad

Nakoniec skúste posadiť 7 ikon významných klientov do jedného riadku a dajte im pozadia #eff2f7. Nezabudnite použiť grid Obrázok je nižšie k stiahnutiu:

Pozadie nastavte do <div> u, v ktorom máte kontajner, a prideľte mu margin nahor i nadol, aby bol výsledok lepšie vidieť. Do jedného riadku dajte tučný text Významní klienti nadpisom <h3>. Do druhého riadku vložte obrázky, ktorým nastavte, aby sa veľkosťou prispôsobovali (raz konkrétnu triedou) a dajte im padding hore a dole.

Pre nastavenie margin u 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 hex u).

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.