Diskusia – 16. diel - Bootstrap - Dropdowns

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

Daniel Šup

Člen

Daniel Šup:16.7.2018 19:08

Zdravím,
k článku bych měl dotaz ohledně formuláře, který je položkou dropdown menu. Zajímalo by mě, proč má element form nastaveny třídy px-4 a py-3. K čemu tyto třídy slouží?

Odpovedať

16.7.2018 19:08

Člen

:16.7.2018 19:23

K nastaveniu padding. PX je po x-ovej osi, čiže nastavuje padding-left a padding-right a PY po y-onovej osi, čiže padding-top a padding-bottom. Viac v dokumentácii.

Odpovedať

16.7.2018 19:23

Daniel Šup

Člen

Daniel Šup:16.7.2018 20:14

Ahoj,
díky za odpověď. Podle dokumentace jsou padding-left a padding-right nastaveny na 1.5 násobek hodnoty $spacer a padding-top a padding-bottom na hodnotu $spacer. Hodnota $spacer je rovna 1rem.

Editované 16.7.2018 20:15

Odpovedať

16.7.2018 20:14

Andrej

Člen

Andrej :9.3.2022 16:54

Ahojte, spravil som si takto navigačné menu ale nejde mi rozkliknutie šípky v Produktoch, neviete, kde mám chybu?

<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
            <div class="container">
                <a class="navbar-brand" href="#page-top"><img src="img/logo.svg" alt="..." /></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    Menu
                    <i class="fas fa-bars ms-1"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
                        <li class="nav-item"><a class="nav-link" href="#sluzby">Služby</a></li>

                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="produkty-dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Produkty</a>
                            <div class="dropdown-menu" aria-labelledby="produkty-dropdown">
                                <a class="dropdown-item" href="#">Ženy</a>
                                <a class="dropdown-item" href="#">Muži</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Deti</a>
                            </div>
                        </li>

                        <li class="nav-item"><a class="nav-link" href="#onas">O nás</a></li>
                        <li class="nav-item"><a class="nav-link" href="#kontact">Kontact</a></li>
                    </ul>
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="search" placeholder="Vyhľadať..." aria-label="Vyhľadávanie">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Vyhľadať</button>
                    </form>
                </div>
            </div>
        </nav>

Vďaka

-
-

\---

Odpovedať

9.3.2022 16:54

Tomáš Sobota

Člen

Tomáš Sobota:16.10.2022 15:18

Kdyby někomu nefungoval dropdown tak v nových verzích musíte místo "data-toggle" dát "data-bs-toggle".....

Odpovedať

16.10.2022 15:18

Done is better than perfect

Adéla Tonarová

Člen

Adéla Tonarová:18.7.2023 18:36

opet neaktualizovane informace uz nekolik let ....

Odpovedať

18.7.2023 18:36

Patrik Hlaváč

Člen

Patrik Hlaváč:29.8.2023 11:02

Ahojte, tak mě nefungovaly dropdowns-nešly rozbalit, vyřešil jsem takto, na konec body jsem vložil jako první script <script src="https://cdn.jsdelivr.net/npm/bo[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
dále jsem musel přepsat data atribut, původně je v kodu data-toogle=dropdown, nyní data-bs-toogle=dropdown

Odpovedať

29.8.2023 11:02

Karel Zaoral

Člen IT Redactor Gang

Karel Zaoral:2. februára 14:07

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

Odpovedať

2. februára 14:07

Edita Karlovská

Člen

Edita Karlovská:8. februára 9:02

Vždy začátek lekcí dobrý, jsou tam i kódy a ukázky. Pak se ale k tomu přimíchá JavaScript a už tam není výsledek - čeho tím JS tedy dosáhneme. Takže části s vlastním JS pro mě neuchopitelné a nesrozumitelné. Zatím mi uniká, proč bych se měla trápit s vymýšlením a implementací vlastního JS kódu?

Odpovedať

8. februára 9:02

Lumír RAJSKÝ

Člen

Lumír RAJSKÝ:26. augusta 23:05

A zase ten závěr, stejně jako v minulé lekci. Co sním, jak ho aplikovat, .... ? (

Odpovedať

26. augusta 23:05

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 – 16. diel - Bootstrap - Dropdowns