El sistema de cuadrícula en Bootstrap lo ayuda a alinear el texto uno al lado del otro y utiliza una serie de contenedores, filas y columnas. El sistema de cuadrícula en Bootstrap usa ems y rems para definir la mayoría de los tamaños, mientras que los px se usan para los puntos de interrupción de la cuadrícula y los anchos de los contenedores. Bootstrap Grid System permite hasta 12 columnas en la página. Puede usar cada uno de ellos individualmente o fusionarlos para obtener columnas más anchas. Puede usar todas las combinaciones de valores que suman hasta 12. Puede usar 12 columnas cada una de ancho 1, o usar 4 columnas cada una de ancho 3 o cualquier otra combinación.
Hay principalmente cinco clases en el sistema de cuadrícula que se enumeran a continuación:
- .col- Extra pequeño ( < 576 px )
- .col-sm- Pequeño ( >= 576 px )
- .col-md- Medio ( >= 768 px )
- .col-lg- Grande ( >= 992 px )
- .col-xl- Extra grande ( >= 1200 px )
Bootstrap proporciona 12 columnas por fila que están disponibles en la clase Column. Por lo tanto, puede controlar el ancho de la columna especificando números en .col-*, donde * significa el ancho de la columna en números.
col-md-4: esta clase se usa cuando el tamaño del dispositivo es medio o superior a 768 px y el ancho máximo del contenedor es de 720 px y desea que el ancho sea igual a 4 columnas.
col-xs-1: esta clase se usa cuando el tamaño del dispositivo es extra pequeño (móvil) y cuando desea que el ancho sea igual a 1 columna.
col-lg-2: esta clase se usa cuando el tamaño del dispositivo es grande o superior a 992 px y el ancho máximo del contenedor es de 960 px y cuando desea un tamaño igual a 2 columnas.
Ejemplo:
<!DOCTYPE html> <html> <head> <title> Bootstrap numbers col-md-4, col-xs-1, col-lg-2 </title> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <!-- jQuery library --> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <!-- Latest compiled JavaScript --> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> </head> <body> <div class="container"> <div class=" row bg-primary col-lg-2">col-lg-2</div> <div class=" row bg-success col-xs-1">col-xs-1</div> <div class=" row bg-danger col-md-4">col-md-4</div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Yash_Maheshwari y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA