Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij podzimní akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se JavaScript
JavaScript týden

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

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.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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).

V příští lekci, Bootstrap - Tabulky, se podíváme jak se v Bootstrapu stylují tabulky.


 

Stáhnout

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

 

Předchozí článek
Bootstrap - Grid systém Bootstrapu
Všechny články v sekci
Kompletní kurz CSS frameworku Bootstrap
Článek pro vás napsala Lucie Hartingerová
Avatar
Jak se ti líbí článek?
3 hlasů
Aktivity (6)

 

 

Komentáře

Avatar
Jakub Podskalský:12.7.2019 21:22

Díky za cvičení. Vše zvládnuto, jen u toho prvního jsem prvně nesmyslně nastavoval offset anebo zkoušel dát obrázku počet sloupců... Pak mi to ale došlo. :D

 
Odpovědět
12.7.2019 21:22
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.

Zobrazeno 1 zpráv z 1.