Cómo crear la barra de navegación y el botón Bootstrap estándar para dispositivos móviles
Publicado: 2022-02-16
Bootstrap es un marco HTML, CSS y JavaScript. Utilizándolo, puede crear fácilmente sitios web que respondan primero a dispositivos móviles. Le ofrece muchos estilos CSS preestablecidos para elementos web, incluidas las barras de navegación.
En este tutorial, aprenderá cómo crear fácilmente una barra de navegación sensible básica de Bootstrap. Luego, aprenderá a usar un botón de barra de navegación estándar de Bootstrap para dispositivos móviles.
Para poder usar Bootstrap, primero debe instalarlo. A los efectos de este tutorial, puede instalarlo en cualquier lugar de su PC local; no es necesario que sea un servidor web. Hagámoslo juntos.
Paso 1. Descargar Bootstrap
- Vaya a getboostrap.com y haga clic en el botón "Descargar Bootstrap":
- En la siguiente página "Introducción", haga clic en otro botón "Descargar Bootstrap":
- Guarde este archivo en cualquier lugar de su disco duro:
Paso 2. Instale Bootstrap en su PC local
- Descomprimir este archivo
- Cambie el nombre de la carpeta resultante a bootstrap
Paso 3. Cree un archivo index.html básico
- En su carpeta de arranque , cree un archivo index.htm l con el siguiente código:
<!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>Etapa 4. Crear una barra de navegación receptiva
- Justo debajo del div del cuerpo de apertura, crea un nuevo div con la clase contenedora Bootstrap:
<div class="container"><!-- Start navbar container div -->
- Presiona Enter varias veces para crear algo de espacio y cerrar este nuevo div:
</div><!-- Finish navbar container div -->
- Dentro de su nuevo contenedor div, cree la etiqueta de navegación para su nueva barra de navegación:
<nav class="navbar navbar-default">
- En su teclado, presione la tecla Enter un par de veces y cierre la etiqueta:
- Dentro de la etiqueta de navegación , cree otro contenedor div y comience a crear el contenido real de la barra de navegación:
<div class="container">
<div class="navbar-header"><!-- Start navbar-header -->
<a href="#" class="navbar-brand">Trusthub</a>
</div><!-- Finish navbar-header -->
</div>
- Elimine la etiqueta <h1> y su contenido.
- Encuentre dónde se cierra el div del encabezado de la barra de navegación y, justo debajo, cree otro div, sin clases todavía.
- Dentro de este div, comience una lista desordenada que contenga los elementos reales de su barra de navegación receptiva:
<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>
- Guarde su archivo index.html.
- Abra este archivo en su navegador. Ahora debería ver su barra de navegación receptiva. Está casi listo para convertirla en la barra de navegación móvil estándar. Sin embargo, antes de hacerlo, mejorémoslo un poco.
- Vuelva a su archivo index.html .
- En su etiqueta de navegación , cambie el valor predeterminado a inverso para obtener el siguiente código:
<nav class="navbar navbar-inverse">
- Guarda el archivo.
- Vuelva a su sitio y actualice la página. Su barra de navegación se ve un poco mejor ahora:
¡Bien hecho! Su barra de navegación receptiva ahora está lista para que pueda seguir trabajando en ella.
Mire el video a continuación para aprender cómo reemplazar la barra de navegación que acaba de crear con el botón de menú estándar de Bootstrap para usuarios móviles.