CONTATTACI

Guide per aspiranti programmatori

Lezione 9 / 15

Boostrap Navbar: come funziona e come farne una

La Navbar di Bootstrap è un componente di navigazione che permette di creare un menu di navigazione con un’ interfaccia responsive. Supporta elementi come link, pulsanti, dropdown e form. Può essere personalizzata con le classi di Bootstrap per cambiare l’aspetto e il comportamento. Analizziamone meglio, dunque, gli elementi:

  • Link: Un elemento di navigazione che, quando cliccato, porta l’utente a un’altra pagina o a un’altra sezione della pagina corrente.
  • Pulsanti: Elementi cliccabili usati per triggerare un’azione o un evento.
  • Dropdown: Un menu a discesa che visualizza un elenco di opzioni quando viene cliccato.
  • Form: Un elemento che permette all’utente di inserire dati che verranno inviati al server per l’elaborazione.

 

Bootstrap framework ti consente di impiegare delle classi per cambiare l’aspetto e il comportamento della Navbar.
Ad esempio, la classe “navbar-light” viene usata quando lo sfondo è chiaro (light) e, quindi, il colore del testo sarà scuro, mentre la classe “navbar-fixed-top” può essere usata per fissare la Navbar all’inizio della pagina. Ci sono molte altre classi disponibili in Bootstrap che possono essere impiegate per personalizzare la Navbar, così come bootstrap mette a disposizione dei bootstrap navbar template da utilizzare per una base già pronta all’uso.

Può esserti utile vedere subito un esempio di barra di navigazione con il tag nav.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Esempio di Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Vantaggi e peculiarità</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">Struttura di base</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="#">Le classi di Bootstrap</a>
      </li>
    </ul>
  </div>
</nav>

Inserendo questo codice Html all’interno della sezione body del nostro codice di base, abiliterai una barra di navigazione con tre categorie.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AULAB - Guida a Bootstrap</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">Primi passi con Bootstrap CDN</div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"
    ></script>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Esempio di Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Vantaggi e peculiarità</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">Struttura di base</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">Le classi di Bootstrap</a>
          </li>
        </ul>
      </div>
    </nav>
  </body>
</html>

Se lo esegui, avrai il risultato che segue.

Non ti resta che provare!

 

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.