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í:

Kódování bootstrapové šablony z PSD souboru - Tvorba Bootstrap šablony z PSD souboru

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":

Sekce moderní bydlení z Bootstrap šablony v PSD souboru - Tvorba Bootstrap šablony z PSD souboru

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í:

Your page

localhost

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.

Článek pro vás napsala Lucie Hartingerová

Uživatelské hodnocení:

26 hlasů

Aktivity