4. diel - Tvorba Bootstrap šablóny z PSD - Kontakty a pätička
V minulej lekcii, Tvorba Bootstrap šablóny z PSD - O firme , sme si vytvorili prvú grid ový
.container pre našu webovú stránku.
Dnes v Bootstrap tutoriálu pridáme časť s kontaktnými informáciami a pätičku. Opäť budeme používať grid, ktorý nám zaistí pekný konečný vzhľad.
Náš dnešný výstup bude vyzerať takto:
Všimnite si, že časť s kontaktnými informáciami je bez pozadia, ale pätička pozadie má. Je to preto, že chceme od seba tieto dve časti odlíšiť, ale zároveň nestojíme o to, aby sme na pätičku príliš upozorňovali. Použijeme preto ľahko našedlú farbu. Samozrejme sa jedná o osobné preferenciu a tiež fakt, že sa snažíme o formálnejšie vzhľad celého projektu.
Pätička
Vytvoríme si <footer class="container">. Triedu
.container môžeme samozrejme prideliť okrem
.section tiež .header u alebo .footer u.
Dovnútra kontajnera vložíme jednu riadku
<div class="row">. Tá bude obsahovať ďalšie dva
<div> y:
- Jeden s textom "© 2018 MODERNÉ BÝVANIE AS"
- Druhý s logom autora šablóny. V našom prípade to bude logo ITnetwork.
Obrázok loga si môžete stiahnuť nižšie, uložila som ho ešte ako čiernobiely obrázok a trochu ho zosvetlila:
Obrázku pridelíme v kóde triedu
...koniec náhľadu článku...
Pokračuj ďalej
Minul si až sem a to je super! Veríme, že ti prvé lekcie ukázali niečo nového a užitočného.
Chceš v kurze pokračovať? Prejdi do prémiové sekcie.
Obmedzená ponuka: Nauč sa všetko a ušetri
Obsah článku spadá pod licenciu Premium no-reselling, kúpou článku súhlasíš so zmluvnými podmienkami.
Komerčný článok (licencia no-reselling)
Tento článok vznikol na základe mnohoročných skúseností v odbore a opisuje vývoj profesionálneho komerčného produktu alebo jeho súčasti, ktorú možno priamo využiť za účelom zisku alebo k preniknutiu do komerčnej sféry IT odvetvia.
Tieto vrcholové znalosti sprístupňujeme samozrejme iba niektorým členom komunity, ktorí sa majú záujem vypracovať na profesionálov v odbore a preto sú k dispozícii len za kredity. Kód z článku môžete použiť pre jeden svoj komerčný projekt. Nie je ho však možné prepredávať (raz zakúpiť a následne predať ďalej v niekoľkých projektoch). Ak potrebujete širšie využitie kódu, radi sa s vami dohodneme na komerčnej licencii. Viac informácií nájdete v článku Licencia.
Ste pripravení stať sa profesionálmi v odbore? Stačí kliknúť.
Popis článku
Požadovaný článok má nasledujúci obsah:
V Bootstrap tutoriále budeme ďalej pracovať na bootstrapové šablóne našej webovej stránky. Ukážeme si, ako pridať kontaktné informácie a pätičku.
Kredity získaš, keď podporíš našu sieť. To môžeš urobiť buď zaslaním symbolickej sumy na podporu prevádzky alebo pridaním obsahu na sieť.
