Řešené úlohy k 1.-6. lekci Bootstrap CSS frameworku

V minulé lekci, Bootstrap - Grid systém Bootstrapu, jsme dokončili grid systém Bootstrapu.

Následující 3 cvičení vám pomohou procvičit znalosti Bootstrapu z minulých lekcí. Ve vlastním zájmu se je pokuste vyřešit sami. Pod článkem máte pro kontrolu řešení ke stažení. Ale pozor, jakmile se na něj podíváte bez vyřešení příkladů, ztrácí pro vás cvičení smysl a nic se nenaučíte

Pokud si opravdu nebudete vědět rady, podívejte se raději znovu do minulého tutoriálu a pokuste se na to přijít.

Jednoduchý příklad

Pro začátek zkuste vytvořit černý kulatý rámeček kolem obrázku a pod něj vystředěný text. Použijte obrázek náklaďáku níže:

Všimněte si, že náklaďák má kolem sebe v obrázku dostatek volného místa, aby mohl být oříznutý do kruhu a nedošlo k useknutí nějaké jeho části.

Obrázek si zkuste cvičně vložit do kontejneru, řádku a sloupce. Obrázek v černém kulatém rámečku vložte do jednoho řádku a tučný text "Doprava zdarma" do druhého. Obsah vystřeďte, aby se zobrazoval pod sebou.

Ukázka dokumentu:

Všechny třídy .border musí být u obrázku, jinak by se vám rámeček začal vykreslovat úplně mimo.

Pokročilý příklad

Ve druhém příkladu se pokuste umístit obrázek vedle textu, tak aby obrázek zabíral jednu čtvrtinu a text zbytek prostoru. Použijte následující obrázek:

A následující text:

Žluva hajní (Oriolus oriolus) je středně velký druh zpěvného ptáka z čeledi žluvovitých (Oriolidae). Pestře zbarvený pták velikosti kosa černého (délka těla 24–25 cm). Hmotnost se pohybuje mezi 42–102 g. Samec je zářivě žlutý, s kontrastující černou uzdičkou, křídly a ocasem.

[Zdroj: Wikipedia]

Ukázka dokumentu:

Počet sloupců v gridu je 12, sloupec zabírající 1/4 tedy není .col-4.

Příklad pro náročné - BONUS

Nakonec zkuste posadit 7 ikon významných klientů do jednoho řádku a dejte jim pozadí #eff2f7. Nezapomeňte použít grid Obrázek je níže ke stažení:

Pozadí nastavte do elementu <div>, ve kterém máte kontejner, a přidělte mu margin nahoru i dolů, aby byl výsledek lépe vidět. Do jednoho řádku dejte tučný text Významní klienti nadpisem <h3>. Do druhého řádku vložte obrázky, kterým nastavte, aby se velikostí přizpůsobovaly (jednou konkrétní třídou) a dejte jim padding nahoru a dolů.

Pro nastavení marginu můžete použít vestavěnou Bootstrap třídu .my-5 a pro padding třídu .py-3. Tyto třídy budou popsány dále v kurzu. Nebo můžete samozřejmě hodnoty nastavit jen přes vlastní CSS, jako jsme to dělali doposud.

Ukázka dokumentu:

Obrázků má být opravdu 7, i když počet sloupců v gridu je standardně 12 nebo je složený z dělitelů tohoto čísla. A jako další se zamyslete nad tím, jak byste zjistili barvu pozadí, kdybyste ji dostali zadanou pouze v obrázku (= bez hexu).

V následujícím kvízu, Kvíz - Grid systémy v Bootstrap, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

K absolvování tohoto cvičení prosím splň všechny příklady tím, že je úspěšně odevzdáš k otestování.