Navbar dropdown con Bootstrap: link ai css

[lessico]

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:

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

 

[Max 1]

@lessico
Da regolamento del forum, come tutti noi sei tenuto ad usare il tag

quando posti del codice, oppure la funzione codice dalla barra degli strumenti

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]

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]

Ciao lessico
mi sa che hai dimenticato di includere i 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>

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]

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:

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