IT rekvalifikácia. Seniorní programátori zarábajú až 6 000 €/mesiac a rekvalifikácia je prvým krokom. Zisti, ako na to!

6. diel - Tvorba Bootstrap šablóny z PSD - Header a panel s tlačidlami

V minulej lekcii, Tvorba Bootstrap šablóny z PSD - Spoločnosti a prehliadka , sme vytvorili časti Virtuálna prehliadka a Naše Spoločnosti. Dnes sa v Bootstrap tutoriálu pustíme do hlavičky.

Hlavička Bootstrap šablóny

Vytvoríme si opäť <section class="container">, ktorý obalíme do <div> u, v ktorom budeme mať nastavený obrázok ako pozadie. V samotnom .container u budeme mať texty "Navrhujem BÝVANIE", "PODĽA VAŠICH PREDSTÁV" a tlačidlo.

Pre každý text vytvoríme element <p>. Pre tlačidlo použijeme úplne rovnaké nastavenie ako vo Virtuálne prehliadke. Skopírujeme si teda tlačidlo, vložíme si ho do .container ua zmeníme jeho text na "POZRIEŤ PROJEKTY".

Môžeme začať s nasledujúcim HTML kódom:

<div class="header-background">

   <section class="container">
       <p>NAVRHUJEME BYDLENÍ</p>
       <p>PODLE VAŠICH PŘEDSTAV</p>
       <button type="button" class="btn btn-light-blue py-3 px-5 my-5 rounded-0">PROHLÉDNOUT PROJEKTY</button>
   </section>

</div>

Obrázok pozadia si stiahnite nižšie:

Pozadie pre Bootstrap šablónu Moderné bývanie

V CSS súboru vytvoríme triedu .header-background. Opäť tu nastavíme no-repeat a obrázok tentoraz napozicujeme na bottom (spodná časť elementu). Pre background-size použijeme


 

...koniec náhľadu článku...
Pokračuj ďalej

Vedomosti v hodnote stoviek tisíc získaš za pár korún

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

Kúpiť všetky aktuálne dostupné lekcie s funkciou odovzdávanie úloh za exkluzívnu cenu 315 kreditov
Aktuálny stav konta 0 kreditov
Kúpou tohoto výhodného balíčku získaš prístup ku všetkým 9 článkom (9 lekcií) s kontrolou a certifikáciou a ešte naviac ušetríš 106 Kč. Ponuka je časovo obmedzená a platí pro všetky lekcie v kurze. Nakúp teraz a získaj limitovanou 25% zľavu.

Pred kúpou tohto článku je potrebné kúpiť predchádzajúci diel

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)

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álu sa pustíme do header. Nastavíme pozadia, texty a tlačidlo. Vo zvyšku lekcie začneme pracovať na paneli s tlačidlami.

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

Článok pre vás napísala Lucie Hartingerová
Avatar
Aktivity