Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Lekce 16 - Bootstrap - Dropdowns

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře
Avatar
Daniel Šup
Člen
Avatar
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ží?

 
Odpovědět
16.7.2018 19:08
Avatar

Člen
Avatar
: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.

 
Odpovědět
16.7.2018 19:23
Avatar
Daniel Šup
Člen
Avatar
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.

Editováno 16.7.2018 20:15
 
Odpovědět
16.7.2018 20:14
Avatar
Andrej
Člen
Avatar
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

-
-

\---

 
Odpovědět
9.3.2022 16:54
Avatar
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".....

Odpovědět
16.10.2022 15:18
Done is better than perfect
Avatar
Adéla Tonarová:18.7.2023 18:36

opet neaktualizovane informace uz nekolik let ....

 
Odpovědět
18.7.2023 18:36
Avatar
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]/dis­t/js/bootstrap­.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmt­z2MlQnikT1wXgY­sOg+OMhuP+IlRH9sEN­BO0LRn5q+8nbTov4+1p" crossorigin="a­nonymous"></scrip­t>
dále jsem musel přepsat data atribut, původně je v kodu data-toogle=dropdown, nyní data-bs-toogle=dropdown

 
Odpovědět
29.8.2023 11:02
Avatar
Karel Zaoral
Tvůrce
Avatar
Karel Zaoral:2. února 14:07

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

 
Odpovědět
2. února 14:07
Avatar
Edita Karlovská:8. února 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?

 
Odpovědět
8. února 9:02
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.