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

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

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.

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.

0

Zobacz Sublime z paczką do bootstrapa.

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