Lekce 3 - Tvorba Bootstrap šablony z PSD - O firmě

V minulé lekci, Tvorba Bootstrap šablony z PSD - Založení projektu, jsme rozpracovali část návrhu firemní webové prezentace se sídlem firmy a informacemi o ní.

Dnes budeme pokračovat v tom, v čem jsme naposled skončili:

Vložení obsahu

Přejděme k vložení obsahu. Do <col> nadpisu vložíme element <h2>, pro text dodáme <p> a do posledního řádku vložíme základní bootstrapové tlačítko. Přidáme konkrétní texty a měli bychom mít tento kód:

<section class="container">
    <div class="row">
        <div class="col">
            <h2">MODERNÍ BYDLENÍ</h2>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <p>V rámci holdingu sedmi renomovaných developerských firem měníme Vaše sny ve skutečnost. Ve spolupráci se špičkovými architekty a stavebními inženýry, s pomocí těch nejmodernějších materiálů a postupů, stavíme domy pro Váš spokojený každodenní život. Rodinné pohodlí Vám připravíme na přání, v podobě vily, energy-stavby, bungalovu, nebo stavby na klíč.</p>
            <p>Po 30 let stavíme domy, které mají duši. Tradicí, vstřícným přístupem a kvalitní prací patříme ke špičce moderního bydlení. Jsme zdrojem čistých tvarů v metropoli. Mezi naše nejznámější developerské projekty patří například Barandov de Future, čtvrť Quartier nebo Maison de Fleurs.</p>
            <p>Jste i Vy připraveni na změnu?</p>
        </div>
        <div class="col">
            <img src="images/company-building.jpg" alt="Společnost"/>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <button type="button" class="btn btn-outline-primary">VÍCE O NÁS</button>
        </div>
    </div>
</section>

Teď nastavíme jednotlivým <col>ům velikost.

Grid počítá s tím, že je každý řádek rozdělený na 12 colů (sloupců).

Pro první a poslední řádek nastavíme .col-12. To znamená, že bude zabírat na šířku všech 12 pomyslných sloupců. U druhého řádku budeme chtít, aby obrázek zabíral 1/3 a text 2/3 šířky řádku. To znamená, že <col>u s textem přiřadíme třídu .col-8 (dvě třetiny z dvanácti) a obrázku .col-4 (jedna třetina z dvanácti). A aby nám obrázek mřížku nerozhodil, přidělíme mu třídu .img-fluid, čímž se roztáhne na maximální možnou šířku v daném místě.

Náš kód bude vypadat následovně:

<section class="container">
    <div class="row">
        <div class="col-12">
            <h2">MODERNÍ BYDLENÍ</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-8">
            <p>V rámci holdingu sedmi renomovaných developerských firem měníme Vaše sny ve skutečnost. Ve spolupráci se špičkovými architekty a stavebními inženýry, s pomocí těch nejmodernějších materiálů a postupů, stavíme domy pro Váš spokojený každodenní život. Rodinné pohodlí Vám připravíme na přání, v podobě vily, energy-stavby, bungalovu, nebo stavby na klíč.</p>
            <p>Po 30 let stavíme domy, které mají duši. Tradicí, vstřícným přístupem a kvalitní prací patříme ke špičce moderního bydlení. Jsme zdrojem čistých tvarů v metropoli. Mezi naše nejznámější developerské projekty patří například Barandov de Future, čtvrť Quartier nebo Maison de Fleurs.</p>
            <p>Jste i Vy připraveni na změnu?</p>
        </div>
        <div class="col-4">
            <img src="images/company-building.jpg" alt="Společnost" class="img-fluid" />
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <button type="button" class="btn btn-outline-primary">VÍCE O NÁS</button>
        </div>
    </div>
</section>

Teď vidíme, že je potřeba nadpis a tlačítko vycentrovat. Použijeme k tomu třídy .d-flex a .justify-content-center.

Třída .d-flex (display flex) nám umožním centrovat vodorovně a/nebo svisle. Konkrétně část justify-content-xxx centruje vodorovně, a align-items-xxx svisle, pokud osy neprohodíme. xxx nahradíme daným směrem. To jenom pro připomenutí

Nadpisu dále přidělíme bootstrapovou třídu .font-weight-light, která nám font ztenčí. Varianta .font-weight-normal je nastavená jako výchozí a varianta .fotn-weight-bold by nadpis ztučnila.

Náš kód by měl být nyní následující:

<section class="container">
    <div class="row">
        <div class="col-12 d-flex justify-content-center">
            <h2 class="font-weight-light">MODERNÍ BYDLENÍ</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-8">
            <p>V rámci holdingu sedmi renomovaných developerských firem měníme Vaše sny ve skutečnost. Ve spolupráci se špičkovými architekty a stavebními inženýry, s pomocí těch nejmodernějších materiálů a postupů, stavíme domy pro Váš spokojený každodenní život. Rodinné pohodlí Vám připravíme na přání, v podobě vily, energy-stavby, bungalovu, nebo stavby na klíč.</p>
            <p>Po 30 let stavíme domy, které mají duši. Tradicí, vstřícným přístupem a kvalitní prací patříme ke špičce moderního bydlení. Jsme zdrojem čistých tvarů v metropoli. Mezi naše nejznámější developerské projekty patří například Barandov de Future, čtvrť Quartier nebo Maison de Fleurs.</p>
            <p>Jste i Vy připraveni na změnu?</p>
        </div>
        <div class="col-4">
            <img src="images/company-building.jpg" alt="Společnost" class="img-fluid" />
        </div>
    </div>
    <div class="row">
        <div class="col-12 d-flex justify-content-center">
            <button type="button" class="btn btn-outline-primary">VÍCE O NÁS</button>
        </div>
    </div>
</section>

CSS

Teď přejdeme do CSS souboru, kde si vytvoříme třídu .text-dark-blue pro nadpis, kterou mu rovnou i přidělíme:

.text-dark-blue {
    color: #1c4280;
}

Dále přidáme třídu stylující naše tlačítko. Budeme zde používat stejnou barvu jako pro nadpis. Tlačítko bude mít navíc i :hover styl, takže při přejetí kurzorem bude reagovat změnou barev.

V CSS souboru vytvoříme:

.text-dark-blue {
    color: #1c4280;
}

.btn-outline-light-blue {
    background: transparent;
    border-color: #1c4280;
    color: #1c4280;
}

.btn-outline-light-blue:hover {
    background: #1c4280;
    color: white;
}

Nic v kódu by nás nemělo zaskočit Kód v index.html by po přidělení všech nových tříd měl vypadat takto:

<section class="container">
    <div class="row">
        <div class="col-12 d-flex justify-content-center">
            <h2 class="font-weight-light text-dark-blue">MODERNÍ BYDLENÍ</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-8">
            <p>V rámci holdingu sedmi renomovaných developerských firem měníme Vaše sny ve skutečnost. Ve spolupráci se špičkovými architekty a stavebními inženýry, s pomocí těch nejmodernějších materiálů a postupů, stavíme domy pro Váš spokojený každodenní život. Rodinné pohodlí Vám připravíme na přání, v podobě vily, energy-stavby, bungalovu, nebo stavby na klíč.</p>
            <p>Po 30 let stavíme domy, které mají duši. Tradicí, vstřícným přístupem a kvalitní prací patříme ke špičce moderního bydlení. Jsme zdrojem čistých tvarů v metropoli. Mezi naše nejznámější developerské projekty patří například Barandov de Future, čtvrť Quartier nebo Maison de Fleurs.</p>
            <p>Jste i Vy připraveni na změnu?</p>
        </div>
        <div class="col-4">
            <img src="images/company-building.jpg" alt="Společnost" class="img-fluid" />
        </div>
    </div>
    <div class="row">
        <div class="col-12 d-flex justify-content-center">
            <button type="button" class="btn btn-outline-light-blue">VÍCE O NÁS</button>
        </div>
    </div>
</section>

Máme skoro hotovo! Poslední věc, kterou vylepšíme, je tlačítko. Přidáme třídu .rounded-0, aby mělo hranaté rohy jako na grafickém návrhu. Ještě zvětšíme padding vodorovně třídou .px-5 a svisle pomocí .py-3 a máme hotovo.

Pro úplnost tedy ještě samotný upravený řádek tlačítka:

<button type="button" class="btn btn-outline-light-blue py-3 px-5 mt-3 rounded-0">

Náš výstup teď v prohlížeči vypadá takto a my máme první část bootstrapové šablony hotovou!

To je pro dnešek všechno! Zip k lekci najdete ke stažení níže pro případ, že jsme někde udělali chybu, můžete si ji tak snadno najít.

V příští lekci, Tvorba Bootstrap šablony z PSD - Kontakty a patička, se pustíme do kontaktních informací a patičky.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.