Bienvenidos sean a este post, hoy aplicaremos bootstrap a nuestra aplicacion notas.
Bootstrap es un framework de tipo primero-movil y este consistira de HTML5, css y Javascript proveyendo un conjunto comprensivo de clase mundial, y componentes de diseño web responsivo, este incluye codigo para adaptar caracteristicas modernas en navegadores viejos, un sistema de cuadricula de 12 columnas responsivo, y una larga lista de componentes (algunos usando Javascript) para mejorar la construccion de aplicaciones web y sitios web, pero basta de chachara y vamos a implementarlo en nuestra aplicacion.
Antes de comenzar vamos a necesitar a nuestra aplicacion notas, en caso de no tenerlo de nuestros posts anteriores les dejo un link para descargar el ultimo que trabajamos:
Descarguen el archivo y extraigan el contenido en la pc de destino, una vez realizado podemos continuar con nuestro post y para ello debemos ejecutar primero el siguiente comando dentro del directorio raiz de nuestra aplicacion:
$ npm install bootstrap@4.5.x --saveEste se encarga de instalar el frontend de bootstrap pero necesitaremos un par de modulos mas y para ello debemos ejecutar primero este comando:
$ npm install jquery@3.7.x --saveEste instalara el modulo de jQuery para ejecutar lo necesario en bootstrap, luego debemos ejecutar el siguiente comando:
$ npm install popper.js@1.16.x --saveSi bien este modulo ya fue deshechado por otro para poder utilizar correctamente bootstrap necesitaremos de este, con esto realizado podemos comenzar a modificar nuestra aplicacion y para ello iremos al archivo layout.hbs en el directorio views y modificaremos el codigo de la siguiente manera:
views/layout.hbs
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device=width, initial-scale=1,
shrink-to-fit=no">
<link rel='stylesheet'
href='/assets/vendor/bootstrap/css/bootstrap.css' >
<link rel='stylesheet'
href='/assets/stylesheets/style.css' />
</head>
<body>
{{> header }}
{{{body}}}
<script
src="/assets/vendor/jquery/jquery.min.js"></script>
<script
src="/assets/vendor/popper.js/popper.min.js"></scrpt>
<script
src="/assets/vendor/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>Aqui les resalte lo que agregamos en el archivo, en el primer tramo simplemente agregamos dos tags de meta para el charset y luego para como se mostrara la pagina mediante el viewport, lo siguiente son dos link para cargar archivos css, en el primer caso es para los estilos de bootstrap y el segundo para los estilos de nuestra pagina, la siguiente modificacion son tres archivos de script para cargar las funciones que utilizaremos, primero cargaremos a jQuery, luego lo referente a popper y por ultimo a bootstrap, si observan en todos los casos usamos al directorio assets, el cual no existe y no lo crearemos sino que lo redireccionaremos y para ello debemos ir al archivo app.mjs y en la seccion donde le indicamos los directorios a usar le agregaremos el siguiente segmento de codigo:
app.use('/assets/vendor/bootstrap', express.static(
path.join(__dirname, 'node_modules', 'bootstrap','dist')));
app.use('/assets/vendor/jquery', express.static(
path.join(__dirname, 'node_modules', 'jquery', 'dist')));
app.use('/assets/vendor/popper.js', express.static(
path.join(__dirname, 'node_modules', 'popper.js', 'dist', 'umd')));Aqui enrutamos los directorios que mencionamos en el archivo anterior para generar la ruta que sera realmente, en este caso son los tres modulos que instalamos al comienzo, ahora solo nos resta una ultima modificacion, y para ello debemos crear un nuevo directorio dentro de public con el nombre de assets y luego moveremos todos los directorios de public (y su contenido) al nuevo directorio assets, si tienen linux pueden hacerlo de la siguiente manera:
$ mv public/images/ public/javascripts/ public/stylesheets/ public/assets/Esto hara toda la tareas por nosotros, con esto realizado solo nos resta probarlo para ver como trabaja ahora, lo ejecutan con el siguiente comando:
$ npm startCon nuestro servidor iniciado solo nos resta conectarnos desde distintos dispositivos para ver como trabaja, a continuacion les dejo una imagen de como se ve ahora
Si lo comparan con lo compartido en el post anterior pueden ver que hubo una mejora a la hora de trabajar con ella en un dispositivo movil sin necesidad de hacer muchos cambios, si lo prueban en un pc veran que no hubo ningun cambio y sigue trabajando de la misma forma, antes de finalizar les dejo un archivo con todo los archivos necesarios de la aplicacion asi como los codigos modificados en este post:
En resumen, hoy hemos visto a bootstrap de twitter, un poco de teoria, asi como tambien aplicarlo en nuestra aplicacion de una manera muy sencilla, y gracias a esto pudimos adaptarla de mejor forma en nuestro dispositivo movil, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 