Cómo crear varias columnas receptivas con Bootstrap 3
Publicado: 2022-02-16
¿Le gustaría mejorar la capacidad de respuesta de su sitio web con Bootstrap? El aspecto más importante de Bootstrap es su primer sistema de cuadrícula móvil de 12 columnas. Esto es lo que usa para crear un diseño receptivo.
En este video tutorial, creará un sitio web básico usando Bootstrap y aprenderá a usar el sistema de cuadrícula de Bootstrap para crear un diseño receptivo con varias columnas.
Antes de ver el tutorial
Antes de que pueda seguir el video tutorial a continuación y aprender a crear sus propias columnas receptivas, necesitará:
- Comprensión básica de lo que es Bootstrap
- Comprensión básica de lo que es el sistema de cuadrícula Bootstrap
- Descarga Bootstrap a tu disco duro
- Cree un archivo básico de Bootstrap index.html para construir sobre
¿Qué es Bootstrap?
- Bootstrap es un marco para desarrolladores de HTML, CSS y JavaScript que trabajan en la capacidad de respuesta del sitio web.
- Consiste en un estilo CSS receptivo ya preconstruido para columnas, listas, navegación, formularios web y muchos otros elementos web.
Comprender el sistema de cuadrícula Bootstrap
- El sistema de cuadrícula Bootstrap clasifica los tamaños de pantalla en cuatro tipos: extra pequeño, pequeño, mediano y grande.
- El Extrapequeño es para teléfonos móviles. El Pequeño es para tabletas, como I-Pad. El Medium es para monitores de escritorio. Y el Grande es solo para monitores de escritorio más grandes.
- Para ayudarlo a ajustar la capacidad de respuesta para estos cuatro tipos de pantallas, Bootstrap divide el ancho de los dispositivos de visualización web en el sistema de cuadrícula de 12 columnas.
- Cada uno de esos cuatro tipos de Bootstrap Grid se vuelve receptivo solo si le asigna su propia clase CSS designada.
- Por ejemplo, para hacer que un div responda a dispositivos muy pequeños, el div debe tener su propia clase Bootstrap .col-xs-<number_of_columns_to_take>, como <div class="col-xs-6">.
Descargando Bootstrap
- Vaya a getboostrap.com y haga clic en el botón "Descargar Bootstrap":
- Verá la página "Cómo empezar". Haga clic en el botón "Descargar Bootstrap":
- Guarde este archivo en el disco duro de su computadora, en cualquier lugar que desee. No es necesario guardarlo en un servidor web.
- Descomprima este archivo y cambie el nombre de la carpeta extraída a "bootstrap".
Preparándose para su página básica de Bootstrap index.html
Paso 1. Cree su archivo index.html de Bootstrap
- Vuelva a la página "Cómo empezar" (http://getbootstrap.com/getting-started/#download) y haga clic en el enlace "Plantilla básica" en la barra lateral derecha:
- Verá el código "Plantilla básica". Haga clic en el botón "Copiar" para copiar el código:
- Pegue el código de la "Plantilla básica" en su editor de texto y guárdelo como index.html en la misma carpeta, donde guardó la carpeta "bootstrap". Ahora se convertirá en la página principal de su sitio Bootstrap.
- Abra el index.html recién creado y eche un vistazo a su sitio web básico de Bootstrap:
- Abra el archivo index.html en su editor de texto y entre las etiquetas de apertura <body> y <h1> agregue <div class="container"> (1). Cierre este nuevo div después de la etiqueta de cierre </h1> (2) y guarde el archivo:
- Compruebe la parte delantera de la página y observe cómo "¡Hola mundo!" ya no está pegado al borde de la página y ahora se ha movido ligeramente hacia la derecha, para que se vea un poco más ordenado. La clase de "contenedor" de Bootstrap que asignó a este div ha agregado un margen a este texto:
- Vuelva a su archivo index.html. Entre las etiquetas <h1> y </h1> reemplace "Hello World!" a "Trusthub". Guarde el archivo y verifique el front-end de su sitio.
Paso 2. Agregue algo de contenido y una barra lateral
- Vuelva a su archivo index.html y, debajo del código <h1>Trustub</h1>, copie y pegue el siguiente código:
<div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> </div>- Vuelve a la interfaz de tu sitio. Actualizarlo. Ahora debería ver su contenido y la barra lateral "Nuestro equipo", sin el diseño de respuesta en columnas todavía:
- Vuelve al sitio web getbootstrap.com y en el menú superior haz clic en el botón "CSS":
- En la barra lateral, haga clic en el botón "Sistema de cuadrícula":
- Desplácese hacia abajo en la página hasta la sección "Opciones de cuadrícula" (1) y tome nota del sistema de cuadrícula de 12 columnas de Bootstrap con sus cuatro tipos de tamaños de pantalla, su ancho y sus prefijos de clase CSS designados (2):
- No se preocupe si las opciones del sistema de cuadrícula de Bootstrap aún no tienen sentido para usted. Todo se juntará para ti en un segundo cuando comiences a jugar con ellos en tu sitio.
- Abra su archivo index.html una vez más y debajo de <div class="row">, para su <div> existente, ingrese la clase "col-md-9". Su nuevo div ahora debería verse como "div class="col-md-9">:
- Ahora ve a tu div, ubicado justo encima del encabezado <h2> "Out Team" y dale la clase CSS de cuadrícula Bootstrap "col-md-3". Guarda el archivo:
- Vuelva a su sitio para ver este cambio en acción. Presione la tecla F5 en su teclado para actualizar su sitio web. Ahora verá que su área de contenido y la barra lateral están sentadas una al lado de la otra.
- Su div de contenido ahora está ocupando 9 de las 12 columnas disponibles en su cuadrícula Bootstrap (75% del ancho total de la pantalla del escritorio). Y su barra lateral toma 3 de su cuadrícula Bootstrap 12 columnas (25% del ancho total de la pantalla del escritorio):
¡Brillante! Ahora está todo listo para seguir el video tutorial a continuación. Empecemos.
¡Felicidades! Acabas de aprender a crear un diseño de página web receptivo con varias columnas usando Bootstrap. ¿Quieres saber más sobre Bootstrap? En caso afirmativo, visite nuestro canal OSTraining de YouTube y vea los "Tutoriales de Bootstrap Framework".