Cómo crear navbar, form y modales en Bootstrap

En el mundo del desarrollador, especialmente en la parte front end, existen muchas herramientas y tecnologías que facilitan la vida del desarrollador. Optimizando recursos, tiempos de desarrollo y automatizando las operaciones más habituales.

El framework Bootstrap es uno de ellos. Es una herramienta muy útil para el desarrollador front end, que proporciona una serie de características muy ventajosas para aquellos que escriben código o tienen que diseñar el front end de un sitio web.

¿Qué es Bootstrap?

Bootstrap es un framework de desarrollo web gratuito y de código abierto. Está diseñado para facilitar el proceso de desarrollo de sitios web responsive y mobile-first al proporcionar una colección de bibliotecas para plantillas de diseño. Es una tecnología muy útil para el diseño web e incorpora una serie de scripts JavaScript, HTML y CSS que facilitan la vida del desarrollador web.

También hay plantillas de Bootstrap, al ser un framework de código abierto, la comunidad proporciona una serie de temas específicos según las necesidades del desarrollador. Hay muchos sitios que hacen públicas estas plantillas, que cualquiera puede usar.

En este tutorial de Bootstrap veremos cómo implementar estos tres elementos muy importantes:

• Navbar
• Form
• Modales

Un desafío común al que se enfrentan los desarrolladores web es cómo diseñar menús en dispositivos con pantallas pequeñas. Bootstrap Toggle Navbar puede activar/desactivar un botón de menú en dichos dispositivos. Cuando los usuarios hacen clic en el botón, se muestran las opciones del menú. También hay varios Bootstrap navbar template para que tus componentes en la página web sean originales:

1. Añade el botón Toggle Navbar - dentro de un archivo index.html, añade la clase Bootstrap "navbar-default" al elemento nav:

1. <nav class="navbar navbar-default">
2.         ...
3.     </div>

Luego, dentro del div que contiene la clase "navbar-header" necesitamos agregar el elemento de botón que se activará cuando un usuario visite el sitio web en un dispositivo pequeño. Este botón contendrá atributos que funcionan juntos para decirle a Bootstrap que oculte o muestre el botón según el tamaño de la pantalla del usuario.

1. <div class="navbar-header">
2.    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#codebrainery-toggle-nav" aria-expanded="false">
4.    </button>
5.    <a class="navbar-brand" href="#">Brand</a>
6. </div>

2. Añadimos el Button de la Navabar “Menu Icone” - dentro del elemento button, añadimos cuatro elementos span con la clase "icon-bar" Bootstrap para obtener el aspecto de un icono de menú mobile. La primera span tendrá la clase “sr-only”.

 1. <div class="navbar-header">
 2.   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#codebrainery-toggle-nav" aria-expanded="false">
 3.      <span class="sr-only">Toggle navigation</span>
 4.      <span class="icon-bar"></span>
 5.      <span class="icon-bar"></span>
 6.      <span class="icon-bar"></span>
 7.   </button>
 8.   <a class="navbar-brand" href="#">Brand</a>
 9. </div>  

3. Hacemos que la Navbar se “activable” - Ahora llega la parte interesante. Individuando la ul dentro del elemento nav con las clases "nav", "navbar-nav" y "navbar-right". Encerrando este ul en un div con las clases "collapse" y "navbar-collapse" de Bootstrap. Entonces, solo será necesario añadir el atributo id asignado en el paso anterior.

1. <div class="collapse navbar-collapse" id="codebrainery-toggle-nav">
2    <ul class="nav navbar-nav navbar-right">
3      ...
4.   </ul>
5. </div>

Por último, la Toggle Navbar aparecerá de esta manera:

 1. <nav class="navbar navbar-default">
 2.       <div class="container">
 3.         <div class="navbar-header">
 4.           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" datatarget="#codebrainery-toggle-nav" aria-expanded="false">
 5.             <span class="sr-only">Toggle navigation</span>
 6.             <span class="icon-bar"></span>
 7.             <span class="icon-bar"></span>
 8.             <span class="icon-bar"></span>
 9.           </button>
10.           <a class="navbar-brand" href="#">Aulab.blog</a>
11.         </div>
12.  
13.         <div class="collapse navbar-collapse" id="codebrainery-toggle-nav">
14.           <ul class="nav navbar-nav navbar-right">
15.             <li><a href="#">Sign Up</a></li>
16.             <li><a href="#">Sign In</a></li>
17.             <li class="dropdown">
18.               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Altro<span class="caret"></span></a>
19.               <ul class="dropdown-menu">
20.                 <li><a href="#">Sigue el Curso CSS de Aulab</a></li>
21.                 <li><a href="#">Mira todos los cursos</a></li>
22.                 <li><a href="#">Contáctanos</a></li>
23.               </ul>
24.             </li>
25.           </ul>
26.         </div>
27.  
28.      </div> <!-- close container div -->
29. </nav> <!-- close navbar nav -->

Ahora veamos juntos los modales. Son como alertas emergentes destinadas a centrar la atención del usuario en un formulario de envío, una oferta de nuevos productos o noticias de última hora:

Usaremos Bootstrap para implementar un simple modal que avisa a los visitantes del sitio de Aulab de una nueva guía llamada Guía UI/UX.

1. Crear el modal HTML - Como los dropdown menu y las navbar toggle (vistas antes), los modales se muestran solo cuando se satisface una condición especial y de otro modo oculto. Entre los elementos nav y section en index.html, añade el código para generar un modal:

 1. <div class="modal fade">
 2.   <div class="modal-dialog" role="document">
 3.     <div class="modal-content">
 4.       <div class="modal-header">
 5.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 6.           <span aria-hidden="true">×</span>
 7.         </button>
 8.         <h3 class="modal-title">Alert! Nueva guía!</h3>
 9.       </div>
10.       <div class="modal-body">
11.         <h4>Aulab: guía sobre UI/UX</h4>
12.         <p>Dentro de esta sección encontrarás nuestra nueva guía sobre como proyectar
13.            una interfaz gráfica ad hoc. Consulta todas nuestras guías!</p>
14.       </div>
15.       <div class="modal-footer">
16.         <button type="button" class="btn btn-primary">Provala ora</button>
17.         <button type="button" class="btn btn-secondary" data-dismiss="modal">Forse dopo</button>
18.       </div>
19.     </div>
20.   </div>
21. </div>

2. Activa el modal con JavaScript– Ahora, utilizando el lenguaje JavaScript, mostraremos el modal tan pronto como el documento web esté completamente cargado. En app.js, añade el siguiente código JavaScript:

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

// or

const myModalAlternative = new bootstrap.Modal('#myModal', options)

Después de esto, es necesario añadir un elemento script al head de index.html y establecer el atributo src de app.js:

1. <script src="app.js"></script>

Asegúrate que app.js sea el último script que se carga (después de bootstrap.min.js).

Guarda el proyecto, vuelve a cargar index.html en el browser web para ver el pop-up modal!

Por último, pero no menos importante, la creación del formulario con Bootstrap. Los formularios HTML son una parte integral de las páginas web y las aplicaciones, pero la creación manual de diseños de formularios o el estilo de controles de formularios uno por uno utilizando CSS suele ser muy tedioso. Bootstrap simplifica enormemente el proceso de diseñar y alinear controles de formulario, como etiquetas, campos de input, casillas de verificación, áreas de texto, botones, etc... A través de un conjunto predefinido de clases.

Veamos un común layout de form vertical. Para crearlo, simplemente usa las clases de utilidad de margen predefinidas para agrupar etiquetas, controles de formulario, texto de formulario y mensajes de validación de formulario. Muchas Bootstrap form template precompiladas son muy útiles para hacer que tus páginas web sean originales.

Aquí hay un ejemplo donde los controles de formulario están dispuestos verticalmente con las etiquetas en la parte superior:

 1. <form>
 2.     <div class="mb-3">
 3.         <label class="form-label" for="inputEmail">Email</label>
 4.         <input type="email" class="form-control" id="inputEmail" placeholder="Email">
 5.     </div>
 6.     <div class="mb-3">
 7.         <label class="form-label" for="inputPassword">Password</label>
 8.         <input type="password" class="form-control" id="inputPassword" placeholder="Password">
 9.     </div>
10.     <div class="mb-3">
11.         <div class="form-check">
12.             <input class="form-check-input" type="checkbox" id="checkRemember">
13.             <label class="form-check-label" for="checkRemember">Recuérdame</label>
14.         </div>
15.     </div>
16.     <button type="submit" class="btn btn-primary">Registrate</button>
17. </form>

Bootstrap proporciona una serie de parámetros muy útiles para personalizar el estilo de tu formulario. Por ejemplo, la inserción de mensajes emergentes de validación cuando se completa un cuadro de formulario en tiempo real.

 1. <form>
 2.     <div class="mb-3 position-relative">
 3.         <label class="form-label" for="inputEmail">Email</label>
 4.         <input type="email" class="form-control is-valid" id="inputEmail" placeholder="Email" value="peterparker@example.com" required>
 5.         <div class="valid-tooltip">La mail añadida es válida.</div>
 6.     </div>
 7.     <div class="mb-3 position-relative">
 8.         <label class="form-label" for="inputPassword">Password</label>
 9.         <input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password" required>
10.         <div class="invalid-tooltip">Password ingresada incorrectamente.</div>
11.     </div>
12.     <div class="mb-3">
13.         <div class="form-check">
14.             <input class="form-check-input" type="checkbox" id="checkRemember">
15.             <label class="form-check-label" for="checkRemember">Recuérdame</label>
16.         </div>
17.     </div>
18.     <button type="submit" class="btn btn-primary">Registrate</button>
19. </form>

Bootstrap es una herramienta muy útil para los desarrolladores frontend. Se trata de un framework muy versátil que simplifica la vida de los programadores.