Front-end Front-end
Probíhá výprodej HTML, JavaScript a Bootstrap. Slevy až 80 %
Vyšlehej si extra vědomosti! Až 100% bodů na prémiový obsah zdarma! Více zde

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 kulatý rámeček kolem obrázku ptáčka, který je ke stažení níže:

Ptáček

Obrázek si zkuste cvičně vložit do kontejneru, řádku a sloupce.

Ukázka dokumentu:

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 ptáčků do jednoho řádku a dejte jim pozadí. Nezapomeňte použít grid :)

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.


 

Stáhnout

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

 

 

Aktivity (3)

 

 

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