Geek tričko zdarma Geek tričko zdarma
Hledáme grafika na pohodovou brigádu v Blenderu nebo programátora na hry v PyGame. Máš zájem? Napiš nám na redakce [zavináč] itnetwork.cz!
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde

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

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 - Založení projektu, jsme rozpracovali část návrhu firemní webové prezentace se sídlem firmy a informacemi o ní. Jednalo se o následující obrázek, který nyní kódujeme do HTML a CSS pomocí frameworku Bootstrap:

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

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>
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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!

Tvorba bootstrapové šablony z PSD souboru – Moderní bydlení

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.


 

Stáhnout

Staženo 29x (639.76 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

 

Aktivity (2)

 

 

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