• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Bootstrap - nie działa data-toggle, data-target, rozwijane menu

Object Storage Arubacloud
0 głosów
877 wizyt
pytanie zadane 10 kwietnia 2019 w HTML i CSS przez Macx Nowicjusz (120 p.)

Witam.
Mam problem z Bootstrapem, którego już od kilku dni nie mogę rozwiązać, proszę Was o pomoc, bo nie mam już pojęcia co zrobić.
Otóż podczas tworzenia w Bootstrapie rozwijanego menu (zwykłe ćwiczenia), nie działa rozwinięcie togglera, i do tego, uzywając Notepada++, w pliku .html klasy data-toogle oraz data-target jakby nie są obsługiwane, Notepad++ oznacza je jako zwykły tekst (jako klasy u mnie powinny być na fioletowo, a są na czarno jak zwykły tekst).

<!DOCTYPE html>
<html lang="pl">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta http-equiv="X-Ua-Compatible" content="IE=edge">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384- 
         ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext" rel="stylesheet">
</head>

<body>

<header>

        <nav class="navbar navbar-dark bg-primary navbar-expand-md">

            <a class="navbar-brand" href="#"><img src="img/logo.png" class="d-inline-block mr-sm-1 align-bottom" alt=""     
                        >   strona.pl</a>

            <button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#menu">
                <span="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="menu">

            </div>

        </nav>

    </header>

<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

 

Dodam iż w podpiętych pod koniec body skryptach 'integrity' oraz 'crossorigin' również są u mnie odczytywane jak zwykły tekst (u mnie na czarno, a powinny być jak reszta skryptu na fioletowo), tak samo jak 'data-target' oraz 'data-toggle'.
Próbowałem podpiąć bootstrapa z plików lokalnych, robiłem to sam, robiłem to tak jak w tutorialach, efekty był ten sam..

Nie mam pojęcia dlaczego nie chodzi, wygląda jakby bootstrap nie obsługiwał wymienionych przeze mnie klas, i czytał je jak zwykły tekst, a nie klasy.. Responsywność działa bez zarzutu na stronie, problem jest tylko z tym rozwijanym menu, proszę Was o pomoc, będę bardzo wdzięczny!!!

Pozdrawiam, nowy użytkownik:)

2 odpowiedzi

0 głosów
odpowiedź 11 kwietnia 2019 przez afqedart Mądrala (5,050 p.)
A jak ma niby działać? Dodaj do niego menu czyli między tym:

<div class="collapse navbar-collapse" id="menu">

<div>1</div>  <--- dla przykładu takie coś i śmiga

<div>2</div>

<div>3</div>

<div>4</div>

            </div>
0 głosów
odpowiedź 11 kwietnia 2019 przez Alta Nowicjusz (180 p.)

w kodzie są dwa błędy:

1. brakuje class

<button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#menu">
                <span class="navbar-toggler-icon"></span>
</button>

2. między div powinno być definicja menu. Poniżej przykład:

            <div class="collapse navbar-collapse" id="menu">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>

            </div>

Podobne pytania

0 głosów
2 odpowiedzi 2,183 wizyt
pytanie zadane 9 stycznia 2016 w HTML i CSS przez Adrian1999 Nałogowiec (34,570 p.)
0 głosów
1 odpowiedź 131 wizyt
pytanie zadane 27 kwietnia 2022 w HTML i CSS przez Sic Dyskutant (8,510 p.)
0 głosów
0 odpowiedzi 187 wizyt
pytanie zadane 22 stycznia 2016 w HTML i CSS przez Decol Użytkownik (560 p.)

92,572 zapytań

141,422 odpowiedzi

319,643 komentarzy

61,959 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...