Lekce 4 - Tvorba Bootstrap šablony z PSD - Kontakty a patička
V minulé lekci, Tvorba Bootstrap šablony z PSD - O firmě, jsme si vytvořili první gridový
.container pro naši webovou stránku.
Dnes v Bootstrap tutoriálu přidáme část s kontaktními informacemi a patičku. Opět budeme používat grid, který nám zajistí pěkný konečný vzhled.
Náš dnešní výstup bude vypadat takto:
Všimněte si, že část s kontaktními informacemi je bez pozadí, ale patička pozadí má. Je to proto, že chceme od sebe tyto dvě části odlišit, ale zároveň nestojíme o to, abychom na patičku příliš upozorňovali. Použijeme proto lehce našedlou barvu. Samozřejmě se jedná o osobní preferenci a také fakt, že se snažíme o formálnější vzhled celého projektu.
Patička
Vytvoříme si <footer class="container">. Třídu
.container můžeme samozřejmě přidělit kromě
.section také .headeru nebo .footeru.
Dovnitř kontejneru vložíme jednu řádku
<div class="row">. Ta bude obsahovat další dva
<div>y:
- Jeden s textem "© 2018 MODERNÍ BYDLENÍ A.S."
- Druhý s logem autora šablony. V našem případě to bude logo ITnetwork.
Obrázek loga si můžete stáhnout níže, uložila jsem jej ještě jako černobílý obrázek a trochu jej zesvětlila:
Obrázku přidělíme v kódu třídu
...konec náhledu článku...
Pokračuj dál
Došel jsi až sem a to je super! Věříme, že ti první lekce ukázaly něco nového a užitečného.
Chceš v kurzu pokračovat? Přejdi do prémiové sekce.
Omezená nabídka: Nauč se vše a ušetři
Obsah článku spadá pod licenci Premium no-reselling, koupí článku souhlasíš se smluvními podmínkami.
Komerční článek (licence no-reselling)
Tento článek vznikl na základě mnohaletých zkušeností v oboru a popisuje vývoj profesionálního komerčního produktu nebo jeho součásti, kterou lze přímo využít za účelem zisku nebo proniknutí do komerční sféry IT odvětví.
Tyto vrcholové znalosti zpřístupňujeme samozřejmě pouze některým členům komunity, kteří se mají zájem vypracovat na profesionály v oboru a proto jsou k dispozici pouze za kredity. Kód z článku můžete použít pro jeden svůj komerční projekt. Není ho však možné přeprodávat (jednou zakoupit a poté prodat dále v několika projektech). Pokud potřebujete širší využití kódu, rádi se s vámi domluvíme na komerční licenci. Více informací naleznete v článku Licence.
Jste připraveni stát se profesionály v oboru? Stačí kliknout.
Popis článku
Požadovaný článek má následující obsah:
V Bootstrap tutoriálu budeme dále pracovat na bootstrapové šabloně naší webové stránky. Ukážeme si, jak přidat kontaktní informace a patičku.
Kredity získáš, když podpoříš naši síť. To můžeš udělat buď zasláním symbolické částky na podporu provozu nebo přidáním obsahu na síť.
