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=

Placeholder y su uso en HTML5 y CSS3

¿Qué es Placeholder? Placeholder es un texto descriptivo que incluimos dentro de la etiqueta <input> , cuando introduzcamos un valor se sustituirá automáticamente. Sintaxis HTML Su sintaxis es de lo más simple, dentro de la etiqueta <input> añadimos el atributo placeholder incluyendo el texto descriptivo. <input type="text" name="example" placeholder="Ejemplo de Placeholder"> Debajo podemos ver un ejemplo del código anterior. Soporte en navegadores A continuación podemos ver una lista con el soporte en los principales navegadores :   Chrome 4+   Internet Explorer 10+   Firefox 4+   Safari 5+   Opera 11.5+ Sintaxis CSS Mediante CSS podemos dar estilo al atributo Placeholder. Hay que tener en cuenta que la sintaxis no está estandarizada, por lo que en un futuro puede que cambie. ::-webkit-input-placeholder { color: #2c3e50; } ::-moz-placeholder { /* Firefox 19+ */ color:

Curso HTML 5: Introducción

¿Qué es HTML5? HTML son las siglas de HyperText Markup Language (lenguaje de marcas de hipertexto). Este nombre hace referencia al estándar de código y estructura básica con la que vamos a trabajar. El número 5 hace referencia a la quinta versión de este estándar, que trae consigo novedades y mejoras frente a sus predecesores. Una de las mejoras más significativas son las nuevas etiquetas que aportan un significado semántico , y por lo tanto tendrán un valor añadido en cuanto al posicionamiento web . Hay que tener presente que aún está en una fase experimental. Navegadores obsoletos como IE7 no van a poder interpretar correctamente muchas de las nuevas funcionalidades. En la siguiente imagen podemos observar las diferencias entre HTML5 y HTML4/XHTML : De un vistazo podemos percatarnos como con HTML5 obtenemos una estructura más limpia y estandarizada, mediante que con HTML4/XHTML debíamos aplicarles identificadores o clases a todas las cajas y careciamos de un signifi