Diskusia – 25. diel - Bootstrap - Scrollspy

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre

KaMl

Člen

KaMl:5.9.2021 11:44

To jsou úžasné lekce! Díky! :-)
Konečně jsem se dozvěděla kde vzít komponenty pro "akční web". Doteď jsem o Tooltipech, Popovers, Breadcrumb ani Scrollspy nesylšela... Už jsem si myslela, že si budu muset vystačit s JavaScriptovým: confirm(), prompt() a alert() - ale haprovalo to designování...

Odpovedať

5.9.2021 11:44

Pavel Vaněk

Člen

Pavel Vaněk:7.5.2023 13:13

Ukázky s navigací by to chtělo vylepšit. Když se celá stránka vejde na monitor tak je v navigaci zvýrazněná poslední položka. Mám v kódu něco špatně? Jak by se udělalo aby byla zvýrazněná první nebo žádná?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <style>

    </style>
</head>
<body data-spy="scroll" data-target="#navbar-ukazka" data-offset="70" style="position: relative">

    <div class="row">
        <div class="col-4">
            <nav id="navbar-ukazka" class="navbar navbar-light bg-light sticky-top">
                <a class="navbar-brand" href="#">Navigace</a>
                <nav class="nav nav-pills flex-column">
                    <a class="nav-link active" href="#lorem">Lorem ipsum</a>
                    <nav class="nav nav-pills flex-column">
                        <a class="nav-link ml-3 my-1" href="#aenean">Aenean a condimentum</a>
                        <a class="nav-link ml-3 my-1" href="#vivamus">Vivamus</a>
                    </nav>
                    <a class="nav-link" href="#duis">Duis semper</a>
                    <a class="nav-link" href="#fusce">Fusce erat eros</a>
                    <nav class="nav nav-pills flex-column">
                        <a class="nav-link ml-3 my-1" href="#mauris">Mauris tempor</a>
                    </nav>
                </nav>
            </nav>
        </div>

        <div class="col-8">
            <h4 id="lorem">Lorem ipsum</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis similique repellat nulla esse eius cumque dignissimos maxime, dolor itaque commodi quaerat minus laborum amet, fugiat accusamus nihil ea laudantium eaque.</p>
            <h5 id="aenean">Aenean a condimentum</h5>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus laborum iusto at officiis labore eos consectetur minus, optio quisquam suscipit iste ex aliquid, placeat fugiat, quaerat quae laboriosam mollitia sunt!</p>
            <h5 id="vivamus">Vivamus</h5>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque, mollitia ducimus rem praesentium dolore delectus magnam. Corporis iusto dicta dolorem maiores saepe, ipsum repellat! Doloremque laborum aliquam ad corporis ipsam!</p>
            <h4 id="duis">Duis semper</h4>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel animi magnam amet nisi, dolore nemo quia, pariatur quis, hic adipisci in laboriosam. Eaque corporis quia laudantium dolores amet nihil voluptate!</p>
            <h4 id="fusce">Fusce erat eros</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio ea ratione architecto doloremque impedit corporis deserunt repudiandae nobis fugiat! Explicabo excepturi architecto perferendis ad, ex quisquam iusto veritatis eius vero?</p>
            <h5 id="mauris">Mauris tempor</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id atque laborum autem earum asperiores, et quae! Quasi harum alias reiciendis nemo odit possimus, fugiat corrupti eum maxime, asperiores provident perferendis?</p>
        </div>
    </div>

<script>

</script>
</body>
</html>

Editované 7.5.2023 13:14

Odpovedať

7.5.2023 13:13

Karel Zaoral

Člen IT Redactor Gang

Karel Zaoral:2. februára 14:10

Děkujeme za vaše podněty. Lekci jsme aktualizovali :-)

Odpovedať

2. februára 14:10

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!

Najčastejšie vyhľadávané

Diskusia – 25. diel - Bootstrap - Scrollspy