Navbar dropdown con Bootstrap: link ai css

Discussione in 'Content Management System (CMS)' iniziata da lessico, 20 Marzo 2018.

  1. lessico

    lessico Nuovo Utente

    Registrato:
    20 Marzo 2018
    Messaggi:
    25
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    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: 20 Marzo 2018
  2. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.908
    Mi Piace Ricevuti:
    290
    Punteggio:
    83
    Sesso:
    Maschio
    @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
     
  3. lessico

    lessico Nuovo Utente

    Registrato:
    20 Marzo 2018
    Messaggi:
    25
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    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.
     
  4. mr.x

    mr.x Utente Attivo

    Registrato:
    9 Aprile 2016
    Messaggi:
    221
    Mi Piace Ricevuti:
    22
    Punteggio:
    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).
     
  5. lessico

    lessico Nuovo Utente

    Registrato:
    20 Marzo 2018
    Messaggi:
    25
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Maschio
    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
     
Sto caricando...

Condividi questa Pagina