Ciao a tutti, sono alle prime armi nel mondo del coding sto provando bootstrap e le sue funzionalità, dai doc di bootstrap mi sono ritrovato a leggere un codice sulla sezione navbar, l'ho copiato su vscode per poi visualizzarlo sul broswer però non mi è chiaro un passaggio in tutto il codice, ho notato se diminuisco la grandezza della finestra del broswer da dove viene visualizzato l'html gli elementi del navbar vengono racchiusi in un button invece di restare estesi in tutto il navbar... vorrei spiegato quale classe di bootstrap determina questo e come è scritta in css per dare questa impostazione... vi allego il codice così potete dargli un'occhiata...
- Autore discussione 0Blackhole0
- Data d'inizio
Ciao, il menù che intendi in gergo si chiama "menù hamburger" (proprio per la forma che solitamente ha), è un impostazione css.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> con questo tag definisci che la pagina deve essere visualizzata 1:1 sul display che stai utilizzando, viene ridimensionata automaticamente adattandosi alla grandezza dello schermo.Nel file CSS trovi le varie regole: (scrivo un esempio)
CSS:
.navbar {
color:red;
}
@media screen and (max-width:2100px){
.navbar {
color:white;
}
}
@media screen and (max-width:1750px){
.navbar {
color:black;
}
}
@media screen and (max-width:991px){
.navbar {
color:green;
}
}Nella prima regola si definisce che la navbar deve essere di colore rosso, la seconda regola definisce che per i dispositivi con uno schermo maggiore o uguale a 2100px la navbar sarà bianca e non rossa (quindi va a sostituire la regola principale), la terza regola definisce che per i dispositivi con uno schermo maggiore o uguale a 1750px la navabar dovrà essere visualizzata di colore nero (di conseguenza questa terza regola sostituisce la prima e la seconda) e cosi via a scala.. puoi creare un numero infinito di variabili, ovviamente per ciò che hai bisogno.
Nell'esempio ho messo una regola semplice come il "color" ma puoi definire qualsiasi regola da sostituire.
Nel tuo script questo definisce la classe del button:
HTML:
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>E questa è la classe che definisce la navbar ristretta con il menù hamburger:
HTML:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
Ultima modifica:
grazie per la spiegazione dettagliata.. ma ancora non ho capito per fare visualizzare l'elemento button a una certa grandezza schermo come lo devo impostare sul file css?
Se non ricordo male bootstrap imposta di default il toggle (menù hamburger) sotto i 992px, per bypassare questa regola, puoi sostituirla con un file css dedicato scrivendone di nuove da zero. Anche se comunque è sconsigliato visto che bootstrap è studiato per riconoscere alla perfezione i dispositivi e di conseguenza è già perfetto così.