Como sugiere el nombre, dimensionar significa ajustar el tamaño de un elemento en relación con su padre con la ayuda de las utilidades de altura y anchura (en px o en %). Las utilidades de ancho y alto se generan a partir del mapa Sass de $sizes en _variables.scss.
Por defecto, el tamaño de Bootstrap incluye soporte para 25%, 50%, 75% y 100%. Puede agregar tamaños específicos si necesita cualquier tamaño que no sea este.
A continuación se muestran algunos ejemplos que explican el tamaño en BootStrap y las clases disponibles:
Ejemplo 1:
<html> <head> <title>GeeksForGeeks</title> <!-- Link Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <!-- This specifies width of 25% --> <div class="w-25 p-3" style="background-color: #eee;"> Width 25% </div> <!-- This specifies width of 50% --> <div class="w-50 p-3" style="background-color: #eee;"> Width 50% </div> <!-- This specifies width of 75% --> <div class="w-75 p-3" style="background-color: #eee;"> Width 75% </div> <!-- This specifies width of 100% --> <div class="w-100 p-3" style="background-color: #eee;"> Width 100% </div> </body> </html>
Producción:
Ejemplo 2:
<html> <head> <title>GeeksForGeeks</title> <!-- Link Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <div style="height: 100px; background-color: rgba(255, 0, 0, 0.1);"> <!-- This specifies height of 25% --> <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0, 0, 255, .1)"> Height 25% </div> <!-- This specifies height of 50% --> <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0, 0, 255, .1)"> Height 50% </div> <!-- This specifies height of 75% --> <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0, 0, 255, .1)"> Height 75% </div> <!-- This specifies height of 100% --> <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0, 0, 255, .1)"> Height 100% </div> </div> </body> </html>
producción:
También podemos ajustar el tamaño de los elementos de entrada en bootstrap mediante el uso de clases como
.entrada-lg
y
.input-sm
para ajustar alturas y
.col-lg*
y
.col-sm*
para ajustar el ancho.
Ejemplo 1:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <!-- Add Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- Add JQuery and Bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Input Sizing</h2> <p> The form below shows input elements with different heights using .input-lg and .input-sm: </p> <form> <div class="form-group"> <label for="inputdefault"> Default input </label> <input class="form-control" id="inputdefault" type="text"> </div> <div class="form-group"> <label for="inputlg"> input-lg </label> <input class="form-control input-lg" id="inputlg" type="text"> </div> <div class="form-group"> <label for="inputsm"> input-sm </label> <input class="form-control input-sm" id="inputsm" type="text"> </div> <div class="form-group"> <label for="sel1">Default select list</label> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </div> <div class="form-group"> <label for="sel2">input-lg</label> <select class="form-control input-lg" id="sel2"> <option>1</option> <option>2</option> <option>3</option> </select> </div> <div class="form-group"> <label for="sel3">input-sm</label> <select class="form-control input-sm" id="sel3"> <option>1</option> <option>2</option> <option>3</option> </select> </div> </form> </div> </body> </html>
Producción:
Ejemplo 2:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <!-- Add Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- Add Bootstrap JS and JQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Column Sizing</h2> <p>The form below shows input elements with different widths using different .col-xs-* classes:</p> <form> <div class="form-group row"> <div class="col-xs-2"> <label for="ex1">col-xs-2</label> <input class="form-control" id="ex1" type="text"> </div> <div class="col-xs-3"> <label for="ex2">col-xs-3</label> <input class="form-control" id="ex2" type="text"> </div> <div class="col-xs-4"> <label for="ex3">col-xs-4</label> <input class="form-control" id="ex3" type="text"> </div> </div> </form> </div> </body> </html>
Producción:
Referencia : https://getbootstrap.com/docs/4.0/utilities/sizing/
Publicación traducida automáticamente
Artículo escrito por harjindersinghs168 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA