Bootstrap
¿Qué es Bootstrap?
Bootstrap es un framework, es decir, un conjunto de herramientas, librerías,
convenciones y buenas prácticas que encapsulan las tareas repetitivas en módulos
genéricos fácilmente reutilizables. Contiene herramientas y hojas de estilos que nos
permiten centrarnos en los elementos centrales de cada diseño.
Bootstrap fue creado por Twitter y permite crear interfaces web con CSS y JavaScript,
adaptando la interfaz del sitio web al tamaño del dispositivo en que se visualice.
Bootstrap incluye un archivo CSS que se añade en los proyectos para tener una serie
de estilos ya preparados para utilizar. Este tipo de librerías suelen incluir estilos para los
elementos más comunes de una página web, como por ejemplo, botones, navbars, etc.
Además tiene una serie de estilos para crear columnas fácilmente.
Bootstrap es el marco de trabajo HTML, CSS y JavaScript más popular para desarrollar
sitios web receptivos y móviles.
Ventajas de usar Bootstrap
● Fácil de usar: Sólo se necesita agregar las clases de Bootstrap a los
elementos HTML.
● Responsive: Con su sistema de grilla dividida en 12 columnas permite
crear páginas Web adaptables a cualquier dispositivo.
● Personalizable: Se pueden seleccionar para su descarga únicamente los
elementos que necesitemos en nuestro proyecto, o utilizarlo online.
● Gran comunidad: Este framework está muy extendido y si tenemos un
problema podemos encontrar mucha información en Internet. Tanto en
sitios oficiales como en comunidades.
¿Cuáles son las novedades de Bootstrap 5?
Una de las bibliotecas más utilizadas en el desarrollo web es jQuery. Hasta
ahora, Bootstrap ha sido compatible con esta biblioteca, pero ahora, en la
versión 5 dejará de usarlo de forma nativa.
En esta nueva versión de Bootstrap se ha optado por no dar compatibilidad a
los ya casi extintos navegadores web de Microsoft Internet Explorer 9 y 10.
Bootstrap solo será compatible con Microsoft Edge.
Mejoras en formularios.
Mejoras en el excelente sistema de rejilla de Bootstrap 4. se ha añadido un
nuevo breakpoint (xxl).
Bootstrap 5 no ha reinventado toda su estructura. Esto concuerda con la
intención de sus desarrolladores, que pretendían hacer una transición fácil
de la versión 4 a la 5. Los cambios prometen unos procesos de trabajo más
simples y un código más ligero y rápido.
Bootstrap | Instalación
Hay dos maneras de usar Bootstrap:
● Sin conexión: Descargar desde [Link]. En este caso los archivos
deben estar en la misma carpeta del proyecto y ser referenciados en el
<head> del documento HTML con <link>:
<link rel="stylesheet" href="css/[Link]
[Link]">
<script src="js/[Link]"></script>
Como buena práctica, las versiones alfa y beta no se suelen usar en sitios
productivos. Siempre se trabaja con la última versión estable a la fecha.
Bootstrap | Instalación
● Incluir BootstrapCDN (Content Delivery Network) en el <head>. Este
método tiene la ventaja de no necesitar instalación alguna, pero nuestro
sitio va a estar conectado permanentemente con el sitio Web de
Bootstrap, proveyendo los estilos. +info
<link href="[Link]
dist/css/[Link]" rel="stylesheet" integrity="s
ha384-
F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZ
MI3AhiU" crossorigin="anonymous">
¿Qué es un CDN?
Bootstrap | Class Container
Los contenedores sirven para crear una “caja” o “contenedor” dentro de la
que se coloca el contenido de una página web.
Cuando aplicamos a un elemento HTML la clase container, a ese elemento
se le aplica un ancho y un padding determinado y además se centra
horizontalmente en la página web.
Bootstrap proporciona 3 tipos de contenedores diferentes, cada uno con sus
características distintivas. +info
Bootstrap | Class Container
.container: establece un ancho
máximo o max-width para cualquier
tamaño de pantalla o anchos definidos
por los breakpoints responsive. Es
sensible al dispositivo que utilicemos.
Su ancho es determinado por el ancho
de viewport. Es el contenedor más
usado de Bootstrap.
Al modificar el tamaño del viewport, el
ancho máximo de este contenedor se
corresponde con el “punto de corte”
definido.
Bootstrap | Class Container
.container-fluid: establece
un width: 100% del viewport en
todos los breakpoints. Siempre
ocupa el 100% del ancho de la
pantalla.
.container- {breakpoint} es similar
al container-fluid, pero posee un
ancho de 100% solamente hasta el
breakpoint definido. +info
Bootstrap | Class Container (v. 5)
tamaños de pantalla
clases
Bootstrap | Grid
container delimita un ancho máximo de acuerdo al tamaño de la pantalla,
row define un grupo horizontal de columnas y col proporciona hasta 12
contenedores por fila.
BOOTSTRAP | Grid
Debemos comprender la estructura anidada de Bootstrap: la clase container
es la de mayor jerarquía y actúa como un contenedor de filas (rows), que a
su vez contienen a las columnas (col).
BOOTSTRAP | Grid
El código que vemos a continuación genera el container de la diapositiva
anterior.
<div class="container"> <div class="row">
<div class="row"> <!-- 3 columnas dentro de un div -->
<!-- 2 columnas dentro de un div --> <div class="col">
<div class="col"> Fila 2 - Columna 1 de 3
Fila 1 - Columna 1 de 2 </div>
</div> <div class="col">
<div class="col"> Fila 2 - Columna 2 de 3
Fila 1 - Columna 2 de 2 </div>
</div> <div class="col">
</div> Fila 2 - Columna 3 de 3
</div>
</div>
</div>
BOOTSTRAP | Grid
Podemos establecer el ancho de una columna y hacer que las columnas
hermanas tomen una nueva dimensión automáticamente a su alrededor.
Las otras columnas cambiarán de tamaño sin importar el ancho de la
columna central.
Achicando el
viewport
BOOTSTRAP | Grid
El código que vemos a continuación genera el container de la diapositiva
anterior.
<div class="container">
<div class="row">
<div class="row">
<div class="col">
<div class="col">
1 de 3
1 de 3
</div>
</div>
<div class="col-5">
<div class="col-6">
2 de 3 (5 col)
2 de 3 (6 col)
</div>
</div>
<div class="col">
<div class="col">
3 de 3
3 de 3
</div>
</div>
</div>
</div>
</div>
BOOTSTRAP | Layouts
Podemos tener un layout para <div class="container">
cada dispositivo. Si tenemos una <div class="row">
pantalla pequeña podemos <div class="col-sm-6 col-xs-12 bg-success">
<p>Lorem ipsum dolor...</p>
hacer que se muestre con </div>
determinado encolumnado, y <div class="col-sm-6 col-xs-12 bg-warning">
en un dispositivo con pantalla <p>Lorem ipsum dolor...</p>
mayor que se muestre con otro. </div>
De esta manera tendremos </div>
</div>
distintos tipos de maquetados
según el dispositivo, trabajando
desde el estilo, no desde la
estructura HTML.
BOOTSTRAP | Sistema de grillas
El sistema de grillas de Bootstrap permite hasta 12 columnas en la página.
Es posible agrupar las columnas para crear columnas más amplias. Este
sistema es responsivo, por lo tanto, las columnas se reorganizan
automáticamente dependiendo del tamaño de la pantalla. Recordemos que
siempre deben sumar 12. +info
Bootstrap | Sistema de grillas
Se utiliza una grilla de 12 columnas que se puede dividir en 2, 3, 4… 12 partes.
BOOTSTRAP | Grid system
Este ejemplo crea tres columnas <div class="container">
iguales utilizando las clases del <div class="row">
sistema grid predefinidas. Dichas <div class="col-sm">Primer col</div>
columnas serán centradas en la <div class="col-sm">Segunda col</div>
<div class="col-sm">Tercer col</div>
página con el componente </div>
padre .container. Las columnas de </div>
la cuadrícula que no tengan un
width específico se distribuirán
Tres columnas de igual ancho
automáticamente como columnas
de igual ancho. en dispositivos pequeños,
medianos, grandes y extra
grandes
BOOTSTRAP | Columnas receptivas
El ejemplo muestra cómo cuatro columnas de igual ancho, partiendo de una
tablet y escalando a escritorios extra grandes. En pantallas de menos de 768
px de ancho, las columnas se apilan automáticamente una encima de la
otra:
BOOTSTRAP | Clases receptivas
El sistema de cuadrícula Bootstrap tiene seis clases:
● .col- (dispositivos extra pequeños: ancho inferior a 576 px)
● .col-sm- (dispositivos pequeños: ancho igual o superior a 576 px)
● .col-md- (dispositivos medianos: ancho igual o superior a 768 px)
● .col-lg- (dispositivos grandes: ancho igual o superior a 992 px)
● .col-xl- (dispositivos xlarge: ancho igual o superior a 1200 px)
● .col-xxl- (dispositivos xxlarge: igual o superior a 1400 px)
Las clases anteriores se pueden combinar para crear diseños más dinámicos y
flexibles.
Cada clase se escala, por lo que si desea establecer los mismos anchos para sm y md,
sólo necesita especificar sm. +info
BOOTSTRAP | Componentes
Los componentes de Bootstrap permiten acelerar el proceso de diseño. Son
soluciones prediseñadas y personalizables. +info
Navbar: permite crear una barra de navegación o menú. Viene preparado
con el típico icono de hamburger (tres líneas horizontales) que aparece en la
versión móvil. +info
Desktop Mobile
BOOTSTRAP | Componentes
Alerts: son como cajas de texto con cierto tipo de diseño. Se suelen usar para
proporcionar información puntual al usuario. +info
BOOTSTRAP | Componentes
Carousel: Utiliza un sistema de slides para recorrer varios elementos.
Permite contener fotografías que van pasando dentro del mismo espacio. Es
un componente de presentación de diapositivas. +info
BOOTSTRAP | Componentes
Dropdowns: Sirven para que el usuario pueda escoger una opción en un
conjunto de posibilidades. Genera un menú desplegable hacia abajo o hacia
a la derecha que permite incluir vínculos. Con el atributo active se puede
marcar alguna opción del menú. Se pueden alternar para mostrar listas de
enlaces y más. +info
BOOTSTRAP | Componentes
Breadcrumb (o migas de pan): Sirven para mostrar la situación del usuario
dentro de una página. Indica al usuario dónde está y de dónde viene. Se
agregan dentro de la etiqueta semántica <nav>. El atributo active es el que
indica en qué página estamos ubicados. +info
BOOTSTRAP | Componentes
Collapse (accordion): Este elemento añade un botón capaz de ocultar o
mostrar cierto contenido, es decir, crear elementos colapsables. Son
contenidos que se despliegan y su uso es común en la sección “preguntas
frecuentes”. +info
BOOTSTRAP | Componentes
Buttons: Los botones por defecto son elementos inline, pero de ser
necesario un comportamiento similar a inline-block podemos aplicar la
clase btn-block. +info
<button type="button" class="btn btn-primary btn-lg btn-
block">Block level button</button>
BOOTSTRAP | Componentes
Cards: Las cards o tarjetas, sirven para agrupar contenido. Se suelen utilizar
para crear listas de elementos, por ejemplo, artículos de blog, colecciones de
elementos, etc. +info
BOOTSTRAP | Componentes
Forms: Bootstrap aplica estilos a los elementos de tipo formulario para
convertirlos en elementos responsive, mejorar su apariencia y permitirnos
crear diferentes alineaciones. +info
BOOTSTRAP | Componentes
Tables: Boostrap dispone de distintas clases para dar estilo a las tablas, estas
son algunas de ellas: +info
● .table (por defecto)
● .table-hover
● .table-striped
BOOTSTRAP | Componentes
Progress bar (barras de progreso): Otra herramienta que nos presenta la
librería Bootstrap son las barras de progreso. Normalmente se las utiliza para
indicar cuánto se ha avanzado en una actividad. Para crear una barra de
progreso debemos definir un div con la clase "progress" y un div interno al
anterior con la clase "progress-bar".: +info
BOOTSTRAP | Componentes
Ventanas modales: Son ventanas emergentes que se abren cuando el usuario
interactúa con algún elemento. Para funcionar, modal usa los atributos data-
toggle con el valor “modal” y data-target con el id del modal que se crea. Para
cerrar el modal se usa la etiqueta html de data-dismiss=”modal”. Modal es un
contenedor. +info
Otros Frameworks CSS | Materialize CSS
Materialize es un framework CSS que implementa el tema de diseño “Material
Design”. Ofrece componentes material listos para usar, que se pueden integrar
de una manera cómoda en los sitios web, consiguiendo un diseño guiado por las
directrices de aplicaciones y sitios de Google.
El framework es sencillo de usar, relativamente ligero, permite optimización y los
componentes están altamente personalizados en su diseño. Ingresar
Otros Frameworks CSS | Tailwind CSS
Tailwind es un framework CSS que ofrece un enfoque diferente a Bootstrap, tiene
clases y una gran biblioteca que te permitirá acelerar el proceso de diseño de
cualquier sitio web. Estos frameworks ofrecen estilos CSS atómicos, aunque
también permite crear componentes, lo deja más del lado del desarrollador, que
los podrá personalizar a su gusto. Además es muy maleable y se adapta muy bien
a las necesidades del desarrollador. Con el framework puedes hacer builds de
clases CSS totalmente personalizadas, que se parezcan o no a las que se ofrecen
de manera predeterminada. Ingresar
Material extra
Artículos de interés
Página oficial Bootstrap: [Link]
Documentación: [Link]
Ejemplos: [Link]
Utilidades: se aplican estilos para bordes, texto, alineaciones, colores (texto y fondo), sombras,
entre otros. [Link]
Componentes:
[Link]
[Link]
Tutorial W3Schools: [Link]
Themes & Templates:
[Link]
[Link]
Material multimedia
Fundamentos de Bootstrap 5: [Link]
Descargar e instalar Bootstrap: [Link]
Instalación via CDN: [Link]
Bootstrap Grid: [Link]
Curso de fundamentos de Bootstrap: [Link]
Posicionamiento de sitios web en buscadores (SEO)
El posicionamiento en buscadores, optimización en motores de búsqueda o
SEO (del inglés search engine optimization), es un conjunto de acciones
orientadas a mejorar el posicionamiento de un sitio Web en la lista de
resultados de Google, Bing, u otros buscadores de internet.
El SEO trabaja aspectos técnicos como la optimización de la estructura y los
metadatos de una web, pero también se aplica a nivel de contenidos, con el
objetivo de volverlos más útiles y relevantes para los usuarios.
Info útil sobre posicionamiento en la Web:
[Link]
web/
[Link]
Live Server en Visual Studio Code
Visualiza los cambios al desarrollar una
página web en tiempo real con la
extensión Live Server en Visual Studio
Code.
Live Server ejecuta en un explorador el
archivo que se está modificando, este
explorador se actualiza con cada cambio
en el archivo. +info
Link:
[Link]
s?itemName=[Link]
¿Cómo instalar Live Server en VS Code?
[Link]
_EfkV0
