¿Cómo acomodo las secciones y el contenido en mi página web con Bootstrap?
Inicio
Empezar a planear nuestra página web podría ser tan fácil o tan complicado como se te ocurra.
Deja de lado el logo, los colores o la tipografía. Antes de llegar a esos temas deberías tener una idea general de cómo esperas que luzca tu página en términos de navegación y acomodo de contenido tanto en su versión para celulares como en su versión de computadoras.
Para que una página se adapte a la pantalla del usuario se puede utilizar tanto CSS (media queries) como Bootstrap. Te mostraremos algunos ejemplos utilizando Bootstrap en su versión 4.
Secciones generales
Independientemente del tipo de página que estés creando hay algunas secciones que suelen estar siempre presentes en todo sitio web.
Header
Siempre al inicio de cada página. Regularmente aquí se encuentra el nombre del sitio, logo y la barra de navegación.
Bloque principal
Sección más importante de cualquier página. Suele contener el contenido principal de la página actual.
Bloques secundarios
En estos bloques se puede ubicar un sistema de navegación alterno, contenido menos importante o incluso mostrar banners para anuncios. Regularmente rodean al bloque principal, es decir, se ubican a los lados o arriba y abajo.
Footer
Siempre ubicado en la parte inferior de la página. En esta sección se suelen ubicar avisos legales o datos de contacto.
Tipos de navegación y cómo crearlos con Bootstrap
Una vez que tienes identificado el contenido que pondrás en cada sección general toca turno al acomodo del sitio.
Una página debe verse bien tanto en celulares como en tabletas y computadoras. Para ello normalmente se utilizan acomodos de información basadas en columnas.
Si utilizas Bootstrap la creación de columnas te será muy sencilla y te permitirá crear estilos como los que veremos a continuación.
1 sola columna
Regularmente se utiliza para la versión móvil de la página. Simplemente es una columna de contenido siempre iniciando con el Header y terminando con el Footer.
Este tipo de navegación es el más sencillo y podrías generarlo incluso sin Bootstrap.
2 columnas
Las páginas en su versión para tabletas normalmente utilizan este estilo pues se muestra muy bien en pantallas “medianas”.
Simplemente se crea una columna para el contenido secundario y otra para el principal. En el código siguiente te mostramos cómo se crearía este arreglo usando Bootstrap.
<!-- header -->
<header>
Header
</header>
<!-- contenido principal y secundario -->
<div class="row">
<!-- col-12 para celulares y col-md-4 para lo demás -->
<div class="col-12 col-md-4">
Bloque Secundario
</div>
<!-- col-12 para celulares y col-md-8 para lo demás -->
<div class="col-12 col-md-8">
Bloque Principal
</div>
</div>
<!-- sección extra -->
<section>
Otro contenido secundario
</section>
<!-- footer -->
<footer>
Footer
</footer>
3 columnas
La navegación con 3 columnas se podría decir que es exclusiva de la versión de escritorio de tu página. Requiere mucho espacio y por ello solo se muestra bien en pantallas grandes.
Cuando una página con 3 columnas se ve en teléfonos se suele convertir a una navegación de 1 sola columna y a veces los bloques secundarios no se muestran.
<!-- header -->
<header>
Header
</header>
<!-- 3 columnas tamaño 3, 6 y 3 -->
<div class="row">
<div class="col-12 col-md-3">
Secundario
</div>
<div class="col-12 col-md-6">
Principal
</div>
<div class="col-12 col-md-3">
Secundario
</div>
</div>
<!-- footer -->
<footer>
Footer
</footer>
Combinación de las anteriores
Claramente dependiendo de tus objetivos y de la información que presentes puedes usar una combinación de las navegaciones anteriores o incluso una completamente nueva.
Fíjate que aunque el acomodo de los bloques de información varía, siempre se respeta el Header arriba y el Footer abajo. También el bloque con la información principal es el que más espacio tiene asignado.
En el siguiente ejemplo creamos la primera opción:
<!-- principal -->
<header>
Header
</header>
<div class="row">
<!-- principal -->
<div class="col-12 col-md-8">
Contenido Principal
</div>
<!-- bloques secundarios -->
<div class="col-12 col-md-4">
<section class=">
Bloque Secundario 1
</section>
<section>
Bloque Secundario 2
</section>
</div>
</div>
<!-- footer -->
<footer>
Footer
</footer>
Conclusión
Puedes utilizar tu propia navegación o puedes basarte en una de las que te hemos presentado. Lo importante es que tu página sea consistente y el usuario se sienta cómodo navegando y consultando tu información.
Te dejo un zip descargable con el código de las navegaciones que vimos para que las puedas tener en tu computadora.