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

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:

nákladiak

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.

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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:

Nákladiak-náhľad

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:

Vlha obyčajná

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.
[Zdroj: Wikipedia]

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:

významný klient

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


 

Mala 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š.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 219x (71.63 kB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

 

Predchádzajúci článok
Bootstrap - Grid systém Bootstrap
Všetky články v sekcii
Kompletný kurz CSS frameworku Bootstrap
Článok pre vás napísala Lucie Hartingerová
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
Aktivity (1)

 

 

Komentáre

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

 
Odpovedať
12.7.2019 21:22
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 1 správy z 1.