En este post veremos la diagramación de un sitio Bootstrap para mostrar las increíbles capacidades de este framework de código abierto. En artículos anteriores habíamos instalado un entorno de desarrollo y los complementos necesarios para facilitarnos el trabajo.
Recuerda que como el gestor de contenidos de Linux Adictos no me permite insertar el código de los ejemplos los subí a GitHub. Para descargarlos debes instalar el paquete Git en tu distribución y luego escribir los siguientes comandos:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Deberás ejecutar estos dos comandos en forma periódica para descargar los nuevos archivos.
Analizando el código
Ahora en el explorador de archivos abre ejemplo2.html con VSCodium. (Botón derecho Abrir con) Vemos lo siguiente:
- En la línea 1 le indicamos al navegador el tipo de documento para que sepa cómo representarlo.
- La línea 2 indica el idioma del sitio lo que indica al navegador como representar determinados caracteres y a los motores de búsqueda el idioma del contenido lo que facilita el posicionamiento. En nuestro código está definido como es pero existen variantes regionales como es_ES para español de España o es_AR para español de Argentina.
- A partir de la línea 3 tenemos un contenedor de metadatos ubicados entre los tags <head> y </head>. Los metadatos brindan información sobre el documento. En nuestro ejemplo:
- La línea 4 indica el estándar utilizado para la codificación de caracteres. Tal vez hayas visto en alguna ocasión que en lugar de los caracteres acentuados o símbolos especiales se muestran un signo de pregunta dentro de un rombo. Esto es porque el navegador utiliza una codificación inadecuada. La instrucción de la línea 8 lo evita al declararla de manera explícita.
- En la línea 5 le decimos al navegador cómo debe adaptarse a los diferentes formatos de pantalla.
- El título que establecimos en la línea 6 será mostrado en la barra superior del navegador y en los motores de búsqueda.
- En la línea 7 le indicamos al navegador dónde encontrar los elementos del framework Bootstrap relacionados con el estilo.
- A partir de la línea 10 comienza el contenedor. Body incluye el contenido de la página web y el enlace a los scripts de Bootstrap que le darán interactividad a nuestro sitio.
- La línea 13 indica el fin del documento.
Diagramación de un sitio Bootstrap
Conceptos claves para la diagramación de un sitio Bootstrap
Como dijimos en artículos anteriores, Bootstrap adopta el enfoque mobile first. Cuando se aplica este enfoque el diseño se hace pensando en el dispositivo de tamaño de pantalla más pequeño para luego ir agregando capas que lo adapten a los tamaños que siguen.
Aquí debemos tener en cuenta dos conceptos claves:
- Puntos de interrupción.
- Consulta de medios.
Los puntos de interrupción indican a partir de que ancho de pantalla se modifica el diseño, Las consultas de medios aplican parámetros de estilo en función de determinadas características del navegador y sistema operativo. En otras palabras, a cada punto de quiebre le corresponderá un estilo.
Bootstrap viene con seis puntos de interrupción predefinidos que pueden ser modificados por programadores más avanzados. Los puntos predefinidos son:
- Extrapequeño: No tiene un identificador preestablecido y se aplica a pantallas de menos de 576 pixeles de ancho.
- Pequeño: Se identifica con sm y se utiliza para pantallas a partir de 576 pixeles.
- Mediano: Se identifica con md y se utiliza para pantallas desde 768 pixeles.
- Largo: Identificado como lg se utiliza para pantallas a partir de 992 pixeles.
- Extralargo: Tiene el identificador lg y aplica los estilos a pantallas desde 1200 pixeles.
- Extra extralargo: Marcado con el identificador xxl, se usa para aplicar el diseño a pantallas desde 1400 pixeles.
Estos tamaños no se eligieron en forma casual ya que cada uno de los puntos de interrupción pueden contener contenedores cuyos anchos sean múltiplos de 12. Tampoco son dirigidos a un dispositivo específico, sino que se adaptan a diferentes categorías de dispositivos y tamaños de pantalla.
Dentro de los diferentes tamaños de pantalla encontramos los contenedores. Estos se encargan de albergar, rellenar y alinear el contenido del sitio en un determinado dispositivo o ventana gráfica.
;