5. diel - Tvorba Bootstrap šablóny z PSD - Spoločnosti a prehliadka

V minulej lekcii, Tvorba Bootstrap šablóny z PSD - Kontakty a pätička , sme si vytvorili Kontakty a pätičky pre našu bootstrapovou šablónu. Dnes si v Bootstrap tutoriálu pridáme sekcie Virtuálna prehliadka a Naše spoločnosti.

Náš dnešný výstup bude vyzerať takto:

Sekcia virtuálna prehliadka a naše spoločnosti v Bootstrap šablóne

Začneme tým jednoduchším.

Naše spoločnosti

Vytvoríme <section>, ako sme zvyknutí, a v ňom dva riadky. Jeden pre nadpis a druhý pre obrázky.

Obrázok dcérskej spoločnosti si môžete stiahnuť nižšie. V praxi by bol samozrejme každý iný, ale to nám nevadí:

Logo dcérskej spoločnosti

Náš kód by teraz mohol vyzerať nejako takto:

<section class="container">
    <div class="row">
        <div class="col">
            <h4>NAŠE SPOLEČNOSTI</h4>
        </div>
    </div>
    <div class="row">
        <div class="col">
        </div>
    </div>
</section>

Ešte než sa pustíme do vkladanie obrázkov a štýlovanie nadpisu, pridáme si pozadie. V CSS si vytvoríme triedu .subsidiaries-background (subsidiaries = dcérske spoločnosti) a pridelíme jej


 

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

Vedomosti v hodnote stoviek tisíc získaš za pár eur

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émiovej sekcie.

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íš s Prevádzkový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 si krok po kroku vysvetlíme, ako vytvoriť sekcie Naše spoločnosti a Virtuálna prehliadka.
Článok pre vás napísala Lucie Hartingerová
Avatar
Aktivity