Navbar dropdown con Bootstrap: link ai css

lessico

Utente Attivo
20 Mar 2018
25
0
1
71
Buon pomeriggio;


sto creando un prototipo della nuova versione del sito e ho provato a implementare una navbar con menù a discesa realizzata mediante Bootstrap. Ho creato lo script utilizzando l’esempio di navbar pubblicato sul sito della versione 4 di Bootstrap (https://getbootstrap.com/docs/4.0/components/navbar/) e aggiungendo i seguenti link ai css:
HTML:
    <!-- Bootstrap CSS -->

  <link href="css/bootstrap.css" rel="stylesheet" media="screen">

  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

  <link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">

  <link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
La barra in effetti compare, ma i menù a discesa non funzionano.
Qualcuno può darmi qualche suggerimento?

lessico
 
Ultima modifica di un moderatore:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.364
338
83
@lessico
Da regolamento del forum, come tutti noi sei tenuto ad usare il tag
code.gif
quando posti del codice, oppure la funzione codice dalla barra degli strumenti
box inserisci 2.png.JPG

Inoltre ti prego di leggere attentamente il regolamento generale del forum e quello di sezione dove posti
Grazie
Per questa volta te lo sistemo io ma mi raccomando per il futuro

Sposto in CMS
 

lessico

Utente Attivo
20 Mar 2018
25
0
1
71
Chiedo scusa, mi atterrò senz'altro per il futuro marcando il codice.
Inoltre (a causa della mia ignoranza, evidentemente) non avevo realizzato che Bootstrap fosse da considerare come un CMS.
Grazie.
 

mr.x

Utente Attivo
9 Apr 2016
252
25
28
Ciao lessico
mi sa che hai dimenticato di includere i js

Codice:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Inoltre controlla i nomi dei css perchè hai incluso due volte lo stesso (quelli .min sono "uguali" agli altri con stesso nome ma minimizzati, ovvero vengono rimossi commenti, spazi superflui e a capo per ridurne la dimensione, sostanzialmente contengono le stesse regole).
 

lessico

Utente Attivo
20 Mar 2018
25
0
1
71
Buona sera Mr. X,

la tua risposta è stata risolutiva e ho già cominciato a imparare qualcosa. Come avrai intuito, non so nulla di Bootstrap, anche se ho una certa conoscenza di HTML e css.

Rispondo ai tuoi suggerimenti:

La tua ipotesi sul mancato link alla libreria js mi è sembrata molto fondata, dato che anche nel manuale di Gianluca Troiani (Guida completa ai CSS) avevo letto che i menù dropdown hanno bisogno di javascript per funzionare.

In realtà il link alla libreria scaricata col download di Bootstrap era stato aggiunto. Però, nel frattempo, ho trovato in rete un altro script simile che funzionava. Sono andato a guardare il collegamento alla libreria js e, prima della chiusura del body, ho trovato questo:

Codice:
<!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Evidentemente le librerie installate non funzionano, e il browser ricorre a quelle in rete. Aggiungendo questi collegamenti anche il mio primo script fa il suo dovere.

Per quel che riguarda i file .css di Bootstrap, ignoravano che i .min fossero una copia opzionale minimizzata. Ho provato a eliminare gli altri (che sono comunque illeggibili) e la pagina funziona lo stesso.

Ti ringrazio moltissimo.

lessico
 
Discussioni simili
Autore Titolo Forum Risposte Data
L [HTML] Navbar a tutta larghezza Content Management System (CMS) 2
F [HTML] Navbar interferisce con codice per effetto parallax HTML e CSS 2
G Modificare navbar in base allo scroll jQuery 6
L navbar scorrevole HTML e CSS 1
D problema navbar: le scritte si allineano 4 volte su 5 HTML e CSS 6
S Gestire scelta dropdown con dati da Mysql PHP 2
S spostare il pulsante menu dropdown HTML e CSS 8
Alex_70 Visualizzare anteprima foto in dropdown PHP 2
F Dropdown menu con tabella PHP 33
felino [HTML] Font Awesome icon all'interno di una dropdown HTML e CSS 3
G [Javascript] Transition in OnClick Dropdown Menu Javascript 5
L [HTML] Menu di 4 livello "dropdown menu" HTML e CSS 6
F Slide down/up dropdown Bootstrap jQuery 0
L [HTML] bootstrap problema menu dropdown in mobile. HTML e CSS 3
F errore select option dropdown list jQuery 15
J Bootstrap dropdown menu non funziona con jquery-1.8.2??? jQuery 5
A Problema Menu dropdown orizzonate HTML e CSS 1
C Login DropDown WordPress 0
L menu dropdown orizzontale su 3 livelli. Evidenziare la voce generale HTML e CSS 0
andre9004 Dropdown menu con .hover() jQuery 2
L Selezione da database con DropDown Menu e visualizzazione PHP 10
C Multi DropDown... Funzionamento PHP 3
C Roundec Corner Select ( Dropdown menu) HTML e CSS 1
D Menu con immagine a stile DropDown jQuery 0
W [CSS] Menù dropdown aggiungere un SUB-Menu HTML e CSS 0
D dropdown panel con ajax e aspnet 3.5 ASP.NET 6
A Sottoquery con group by per mese MySQL 0
R Aggiornare record mysql con Ajax, jQuery e php Ajax 2
A Quale NVR con ingressi bnc ? IP Cam e Videosorveglianza 1
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 0
T Film interattivo con linguaggi web Programmazione 7
A pulsante di update campo mysql con javascript Javascript 2
R Tutto su utf-8 ma ancora problemi con i caratteri speciali in mysql MySQL 1
Barierta Testo a comparsa con passaggio del mouse Javascript 13
M Estrarre valore con SELECT COUNT PHP 0
G VBA OpenForm con WhereCondition + LIKE su campi differenti MS Access 5
sara3 Offresi articolista con esperienza Offerte e Richieste di Lavoro e/o Collaborazione 0
L Problema RAM con Tomcat 8 Apache 0
S connesso, internet non disponibile ( con extebder tp-link850) Reti LAN e Wireless 0
L Menù con switch case C/C++ 1
Cosina Upload multiplo con invio allegati per email PHP 0
Cosina Upload multiplo con archiviazione in cartella PHP 16
B ciclare file xml con PHP PHP 1
napuleone problema con sort e asort PHP 4
F Group By con Alias condizionale MySQL 1
R [C#] Scrivere un post in grassetto con Selenium su FB Mobile .NET Framework 0
T cms con visualizzazione mind map Content Management System (CMS) 0
D Landing page con Wp Content Management System (CMS) 0
Z problemi con foreach insert into PHP 10

Discussioni simili