C a C++ týden ITnetwork Flashka zdarma
Akce! Pouze tento týden sleva až 80 % na kurzy C++. Lze kombinovat s akcí 50 % bodů navíc na prémiový obsah!
Brno? Vypsali jsme pro vás nové termíny školení Základů programování a OOP v Brně!

Cvičení k 1.-6. lekci Bootstrap CSS frameworku

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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:

Náklaďák

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:

Náklaďák-náhled

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

Středně 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:

Žluva hajní

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.

Pokročilý příklad

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

Významný klient

Pozadí nastavte do <div>u, 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).


 

Stáhnout

Staženo 36x (71.63 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

 

Aktivity (4)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!