IT rekvalifikácia. Seniorní programátori zarábajú až 6 000 €/mesiac a rekvalifikácia je prvým krokom. Zisti, ako na to!

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
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ží?

 
Odpovedať
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.

 
Odpovedať
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.

Editované 16.7.2018 20:15
 
Odpovedať
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

-
-

\---

 
Odpovedať
9.3.2022 16:54
Avatar
Tomáš Sobota
Člen
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".....

Odpovedať
16.10.2022 15:18
Done is better than perfect
Avatar
Adéla Tonarová
Člen
Avatar
Adéla Tonarová:18.7.2023 18:36

opet neaktualizovane informace uz nekolik let ....

 
Odpovedať
18.7.2023 18:36
Avatar
Patrik Hlaváč
Člen
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

 
Odpovedať
29.8.2023 11:02
Avatar
Karel Zaoral
Člen IT Redactor Gang
Avatar
Karel Zaoral:2. februára 14:07

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

 
Odpovedať
2. februára 14:07
Avatar
Edita Karlovská
Člen
Avatar
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
Avatar
Lumír RAJSKÝ
Člen
Avatar
Lumír RAJSKÝ:26. augusta 23:05

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

 
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ý!