La longitud y el ancho de la imagen de Cuadrícula cuadrada se pueden especificar mediante el método tradicional de CSS que se puede incorporar fácilmente en nuestro código HTML con una etiqueta de estilo o usando una etiqueta de enlace. Cuando se trata de Bootstrap, proporciona una forma mucho más fácil y efectiva de realizar la misma tarea con menos esfuerzo. Para especificar la longitud y el ancho de la imagen de cuadrícula cuadrada en Bootstrap, necesita el concepto básico del sistema de cuadrícula Bootstrap .
Hay cinco clases en Bootstrap que cambian la longitud y el ancho con ese concepto básico, puede aumentar o disminuir fácilmente la longitud de cualquier imagen que esté dentro de la columna de la cuadrícula.
- .columna-
- .col-sm-
- .col-md-
- .col-lg-
- .col-xl-
Ejemplo 1: aquí verá tres imágenes con el mismo ancho de cuadrícula, pero si la pantalla es más pequeña, la tercera cuadrícula cambiará de fila y se volverá más ancha que las otras dos.
Ejemplo:
<!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">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190710120839/download14.png" />
</div>
<div class="col">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190710121155/03.png">
</div>
<div class="col">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190710121314/images2.png">
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Aquí verá tres anchos diferentes de una cuadrícula que contiene imágenes.
Ejemplo:
<!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: 5px solid black;
}
div {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<br>
<center>
<div class="row">
<div class="col-sm-3">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190710120839/download14.png" />
</div>
<div class="col-sm-6">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190710123529/GeeksforGeeksLogoHeader1.png">
</div>
<div class="col-sm-3">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190710121314/images2.png">
</div>
</div>
</center>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Choco_Chips y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA