Problem Bootstrap - nie działają niektóre klasy

Odpowiedz Nowy wątek
2019-04-10 12:42
0

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:)

edytowany 2x, ostatnio: Macx, 2019-04-10 12:44

Pozostało 580 znaków

2019-04-12 22:41
1

To działa, button pojawia się poniżej 768px , co wynika ze styli bootstrapa, a po kliknięciu nic się nie rozwija, bo w id="menu" jest pusto.

edytowany 1x, ostatnio: nexus7, 2019-04-12 22:42

Pozostało 580 znaków

2019-04-13 23:12
0

podczas tworzenia w Bootstrapie rozwijanego menu (zwykłe ćwiczenia), nie działa rozwinięcie togglera

Tak, jak napisał wyżej @nexus7 – dodaj cokolwiek jako zawartość elementu #menu, i będzie widać rozwijanie.

uzywając Notepada++, w pliku .html klasy data-toogle oraz data-target jakby nie są obsługiwane, Notepad++ oznacza je jako zwykły tekst

data-toogle oraz data-target to są atrybuty elementów HTML, nie klasy. Są to tzw. custom data attributes, wprowadzone w specyfikacji HTML5. Nie znam Notepad++, ale ale być może nie obsługuje on jeszcze domyślnie kolorowania takich atrybutów.

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'.

Może być tak samo, jak napisałem wyżej – Notepad++ nie obsługuje zapewne jeszcze kolorowania atrybutów integrity oraz crossorigin.

edytowany 1x, ostatnio: Silv, 2019-04-13 23:13

Pozostało 580 znaków

2019-04-14 10:35
0

Zobacz Sublime z paczką do bootstrapa.


Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0