Bulma Forma Horizontal – Barcelona Geeks

Bulma es un framework CSS de código abierto desarrollado por Jeremy Thomas. Este marco se basa en la propiedad CSS Flexbox . Es altamente receptivo, minimizando el uso de consultas de medios para un comportamiento receptivo.

En este artículo veremos la forma horizontal de Bulma . El marco de Bulma permite a sus usuarios crear formularios horizontalmente (los formularios se alinean verticalmente de forma predeterminada). En este tipo de formulario, las etiquetas se alinean junto a los campos de entrada, es decir, horizontalmente. Además, tenga en cuenta que el formulario se transformará a su alineación vertical una vez que el tamaño de la pantalla sea pequeño y, por lo tanto, las etiquetas se coloquen sobre los campos de entrada.

Clase Bulma Forma Horizontal:

is-horizontal: Esta clase se utiliza para crear formularios de forma horizontal.
etiqueta de campo: esta clase se utiliza para agregar las etiquetas al lado del campo de entrada.
field-body: esta clase se usa para agregar los campos de entrada, como seleccionar, área de texto, etc.

Sintaxis:

<div class="field is-horizontal">
  <div class="field-label">
    ....
  </div>
  <div class="field-body">
    ....
  </div>
</div>

Ejemplo: El siguiente ejemplo ilustra la forma horizontal de Bulma .

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>GeeksforGeeks</title>
    <link
      rel="stylesheet"
      href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/>
    <script src=
"https://use.fontawesome.com/releases/v5.15.4/js/all.js">
    </script>
</head>
<body>
    <div class="container">
        <h1 class="title has-text-centered">
          GeeksforGeeks
        </h1>
        <h2 class="subtitle has-text-centered">
          Sign Up Form 
        </h2>
      <div class="field is-horizontal">
        <div class="field-label is-normal">
          <label class="label">Name</label>
        </div>
        <div class="field-body">
          <div class="field">
            <p class="control is-expanded has-icons-left">
              <input class="input" type="text"
                     placeholder="Enter your name">
              <span class="icon is-small is-left">
                <i class="fas fa-user"></i>
              </span>
            </p>
  
          </div>
        </div>
      </div>
        
      <div class="field is-horizontal">
        <div class="field-label is-normal">
            <label class="label">Email</label>
          </div>
        <div class="field-body">
          <div class="field is-expanded">
                <p class="control is-expanded 
                          has-icons-left has-icons-right">
                    <input class="input is-success" 
                           type="email" placeholder="Enter your email">
                    <span class="icon is-small is-left">
                      <i class="fas fa-envelope"></i>
                    </span>
                    <span class="icon is-small is-right">
                      <i class="fas fa-check"></i>
                    </span>
                </p>
  
          </div>
        </div>
      </div>
        
      <div class="field is-horizontal">
        <div class="field-label is-normal">
          <label class="label">Choose Course</label>
        </div>
        <div class="field-body">
          <div class="field is-narrow">
            <div class="control">
              <div class="select is-fullwidth">
                <select>
                  <option>Java</option>
                  <option>C++</option>
                  <option>Python</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
  
      <div class="field is-horizontal">
        <div class="field-label is-normal">
          <label class="label">Anything Else?</label>
        </div>
        <div class="field-body">
            <div class="field">
                <div class="control">
                  <textarea class="textarea"
                            placeholder="Tell us more...">
                  </textarea>
                </div>
            </div>
        </div>
      </div>
        
      <div class="field is-horizontal">
        <div class="field-label">
          <label class="label">Already a Geek?</label>
        </div>
        <div class="field-body">
          <div class="field is-narrow">
            <div class="control">
              <label class="radio">
                <input type="radio" name="member">
                Yes
              </label>
              <label class="radio">
                <input type="radio" name="member">
                No
              </label>
            </div>
          </div>
        </div>
      </div>
        
      <div class="field is-horizontal">
        <div class="field-label is-normal">
          <label class="label"></label>
        </div>
        <div class="field-body">
            <div class="field">
                <div class="control">
                  <label class="checkbox">
                    <input type="checkbox">
                    I agree to the <a href="#">
                    terms and conditions</a>
                  </label>
                </div>
              </div>
        </div>
      </div>
        
      <div class="field is-horizontal">
        <div class="field-label">
          <!-- Left empty for spacing -->
        </div>
        <div class="field-body">
            <div class="field is-grouped">
                <div class="control">
                  <button class="button is-success">
                    Submit
                  </button>
                </div>
                <div class="control">
                  <button class="button is-link is-light">
                    Cancel
                  </button>
                </div>
              </div>
        </div>
      </div>
    </div>
</body>
</html>

Producción:

Bulma Forma horizontal

Enlace de referencia: https://bulma.io/documentation/form/general/#horizontal-form

Publicación traducida automáticamente

Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta