Responzívny design – základy (Bootstrap) - Nitra

Responzívny design – základy (Bootstrap) - Nitra

Kurz oboznámi účastníkov s využitím frameworku CSS Bootstrap za účelom vytvárania si responzívnych web stránok, zobrazujúcich sa korektne na zariadeniach rôzneho druhu, ako sú notebooky, tablety, mobily či osobné počítače. Miesto realizácie: Nitra

Obsahová náplň:

RESPONZÍVNY DESIGN - ÚVOD

• Čo je responzívny design
• Čo sú media queries v css

BOOTSTRAP – INŠTALÁCIA A POTREBNÉ KNIŽNICE

• Stiahnutie bootstrapu
• Pripojenie bootstrapu pomocou lokálnych súborov
• Pripojenie bootstrapu pomocou CDN – online úložisko

BOOTSTRAP – ZOSTAVENIE ZÁKLADNÉHO LAYOUTU, GRID SYSTÉM

• Základný container vs. container-fluid
• Grid systém – ako funguje, základný zápis

BOOTSTRAP – PRÁCA S OBSAHOM

• Základné class pre nadpis, text, zoznamy
• Základné class pre obrázky a tabuľky

BOOTSTRAP – KOMPONENTY

• Navigácie hlavného menu a jej varianty
• Jednoduchý slider banner na úvod stránky
• Drobná navigácia stránky (Breadcrumbs)
• Upozornenia (Alerts), Tlačítka (Buttons), Card
• FAQ stránka pomocou Collapse
• Formuláre a jeho prvky
• Ľavé/Pravé menu pomocou List group
• Vyskakovacie okno – Modal
• Nápoveda po kliknutí pomocou popovers
• Nápoveda po prejdení myšou pomocou tooltips
• Zmena navigácie pri scrolovaní - Scrollspy