Ir al contenido principal

Curso Bootstrap: Sistema de columnas

Bootstrap - Sistema de columnas

En la anterior entrada creamos una página básica con Bootsrap. Pero no aprovechamos nada del potencial que tiene este framework, era un ejemplo de estructura con solamente un texto a mostrar. El objetivo era crear una plantilla preparada para trabajar en ella de una forma más eficiente.

Mi consejo es duplicar siempre esa plantilla, cuando vayamos a probar alguna funcionalidad antes crearemos una copia, así evitamos tener que estar borrando líneas de código anterior y directamente trabajamos en limpio.

En esta entrada vamos a trabajar con el sistema de columnas.

¿Qué es el sistema de columnas?

Bootstrap 3 tiene cuatro rangos de clases para las columnas: xs(móviles), sm (tablets), md (equipos con resoluciones normales), y lg (equipos con grandes resoluciones).

Podemos combinar las clases para crear una vista más dinámica y flexible de nuestra web.

Los rangos de clases son escalables, lo que quiere decir que si queremos que una caja ocupe el 50% del ancho total tanto para dispositivos móviles (xs) como tablets(sm), sólo tendremos que especificar la clase del menor, en este caso xs.

Cada rango de clases está a su vez dividido en doce columnas, por ejemplo si una caja va a ocupar el ancho total en dispositivos móviles le asignaremos la siguiente clase: <div class="col-xs-12"></div>

Si por el contrario va a ocupar la mitad la clase sería: <div class="col-xs-6"></div>

Con la siguiente imagen vamos a entender mejor el funcionamiento:

Bootstrap - Sistema de columnas

La imagen refleja algunas de las posibles variantes del sistema de columnas. Podemos combinar clases, como en la primera y segunda fila, o incluir sólo una clase para todas las resoluciones como en la tercera fila.

¿Cuál es la diferencia?

En la primera fila vemos que hay clases combinadas, las de móvil (xs) y las de equipos con resoluciones normales (md). Si visualizamos estas columnas en un dispositivo móvil o una tablet (recuerda la escalabilidad de las clases) la primera columna ocupará el ancho total(.col-xs-12) mientras que la segunda ocupará la mitad (.col-xs-6). Por el contrario si lo visualizamos en un equipo de sobremesa, tendremos algo similar a la imagen. La primera columna ocupará ocho partes del total del ancho y la segunda las cuatro partes restantes.

Un dato importante que debemos tener en cuenta es la suma total. Si la suma de las columnas sobrepasa de doce, pasarán a estar en dos filas o más.

A continuación podéis copiar el código y probarlo en vuestros equipos.


<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cregarru - Curso Bootstrap: Ejemplo básico</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim y Respond.js IE8 soporta elementos HTML5 y media queries -->
    <!-- ATENCIÓN: Respond.js no funciona si visualizas la página vía file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
        <div class="col-xs-12 col-md-8">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel odio ante. Aliquam mollis elit nec leo lobortis pretium scelerisque 
                vel libero. Donec in augue sapien. Mauris pretium libero ut ante eleifend, eleifend dapibus nibh semper. Aliquam neque leo, maximus 
                eget vehicula sit amet, bibendum non nunc. Sed auctor sem vel fringilla euismod. Pellentesque habitant morbi tristique senectus et netus 
                et malesuada fames ac turpis egestas. Nunc sagittis mauris ut eleifend blandit.
            </p>
        </div>
        <div class="col-xs-6 col-md-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel odio ante. Aliquam mollis elit nec leo lobortis pretium scelerisque 
                vel libero. Donec in augue sapien. Mauris pretium libero ut ante eleifend, eleifend dapibus nibh semper. Aliquam neque leo, maximus 
                eget vehicula sit amet, bibendum non nunc. Sed auctor sem vel fringilla euismod. Pellentesque habitant morbi tristique senectus et netus 
                et malesuada fames ac turpis egestas. Nunc sagittis mauris ut eleifend blandit.
            </p>
        </div>
        <div class="col-xs-6 col-md-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel odio ante. Aliquam mollis elit nec leo lobortis pretium scelerisque 
                vel libero. Donec in augue sapien. Mauris pretium libero ut ante eleifend, eleifend dapibus nibh semper. Aliquam neque leo, maximus 
                eget vehicula sit amet, bibendum non nunc. Sed auctor sem vel fringilla euismod. Pellentesque habitant morbi tristique senectus et netus 
                et malesuada fames ac turpis egestas. Nunc sagittis mauris ut eleifend blandit.
            </p>
        </div>
        <div class="col-xs-6 col-md-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel odio ante. Aliquam mollis elit nec leo lobortis pretium scelerisque 
                vel libero. Donec in augue sapien. Mauris pretium libero ut ante eleifend, eleifend dapibus nibh semper. Aliquam neque leo, maximus 
                eget vehicula sit amet, bibendum non nunc. Sed auctor sem vel fringilla euismod. Pellentesque habitant morbi tristique senectus et netus 
                et malesuada fames ac turpis egestas. Nunc sagittis mauris ut eleifend blandit.
            </p>
        </div>
        <div class="col-xs-6 col-md-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel odio ante. Aliquam mollis elit nec leo lobortis pretium scelerisque 
                vel libero. Donec in augue sapien. Mauris pretium libero ut ante eleifend, eleifend dapibus nibh semper. Aliquam neque leo, maximus 
                eget vehicula sit amet, bibendum non nunc. Sed auctor sem vel fringilla euismod. Pellentesque habitant morbi tristique senectus et netus 
                et malesuada fames ac turpis egestas. Nunc sagittis mauris ut eleifend blandit.
            </p>
        </div>
        <div class="col-xs-6 col-md-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel odio ante. Aliquam mollis elit nec leo lobortis pretium scelerisque 
                vel libero. Donec in augue sapien. Mauris pretium libero ut ante eleifend, eleifend dapibus nibh semper. Aliquam neque leo, maximus 
                eget vehicula sit amet, bibendum non nunc. Sed auctor sem vel fringilla euismod. Pellentesque habitant morbi tristique senectus et netus 
                et malesuada fames ac turpis egestas. Nunc sagittis mauris ut eleifend blandit.
            </p>
        </div>
        <div class="col-xs-6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel odio ante. Aliquam mollis elit nec leo lobortis pretium scelerisque 
                vel libero. Donec in augue sapien. Mauris pretium libero ut ante eleifend, eleifend dapibus nibh semper. Aliquam neque leo, maximus 
                eget vehicula sit amet, bibendum non nunc. Sed auctor sem vel fringilla euismod. Pellentesque habitant morbi tristique senectus et netus 
                et malesuada fames ac turpis egestas. Nunc sagittis mauris ut eleifend blandit.
            </p>
        </div>
        <div class="col-xs-6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel odio ante. Aliquam mollis elit nec leo lobortis pretium scelerisque 
                vel libero. Donec in augue sapien. Mauris pretium libero ut ante eleifend, eleifend dapibus nibh semper. Aliquam neque leo, maximus 
                eget vehicula sit amet, bibendum non nunc. Sed auctor sem vel fringilla euismod. Pellentesque habitant morbi tristique senectus et netus 
                et malesuada fames ac turpis egestas. Nunc sagittis mauris ut eleifend blandit.
            </p>
        </div>
    </div>
    <!-- jQuery (necesario para los plugins de Bootstrap) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Incluye todos los plugins compilados de Bootstrap -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Comentarios

Entradas populares de este blog

Efecto destello CSS3

En estas fechas tan señaladas a todos nos invade el espíritu navideño, y con él las ganas de decorar nuestra casa, nuestra habitación y por qué no, nuestra web. Por este motivo se me ocurrió crear un efecto destello de luz mediante CSS3 e imágenes para dar la calidez necesaria que nuestra web se merece. El efecto es sencillo, consiste en dos imágenes (una de fondo y otra que realizará el efecto) y una animación mediante CSS3. El resultado sería el siguiente: Podemos duplicar cuantas veces queramos la estrella y posicionarla donde mejor nos venga. A continuación os dejo el fragmento de código HTML y CSS para que lo probéis y hagáis las modificaciones que sean necesarias. HTML <div class="efectos"> <img src="directorio/imagen-01.jpg" alt="Navidad" class="background-navidad"> <img src="directorio/imagen-02.jpg" class="destello destello-01"> <img src="directorio/imagen-03.jpg" class=

Mitos sobre el diseño web responsive

Las idea del diseño responsive o adaptable surgió en el 2008 por el consorcio W3C. El planteamiento se basaba en mejorar la experiencia de usuario unificando la correcta visualización de una página web en cualquier dispositivo; ya fuese un teléfono móvil o un equipo de sobremesa. Muchas eran las ventajas que prometía el diseño responsive, pero también surgieron bastantes mitos que frenaron el entusiasmo por dar el salto a la web adaptable. A continuación vamos a comentar cuatro mitos falsos sobre el diseño responsive: Se debe probar la web en todos los dispositivos El diseño web responsive está enfocado a la resolución del dispositivo no a un modelo concreto. Teniendo en cuenta que hay miles de dispositivos con conexión a Internet esta tarea es prácticamente inviable. Imagina tener en tu casa u oficina cientos o miles de dispositivos en los que tienes que realizar pruebas, sería algo caótico. Por el contrario sí que podemos clasificar todos esos modelos mediante su resolución d

Curso Bootstrap: Menú de navegación

Uno de los elementos más importantes de cara a la usabilidad web de nuestros proyectos es el menú de navegación . Ayudará al usuario a explorar las diferentes categorías de las que se compone nuestra web de una manera sencilla y directa. El menú de navegación debe ser claro e intuitivo . Nosotros seguramente conozcamos al dedillo la estructura de nuestra web, pero ese no es el caso del usuario que la visita. Bootstrap nos brinda un maravilloso menú, el cual tiene la habilidad de ser completamente responsive . De esta manera no quedarán excluidos los usuarios que accedan con dispositivos portátiles. Vamos a ver una breve descripción de los tres menús con los que vamos a trabajar: Navbar Static top navbar Fixed navbar Navbar: Es el modelo de menú más básico. Cuenta con los elementos necesarios para poder navegar por nuestra web. Static top navbar: La diferencia con el modelo anterior básicamente es la ubicación. Está pensado para que su ubicación sea la parte supe