viernes, 29 de agosto de 2014

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>

0 comentarios:

Publicar un comentario