2. diel - Tvorba Bootstrap šablóny z PSD - Založenie projektu
V minulej lekcii, Tvorba Bootstrap šablóny z PSD - Wireframe a grafický editor , sme sa zoznámili s grafickými editormi a stručne si o nich urobili prehľad. Už tiež vieme, ako pomocou nich vyrezať jednotlivé obrázky z PSD súboru s návrhom webovej prezentácie. Dnes si nakódujeme prvý kúsok bootstrapové šablóny, ktorú sme si predstavili minule. Bude sa jednať o časť s nadpisom Moderné bývanie:
Založenie projektu
Samozrejme nezačneme inak, než že si založíme nový projekt napríklad v
NetBeans, webstore alebo inom preferovanom IDE. Pomenujte si ho
template (= angl. Šablóna).
V celom projekte budeme dodržiavať nasledujúce konvencii pre
názvy súborov a priečinkov: Názvy budeme zadávať malými písmenami, bez
mäkčeňov a dĺžňov. Pri dvouslovném názvu použijeme - alebo
_. CamelCase notácie patrí skôr do zdrojového kódu JS alebo
serverového jazyka. V tomto kurze budeme používať predvolenú šablónu
priamo z Bootstrap frameworku od Twitteru. Ak by ste v budúcnosti
zistili, že vám viac vyhovuje iný základ, môžete vychádzať z
predpripravených Bootstrap šablón napr. Na https://startbootstrap.com, https://mdbootstrap.com alebo ďalšie.
Uvidíte, že všetky budú fungovať podobne.
Priamo na stránke https://getbootstrap.com nájdeme pod
tlačidlom Get started pripravenú šablónu pre rýchly začiatok. Je
to HTML kód pod nadpisom "Starter template". Kód si uložíme do súboru
index.html. Ten teraz vyzerá takto:
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html>
Orientačné komentáre môžeme zmazať a celý základ šablóny si trochu prispôsobíme. Pre istotu si ešte v rýchlosti pripomenieme, čo ktorá časť existujúceho kódu robí.
Pre začiatok si zmeníme jazyk z en na cs-cz:
<html lang="cs-cz">
Responzívne <meta> tag ponecháme tak, ako je. Ide o
nasledujúce riadok:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Zaistí nám základné responzivitu pre prehliadanie webu z desktopu aj mobilných zariadení. Pre detailnejšie nastavenia zobrazenia je potrebná práca s jednotlivými elementami, k tomu sa dostaneme neskôr.
CSS
Samotný Bootstrap je nalinkovaný z CDN. Ak budeme mať stále pripojenie k internetu, vystačíme si s týmto linkom a nemusíme nič sťahovať do počítača. Jedná sa o časť:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
Keby sme ale chceli pracovať napríklad vo vlaku, kde si nie sme istí, že
bude wi-fi, môžeme si framework stiahnuť do počítača. Potom si súbor
bootstrap.min.css uložíme do rovnakej zložky
(väčšinou public_html/), v ktorej máme index.html.
A v index.html štandardnej link vyššie nahradíme:
<link rel="stylesheet" href="bootstrap.min.css">
To nám zabezpečí, že v prípade, kedy nebudeme mať pripojenie, môžeme
ďalej nerušene pracovať 
Predpripravené komponenty sú pre nás veľmi výhodné. Nehrozí však, že
by sme ich už potom neupravovali. Každý chce dnes mať originálnu stránku,
a nie len inak preskladanie niečo, čo už má niekto iný. Budeme si preto
musieť vytvoriť aj náš vlastný súbor style.css a na ten
odkázať:
<link rel="stylesheet" href="style.css">
Javascript
Ak ešte len začínate s webdesignom ak programovania ste sa ešte
nedostali, možno vás prekvapí tagy s JavaScriptom.
Rozhodne je neumazávejte a nechajte ich presne v tom poradí, ako sú. Sú to
skripty knižníc jQuery, Popper.js a vlastné javascriptové
pluginy Twitteri, konkrétne jQuery 's slim build. Ak by ste túto
časť kódu zmazali, stratíte možnosť interaktivity niektorých komponentov,
napríklad rozbaľovaní dropdown menu. K tomu sa ešte
dostaneme.
Ešte si zmeníme <title> na "MODERNÉ BÝVANIE" a
môžeme začať!
Ak by ste náhodou už teraz mali pocit, že sa strácate,
odporúčam si pred ďalším čítaním zopakovať lekcie z kurzov Webové stránky krok za krokom a Kompletné kurz CSS frameworku Bootstrap 
Body
Obsah <body> si rozkouskujeme a budeme postupne pridávať
jednotlivé časti.
Začneme tým jednoduchším z návrhu! Pridáme si do
<body> časť s nadpisom "MODERNÉ BÝVANIE", textom,
obrázkom sídla firmy a tlačidlom "VIAC O NÁS":
Obrázok nižšie si uložte do svojho projektu:
Všetky obrázky k projektu si ukladajte do podzložky v
projekte, napr. images/. Bude ich veľa, tak nech v tom nie je
zmätok.
Moderné bývanie
V kurze postupne nakódujeme celú stránku najskôr pre veľké rozlíšenie a až potom vyriešime responzívne zobrazenie na všetkých ostatných zariadeniach. Budeme používať grid, ktorý nášmu obsahu dodá pravidelné usporiadanie, základné responzivitu a rovnako nám prácu aj trochu uľahčí.
Pozrime sa vyššie na náhľad časti MODERNÉ BÝVANIE a predstavme si ju v riadkoch.
- Na prvom riadku je nadpis.
- Na druhom text a obrázok
- a na treťom tlačidlo.
Poďme si to hneď napísať do kódu:
<section class="container"> <div class="row"> <div class="col">nadpis</div> </div> <div class="row"> <div class="col">text</div> <div class="col">obrázek</div> </div> <div class="row"> <div class="col">tlačítko</div> </div> </section>
Výsledok je zatiaľ nasledovné:
Kóduje jednu sekciu stránky, preto použijeme element
<section>. Celá sekcia musí mať vždy, keď používame
grid, triedu .container. Tým sa jej šírka nebude ľubovoľne
meniť, ale bude vždy nadobúdať jednej z prichystaných veľkostí, tzv.
Breakpoint, ktoré Bootstrap pre rôzne zariadenia používa. V
<container> u potom máme jednotlivé riadky
<row>, ktoré majú stĺpce <col>. Do
stĺpcov následne vložíme, čo potrebujeme. Pre väčšiu prehľadnosť je
zatiaľ v jednotlivých <col> text, aby sme vedeli, čo kam
príde.
V budúcej lekcii, Tvorba Bootstrap šablóny z PSD - O firme , budeme pokračovať.
