EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Bootstrap descargar instalar
            Cómo descargar e instalar Bootstrap 4
            05/12/2019
            texto tipografia Bootstrap
            Texto, tipografía y colores en Bootstrap 4
            05/12/2019

            Sistema de columnas y contenedores o rejillas de Bootstrap 4

            bootstrap columnas rejillas

            Tabla de contenidos

            • 1. Contenedores o rejillas de Bootstrap
            • 2. Consideraciones a tener en cuenta para trabajar con rejillas
            • 4. Ocultación de contenido

            Bootstrap permite diseñar las páginas mediante un sistema de columnas o rejillas que nos ayudan en la disposición del contenido y su adaptación a los diferentes dispositivos. Este sistema, creado con flexbox, consiste en dividir la pantalla en filas, donde cada fila puede dividirse en 12 columnas o espacios (también permite diseños de más columnas, pero como base se tiene en cuenta una división estándar de 12 columnas). De esta forma podemos, por ejemplo, crear un diseño con dos columnas, una que ocupe 5 espacios y otra que ocupe 7 espacios, tal y como se muestra a continuación:

              <div class="container">
                 <div class="row">
                  <div class="col-5">Contenedor de 5 columnnas</div>
                  <div class="col-7">Contenedor de 7 columnna</div>
                </div>
              </div>

            1. Contenedores o rejillas de Bootstrap

            El sistema de contenedores o rejillas de Bootstrap se basa en contenedores flexibles que se escalan dependiendo del tamaño del dispositivo. Para ajustar los contenedores o rejillas disponemos de diferentes clases:

            .container: el contenido aparece centrado y con un ancho fijo.

            <div class="container">
                 ...
            </div>

            .container-fluid: el contenido ocupa todo el ancho disponible (100%).

            <div class="container-fluid">
              ...
            </div>

            Por lo tanto, lo primero que necesitamos para comenzar es definir un contenedor principal con la clase .container o .container-fluid que recoja nuestra página: filas y columnas.

            Dentro de este container vamos a crear filas “row” y dentro de ellas, las columnas “col”. A continuación creamos un contenedor y una fila que contiene tres columnas:

            <div class="container">
              <div class="row">
                <div class="col">
                  Primera de tres columnas
                </div>
                <div class="col">
                  Segunda de tres columnas
                </div>
                <div class="col">
                  Tercera de tres columnas
                </div>
              </div>
            </div>

            También podríamos hacerlo usando las clases col-xx, donde xx es el tamaño de la columna (como máximo 12 columnas en una fila):

            <div class="container">
              <div class="row">
                <div class="col-4">
                  Primera de tres columnas
                </div>
                <div class="col-4">
                  Segunda de tres columnas
                </div>
                <div class="col-4">
                  Tercera de tres columnas
                </div>
              </div>
            </div>


            Ejemplo

            default

            Al utilizar el sistema de rejillas tenemos que tener en cuenta que Bootstrap incluye un margen interior fijo con un valor predefinido. Además, también incluye otros estilos predefinidos en otros selectores como los párrafos que tienen un margen en la parte de abajo. Todos estos estilos se pueden modificar.

            2. Consideraciones a tener en cuenta para trabajar con rejillas

            Funcionamiento de las rejillas utilizando las clases de tipo col-xx:

            • Cada fila se puede dividir hasta un máximo de 12 columnas. Sin embargo, utilizando la clase col (sin valor) se pueden incluir todas las columnas que uno quiera.
            • Si el tamaño total de las columnas de una fila excede de 12, el sobrante se colocará en la siguiente fila.
            • El tamaño de las columnas se especificará con clases CSS que Bootstrap define para cada tamaño de pantalla, por ejemplo .col-md-XX donde XX es el tamaño de la columna, que podrá tomar valores entre 1 y 12.
            • Al especificar la clase del tamaño de las columnas (ejemplo: .col-md-XX) no sólo se aplica al tamaño definido, sino que para los superiores también. Para los valores inferiores cada columna ocupará el ancho total del contenedor padre.

            En la siguiente tabla se recoge un resumen del funcionamiento de la rejilla de Bootstrap dependiendo del tamaño de la pantalla:

            PantallaExtra small
            <576px
            Small
            ≥576px
            Medium
            ≥768px
            Large
            ≥992px
            Extra large
            ≥1200px
            Ancho máximoNone (auto)540px720px960px1140px
            Prefijo.col-.col-sm-.col-md-.col-lg-.col-xl-


            Ejemplo

            default

            Como es de esperar, también podemos especificar qué ancho definir para cada tipo de resolución indicando en cada elemento diferentes clases. Por ejemplo podemos especificar distintos tamaños de columna para xl, md y sm, tal y como se muestra en el siguiente ejemplo:

             <div class="row">
                <div class="col-xl-6 col-md-5 col-sm-4">prueba</div>
                <div class="col-xl-6 col-md-5 col-sm-4">prueba</div>
              </div>


            Ejemplo

            default


            Ejemplo

            default

            Ver más ejemplos sistema de columnas

            4. Ocultación de contenido

            Bootstrap ofrece la clase .d-none para ocultar contenido para todas las pantallas o .d-{sm,md,lg,xl}-none si queremos que se oculte en alguna resolución en concreto.

            Para mostrar sólo los elementos en una resolución concreta se deberá especificar la clase .d-XX-block. Por ejemplo, con la clase .d-md-block se ocultaría el contenedor en todas las resoluciones menos en la intermedia.

            Tamaño pantallaClase
            Oculto en todas.d-none
            Oculto en xs.d-none .d-sm-block
            Oculto en sm.d-sm-none .d-md-block
            Oculto en md.d-md-none .d-lg-block
            Oculto en lg.d-lg-none .d-xl-block
            Oculto en xl.d-xl-none
            Visible en todas.d-block
            Visible en xs.d-block .d-sm-none
            Visible en sm.d-none .d-sm-block .d-md-none
            Visible en md.d-none .d-md-block .d-lg-none
            Visible en lg.d-none .d-lg-block .d-xl-none
            Visible en xl.d-none .d-xl-block


            Ejemplo

            0


            Ver ejemplos de ocultación de contenido

            Comprueba tu aprendizaje

            ¿Con qué clase indicamos que el contenido aparezca centrado y con un ancho fijo?

            ¡Bien! ¡Has fallado!

            ¿Qué clase se utiliza para crear una fila en Bootstrap?

            ¡Bien! ¡Has fallado!

            ¿Qué clase indicaremos si queremos que el contenido esté oculto para todas las pantallas?

            ¡Bien! ¡Has fallado!

            Compartir

            UD7. Plantillas y frameworks de diseño

            • 1. Frameworks de diseño web
            • 2. Cómo descargar e instalar Bootstrap
            • 3. Sistema de columnas y contenedores Bootstrap
            • 4. Texto, tipografía y colores en Bootstrap
            • 5. Tablas en Bootstrap
            • 6. Imágenes en Bootstrap
            • 7. Botones en Bootstrap
            • 8. Componentes de Bootstrap
            • 9. Plantillas y temas gratis para Bootstrap
            • 10. Referencias y recursos

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results