Lekce 2 - Tvorba Bootstrap šablony z PSD - Založení projektu
V minulé lekci, Tvorba Bootstrap šablony z PSD - Wireframe a grafický editor, jsme se seznámili s grafickými editory a stručně si o nich udělali přehled. Již také víme, jak pomocí nich vyříznout jednotlivé obrázky z PSD souboru s návrhem webové prezentace.
Dnes si nakódujeme první kousek bootstrapové šablony. Bude se jednat o část s nadpisem Moderní bydlení:
Založení projektu
Samozřejmě nezačneme jinak, než že si založíme nový projekt
například v NetBeans, WebStorm nebo jiném preferovaném IDE. Pojmenujme si
jej template (=angl. šablona).
V celém projektu budeme dodržovat následující konvenci pro
názvy souborů a složek: Názvy budeme zadávat malými písmeny, bez háčků
a čárek. Při dvouslovném názvu použijeme - nebo
_. camelCase notace patří spíše do zdrojového kódu JS nebo
serverového jazyka. V tomto kurzu budeme používat výchozí šablonu přímo
z Bootstrap frameworku od Twitteru. Pokud byste v budoucnu zjistili,
že vám víc vyhovuje jiný základ, můžete vycházet z předpřipravených
Bootstrap šablon např. na https://startbootstrap.com, https://mdbootstrap.com nebo další.
Uvidíte, že všechny budou fungovat podobně.
Přímo na stránce https://getbootstrap.com najdeme pod
tlačítkem Get started připravenou šablonu pro rychlý začátek. Je
to HTML kód pod nadpisem "Starter template". Kód si uložíme do souboru
index.html. Ten nyní vypadá 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áře můžeme smazat a celý základ šablony si trochu přizpůsobíme. Pro jistotu si ještě v rychlosti připomeneme, co která část stávajícího kódu dělá.
Pro začátek si změníme jazyk z en na cs-cz:
<html lang="cs-cz">
Responzivní <meta> tag ponecháme tak, jak je. Jedná se
o následující řádek:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Zajistí nám základní responzivitu pro prohlížení webu z desktopu i mobilních zařízení. Pro detailnější nastavení zobrazení je zapotřebí práce s jednotlivými elementy, k tomu se dostaneme později.
CSS
Samotný Bootstrap je nalinkovaný z CDN. Pokud budeme mít stálé připojení k internetu, vystačíme si s tímto linkem a nemusíme nic stahovat do počítače. Jedná se o část:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
Kdybychom ale chtěli pracovat například ve vlaku, kde si nejsme jisti, že
bude wi-fi, můžeme si framework stáhnout do počítače. Potom si soubor
bootstrap.min.css uložíme do stejné složky
(většinou public_html/), ve které máme index.html.
A v index.html standardní link výše nahradíme:
<link rel="stylesheet" href="bootstrap.min.css">
To nám zajistí, že v případě, kdy nebudeme mít připojení, můžeme
dál nerušeně pracovat 
Předpřipravené komponenty jsou pro nás velice výhodné. Nehrozí ale,
že bychom je už potom neupravovali. Každý chce dnes mít originální
stránku, a ne jen jinak přeskládané něco, co už má někdo jiný. Budeme
si proto muset vytvořit i náš vlastní soubor style.css a na ten
odkázat:
<link rel="stylesheet" href="style.css">
JavaScript
Pokud teprve začínáte s webdesignem a k programování jste se ještě
nedostali, možná vás překvapí tagy s JavaScriptem.
Rozhodně je neumazávejte a nechte je přesně v tom pořadí, jak jsou. Jsou
to skripty knihoven jQuery, Popper.js a vlastní
javascriptové pluginy Twitteru, konkrétně jQuery's slim build. Pokud
byste tuto část kódu smazali, ztratíte možnost interaktivity některých
komponent, například rozbalování dropdown menu. K tomu se
ještě dostaneme.
Ještě si změníme <title> na "MODERNÍ BYDLENÍ" a
můžeme začít!
Pokud byste náhodou již teď měli pocit, že se ztrácíte,
doporučuji si před dalším čtením zopakovat lekce z kurzů Webové stránky krok za krokem a Kompletní kurz CSS frameworku Bootstrap 
Body
Obsah <body> si rozkouskujeme a budeme postupně
přidávat jednotlivé části.
Začneme tím jednodušším z návrhu! Přidáme si do
<body> část s nadpisem "MODERNÍ BYDLENÍ", textem,
obrázkem sídla firmy a tlačítkem "VÍCE O NÁS":
Obrázek níže si uložte do svého projektu:
Všechny obrázky k projektu si ukládejte do podsložky v
projektu, např. images/. Bude jich hodně, tak ať v tom není
zmatek.
Moderní bydlení
V kurzu postupně nakódujeme celou stránku nejdříve pro velké rozlišení a až potom vyřešíme responzivní zobrazení na všech ostatních zařízeních. Budeme používat grid, který našemu obsahu dodá pravidelné uspořádání, základní responzivitu a rovněž nám práci i trochu ulehčí.
Podívejme se výše na náhled části MODERNÍ BYDLENÍ a představme si ji v řádcích.
- Na prvním řádku je nadpis.
- Na druhém text a obrázek
- a na třetím tlačítko.
Pojďme si to hned napsat 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ýsledek je zatím následující:
Kódujeme jednu sekci stránky, proto použijeme element
<section>. Celá sekce musí mít vždy, když používáme
grid, třídu .container. Tím se její šířka nebude libovolně
měnit, ale bude vždy nabývat jedné z přichystaných velikostí, tzv.
breakpointů, které Bootstrap pro různá zařízení používá. V
<container>u potom máme jednotlivé řádky
<row>, které mají sloupce <col>. Do
sloupců následně vložíme, co potřebujeme. Pro větší přehlednost je
prozatím v jednotlivých <col> text, abychom věděli, co
kam přijde.
V příští lekci, Tvorba Bootstrap šablony z PSD - O firmě, si vytvoříme první gridový
.container pro naši webovou stránku.
