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.
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:
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
Došiel 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.
Kúpiť iba tento kurz
Získaj okamžitý prístup ku kurzu bez
časového obmedzenia.
420 kreditov
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)
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ť.
