Sistema de cuadrícula de Bootstrap: el sistema de cuadrícula de Bootstrap es útil para diseñar la aplicación o el sitio web receptivo en el que la columna se reorganizará según el tamaño de la pantalla. Permite hasta 12 columnas en la página. Puede usar cada uno de ellos individualmente o fusionarlos para obtener columnas más anchas. Se pueden utilizar todas las combinaciones de valores que sumen hasta 12. Da la mejor experiencia a todos los dispositivos. Con la ayuda del sistema de cuadrícula de arranque, podemos diseñar y personalizar el ancho de la pantalla para un ancho de pantalla de tamaño pequeño, un ancho de pantalla de tamaño mediano y un ancho de pantalla de gran tamaño. Algunas de las clases proporcionadas por el sistema de cuadrícula Bootstrap son la clase de cuadrícula xs para extra pequeño, la clase de cuadrícula sm para pequeño, la clase de cuadrícula md para mediano y la clase de cuadrícula lg para grande.
Clases de cuadrícula: el sistema de cuadrícula Bootstrap contiene 5 clases que se enumeran a continuación:
- .col: se usa para dispositivos de pantalla extra pequeña (ancho de pantalla inferior a 576 px).
- .col-sm: Se utiliza para dispositivos de pantalla pequeña (ancho de pantalla mayor o igual a 576px).
- .col-md: Se utiliza para dispositivos de tamaño medio de pantalla (ancho de pantalla mayor o igual a 768px).
- .col-lg: Se utiliza para dispositivos de gran tamaño de pantalla (ancho de pantalla mayor o igual a 992px).
- .col-xl: Se usa para dispositivos de tamaño de pantalla grande (ancho de pantalla igual o mayor a 1200px).
Componentes del sistema de rejilla:
- Contenedores: Bootstrap requiere un elemento contenedor para envolver el contenido del sitio en un sistema de cuadrícula. La palabra contenedor se usa para contener los elementos de fila y los elementos de fila que contienen los elementos de columna.
- Filas: las filas deben colocarse dentro del contenedor o contenedor de fluidos para una alineación y relleno adecuados. Las filas se utilizan para crear grupos horizontales de columnas.
- Columnas: las columnas de la cuadrícula se crean especificando el número de doce columnas disponibles que desea abarcar. Por ejemplo, tres columnas iguales usarían tres col-lg-4.
Clase .md-grid: es una clase proporcionada por el sistema de cuadrícula de Bootstrap que ayudará a diseñar la interfaz de sitios web o aplicaciones para una pantalla de dispositivo de tamaño pequeño cuyo ancho de pantalla sea igual a 992px o cerca de 992px.
Sintaxis:
<div class="col-md-x">Content</div>
- col : se utiliza para dividir la fila en columnas.
- md : esta clase solo se aplica a dispositivos con un ancho de pantalla medio.
- x : hay un total de 12 columnas de cuadrícula y el contenedor de la clase ‘col-md-x’ tendrá x columnas de cuadrícula.
Propiedades:
- Para usar esta clase, debemos agregar » .col-md- » como prefijo en la clase.
- Esta clase se usa para desarrollar un front-end receptivo para una pantalla de dispositivo pequeño cuyo ancho es igual a 992px o mayor a 992px.
- Hay un máximo de 12 columnas de cuadrícula en la página, pero podemos personalizar la pantalla fusionando estas columnas.
- El ancho del contenedor para esta clase puede ser de 970px aprox.
Ejemplo 1: En este ejemplo, ‘col-mid-6’ denota el 50 % del ancho total de la página para un dispositivo de pantalla de tamaño mediano porque adquirirá 6 columnas de cuadrícula de 12 columnas de cuadrícula.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" /> <!--Bootstrap Icons CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" /> </head> <body> <!-- Row is class used for displaying partition of columns in a row --> <div class="row"> <!-- First partition of 50% width --> <div class="col-md-6" style="background-color: yellow"> <h1>Welcome To ,</h1> </div> <!-- Second partition of 50% width --> <div class="col-md-6" style="background-color: greenyellow"> <h1>GeeksforGeeks</h1> </div> </div> </body> </html>
Producción:
página de salida que muestra el 50% del ancho adquirido con la ayuda de ‘col-md-6″.
Ejemplo 2: En este ejemplo, el «col-mid-3» denota el 25% del ancho total de la página porque adquirirá 3 columnas de cuadrícula de 12 columnas de cuadrícula. y «col-mid-9» denota el 75% del ancho total de la página porque adquirirá 9 columnas de cuadrícula de 12 columnas de cuadrícula para dispositivos de pantalla de tamaño mediano.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Bootstrap CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" /> <!--Bootstrap Icons CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" /> </head> <body> <!-- Row is class used for displaying partition of columns in a row --> <div class="row"> <!-- First partition of 50% width --> <div class="col-md-3" style= "background-color: yellow"> <h1>Welcome To,</h1> </div> <!-- Second partition of 50% width --> <div class="col-md-9" style= "background-color: greenyellow"> <h1>GeeksforGeeks</h1> </div> </div> </body> </html>
Producción:
página de salida que muestra 25%, 75% de ancho adquirido con la ayuda de ‘col-md-3″, col-md-6 respectivamente.
Publicación traducida automáticamente
Artículo escrito por rishabhknit2002 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA