Momentálne je otvorená branch MAIN, ktorá obsahuje štartér. Riešenie obsahuje branch SOLUTION.
Toto cvičenie je zamerané na prácu s Bootstrap frameworkom a vytvorenie responzívneho dizajnu.
- Pripojte si CSS a JS pre Bootstrap (CDN z https://getbootstrap.com/docs/5.3/getting-started/download/)
- Zapnite Code completion pre CDN (Alt+Enter pri názve .css a .js súboru).
- Vytvorte menu podľa obrázku.
- Zmeňte farbu pozadia menu na sivú a položky menu na bielu farbu.
- Pridajte logo do menu (obrázok
logo.pngsa nachádza v adresári images). - Prerobte menu tak, aby sa objavila ikona hamburger pri zmenšení veľkosti okna prehliadača pod určitú úroveň.
- Vytvorte kontajner, riadok a stĺpec.
- Vytvorte 4 bloky textu pomocou https://www.lipsum.com/, pričom každý bude mať inú farbu pozadia.
- Usporiadajte ich tak, že jeden bude navrchu a tri pod ním vedľa seba.
- Pomocou Bootstrap tried pridajte vnútornú medzerou (padding) a zarovnajte text do bloku.
- Pridajte tabuľku do prvého bloku tak, aby bola responzívna. Pridajte do nej ďalšie tri stĺpce na otestovanie.
- Pod tabuľkou vytvorte štyri tlačidlá vedľa seba.
- Po kliknutí na jedno z tlačidiel (vyberte si, ktoré) otvorte modálne okno.
- Domáca úloha: Skúste pridať medzeru medzi spodné 3 stĺpce.
Výsledné riešenie bude na počítači vyzerať nasledovne:
A na mobilnom zariadení:
Pokiaľ sa chcete dostať k riešeniu z cvičenia je potrebné otvoriť si príslušnú branch, ktorej názov sa skladá:
MIESTNOST + "-" + HODINA ZAČIATKU + "-" + DEN
Ak teda navštevujete cvičenie pondelok o 08:00 v RA323, tak sa branch bude volať: RA323-08-PON