Come creare la barra di navigazione e il pulsante Bootstrap standard per dispositivi mobili
Pubblicato: 2022-02-16
Bootstrap è un framework HTML, CSS e JavaScript. Usandolo, puoi facilmente creare siti Web reattivi per dispositivi mobili. Ti offre molti stili CSS preimpostati per gli elementi web, comprese le barre di navigazione.
In questo tutorial imparerai come creare facilmente una barra di navigazione reattiva Bootstrap di base. Quindi imparerai come utilizzare un pulsante Bootstrap Standard Navbar per dispositivi mobili.
Per poter utilizzare Bootstrap, devi prima installarlo. Ai fini di questo tutorial, puoi installarlo ovunque sul tuo PC locale - non deve essere un server web. Facciamolo assieme.
Passo 1. Scarica Bootstrap
- Procedi su getboostrap.com e fai clic sul pulsante "Download Bootstrap":
- Nella pagina successiva "Guida introduttiva", fai clic su un altro pulsante "Scarica Bootstrap":
- Salva questo file ovunque sul tuo disco rigido:
Passo 2. Installa Bootstrap sul tuo PC locale
- Decomprimi questo file
- Rinominare la cartella risultante in bootstrap
Passaggio 3. Crea un file index.html di base
- Nella tua cartella bootstrap crea un file index.htm l con il seguente codice:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>Trusthub</h1> <div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> <div class="row"> <div class="col-md-3 col-xs-6"> <h3>Innovate</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Sustain</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Lead</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Inspire</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="/js/bootstrap.min.js"></script> </body> </html>Passaggio 4. Crea una barra di navigazione reattiva
- Proprio sotto il body div di apertura, crea un nuovo div con la classe Bootstrap contenitore :
<div class="container"><!-- Start navbar container div -->
- Premi Invio alcune volte per creare spazio e chiudere questo nuovo div:
</div><!-- Finish navbar container div -->
- All'interno del tuo nuovo contenitore div crea il tag di navigazione per la tua nuova barra di navigazione:
<nav class="navbar navbar-default">
- Sulla tastiera, premi il tasto Invio un paio di volte e chiudi il tag:
- All'interno del tag di navigazione , crea un altro contenitore div e inizia a creare il contenuto effettivo della barra di navigazione:
<div class="container">
<div class="navbar-header"><!-- Start navbar-header -->
<a href="#" class="navbar-brand">Trusthub</a>
</div><!-- Finish navbar-header -->
</div>
- Elimina il tag <h1> e il suo contenuto.
- Trova dove si chiude il tuo div navbar-header e subito sotto crea un altro div, senza classi ancora.
- All'interno di questo div, avvia un elenco non ordinato contenente gli elementi effettivi della tua barra di navigazione reattiva:
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
- Salva il tuo file index.html.
- Apri questo file nel tuo browser. Ora dovresti vedere la tua barra di navigazione reattiva. Sei quasi pronto per renderlo la barra di navigazione mobile standard. Prima di farlo, però, miglioriamolo leggermente.
- Torna al tuo file index.html .
- Nel tuo tag nav , cambia l' impostazione predefinita in inverse per ottenere il codice seguente:
<nav class="navbar navbar-inverse">
- Salva il file.
- Torna al tuo sito e aggiorna la pagina. La tua barra di navigazione ora sembra un po' più bella:
Molto bene! La tua barra di navigazione reattiva è ora pronta per consentirti di lavorare ulteriormente su di essa.
Guarda il video qui sotto per scoprire come sostituire la barra di navigazione appena creata con il pulsante del menu Bootstrap standard per gli utenti mobili.