El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Dreamweaver CC 2017 esencial

Creación de formularios de Bootstrap

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Para finalizar el tema relacionado con Bootstrap, vamos a añadir un vídeo sobre los elementos de formulario dentro de este framework, ya que es uno de los puntos fuertes que tiene al crear controles muy cómodos para ser usados en teléfonos y tablets.

Transcripción

Uno de los puntos fuertes que tiene Boostrap es el trabajo con formularios; porque están optimizados para que sean muy usables dentro de dispositivos móviles. Vamos a utilizarlos; dentro de la página form.html yo tengo un formulario. Este formulario tiene un montón de contenidos dentro. Voy a eliminarlos. Con el botón derecho Eliminar; aunque mantengo ese formulario y voy a guardarlo como ".form_bt". Voy a guardar; también, los archivos CSS y voy a ponerlo en la vista En vivo. Y voy a irme a Insertar y dentro de Insertar voy a buscar las opciones que tengo de Formulario; por ejemplo, los "Input-grups". Voy hacer clic sobre él; aunque, en realidad podría haber seleccionado entre algunas de las opciones que tiene. Esto me lo ha añadido donde no debía. Voy a Deshacer; voy a seleccionar, en vez de donde tenía, voy a seleccionar en el formulario. Dentro de este formulario, para poder hacer algo con él; voy a moverme de nuevo al Código fuente y voy a añadirle una etiqueta "P". En realidad sería más exacto añadirle un "div"; no pasa nada. Y, ahora, sobre él si que voy a poder añadir estos elementos de formulario que como decía; por ejemplo, voy a poder añadir "Input-groups". puedo pulsar y me añade por defecto los casos más típicos de formulario. Aunque también, puedo seleccionar sobre distintas opciones; osea, si quiero crear para tamaños grandes, para tamaños pequeños, con checkbox, etc., etc. En principio voy añadir uno básico que es lo que había hecho previamente y lo voy a poner con Anidar ¿Y qué es lo que ha generado? Bueno; pues; básicamente ha generado una serie de campos que son interesantes, en el sentido de que se puede ver que, seleccionándolos, podemos ir viendo las clases que tienen asociadas y lo que tienen que hacer; por ejemplo, todos los input van a ser ".form-control", van a llevar la clase ".form-control", y esa clase ".form-control" le añade ese pequeño degradado cuando lo seleccionas que queda tan bonito. Por otro lado, se puede ver que hay algunos que tienen la etiqueta "span" delante y otros que tienen la etiqueta de "span" detrás. Esto ya es una cuestión de gustos. A mí por ejemplo me gusta más ponerlo adelante, pues sustituyo, lo muevo y así lo tengo colocado delante. En realidad, estos son todos inputs que sirven un poco para ejemplificar cosas que puedo hacer con esos campos. yo este; por ejemplo, no lo quiero para nada, lo voy a eliminar. Podemos ver cómo van quedando; pues; eso bastante bien. Puedo añadir más elementos. Entonces, puedo, después de esta selección, puedo volver, otra vez; hacer clic y en este caso pues; por ejemplo, hacer que me los ponga de los pequeños; simplemente, para ver cómo quedan. Pulso Después y aquí vemos, me ha añadido de nuevo, solo que estos tienen clases diferentes a las que tenían los elementos anteriores. Se puede ver que, aparte de Input-group, voy a seleccionar uno de ellos; además, está explicándome que es un ".input-group" pero de tipo pequeño "sm". Moviéndome entre los diferentes tamaños, puedo ver cómo va reaccionando y viéndolo en el navegador; también, iré viendo cómo funciona. Como digo, lo que tiene de interesante todo esto es que cuando lo veamos dentro del dispositivo móvil, veremos que el aspecto es el típico de un formulario de aplicación móvil con lo cual es muy cómodo crear formularios y muy fácil gracias a todo ello. En el fondo, no estamos añadiendo ningún código extraño; lo único que estamos haciendo es añadir "inputs" y "span" en vez de "labels". Pero es la única diferencia y; también, lo que tiene de bueno es que puedo seguir añadiendo las mismas formas de validar y los mismos elementos de formulario que utilizaba con los formularios html, no estorba una cosa para la otra.

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.