Geek tričko zdarma Python týden
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde
Pouze tento sleva až 80% na kurzy Python

Lekce 2 - Tvorba Bootstrap šablony z PSD - Založení projektu

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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, kterou jsme si představili minule. Bude se jednat o část s nadpisem Moderní bydlení:

Kódování bootstrapové š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

Obrázek níže si uložte do svého projektu:

Sídlo holdingové společnosti Moderní bydlení

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ě, budeme pokračovat.


 

 

Aktivity (3)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!