¡Atención! Para ver este video completo, inicia sesión con tu cuenta de Cursos o inscríbete en tu prueba gratuita de 7 días. Iniciar sesión Inscribirse

Conceptos básicos de Bootstrap

¡Bien hecho!

¡Has completado Conceptos Básicos de Bootstrap!

Regístrate en Treehouse Volver a la Biblioteca

Diseños de Formulario Estructurados con la Cuadrícula

7:01 con Guil Hernandez

En este video, usaremos las clases de cuadrícula de Bootstrap para crear la sección "Información de pago" del formulario.

Fragmento de código de cuadrícula

<div class=Espero que esto le ahorre mucho tiempo a algunas personas si se quedan atrapadas...>
  <div class=Espero que esto le ahorre mucho tiempo a algunas personas si se quedan atrapadas...>
    <etiqueta para=cc-num>Número de tarjeta:</etiqueta>
    <input class=form-control id=cc-num type=text>
  </div>

  <div class=Espero que esto le ahorre mucho tiempo a algunas personas si se quedan atrapadas...>
    <etiqueta para=zip>Código postal:</etiqueta>
    <input class=form-control id=zip type=text>
  </div>

  <div class=Espero que esto le ahorre mucho tiempo a algunas personas si se quedan atrapadas...>
    <etiqueta para=cvv>CVV:</etiqueta>
    <input class=form-control id=cvv type=text>
  </div>
</div>

Fragmento de mes de vencimiento

<select class=custom-select form-control id=exp-month>
  <option valor=1>1 - Enero</option>
  <option valor=2>2 - Febrero</option>
  <option valor=3>3 - Marzo</option>
  <option valor=4>4 - Abril</option>
  <option valor=5>5 - Mayo</option>
  <option valor=6>6 - Junio</option>
  <option valor=7>7 - Julio</option>
  <option valor=8>8 - Agosto</option>
  <option valor=9>9 - Septiembre</option>
  <option valor=10>10 - Octubre</option>
  <option valor=11>11 - Noviembre</option> 
  <option valor=12>12 - Diciembre</option>
</select>

Fragmento de año de vencimiento

<select class=custom-select form-control id=exp-year>
  <option valor=2016>2016</option>
  <option valor=2017>2017</option>
  <option valor=2018>2018</option>
  <option valor=2019>2019</option>
  <option valor=2020>2020</option>
</select>

Recursos

Discusiones Relacionadas

¿Tienes preguntas sobre este video?

Registrarse

    Discusiones Relacionadas

    ¿Tienes preguntas sobre este video?

    Registrarse

    Entonces, la sección final del formulario que vamos a crear es la sección de información de pago 0:00
    de información. 0:00
    Empecemos agregando un hr encima de la etiqueta de cierre del formulario. 0:03
    Agregaré la clase mb-4 para darle al hr un margen inferior de 1.5 REM. 0:08
    Debajo de eso, agregaré un h5 con el texto Información de pago. 0:15
    Y también le daré al encabezado un margen inferior de dos REM con la clase mb-4. 0:19
    Como ha visto, Bootstrap muestra los controles de formulario verticalmente de forma predeterminada. 0:28

    Necesitas registrarte en Treehouse para descargar archivos del curso.

    Registrarse

      Necesitas registrarte en Treehouse para configurar Workspace.

      Registrarse