Mikuláš je tu! Získaj 90 % extra kreditov ZADARMO s promo kódom CERTIK90 pri nákupe od 1 199 kreditov. Len do nedele 7. 12. 2025! Zisti viac:
NOVINKA: Najžiadanejšie rekvalifikačné kurzy teraz s 50% zľavou + kurz AI ZADARMO. Nečakaj, táto ponuka dlho nevydrží! Zisti viac:
Funkce, kterou se snažíš použít je dostupná pouze pro registrované uživatele. Buďto se přihlas nebo si zdarma vytvoř nový účet.

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é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 si krok po kroku vysvetlíme, ako vytvoriť sekcie Naše spoločnosti a Virtuálna prehliadka.

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