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. Se pueden utilizar todas las combinaciones de valores que sumen hasta 12.
Clases de cuadrícula: el sistema de cuadrícula Bootstrap contiene cinco 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 utiliza 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 container 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.
Ejemplo 1: este ejemplo usa bootstrap para crear una cuadrícula de columnas de igual ancho en todos los dispositivos y anchos de pantalla.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Grid System</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<style>
.col {
text-align: center;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
column 1
</div>
<div class="col">
column 2
</div>
<div class="col">
column 3
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo usa bootstrap para crear una cuadrícula de columnas sensibles de igual ancho. Cuando el tamaño de la pantalla es inferior a 576 px, la columna se apila automáticamente entre sí.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Grid System</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container"><br> <div class="row"> <div class="col-sm-4" style="background-color:green;"> column 1 </div> <div class="col-sm-4" style="background-color:yellow;"> column 2 </div> <div class="col-sm-4" style="background-color:red;"> column 3 </div> </div> </div> </body> </html>
Producción:
- Pantalla grande ejecutable (escritorio, tabletas):
- Ejecutar en pantalla pequeña (móvil):
Ejemplo 3: este ejemplo usa bootstrap para crear una cuadrícula de columnas sensibles de ancho desigual. Cuando el tamaño de la pantalla es inferior a 576 px, la columna se apila automáticamente entre sí.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Grid System</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container"><br> <div class="row"> <div class="col-sm-4" style="background-color:green;"> column 1 </div> <div class="col-sm-8" style="background-color:yellow;"> column 2 </div> </div> </div> </body> </html>
Producción:
- Pantalla grande ejecutable (escritorio, tabletas):
- Ejecutar en pantalla pequeña (móvil):
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por Dharmendra_Kumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA