En Parte 1 de esta serie, configuramos un proyecto HTML 5 básico usando Netbeans como nuestro IDE, y también presentamos algunos elementos que se han agregado en esta nueva especificación del lenguaje.
En pocas palabras, puedes pensar en jQuery como una biblioteca de Javascript multinavegador y multiplataforma que puede simplificar en gran medida la creación de scripts del lado del cliente en páginas HTML. Por otro lado, Bootstrap se puede describir como un marco completo que integra herramientas HTML, CSS y Javascript para crear páginas web adaptables y compatibles con dispositivos móviles.
En este artículo, le presentaremos jQuery y Bootstrap , dos utilidades invaluables para escribir HTML 5 código más fácilmente. Ambos jQuery y Bootstrap están licenciados bajo las licencias MIT y Apache 2.0, que son compatibles con la GPL y, por lo tanto, son software libre.
Tenga en cuenta que los conceptos básicos de HTML, CSS y Javascript no se tratan en ningún artículo de esta serie. Si cree que necesita ponerse al día con estos temas antes de continuar, le recomiendo el tutorial de HTML 5 en W3Schools.
Incorporando jQuery y Bootstrap a nuestro proyecto
Para descargar jQuery, vaya al sitio web del proyecto en http://jquery.com y haga clic en el botón que muestra el aviso de la última versión estable.
Iremos con esta segunda opción en esta guía. NO haga clic en el enlace de descarga todavía. Notará que puede descargar un .min.js comprimido o un .js sin comprimir versión de jQuery.
El primero está diseñado especialmente para sitios web y ayuda a reducir el tiempo de carga de las páginas (y, por lo tanto, Google clasificará mejor su sitio), mientras que el segundo está dirigido principalmente a programadores con fines de desarrollo.
En aras de la brevedad y la facilidad de uso, descargaremos el archivo comprimido (también conocido como minificado ) versión a los scripts carpeta dentro de la estructura de nuestro sitio.
$ cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/ $ wget https://code.jquery.com/jquery-3.6.0.min.js
Ahora es el momento de agregar Bootstrap a nuestro proyecto. Vaya a http://getbootstrap.com y haga clic en Descargar Bootstrap. En la página siguiente, haga clic en la opción resaltada como se indica a continuación para descargar los componentes minificados, listos para usar, en un archivo zip:
Cuando se complete la descarga, ve a tus Descargas carpeta, descomprima el archivo y copie los archivos resaltados en los directorios indicados dentro de su proyecto:
# cd ~/Downloads # unzip -a bootstrap-5.1.3-dist.zip # cd bootstrap-5.1.3-dist/
Ahora copie los archivos CSS y JS a las carpetas respectivas en la estructura del proyecto.
# cp css/bootstrap.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles # cp js/bootstrap.min.js /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts
Si ahora expande la estructura de su sitio en Netbeans, debería verse de la siguiente manera:
Agregar referencias
Seguro que se ve bien, pero aún no le hemos dicho a nuestro index.html file para usar cualquiera de esos archivos. En aras de la simplicidad, primero reemplazaremos el contenido de ese archivo con un archivo html barebones:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery and Bootstrap</title> </head> <body> <!-- // Your code will appear here. --> </body> </html>
Luego, simplemente arrastre y suelte cada archivo desde la sección del navegador del proyecto hasta el código, dentro de </head> etiquetas, como se puede ver en el siguiente screencast. Asegúrese de que la referencia a jQuery aparezca antes de la referencia a Bootstrap porque esta última depende de la primera:
Eso es todo:ha agregado las referencias tanto a jQuery como a Bootstrap, y ahora puede comenzar a escribir código.
Escribir su primer código de respuesta
Ahora agreguemos una barra de navegación y colóquela en la parte superior de nuestra página. Siéntase libre de incluir 4-5 enlaces con texto ficticio y no lo enlace a ningún documento por el momento; simplemente inserte el siguiente fragmento de código dentro del cuerpo del documento.
No olvide pasar algún tiempo familiarizándose con la función de autocompletado en Netbeans, que le mostrará las clases que Bootstrap pone a su disposición cuando comience a escribir.
En el corazón del fragmento de código a continuación se encuentra el contenedor de Bootstrap. class, que se utiliza para colocar contenido dentro de un contenedor horizontal que cambiará de tamaño automáticamente según el tamaño de la pantalla donde se esté visualizando. No menos importante es la clase container-fluid, que garantizará que el contenido dentro ocupe todo el ancho de la pantalla.
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
Otra característica distintiva de Bootstrap es que elimina la necesidad de tablas en código HTML. En su lugar, utiliza un sistema de cuadrícula para diseñar el contenido y hace que se vea correctamente tanto en dispositivos grandes como pequeños (desde teléfonos hasta pantallas grandes de computadoras de escritorio o portátiles).
En el sistema de cuadrícula de Bootstrap, el diseño de la pantalla se divide en 12 columnas:
Una configuración típica consiste en usar las 12 columnas diseño dividido en 3 grupos de 4 columnas cada uno, de la siguiente manera:
Para indicar este hecho en el código, y para que se muestre de esa manera a partir de dispositivos de tamaño mediano (como computadoras portátiles) y superiores, agregue el siguiente código debajo del </nav> de cierre etiqueta:
...
</nav>
<div class="row">
<div class="col-md-4">This is the text in GROUP 1</div>
<div class="col-md-4">This is the text in GROUP 2</div>
<div class="col-md-4">This is the text in GROUP 3</div>
</div>
</div> <!--Closing tag of the container class -->
Probablemente habrá notado que las clases de columna en la cuadrícula de Bootstrap indican el diseño de inicio para un tamaño de dispositivo específico y superior, como md en este ejemplo significa medio (que también cubre lg o dispositivos grandes).
Para dispositivos más pequeños (sm y xs ), el contenido divs se apilan y aparecen uno encima del siguiente.
En el siguiente screencast, puede ver cómo debería verse su página ahora. Tenga en cuenta que puede cambiar el tamaño de la ventana de su navegador para simular diferentes tamaños de pantalla después de iniciar el proyecto usando el botón Ejecutar proyecto como aprendimos en Parte 1 .
Resumen
¡Felicitaciones! Ya debe haber escrito una página receptiva simple, pero funcional. No olvide consultar el sitio web de Bootstrap para familiarizarse con la funcionalidad casi ilimitada de este marco.
Como siempre, en caso de que tenga alguna pregunta o comentario, no dude en ponerse en contacto con nosotros mediante el siguiente formulario.