Bootstrap es un marco popular para desarrollar sitios web móviles primero. Este marco tiene una variedad de clases que se pueden usar para crear un sitio web receptivo utilizando un enfoque móvil primero. Este marco tiene un sistema de cuadrícula que nos permite generar cuadrículas en una fila mientras construimos un sitio web. Podemos crear 12 columnas seguidas y combinarlas para producir una columna más amplia.
Para conocer el sistema de grillas de Bootstrap, puede hacer clic aquí . El artículo se centra en la clase de cuadrícula Bootstrap-3 col-xs.
Clases de cuadrícula: el sistema de cuadrícula bootstrap-3 tiene cuatro clases, que se mencionan a continuación:
- col-xs Esta clase se usa para dispositivos con tamaños de pantalla extrapequeños, como teléfonos, cuyo ancho es inferior a 768 px (<768 px).
- col-sm Esta clase se usa para dispositivos con tamaños de pantalla pequeños, como tablas, cuyo ancho es mayor a 768px y menor a 992px (≥768px y <992px).
- col-md: esta clase se usa para dispositivos con pantallas de tamaño medio, como computadoras de escritorio, cuyo ancho es mayor a 992px y menor a 1200px (≥992px y <1200px).
- col-lg: esta clase se usa para dispositivos con pantallas de gran tamaño, como escritorios de pantalla grande, cuyo ancho es más de 1200px (≥1200px).
Componentes de un sistema grid: Algunos de los componentes del sistema grid son:
- contenedor: esta es una clase de Bootstrap que se utiliza para construir un contenedor para encerrar los contenidos del sitio web en un formato de cuadrícula.
- fila: esta es una clase de Bootstrap que nos permite construir una fila en el contenedor para envolver la columna en una fila.
- columna: Esta clase de Bootstrap nos permite construir una columna en una fila, y podemos usarla para crear hasta 12 columnas en una fila o combinarlas para hacer columnas más amplias.
Clase .xs-grid: el sistema de cuadrícula bootstrap-3 proporciona esta clase, lo que nos permite diseñar una interfaz de usuario para dispositivos cuyo tamaño de pantalla es inferior a 768 px.
Sintaxis:
<div class="col-xs-k">Example for xs-grid class. </div>
- col utilizado para crear una columna en la fila
- xs especifica que esta clase se aplica solo para pantallas extra pequeñas
- k denota las columnas utilizadas de 12 columnas de la fila.
Propiedades:
- Esta clase es adecuada para pantallas con un ancho de menos de 768 px ( <768 px ).
- Para usar esta clase, debemos incluir el prefijo “col-xs-” en la clase.
- El ancho del contenedor puede ser ninguno (automático).
- El comportamiento de cuadrícula de esta clase es siempre horizontal.
Ejemplo 1: Usando col-xs-4
El siguiente código demuestra el uso de col-xs-4, que ocupa 1/3 de la pantalla cuando el ancho de la pantalla es inferior a 768 px.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <body> <div> <div class="row" style="font-size: 50px; color: white;"> <div class="col-xs-4" style="background-color: green;"> <!-- use of xs-grid class --> Geek </div> <div class="col-xs-4" style="color: black;"> for </div> <div class="col-xs-4" style="background-color: green;"> Geeks </div> </div> </div> </body> </html>
Producción:
La salida representa la fila dividida en 3 partes usando col-xs-4 con un ancho de pantalla de 702px <768px
Ejemplo 2: Uso de col-xs-6
El siguiente código demuestra el uso de col-xs-6, que ocupa el 50 % de la pantalla cuando el ancho de la pantalla es inferior a 768 px.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <body> <div> <div class="row" style="font-size: 50px; color: white;"> <div class="col-xs-6" style="background-color: green;"> <!-- use of xs-grid class --> Geek </div> <div class="col-xs-6" style="color: black;"> forGeeks </div> </div> </div> </body> </html>
Producción:
La salida representa la fila dividida en 2 partes usando col-xs-6 con un ancho de pantalla de 702px <768px
En bootstrap-4 y bootstrap-5, la clase col-xs se eliminó y se reemplazó con col. Por ejemplo:
- col-xs-5 en Bootstrap-3.
- col-5 en Bootstrap-4 o -5.
Navegador web utilizado:
- Cromo
Referencia: Haga clic aquí para obtener más información sobre Bootstrap.
Publicación traducida automáticamente
Artículo escrito por nitinpatelco20b540 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA