Arranque | Dimensionando un elemento con ejemplos

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:

Tamaño de entrada

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *