3. diel - Tvorba Bootstrap šablóny z PSD - O firme

V minulej lekcii, Tvorba Bootstrap šablóny z PSD - Založenie projektu , sme rozpracovali časť návrhu firemnej webovej prezentácie so sídlom firmy a informáciami o nej. Jednalo sa o nasledujúci obrázok, ktorý teraz kódu do HTML a CSS pomocou frameworku Bootstrap:

Vloženie obsahu

Prejdime k vloženie obsahu. Do <col> nadpisu vložíme element <h2>, pre text dodáme <p> a do posledného riadku vložíme základné bootstrapové tlačidlo. Pridáme konkrétne texty a mali by sme mať 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>

Teraz nastavíme jednotlivým <col> om veľkosť.

Grid počíta s tým, že je každý riadok rozdelený na 12 Colu (stĺpcov).

Pre prvý a posledný riadok nastavíme .col-12. To znamená, že bude zaberať na šírku všetkých 12 pomyselných stĺpcov. Pri druhom riadku budeme chcieť, aby obrázok zaberal 1/3 a text 2/3 šírky riadku. To znamená, že <col> us textom priradíme triedu .col-8 (dve tretiny z dvanástich) a obrázku .col-4 (jedna tretina z dvanástich). A aby nám obrázok mriežku nerozhodilo, pridelíme mu triedu .img-fluid, čím sa roztiahne na maximálnu možnú šírku v danom mieste.

Náš kód bude vyzerať nasledovne:

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

Teraz vidíme, že je potreba nadpis a tlačidlo vycentrovať. Použijeme na to triedy .d-flex a .justify-content-center.

Trieda .d-flex (display flex) nám umožním centrovať vodorovne a / alebo zvisle. Konkrétne časť justify-content-xxx center vodorovne, a align-items-xxx zvisle, ak osi neprohodíme. xxx nahradíme daným smerom. To len pre pripomenutie

Nadpisu ďalej pridelíme bootstrapovou triedu .font-weight-light, ktorá nám font stenčí. Variant .font-weight-normal je nastavená ako predvolené a variant .fotn-weight-bold by nadpis ztučnila.

Náš kód by mal byť teraz nasledujúce:

<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

Teraz prejdeme do CSS súboru, kde si vytvoríme triedu .text-dark-blue pre nadpis, ktorú mu rovno aj pridelíme:

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

Ďalej pridáme triedu stylující naše tlačidlo. Budeme tu používať rovnakú farbu ako pre nadpis. Tlačidlo bude mať navyše aj :hover štýl, takže pri prejdení kurzorom bude reagovať zmenou farieb.

V CSS súboru vytvorí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;
}

Nič v kóde by nás nemalo zaskočiť Kód v index.html by po pridelení všetkých nových tried mal vyzerať 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á vec, ktorú vylepšíme, je tlačidlo. Pridáme triedu .rounded-0, aby malo hranaté rohy ako na grafickom návrhu. Ešte zväčšíme padding vodorovne triedou .px-5 a zvisle pomocou .py-3 a máme hotovo.

Pre úplnosť teda ešte samotný upravený riadok tlačidlá:

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

Náš výstup teraz v prehliadači vyzerá takto a my máme prvú časť bootstrapové šablóny hotovú!

To je pre dnešok všetko! Zips k lekcii nájdete na stiahnutie nižšie pre prípad, že sme niekde urobili chybu, môžete si ju tak ľahko nájsť. V budúcej lekcii, Tvorba Bootstrap šablóny z PSD - Kontakty a pätička , sa pustíme do kontaktných informácií a pätičky.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.