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="destello destell…

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:NavbarStatic top navbarFixed navbarNavbar: 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 superior de la página sin márgenes ni …

Curso Bootstrap: Ejemplo básico

En la anterior entrada, aprendimos qué es Bootsrap y entendimos su estructura de archivos y directorios. Una vez tenemos claros todos los conceptos básicos, el siguiente paso es crear nuestro primer proyecto. De esta manera reforzaremos de una manera más eficiente todo lo que aprendimos con anterioridad.
La estructura básica de un archivo HTML doy por hecho que ya sabrás como funciona. De lo contrario no te preocupes, puedes aprender que es HTML y como funciona en el siguiente enlace.
Para crear nuestro primer proyecto, abrimos una nueva página en blanco en nuestro editor de texto preferido, ya sea Sublime Text, Bluefish o incluso un Bloc de notas. Acto seguido copiaremos el siguiente código que se muestra justo debajo.
<!DOCTYPE html><htmllang="es"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1">…